:root { font-family: system-ui, sans-serif; color: #243442; background: #fff; }
* { box-sizing: border-box; } body { margin: 0; display: flex; min-height: 100vh; }
a { color: #235977; } button, input, select, textarea { font: inherit; padding: .4rem; max-width: 100%; }
button { cursor: pointer; } label { display: inline-block; margin-right: .5rem; }
.left-navigation { width: 12rem; flex-shrink: 0; background: #f1f4f5; padding: 1rem; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; overflow: auto; }
.school-identity { font-weight: 650; text-decoration: none; }.left-navigation nav { display: grid; gap: .6rem; }.left-navigation nav a { padding: .3rem; }
.account-controls { margin-top: auto; display: grid; gap: .7rem; overflow-wrap: anywhere; }.account-controls small { font-size: .75rem; }
.workspace-column { flex: 1; min-width: 0; } main { padding: 1rem 1.5rem; max-width: 90rem; }
.global-search { padding: .8rem 1.5rem; position: relative; border-bottom: 1px solid #d8e0e5; background: #fff; }.global-search label { display: block; font-size: .85rem; margin-bottom: .3rem; }.global-search input { width: min(40rem, 75%); }.global-search kbd { font-size: .75rem; color: #566; }
#quick-results { position: absolute; left: 1.5rem; right: 1.5rem; background: #fff; z-index: 20; border: 1px solid #aab8c4; box-shadow: 0 .4rem .8rem #1232; max-height: 65vh; overflow-y: auto; padding: .8rem; }
[role=listbox] { list-style: none; padding: 0; }[role=listbox] li { padding: .45rem; }[role=listbox] small { display: block; color: #566; }[aria-selected=true] { background: #dcecf6; outline: 2px solid #235977; }
.errorlist { color: #a02121; }a[aria-busy=true] { opacity: .6; } .context-region { width: 16rem; padding: 1rem; border-left: 1px solid #ddd; }
@media(max-width: 700px) { body { display: block; }.left-navigation { position: static; width: auto; height: auto; padding: .7rem; gap: .6rem; }.left-navigation nav { display: flex; flex-wrap: wrap; gap: .4rem; }.account-controls { display: flex; align-items: center; flex-wrap: wrap; }.account-controls small { display: none; }main { padding: .8rem; }.context-region { width: auto; } }

.nav-destination { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.nav-search { border: 0; background: transparent; color: #456; padding: .2rem .4rem; }
[data-search-option] { display: block; padding: .25rem; }
.resource-assignment { border-bottom: 1px solid #d8e0e5; padding: .6rem 0; }
.resource-assignment form { display: inline-block; margin: .3rem; }
.resource-assignment input[type=number] { width: 6rem; }
.resource-assignment .save-status { font-size: .85rem; margin-left: .4rem; }
.resource-assignment .save-error { color: #a02121; }

/* Shared screen foundation. The legacy baseline above remains the print baseline;
   calendar.css and teaching.css retain ownership of specialized output sizing. */
:root {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-small: .8125rem;
  --text-label: .875rem;
  --text-body: .9375rem;
  --text-subheading: 1rem;
  --text-heading: 1.125rem;
  --text-title: 1.5rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --color-ink: #243442;
  --color-muted: #536471;
  --color-link: #235977;
  --color-border: #cbd5dc;
  --color-surface: #f3f6f8;
  --color-active: #e0edf5;
  --border-default: 1px solid var(--color-border);
  --radius-control: .25rem;
  --nav-width: 12.5rem;
  --workspace-width: 90rem;
  --search-width: 44rem;
  --control-height: 2.25rem;
  --page-gutter: var(--space-6);
}
@media screen {
  body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; font-weight: var(--weight-normal); }
  h1, h2, h3 { line-height: 1.3; font-weight: var(--weight-semibold); }
  h1 { font-size: var(--text-title); margin: 0 0 var(--space-4); }
  h2 { font-size: var(--text-heading); margin: var(--space-6) 0 var(--space-3); }
  h3 { font-size: var(--text-subheading); margin: var(--space-4) 0 var(--space-2); }
  p { margin: 0 0 var(--space-3); }
  small { font-size: var(--text-small); }
  label { font-size: var(--text-label); font-weight: var(--weight-medium); }
  th { font-size: var(--text-small); font-weight: var(--weight-semibold); }
  button, input, select, textarea { border: var(--border-default); border-radius: var(--radius-control); }
  button, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]), select {
    min-height: var(--control-height); padding: var(--space-1) var(--space-2);
  }
  button { background: var(--color-surface); color: var(--color-ink); }
  button:hover { border-color: var(--color-link); }
  a { text-underline-offset: .18em; }
  :focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
  main { padding: var(--space-6) var(--page-gutter); max-width: var(--workspace-width); }
  .left-navigation { width: var(--nav-width); gap: var(--space-6); padding: var(--space-4) var(--space-3); border-right: var(--border-default); }
  .school-identity { padding: var(--space-2); font-weight: var(--weight-semibold); }
  .left-navigation nav { gap: var(--space-1); }
  .left-navigation nav a { display: flex; align-items: center; min-height: var(--control-height); padding: var(--space-2); border-left: 3px solid transparent; border-radius: var(--radius-control); text-decoration: none; }
  .left-navigation nav a:hover { background: #e8eef2; }
  .left-navigation nav a[aria-current] { background: var(--color-active); border-left-color: var(--color-link); color: var(--color-link); font-weight: var(--weight-semibold); }
  .nav-destination { gap: var(--space-1); }
  .nav-destination > a { flex: 1; }
  .nav-search { flex-shrink: 0; min-width: var(--control-height); border: 0; background: transparent; }
  .account-controls { gap: var(--space-3); padding: var(--space-2); }
  .account-controls small { font-size: var(--text-small); }
  .global-search { padding: var(--space-3) var(--page-gutter); border-bottom: var(--border-default); }
  .global-search label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: var(--search-width); margin: 0 0 var(--space-2); color: var(--color-muted); }
  .global-search kbd { font: inherit; font-size: var(--text-small); white-space: nowrap; border: var(--border-default); border-radius: var(--radius-control); padding: 0 var(--space-1); }
  .global-search-controls { display: flex; gap: var(--space-2); max-width: var(--search-width); }
  .global-search input { flex: 1; width: auto; min-width: 0; }
  .global-search-controls button { flex-shrink: 0; padding-inline: var(--space-4); }
  #quick-results { left: var(--page-gutter); right: var(--page-gutter); max-width: var(--search-width); padding: var(--space-3); border: var(--border-default); border-radius: var(--radius-control); overflow-wrap: anywhere; }
  #quick-results [role=listbox] { margin: 0 0 var(--space-2); }
  #quick-results [role=listbox] li { padding: var(--space-2); border-bottom: 1px solid #e6ebef; }
  #quick-results [data-search-option] { font-weight: var(--weight-medium); }
  #quick-results small { color: var(--color-muted); margin-top: var(--space-1); }
  .page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
  .page-header-copy { min-width: 0; overflow-wrap: anywhere; }
  .page-header h1 { margin: 0; }
  .page-description { margin: var(--space-2) 0 0; color: var(--color-muted); }
  .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
  .page-actions a { display: inline-flex; align-items: center; min-height: var(--control-height); }
}
@media screen and (max-width: 900px) {
  :root { --nav-width: 11rem; --page-gutter: var(--space-4); }
}
@media screen and (max-width: 700px) {
  :root { --page-gutter: var(--space-3); }
  .left-navigation { width: auto; padding: var(--space-2); gap: var(--space-2); border-right: 0; border-bottom: var(--border-default); }
  .left-navigation nav { gap: var(--space-1); }
  .left-navigation nav a { padding: var(--space-1) var(--space-2); }
  .account-controls { padding: 0 var(--space-2); gap: var(--space-2); }
  main { padding: var(--space-4) var(--page-gutter); }
  .page-header { margin-bottom: var(--space-4); }
}
@media (forced-colors: active) {
  .left-navigation nav a[aria-current] { border-left-color: Highlight; }
}

/* Shared effective history and compact directories. Print layouts keep their own rules. */
@media screen {
  .directory-table { width: 100%; max-width: 70rem; table-layout: fixed; border-collapse: collapse; margin-block: .5rem 1.75rem; }
  .directory-table .directory-person { width: 30%; }
  .directory-table .directory-dates { width: 28%; }
  .directory-table th, .directory-table td { text-align: left; vertical-align: top; padding: .55rem .65rem; overflow-wrap: anywhere; border-bottom: var(--border-default); }
  .directory-table small { display: block; }
  .class-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
  a.class-chip { display: inline-block; border: 1px solid currentColor; border-radius: var(--radius-control); padding: .1rem .4rem; text-decoration: none; background: transparent; }
  .history-section { margin-block: var(--space-8); }
  .history-filters { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
  .history-filters label { display: inline-flex; align-items: center; gap: .25rem; }
  .effective-history { list-style: none; padding: 0; }
  .effective-history li { display: flex; gap: var(--space-3); padding-block: var(--space-2); border-bottom: var(--border-default); }
  .effective-history time { flex: 0 0 9rem; }
  .student-activity { padding: var(--space-2); border-bottom: var(--border-default); }
  .student-activity summary { cursor: pointer; }
  .student-activity summary span { margin-inline-start: var(--space-3); font-size: var(--text-small); }
  @media (max-width: 40rem) {
    .directory-table th, .directory-table td { padding: .4rem .25rem; }
    .effective-history li { flex-direction: column; gap: .15rem; }
    .effective-history time { flex-basis: auto; }
    .student-activity summary span { display: block; margin-inline-start: 0; }
  }
}

@media screen {
  .class-chips { align-items: flex-start; }
  .class-chip { max-width: 100%; box-sizing: border-box; }
  .event-correction { display: inline-block; margin-inline-start: var(--space-4); }
  .operation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-4); }
  .operation-actions form { margin: 0; }
  .location-directory .page-header { align-items: center; }
  .location-directory .page-header h2 { margin: 0; }
}

@media screen {
  .directory-scroll { max-width:100%; overflow-x:auto; }
  .class-directory { min-width:36rem; }
  .class-directory th:first-child { width:24%; }
  .class-directory th:nth-child(2) { width:20%; }
  .class-directory th:nth-child(4) { width:7rem; }
  .class-directory td:nth-child(4) { white-space:nowrap; }
  a.class-chip-break { background:#eee; color:#505050; border-color:#aaa; }
  .directory-break-note { margin:0 0 .4rem; }
  .membership-row { padding:.6rem 0; border-bottom:var(--border-default); line-height:2; }
  .membership-row a { display:inline-block; margin-inline-end:.65rem; }
  .membership-identity small { margin-inline-start:.5rem; }
  .membership-actions { display:flex; flex-wrap:wrap; gap:.2rem .75rem; align-items:center; }
  .membership-actions a { margin:0; }
  .time-feedback { display:inline-block; margin-inline:.5rem; }
  .location-directory .page-header { justify-content:flex-start; gap:1rem; }
}

[data-collection-filter] > label { display:block; margin-bottom:var(--space-2, .5rem); }
[data-collection-filter] > label > input[type="search"] { display:block; margin-top:var(--space-2, .5rem); }
.travel-controls { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 1rem; align-items: start; }
.travel-controls output { display: block; min-height:1.5em; }
.travel-controls > div, .travel-controls > p { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-2); align-content:start; margin:0; }
.travel-controls label { margin:0; }
.travel-controls input { width:100%; }
.travel-controls > strong { align-self:center; }
.membership-end-row:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.membership-end-row label { margin:0; }
@media (max-width: 600px) { .travel-controls { grid-template-columns: 1fr; } }

.left-navigation nav a.nav-child { padding-left:2rem; font-size:.9em; }
.left-navigation nav a.nav-child[aria-current] { background:transparent; border-left-color:transparent; text-decoration:underline; }
.calendar-nav-group.is-selected { background:var(--color-active); border-left:3px solid var(--color-link); border-radius:var(--radius-control); }
.left-navigation nav .calendar-nav-group.is-selected > a { border-left:0; border-radius:0; }
.left-navigation nav .calendar-nav-group.is-selected > a[aria-current] { background:transparent; }

/* Class create/edit only; retain the shared operation fields and action pattern. */
.class-form { max-width:42rem; }
.class-form #operation-edit > p { display:grid; gap:var(--space-2); margin-block:0 var(--space-4); }
.class-form #operation-edit label { margin:0; }
.class-form #operation-edit input:not([type=hidden]),
.class-form #operation-edit select, .class-form #operation-edit textarea { width:100%; }
.class-form #operation-edit textarea { resize:vertical; }
.class-form .helptext { color:var(--color-muted); font-size:var(--text-small); }
.class-form [data-name-picker] { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-2); margin-bottom:var(--space-6); }
.class-form [data-name-picker] > label { display:grid; gap:var(--space-2); margin:0; }
.class-form [data-name-list] { display:flex; flex-wrap:wrap; gap:var(--space-2); flex-basis:100%; margin:0; }
.class-form .operation-actions { margin-top:var(--space-6); }