:root {
  --paper:#ffffff; --ink:#202925; --muted:#66716c; --line:#d8d6cc;
  --green:#235b91; --green-dark:#173d64; --green-soft:#e2eef9; --yellow:#f2c866;
  --accent-deep:#173d64; --accent-rgb:35,91,145; --accent-deep-rgb:23,61,100;
  --accent-border:color-mix(in srgb,var(--green) 35%,var(--panel,#fff));
  --accent-tint:color-mix(in srgb,var(--green-soft) 50%,var(--panel,#fff));
}
body:not(.board-fullscreen) { background:var(--paper); color:var(--ink); }
body:not(.board-fullscreen) > .app { width:min(1480px,calc(100% - 32px)); max-width:1480px; margin:0 auto; padding:24px 0 36px; }
.app > .site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; margin:0 0 20px; }
.site-header > .site-heading,.site-header > h1 { grid-column:1; grid-row:2; min-width:0; }
.site-header > .top-settings,.site-header > .header-page-actions { grid-column:2; grid-row:2; }
.site-header .eyebrow { display:none; }
.site-header h1 { margin:0; color:var(--green-dark); font-family:"Jua",sans-serif; font-size:clamp(2rem,3.3vw,3rem); font-weight:400; letter-spacing:-.025em; line-height:1.2; }
.site-header > .site-heading { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.site-header .site-heading > :is(.subtitle,.saved,.save-state) { display:block; margin:8px 0 0; padding:0; color:var(--muted); font-family:inherit; font-size:1rem; font-weight:400; line-height:1.5; letter-spacing:0; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.site-header .site-heading > .subtitle:empty { display:none; }
.site-header > .site-nav { grid-column:1 / -1; grid-row:1; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:8px; margin:0; padding:0; }
.site-header .site-nav > a { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:44px; min-width:72px; margin:0; padding:9px 13px; border:1px solid var(--line); border-radius:12px; color:var(--green); background:#fff; font-family:"Jua",sans-serif; font-size:.875rem; font-weight:400; line-height:1.3; letter-spacing:0; text-decoration:none; white-space:nowrap; box-shadow:none; transform:none; }
.site-header .site-nav > a:hover { border-color:var(--green); background:var(--green-soft); }
.site-header .site-nav > a[aria-current="page"] { color:#fff; border-color:var(--green); background:var(--green); }
.site-header .site-nav > a:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.header-page-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.header-page-actions button { min-height:44px; padding:9px 13px; border-radius:12px; font-family:"Jua",sans-serif; font-size:.875rem; font-weight:400; line-height:1.3; }
body.student .site-header .site-nav { display:none; }
/* Page zoom scales CSS viewport units too. Compensate the work surface height,
   while leaving the other pages' document-style zoom unchanged. */
body[data-page="board"]:not(.board-fullscreen) > .app { display:flex; flex-direction:column; width:calc(100% - 24px); max-width:none; height:calc(100dvh / var(--site-zoom,1)); padding:12px 0; }
body[data-page="board"]:not(.board-fullscreen) .site-header,body[data-page="board"]:not(.board-fullscreen) .toolbar { flex:0 0 auto; }
body[data-page="board"]:not(.board-fullscreen) > .app > .site-header { width:min(1480px,calc(100% - 8px)); align-self:center; margin-top:12px; }
body[data-page="board"]:not(.board-fullscreen) .board-wrap { flex:1 1 0; height:auto; min-height:0; }
body.board-fullscreen .site-header { display:none; }
@media(max-width:760px) {
  body:not(.board-fullscreen) > .app { width:calc(100% - 24px); padding-top:12px; }
  .app > .site-header { grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:16px; }
  .site-header > .top-settings,.site-header > .header-page-actions { grid-column:1; grid-row:3; justify-self:start; }
  .site-header .site-nav > a { min-width:0; padding:9px 11px; }
  .header-page-actions { justify-content:flex-start; }
  body[data-page="board"]:not(.board-fullscreen) > .app { width:calc(100% - 16px); }
  body[data-page="board"]:not(.board-fullscreen) > .app > .site-header { width:calc(100% - 8px); margin-top:0; }
}
#classroomBrightness { position:fixed;inset:0;z-index:2147483646;pointer-events:none;user-select:none; }
html[data-ui-font] body { font-family:var(--ui-font); }
html[data-ui-font] body :where(button,input,select,textarea,h1,h2,h3,h4,p,label,a,summary,small,span,output,legend):not(.text-editor):not(.text-editor-metrics):not(.text-editor-metrics *):not(#writingInput):not(#writingInput *):not(#feed *) { font-family:var(--ui-font)!important; }
html[data-ui-accent] .primary { background:var(--green);color:white;border-color:var(--green); }
html[data-ui-accent] .primary:hover { background:var(--accent-deep);border-color:var(--accent-deep); }
@media print { #classroomBrightness { display:none!important; } }
html[data-ui-motion="reduced"] *,html[data-ui-motion="reduced"] *::before,html[data-ui-motion="reduced"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-ui-mode="dark"]{color-scheme:dark}html[data-ui-mode="dark"] body{color:var(--ink)}
html[data-ui-mode="dark"] :is(.card,.settings-card,.now-card,.color-panel,.schedule-plan,.receipt,.receipt-attachments,.receipt-file,.student-feedback,.feedback-form,.submission,.submission summary,.submission-body,.history button,.record-card,.evidence-item,.palette-box,.time-item,dialog,.dialog-head,.dialog-body,.toolbar,.panel,.setup-card,.room-card,.class-card){background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-ui-mode="dark"] :is(input,textarea,select,button,.site-nav>a):not(.text-editor):not(.board-background-control select):not(.color):not(.swatch):not(.recent-color):not(.dock-color):not(.pen-cursor-image *):not(#feed *){background-color:#2b3843;color:#edf3f7;border-color:var(--line)}
html[data-ui-mode="dark"] .site-nav>a[aria-current="page"],html[data-ui-mode="dark"] .primary{background:var(--green);color:white}html[data-ui-mode="dark"] .help,html[data-ui-mode="dark"] .settings-help{color:var(--muted)}
#classroomFullscreenStart{position:fixed;z-index:9999;bottom:70px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-wrap:wrap;gap:10px;max-width:calc(100% - 24px);padding:14px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 20px #0003;font-size:1rem}#classroomFullscreenStart button{min-height:44px;padding:9px 13px;border-radius:10px;background:var(--green);color:white}
@media print{#classroomFullscreenStart{display:none!important}}
@media print { body:not(.board-fullscreen) { background:white; } }

/* Keep desktop typography consistent in the fitted mobile layout. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Color choices apply to controls too; preserve semantic warning/content colors. */
html[data-ui-accent] :where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--green)}
html[data-ui-mode="dark"] :is(.saved-group-item .saved-group,.saved-group-item .delete-saved-group){background:transparent;color:inherit;border:0}
html[data-ui-mode="dark"] :is(.tool.active,.view-button.active,.start,.step.active,.student-work-switch button[aria-pressed="true"],.shape-menu button[aria-pressed="true"],.custom-color-confirm,.pick-leader){background:var(--green);color:white;border-color:var(--green)}
html[data-ui-mode="dark"] :is(.grade-table th,#assessmentTable th){background:var(--green-soft);color:var(--green-dark)}
html[data-ui-mode="dark"] :is(.text-resize-handle,.capture-resize,#cropImport){background:var(--green);color:white}
/* The home greeting's warm dot is the shared title signature, not content. */
:root{--brand-dot:#d47142}
html[data-ui-mode="dark"]{--brand-dot:#efa978}
.site-header h1::after,.file-toolbar h1::after,.document-header h1::after{content:"";display:inline-block;width:.105em;height:.105em;min-width:4px;min-height:4px;border-radius:50%;margin-left:.12em;background:var(--brand-dot);vertical-align:baseline}