:root {
  --bg:#f3f5f8; --surface:#ffffff; --sunken:#e9edf3; --line:#d4dbe5;
  --ink:#16243a; --muted:#5b6b82; --navy:#1f5f8b; --navy-ink:#ffffff; --navy-soft:#dce8f4;
  --ok:#1c7048; --ok-soft:#dcf1e5; --warn:#8f5a08; --warn-soft:#fbefd6;
  --bad:#b03a2e; --bad-soft:#f7e0dd; --idle:#5f6878; --idle-soft:#e8ebf0;
  --card:var(--surface); --text:var(--ink); --accent:var(--navy); --border:var(--line);
  --error:var(--bad); --warn-bg:var(--warn-soft); color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f1622; --surface:#17212f; --sunken:#111a26; --line:#2a3748;
    --ink:#e6ecf4; --muted:#93a2b8; --navy:#6aa6dd; --navy-ink:#0c1520; --navy-soft:#1c3149;
    --ok:#5cc28e; --ok-soft:#163427; --warn:#e2a64a; --warn-soft:#3a2c14;
    --bad:#e8796d; --bad-soft:#3d1d1a; --idle:#9aa3b2; --idle-soft:#232e3d; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#0f1622; --surface:#17212f; --sunken:#111a26; --line:#2a3748;
  --ink:#e6ecf4; --muted:#93a2b8; --navy:#6aa6dd; --navy-ink:#0c1520; --navy-soft:#1c3149;
  --ok:#5cc28e; --ok-soft:#163427; --warn:#e2a64a; --warn-soft:#3a2c14;
  --bad:#e8796d; --bad-soft:#3d1d1a; --idle:#9aa3b2; --idle-soft:#232e3d; color-scheme:dark;
}
@font-face { font-family:Rubik; src:url('/static/fonts/rubik-hebrew.woff2') format('woff2'); font-weight:400 700; font-display:swap; unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:Rubik; src:url('/static/fonts/rubik-latin.woff2') format('woff2'); font-weight:400 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 system-ui, "Segoe UI", Arial, sans-serif; }
main { max-inline-size: 560px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.6rem; margin: 24px 0 16px; }
h2 { font-size: 1.1rem; margin: 24px 0 4px; }
label { display: block; margin: 12px 0; font-weight: 600; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
  display: block; width: 100%; margin-block-start: 4px; padding: 10px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--text);
}
textarea { resize: vertical; min-height: 9em; }
button { padding: 12px 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; }
button:disabled { opacity: 0.5; }
button.link { background: none; color: var(--muted); padding: 8px 0; margin-block-start: 24px; text-decoration: underline; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.tabs button { flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--border); }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 4px 16px 16px; margin-block-start: 12px; }
.recorder { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 0; }
#record { background: #c0392b; min-inline-size: 8em; }
#timer { font-variant-numeric: tabular-nums; color: var(--muted); }
#retry { background: var(--card); color: var(--accent); border: 1px solid var(--accent); }
.hint { color: var(--muted); margin: 6px 0; }
.check { display: flex; align-items: center; gap: 10px; }
.check input { width: auto; }
#security-login form { margin-block-start: 16px; }
#portal-security button { margin: 6px 0; }
#recovery-codes { white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.message { margin: 10px 0 0; color: var(--ok); }
.error { color: var(--error); }
.warning { background: var(--warn-bg); border-radius: 10px; padding: 8px 12px; margin: 12px 0 0; }
#items { list-style: none; padding: 0; margin: 8px 0; }
#items li { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
#items li.waiting { border-inline-start: 4px solid #d4a017; }
#items li.delivered { border-inline-start: 4px solid var(--ok); }
.preview { display: block; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
#items summary { cursor: pointer; min-height: 44px; overflow-wrap: anywhere; }
#items summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
#items details[open] .preview { display: none; }
.reflection-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-block-start: 10px; }
#teaching-draft-preview { white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; max-height: 65vh; overflow: auto; }
#teaching-context p, #teaching-drafts button { overflow-wrap: anywhere; }
#staging-captures { list-style: none; padding: 0; }
#staging-captures li { margin: 8px 0; }
#staging-captures button { width: 100%; overflow-wrap: anywhere; }
#staging-panel pre, #staging-panel p { white-space: pre-wrap; overflow-wrap: anywhere; }
#staging-changes article { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 10px 0; }
#staging-reject { margin-block-start: 8px; background: var(--card); color: var(--accent); border: 1px solid var(--accent); }
#exports-list { list-style:none; padding:0; }
#exports-list li { margin:8px 0; }
#exports-list button { width:100%; overflow-wrap:anywhere; }
#export-review p, #exports-readiness p, #export-title { overflow-wrap:anywhere; }
#export-previews img { display:block; max-inline-size:100%; height:auto; margin:12px 0; border:1px solid var(--border); background:white; }
#export-reject { margin-block-start:8px; background:var(--card); color:var(--accent); border:1px solid var(--accent); }
#planning-share-jobs { overflow-wrap: anywhere; }
#school-calendar { margin-block: 20px; border-block: 1px solid var(--border); padding-block: 12px; }
#calendar-items { list-style: none; padding: 0; }
#calendar-items li { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-block: 8px; }
#calendar-items p, #calendar-message, #calendar-source { white-space: pre-wrap; overflow-wrap: anywhere; }
#calendar-form { margin-block-start: 12px; }
#school-sources-changes, #school-sources-issues { max-height: 50vh; overflow: auto; overflow-wrap: anywhere; }
#school-sources-changes li, #school-sources-issues li { margin-block: 12px; white-space: pre-wrap; }
.auth { max-inline-size: 420px; margin-inline: auto; }
.auth .primary { width: 100%; margin-block-start: 12px; }
.auth .secondary { display: block; width: 100%; margin-block-start: 16px; background: var(--card); color: var(--accent); border: 1px solid var(--border); }
.auth .link { display: block; margin-block-start: 12px; }
.auth [role="status"] { overflow-wrap: anywhere; margin-block: 12px; }
#sms-code, #reset-code { font-size: 1.4rem; letter-spacing: .18em; text-align: center; }
.success-card { border: 1px solid var(--ok); border-radius: 12px; padding: 8px 16px 16px; margin-block-end: 20px; }
.success-card h2 { color: var(--ok); margin-block-start: 12px; }
#account .panel button { display: block; width: 100%; margin-block-start: 12px; }
#auth-title:focus, #account-title:focus { outline: none; }

