@import url("/workspace-ui.css");
/* Workspace frame; canonical palette and density tokens stay in brand-theme.css. */
:root { --app-sidebar-width:252px; --app-layer-navigation:100; --app-layer-dialog:600; }
.app-shell *, .app-navigation-drawer *, .app-settings *, .app-permissions *, .app-confirm * { box-sizing:border-box; }
.app-shell [hidden], .app-settings [hidden], .app-permissions [hidden], .app-confirm [hidden], .app-navigation-drawer [hidden] { display:none !important; }
.workspace-icon { width:20px; height:20px; flex:0 0 20px; }
.app-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.app-dev-banner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; min-height:28px; padding:4px 16px; color:var(--ui-muted); background:var(--ui-tint); font:11px/1.6 var(--ui-font); }
.app-dev-banner strong { color:var(--ui-focus); font-size:10px; letter-spacing:.04em; border:1px solid var(--ui-line); padding:0 5px; border-radius:3px; }
.app-shell-page { margin:0; min-width:0; overflow-wrap:anywhere; padding-inline-start:var(--app-sidebar-width); background:var(--ui-canvas); }
.app-shell-page main { min-width:0; margin-inline:auto; }
.app-shell-header { display:flex; align-items:center; gap:14px; min-height:64px; padding:10px 28px; padding-block-start:max(10px,env(safe-area-inset-top)); background:var(--ui-surface); border-block-end:1px solid var(--ui-line); }
.app-shell-breadcrumb { display:flex; align-items:center; gap:10px; min-width:0; font:13px/1.6 var(--ui-font); }
.app-shell-breadcrumb > .workspace-icon { width:12px; height:12px; flex-basis:12px; color:var(--ui-muted); }
.app-shell-section { color:var(--ui-muted); }
.app-shell-title { color:var(--ui-ink); font-weight:700; }
.app-shell-actions { display:flex; align-items:center; gap:10px; margin-inline-start:auto; flex:0 0 auto; }
.app-icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:8px; flex:0 0 40px; border:1px solid var(--ui-line); border-radius:8px; color:var(--ui-ink); background:var(--ui-surface); cursor:pointer; font:inherit; }
.app-icon-button:hover { background:var(--ui-tint); border-color:var(--brand-blue); }
.app-icon-button:active { background:var(--ui-line); }
.app-sidebar { position:fixed; inset-inline-start:0; inset-block:0; width:var(--app-sidebar-width); height:100dvh; display:flex; flex-direction:column; padding:0 14px; background:var(--ui-ink); color:var(--ui-surface); z-index:var(--app-layer-navigation); }
.app-shell-brand { display:flex; align-items:center; gap:12px; padding:24px 8px 22px; color:var(--ui-surface); text-decoration:none; border-block-end:2px solid var(--brand-blue); border-image:linear-gradient(to left,var(--brand-blue) 64%,var(--brand-green) 64% 86%,var(--brand-magenta) 86%) 1; }
.app-shell-brand img { width:48px; height:40px; padding:4px; object-fit:contain; background:var(--ui-surface); border-radius:6px; }
.app-shell-brand > span { display:grid; gap:2px; }
.app-shell-brand strong { font:700 18px/1.5 var(--ui-title-font); }
.app-shell-brand small { color:color-mix(in srgb,var(--ui-surface) 72%,transparent); font-size:11px; }
.app-menu-search { display:flex; align-items:center; gap:8px; margin:18px 0 14px; padding:0 10px; min-height:40px; border:1px solid color-mix(in srgb,var(--ui-surface) 20%,transparent); border-radius:8px; background:color-mix(in srgb,var(--ui-surface) 5%,transparent); }
.app-menu-search > .workspace-icon { width:16px; height:16px; flex-basis:16px; color:color-mix(in srgb,var(--ui-surface) 65%,transparent); }
.app-menu-search input { width:100%; min-width:0; min-height:38px; padding:6px 0; margin:0; color:var(--ui-surface); background:transparent; border:0; box-shadow:none; border-radius:0; font:13px/1.5 var(--ui-font); appearance:none; }
.app-menu-search input::placeholder { color:color-mix(in srgb,var(--ui-surface) 65%,transparent); }
.app-menu-search input::-webkit-search-cancel-button { display:none; }
.app-menu-clear { width:28px; height:28px; min-height:28px; flex-basis:28px; border:0; background:transparent; color:var(--ui-surface); padding:4px; }
.app-menu-clear:hover { color:var(--ui-ink); }
.app-navigation { flex:1; min-height:0; overflow:auto; padding:0 0 16px; scrollbar-width:thin; scrollbar-color:var(--brand-blue) var(--ui-ink); }
.app-navigation-pinned { margin-block-end:12px; }
.app-navigation-group { margin:3px 0; }
.app-navigation-group > summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px; border-radius:7px; list-style:none; font:600 13px/1.7 var(--ui-font); cursor:pointer; color:color-mix(in srgb,var(--ui-surface) 88%,transparent); }
.app-navigation-group > summary::-webkit-details-marker, .app-account-trigger::-webkit-details-marker { display:none; }
.app-navigation-group > summary > .workspace-icon:last-child { margin-inline-start:auto; width:14px; height:14px; flex-basis:14px; transition:transform .15s; }
.app-navigation-group[open] > summary > .workspace-icon:last-child { transform:rotate(180deg); }
.app-navigation-group > summary:hover { background:color-mix(in srgb,var(--ui-surface) 9%,transparent); color:var(--ui-surface); }
.app-navigation-group ul { list-style:none; padding:4px 0 6px; margin:0 9px 9px 0; border-inline-start:1px solid color-mix(in srgb,var(--ui-surface) 17%,transparent); }
.app-navigation-link { display:flex; align-items:center; gap:10px; position:relative; min-height:42px; padding:8px 10px; border-radius:7px; color:color-mix(in srgb,var(--ui-surface) 82%,transparent); text-decoration:none; font:400 13px/1.7 var(--ui-font); }
.app-navigation-link .workspace-icon { width:17px; height:17px; flex-basis:17px; opacity:.8; }
.app-navigation-link:hover { color:var(--ui-surface); background:color-mix(in srgb,var(--ui-surface) 8%,transparent); }
.app-navigation-link:active { background:color-mix(in srgb,var(--ui-surface) 15%,transparent); }
.app-navigation-link[aria-current="page"] { background:var(--brand-blue); color:var(--ui-surface); font-weight:700; box-shadow:inset -3px 0 var(--brand-green); }
.app-sidebar :is(a,button,input,summary):focus-visible { outline-color:var(--brand-green); }
.app-navigation-pinned .app-navigation-link { min-height:44px; }
.app-navigation-pinned .app-navigation-link[aria-current="page"] .workspace-icon { color:var(--brand-green); opacity:1; }
.app-navigation-recovery { flex:0 0 auto; font:12px/1.7 var(--ui-font); }
.app-navigation-status { margin:0; padding:0 8px 10px; }
.app-navigation-status:empty { display:none; }
.app-navigation-recovery .app-button { width:100%; margin-block-end:8px; font-size:13px; }
.app-sidebar-footer { position:relative; flex:0 0 auto; padding:12px 0 max(16px,env(safe-area-inset-bottom)); border-block-start:1px solid color-mix(in srgb,var(--ui-surface) 17%,transparent); }
.app-account-details { position:relative; }
.app-account-trigger { display:flex; align-items:center; gap:10px; padding:7px 8px; list-style:none; border:1px solid transparent; border-radius:8px; cursor:pointer; }
.app-account-trigger:hover { background:color-mix(in srgb,var(--ui-surface) 8%,transparent); }
.app-account-avatar { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:9px; color:var(--ui-ink); background:var(--brand-green); font-size:16px; font-weight:700; }
.app-account-copy { display:grid; min-width:0; gap:1px; flex:1; }
.app-account-copy strong { font-size:12px; font-weight:650; }
.app-account-copy small { color:color-mix(in srgb,var(--ui-surface) 72%,transparent); font-size:11px; }
.app-account-trigger > .workspace-icon:last-child { width:14px; height:14px; flex-basis:14px; }
.app-account-popover { position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 8px); z-index:10; width:260px; max-width:calc(100vw - 32px); max-height:60dvh; overflow:auto; padding:8px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); color:var(--ui-ink); box-shadow:0 12px 36px rgb(37 54 80 / 16%); }
.app-sidebar-footer .app-account-popover { inset-block-start:auto; inset-block-end:calc(100% + 8px); width:100%; }
.app-account-menu-title { margin:2px 8px 8px; padding:6px 0 10px; color:var(--ui-muted); font-size:12px; border-block-end:1px solid var(--ui-line); }
.app-account-link { display:flex; align-items:center; gap:10px; width:100%; min-height:42px; margin:0; padding:9px 10px; border:0; border-radius:6px; background:var(--ui-surface); color:var(--ui-ink); font:500 13px/1.7 var(--ui-font); text-decoration:none; text-align:start; cursor:pointer; }
.app-account-link:hover { background:var(--ui-tint); }
.app-account-logout { color:var(--ui-danger); border-block-start:1px solid var(--ui-line); border-radius:0 0 6px 6px; margin-block-start:4px; }
.app-shell-actions .app-account-trigger { padding:0; }
.app-shell-actions .app-account-copy, .app-shell-actions .app-account-trigger > .workspace-icon { display:none; }
.app-shell-actions .app-account-avatar { width:36px; height:36px; }
.app-shell-actions .notification-center-open { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; min-height:40px; min-width:40px; padding:8px; margin:0; border:1px solid var(--ui-line); border-radius:8px; color:var(--ui-ink); background:var(--ui-surface); font-size:0; gap:0; }
.app-shell-actions .notification-center-open > .workspace-icon { width:19px; height:19px; }
.app-shell-actions .notification-center-badge { position:absolute; inset-block-start:-4px; inset-inline-start:-4px; min-width:16px; height:16px; font:700 10px/16px var(--ui-font); padding:0 3px; color:var(--ui-surface); background:var(--brand-blue); border:1px solid var(--ui-surface); }
.app-menu-button { display:none; }
.app-shell-page .app-page-toolbar { position:static; inset:auto; min-height:0; padding:8px 28px; gap:8px; flex-wrap:wrap; background:var(--ui-surface); box-shadow:none; border-block-end:1px solid var(--ui-line); }
.app-page-toolbar::after, .app-page-toolbar .app-old-identity, .app-page-toolbar .app-old-navigation, .app-shell-page .app-toolbar-empty { display:none !important; }
.app-shell-page .portal-nav { position:static; top:auto; backdrop-filter:none; }
.app-shell-page main:not(.login-shell):not(.parent-login) { max-width:var(--ui-page); width:100%; padding:26px 28px 40px; }
.app-shell-page .ui-release-badge { width:auto; }
.app-navigation-drawer { padding:0; border:0; color:var(--ui-surface); background:var(--ui-ink); margin:0; inset-inline-start:0; inset-inline-end:auto; inset-block:0; width:min(320px,calc(100vw - 24px)); max-width:none; height:100dvh; max-height:var(--ui-viewport-height,100dvh); overflow:hidden; border-radius:0; }
.app-navigation-drawer::backdrop, .app-confirm::backdrop { background:rgb(37 54 80 / 48%); }
.app-navigation-drawer[open] { display:flex; flex-direction:column; }
.app-drawer-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(8px,env(safe-area-inset-top)) 16px 8px; border-bottom:1px solid color-mix(in srgb,var(--ui-surface) 16%,transparent); flex:0 0 auto; }
.app-drawer-heading h2 { margin:0; font-size:16px; color:var(--ui-surface); }
.app-drawer-heading .app-icon-button { color:var(--ui-surface); background:transparent; border-color:color-mix(in srgb,var(--ui-surface) 22%,transparent); }
.app-navigation-drawer .app-sidebar { position:static; width:100%; height:auto; flex:1; min-height:0; padding-inline:14px; }
.app-navigation-drawer .app-shell-brand { padding-block:16px; }
.app-navigation-drawer #app-menu-query { background:transparent; color:var(--ui-surface); border:0; border-radius:0; box-shadow:none; font-size:16px; }
.app-navigation-drawer #app-menu-query::placeholder { color:color-mix(in srgb,var(--ui-surface) 70%,transparent); }
.app-navigation-group[data-current="true"] > summary { color:var(--brand-green); }
.app-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:9px 16px; margin:0; border:1px solid var(--ui-line); border-radius:var(--ui-control-radius); color:var(--brand-blue); background:var(--ui-surface); font:650 14px/1.6 var(--ui-font); text-decoration:none; cursor:pointer; }
.app-button:hover:not(:disabled) { background:var(--ui-tint); border-color:var(--brand-blue); }
.app-button:active:not(:disabled) { box-shadow:inset 0 2px 4px rgb(37 54 80 / 16%); }
.app-primary { background:var(--brand-blue); color:var(--ui-surface); border-color:var(--brand-blue); }
.app-primary:hover:not(:disabled) { background:var(--ui-ink); }
.app-danger { background:var(--ui-danger); color:var(--ui-surface); border-color:var(--ui-danger); }
.app-danger:hover:not(:disabled) { background:var(--ui-ink); }
.app-button:disabled { opacity:.6; cursor:not-allowed; }
.app-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-block-start:16px; }
.app-feedback { min-height:1.8em; line-height:1.8; color:var(--ui-success); margin-block:10px; overflow-wrap:anywhere; }
.is-error { color:var(--ui-danger); }
.app-confirm { width:min(520px,calc(100vw - 32px)); max-height:calc(var(--ui-viewport-height,100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y:auto; padding:24px; border:1px solid var(--ui-line); border-radius:var(--ui-radius); color:var(--ui-ink); background:var(--ui-surface); font-family:var(--ui-font); }
.app-confirm h2 { margin-block-start:0; font-size:20px; }
.app-confirm p { line-height:1.8; }
.app-dialog-field { display:grid; gap:6px; margin-block:18px; font:600 13px/1.7 var(--ui-font); }
.app-dialog-field input { width:100%; min-width:0; min-height:var(--ui-field-height); padding:var(--ui-field-padding); border:1px solid var(--ui-line); border-radius:var(--ui-control-radius); color:var(--ui-ink); background:var(--ui-surface); font:400 16px/1.55 var(--ui-font); }
.workspace-home-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-block-end:24px; }
.workspace-home-heading h1 { margin:2px 0 4px; font:750 28px/1.5 var(--ui-title-font); }
.workspace-eyebrow { margin:0; color:var(--ui-muted); font-size:12px; }
.workspace-home-heading p:last-child { color:var(--ui-muted); font-size:14px; margin:0; }
.workspace-school-mark { display:grid; gap:0; color:var(--brand-blue); font:600 28px/1.4 var(--ui-title-font); text-align:end; }
.workspace-school-mark span { color:var(--ui-muted); font:11px/1.8 var(--ui-font); }
.workspace-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-block-end:12px; }
.workspace-section-heading h2 { margin:0; font-size:17px; }
.workspace-section-heading p { margin:0; font-size:12px; color:var(--ui-muted); }
.workspace-task-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.workspace-task { display:flex; align-items:center; gap:10px; min-height:98px; padding:16px; border:1px solid var(--ui-line); border-radius:10px; color:var(--ui-ink); background:var(--ui-surface); text-decoration:none; }
.workspace-task:hover { border-color:var(--brand-blue); background:var(--ui-tint); }
.workspace-task-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border-radius:8px; color:var(--brand-blue); background:var(--ui-tint); }
.workspace-task-copy { display:grid; gap:4px; flex:1; }
.workspace-task-copy strong { font-size:14px; }
.workspace-task-copy small { color:var(--ui-muted); font-size:11px; line-height:1.7; }
.workspace-task > .workspace-icon { width:16px; height:16px; flex-basis:16px; color:var(--ui-muted); }
.workspace-directory { margin-block-start:28px; }
.workspace-directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.workspace-directory-section { padding:18px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-surface); }
.workspace-directory-section h3 { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding-block-end:12px; border-block-end:1px solid var(--ui-line); font-size:15px; }
.workspace-directory-section h3 .workspace-icon { color:var(--brand-blue); }
.workspace-directory-section ul { list-style:none; padding:0; margin:0; }
.workspace-directory-link { display:flex; align-items:center; gap:8px; min-height:40px; padding:7px 0; color:var(--ui-ink); text-decoration:none; font-size:13px; }
.workspace-directory-link:hover { color:var(--brand-blue); text-decoration:underline; text-underline-offset:4px; }
.workspace-directory-link .workspace-task-icon { width:24px; height:24px; flex-basis:24px; border-radius:0; background:transparent; }
.workspace-directory-link .workspace-icon { width:16px; height:16px; flex-basis:16px; }
.workspace-directory-link .workspace-task-copy strong { font-size:13px; font-weight:500; }
.workspace-directory-link .workspace-task-copy small { display:none; }
.workspace-directory-link > .workspace-icon:last-child { margin-inline-start:auto; color:var(--ui-muted); }
.workspace-directory-more { margin-block-start:7px; padding-block-start:7px; border-block-start:1px solid var(--ui-line); }
.workspace-directory-more > summary { cursor:pointer; color:var(--brand-blue); font:600 12px/1.7 var(--ui-font); padding:7px 0; }
.workspace-empty { max-width:680px; padding:28px; border:1px solid var(--ui-line); border-radius:var(--ui-radius); background:var(--ui-surface); }
.workspace-empty > .workspace-icon { width:28px; height:28px; color:var(--brand-blue); }
.workspace-empty h2 { font-size:19px; margin-block:14px 8px; }
.workspace-empty p { color:var(--ui-muted); font-size:14px; line-height:1.8; }
@supports not (color:color-mix(in srgb,white,black)) {
  .app-navigation-link,.app-navigation-group > summary,.app-shell-brand small,.app-sidebar-footer .app-account-copy small { color:var(--ui-surface); }
  .app-menu-search,.app-sidebar-footer,.app-drawer-heading { border-color:rgba(255,255,255,.25); }
  .app-menu-search input::placeholder { color:var(--ui-surface); opacity:.75; }
  .app-navigation-drawer #app-menu-query::placeholder { color:var(--ui-surface); opacity:.75; }
  .app-navigation-link:hover,.app-navigation-group > summary:hover { background:var(--brand-blue); }
}
@media (max-width:1099px) {
  .app-shell-page { padding-inline-start:0; }
  .app-shell > .app-sidebar { display:none; }
  .app-menu-button { display:inline-flex; }
  .app-shell-header { min-height:56px; padding:8px 20px; gap:12px; }
  .workspace-task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) { .workspace-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) {
  .app-shell-header { padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); min-height:56px; flex-wrap:nowrap; }
  .app-shell-breadcrumb { gap:6px; flex:1; font-size:13px; }
  .app-shell-section,.app-shell-breadcrumb > .workspace-icon { display:none; }
  .app-shell-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .app-shell-actions { gap:8px; }
  .app-shell-page main:not(.login-shell):not(.parent-login) { padding:20px 16px 32px; }
  .app-dev-banner { font-size:10px; gap:6px; padding:4px 10px; }
  .workspace-home-heading { margin-block-end:20px; }
  .workspace-school-mark { display:none; }
  .workspace-home-heading h1 { font-size:24px; }
  .workspace-section-heading { align-items:center; }
  .workspace-section-heading p { max-width:48%; font-size:11px; }
  .workspace-task { align-items:flex-start; padding:12px; gap:9px; flex-wrap:wrap; }
  .workspace-task-icon { width:30px; height:30px; flex-basis:30px; }
  .workspace-task-copy { min-width:calc(100% - 40px); }
  .workspace-task > .workspace-icon:last-child { display:none; }
  .workspace-task-copy strong { font-size:13px; }
  .workspace-task-copy small { display:none; }
  .workspace-directory-grid { grid-template-columns:1fr; gap:12px; }
  .workspace-directory-section { padding:14px; }
  .workspace-directory-section h3 { margin-block-end:8px; padding-block-end:10px; }
  .workspace-directory-link { min-height:44px; }
  .workspace-directory-more > summary { min-height:40px; display:flex; align-items:center; }
}
@media (prefers-reduced-motion:reduce) { .app-shell *,.app-navigation-drawer * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print { .app-shell,.app-navigation-drawer,.app-page-toolbar,.app-dev-banner { display:none !important; } .app-shell-page { padding:0; } }