/* Production shell and shared components. Existing page selectors remain during migration. */
body { font:400 15px/1.5 "Rubik",system-ui,"Segoe UI",Arial,sans-serif; color:var(--ink); }
body, .portal-body, .page-content { min-inline-size:0; }
main { max-inline-size:none; margin:0; padding:0; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-size:24px; font-weight:600; line-height:1.25; margin:0; }
h2 { font-size:16px; font-weight:600; line-height:1.3; margin:0; }
h3 { font-size:15px; font-weight:600; }
a { color:var(--navy); }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
input,select,textarea { font-size:16px; line-height:1.4; padding:8px 12px; border-radius:8px; background:var(--bg); }
button { min-block-size:36px; padding:6px 14px; font-size:14px; font-weight:500; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface); cursor:pointer; transition:background-color 100ms,color 100ms; }
button:disabled { cursor:not-allowed; }
button.primary,#send,#planning-adopt,#planning-import { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); }
button.danger,#staging-reject,#planning-reject,#export-reject { color:var(--bad); border-color:var(--bad); background:transparent; }
#staging-approve,#planning-approve,#export-approve { color:var(--surface); background:var(--ok); border-color:var(--ok); }
#record { background:var(--bad); color:var(--surface); }
label { margin:0; font-size:13.5px; }
.hint,small,.sidebar-footer { color:var(--muted); font-size:13.5px; line-height:1.45; }
pre { max-inline-size:100%; white-space:pre-wrap; overflow-wrap:anywhere; font-family:ui-monospace,"SF Mono",Consolas,monospace; }
.icon { inline-size:24px; block-size:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.portal-shell { display:grid; grid-template-columns:232px minmax(0,1fr); min-block-size:100dvh; }
.sidebar { position:sticky; inset-block-start:0; block-size:100dvh; overflow-y:auto; background:var(--surface); border-inline-end:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.brand { display:flex; align-items:center; gap:8px; padding:4px 12px 16px; font-size:17px; font-weight:700; }
.brand i { inline-size:24px; block-size:24px; border-radius:6px; background:var(--navy); }
#primary-nav { display:flex; flex-direction:column; gap:4px; }
#primary-nav a { display:flex; justify-content:space-between; align-items:center; min-block-size:40px; padding:9px 12px; border-radius:8px; color:var(--ink); text-decoration:none; font-size:15px; font-weight:500; }
#primary-nav .icon { display:none; }
#primary-nav a[aria-current],.setnav a[aria-current],.page-tabs a[aria-current] { background:var(--navy-soft); color:var(--navy); font-weight:600; }
.nav-divider { block-size:1px; background:var(--line); margin:12px 4px; }
.sidebar-footer { margin-block-start:auto; padding-inline:12px; font-size:12px; }
.portal-body { display:flex; flex-direction:column; }
.topbar { position:sticky; inset-block-start:0; z-index:20; display:flex; align-items:center; gap:12px; min-block-size:56px; padding:0 20px; background:var(--surface); border-block-end:1px solid var(--line); }
#global-groups,.group-pills { display:flex; flex-wrap:wrap; gap:4px; }
#global-groups button,.group-pills button { min-block-size:32px; padding:4px 12px; }
#global-groups button.active,.group-pills button.active,.seg button[aria-pressed="true"] { background:var(--navy); color:var(--navy-ink); border-color:var(--navy); }
.avatar { margin-inline-start:auto; inline-size:36px; border-radius:999px; padding:0; background:var(--navy-soft); color:var(--navy); font-weight:600; }
#portal-main { inline-size:100%; max-inline-size:1256px; padding:24px 28px; margin-inline:auto; display:flex; flex-direction:column; gap:16px; }
.ph { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; }
.ph p { margin:0; color:var(--muted); }
.page-tabs { display:flex; gap:2px; overflow-x:auto; border-block-end:1px solid var(--line); }
.page-tabs a { padding:10px 14px; text-decoration:none; color:var(--muted); white-space:nowrap; border-block-end:2px solid transparent; }
.page-tabs a[aria-current] { border-color:var(--navy); background:transparent; }
.portal-page,.page-content { display:flex; flex-direction:column; gap:12px; }
.card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:12px; min-inline-size:0; margin:0; }
.empty-state { text-align:center; align-items:center; padding-block:40px; }
.setrow { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-block:10px; border-block-start:1px solid var(--line); }
.setrow:first-of-type { border-block-start:0; }
.lab { display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; flex-shrink:0; }
.seg button { border:0; border-radius:0; padding:4px 12px; }
.setnav a { display:flex; justify-content:space-between; align-items:center; padding:8px 11px; border-radius:8px; text-decoration:none; color:var(--ink); }
.system-page { display:grid !important; grid-template-columns:220px minmax(0,1fr); align-items:start; }
.system-page>.ph,.system-page>#page-tabs { grid-column:1/-1; }
.system-page>.setnav { grid-column:1; }
.system-page>.page-content { grid-column:2; min-inline-size:0; }
#account { display:flex; flex-direction:column; gap:12px; }
#account #close-account,#account #account-title { display:none; }
#account .panel button { display:inline-flex; inline-size:auto; margin:0; }
#account .setrow button { flex-shrink:0; }
.row-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#account #portal-security>button { align-self:start; }
#passkey-status:empty,#security-message:empty,#passkey-setup-message:empty { display:none; }
.setrow details { min-inline-size:0; }
.setrow summary { cursor:pointer; min-block-size:36px; padding:6px 14px; border:1px solid var(--line); border-radius:8px; }
.chip { display:inline-flex; align-items:center; gap:6px; block-size:22px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:500; }
.chip.bad { color:var(--bad); background:var(--bad-soft); }
.popover { position:absolute; inset-inline-end:20px; inset-block-start:52px; z-index:30; display:flex; flex-direction:column; gap:4px; inline-size:280px; max-block-size:70vh; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.popover a,.more-sheet a { display:flex; align-items:center; gap:12px; padding:10px 12px; color:var(--ink); text-decoration:none; border-radius:8px; }
.mobile-nav,.more-sheet,#mobile-page-title { display:none; }
.auth,#offline { max-inline-size:452px; margin:24px auto; padding:16px; }
#reflection-form { max-inline-size:720px; }
#teaching-panel { background:transparent; border:0; padding:0; margin:0; }
#teaching-panel>button { align-self:start; }
#teaching-panel>.hint { margin:0; }
#school-calendar { margin:0; border:0; padding:0; }
@media (min-width:760px) and (max-width:1099px) {
  .portal-shell { grid-template-columns:72px minmax(0,1fr); }
  .sidebar { padding:16px 4px; }
  .brand { justify-content:center; padding:4px 0 16px; }
  .brand span,.sidebar-footer { display:none; }
  #primary-nav a { flex-direction:column; gap:4px; font-size:11px; padding:8px 2px; text-align:center; }
  #primary-nav .icon { display:block; }
  #portal-main { padding:20px; }
  .topbar { padding-inline:16px; }
}
@media (max-width:759px) {
  body { font-size:16px; }
  h1 { font-size:22px; }
  .portal-shell { display:block; padding-block-end:calc(80px + env(safe-area-inset-bottom,0px)); }
  .sidebar { display:none; }
  .topbar { min-block-size:52px; padding:4px 16px; flex-wrap:wrap; gap:8px; }
  #mobile-page-title { display:block; font-weight:600; }
  #global-groups { order:3; flex:0 0 100%; flex-wrap:nowrap; overflow-x:auto; padding-block-end:4px; }
  #global-groups button { white-space:nowrap; }
  button,.page-tabs a,.setnav a,.popover a,.more-sheet a { min-block-size:44px; }
  summary,.setrow summary { min-block-size:44px; display:flex; align-items:center; }
  #global-groups button { min-block-size:44px; }
  #portal-main { padding:16px; }
  .system-page { display:flex !important; }
  .system-page>.setnav { flex-direction:row; inline-size:100%; overflow-x:auto; padding:4px; gap:2px; }
  .system-page>.setnav a { white-space:nowrap; }
  .system-page>.page-content { inline-size:100%; }
  .setrow { align-items:start; flex-wrap:wrap; }
  .setrow .lab { flex:1 1 180px; }
  .seg { flex-wrap:wrap; }
  .mobile-nav { position:fixed; inset-block-end:0; inset-inline:0; z-index:25; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); block-size:calc(64px + env(safe-area-inset-bottom,0px)); padding-block-end:env(safe-area-inset-bottom,0px); background:var(--surface); border-block-start:1px solid var(--line); }
  .mobile-nav a,.mobile-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:var(--muted); font-size:11px; padding:4px; border:0; }
  .mobile-nav a[aria-current] { color:var(--navy); font-weight:600; }
  .mobile-nav a:nth-child(3) { color:var(--surface); background:var(--bad); border-radius:12px; margin:6px 4px; }
  .more-sheet { display:flex; flex-direction:column; position:fixed; inset-inline:16px; inset-block-end:calc(80px + env(safe-area-inset-bottom,0px)); z-index:30; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:12px; }
  .page-tabs a { padding-inline:10px; }
  #logout-message { overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }