@charset "UTF-8";
/* Active-workspace identity only. State lamps, warning colours and print evidence are shared. */
@media screen {
  body[data-role="admin"] {
    --role-deep:#1c2548;
    --role-main:#344579;
    --role-mid:#4a588b;
    --role-ink:#28385f;
    --role-muted:#627399;
    --role-accent:#bd3859;
    --role-line:#d9def0;
    --role-soft:#eef0fa;
    --role-tint:#f7f7fc;
    --role-nav-text:#dce2f6;
    --role-light-text:#c6d0eb;
    --role-badge-bg:#e8edff;
    --role-badge-ink:#28385f;
    --role-rail:radial-gradient(ellipse at 110% 105%,#943d626e,transparent 60%),linear-gradient(155deg,#202a50,#344577 67%,#343653);
    --role-gradient:linear-gradient(115deg,#293866,#485b92);
    --role-header:linear-gradient(115deg,#f5f3fc,#fff 78%);
    --role-board:radial-gradient(ellipse at 100% 0%,#a3496d55,transparent 55%),linear-gradient(115deg,#222d55,#40558a);
    background:radial-gradient(ellipse at 95% 0%,#eaddebb3,transparent 44%),radial-gradient(ellipse at 28% 0%,#e3e8f7a6,transparent 52%),#f4f5fa;
  }
  body[data-role="teacher"] {
    --role-deep:#153f3b;
    --role-main:#176b63;
    --role-mid:#237c72;
    --role-ink:#224f4a;
    --role-muted:#577770;
    --role-accent:#247d75;
    --role-line:#d2e6e1;
    --role-soft:#e5f2ed;
    --role-tint:#f5faf7;
    --role-nav-text:#f0faf6;
    --role-light-text:#d2ece3;
    --role-badge-bg:#c4ecdd;
    --role-badge-ink:#164b42;
    --role-rail:radial-gradient(ellipse at 115% 105%,#94d3b52b,transparent 58%),linear-gradient(155deg,#143d39,#1c5c55 67%,#2e6c60);
    --role-gradient:linear-gradient(115deg,#175e57,#237a6e);
    --role-header:linear-gradient(115deg,#edf7f1,#fff 78%);
    --role-board:radial-gradient(ellipse at 100% 0%,#80cdb13b,transparent 55%),linear-gradient(115deg,#174b46,#236c5f);
    background:radial-gradient(ellipse at 90% 0%,#d5eee380,transparent 45%),radial-gradient(ellipse at 30% 0%,#e6f3edb0,transparent 55%),#f6faf8;
  }

  /* Navigation and account identity change together, including on phones. */
  body[data-role] .sidebar { background:var(--role-rail); box-shadow:0 18px 40px #183d4424; }
  body[data-role] .sidebar::before { background:var(--role-accent); }
  body[data-role] .sidebar .nav-label,
  body[data-role] .sidebar .brand-subtitle,
  body[data-role] .sidebar-bottom,
  body[data-role] .sidebar-bottom small { color:var(--role-light-text); }
  body[data-role] .nav a { color:var(--role-nav-text); }
  body[data-role] .nav a.active { color:var(--role-deep); background:linear-gradient(110deg,#fff,var(--role-soft)); }
  body[data-role] .nav a.active::before { background:var(--role-accent); }
  body[data-role] .topbar { background:var(--role-header); border-color:#fff; border-left:4px solid var(--role-accent); }
  body[data-role] .topbar-context>strong { color:var(--role-ink); }
  body[data-role] .topbar-context .today { color:var(--role-muted); }
  body[data-role] .avatar { background:var(--role-gradient); }
  body[data-role] .user-info strong { color:var(--role-ink); }
  body[data-role] .user-info span { color:var(--role-muted); font-weight:600; }
  body[data-role] .user-info.account-identity { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; text-align:center; }
  body[data-role] .account-identity>strong { max-width:260px; font-size:16px; font-weight:750; overflow-wrap:anywhere; }
  body[data-role] .account-identity .role-switch { align-self:center; padding:4px; border-width:1px; }
  body[data-role] .account-identity .role-switch .btn { min-height:42px; font-size:15px; padding:8px 13px; font-weight:750; }
  body[data-role] .current-role-badge { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:fit-content; padding:7px 14px; min-height:38px; border:1px solid var(--role-main); border-radius:9px; background:var(--role-gradient); color:#fff; font-size:15px; font-weight:750; line-height:1.3; white-space:nowrap; box-shadow:0 3px 9px #3022131c; }
  body[data-role] .current-role-badge svg { width:17px; height:17px; flex:0 0 17px; }
  body[data-role] .role-switch { background:var(--role-soft); border-color:var(--role-line); }
  body[data-role] .role-switch .btn { color:var(--role-ink); }
  body[data-role] .user-area .role-switch .btn.active,
  body[data-role] .mobile-account-menu .role-switch .btn.active { color:#fff; background:var(--role-gradient); }
  body[data-role] .mobile-account-trigger { background:#ffffff15; border-color:#ffffff4a; text-align:center; }
  body[data-role] .mobile-account-trigger>.account-role-label { display:flex; margin:6px auto 0; padding:5px 7px; min-height:31px; border:1px solid #ffffff8c; border-radius:7px; background:var(--role-badge-bg); color:var(--role-badge-ink); font-size:14px; font-weight:800; gap:5px; }
  body[data-role] .mobile-account-trigger>.account-role-label>span { color:inherit; }
  body[data-role] .mobile-account-menu { border-color:var(--role-line); border-top:3px solid var(--role-accent); background:linear-gradient(150deg,#fff,var(--role-tint)); }
  body[data-role] .mobile-account-identity strong { color:var(--role-ink); }
  body[data-role] .mobile-account-identity small { color:var(--role-muted); }
  body[data-role] .mobile-account-identity { display:flex; flex-direction:column; align-items:center; text-align:center; }
  body[data-role] .mobile-account-identity .current-role-badge { margin-top:8px; }
  body[data-role] .mobile-account-menu>.btn { color:var(--role-ink); }
  body[data-role] .mobile-account-menu>.btn:hover { background:var(--role-soft); }

  /* Workspace, forms and tables retain one layout with distinct role colours. */
  body[data-role] #main:not(.live-monitor) .page-head h1,
  body[data-role] .live-monitor .page-head h1 { color:var(--role-ink); }
  body[data-role] #main:not(.live-monitor) .page-head { border-color:var(--role-line); }
  body[data-role] #main:not(.live-monitor) .page-head::after,
  body[data-role] #main:not(.live-monitor) .page-head .eyebrow::before,
  body[data-role] #main:not(.live-monitor) .card-head::before { background:var(--role-accent); }
  body[data-role] #main:not(.live-monitor) .page-head .eyebrow,
  body[data-role] .live-monitor .page-head .eyebrow { color:var(--role-accent); }
  body[data-role] .card { border-color:var(--role-line); }
  body[data-role] #main:not(.live-monitor) .card-head { background:var(--role-header); border-color:var(--role-line); }
  body[data-role] #main:not(.live-monitor) .card-head h2 { color:var(--role-ink); }
  body[data-role] .card-foot { background:var(--role-tint); border-color:var(--role-line); }
  body[data-role] .field>span,
  body[data-role] .field>label { color:var(--role-muted); }
  body[data-role] :is(input,select,textarea) { border-color:var(--role-line); color:var(--role-ink); }
  body[data-role] :is(input,select,textarea):focus { border-color:var(--role-main); box-shadow:0 0 0 3px var(--role-soft); }
  body[data-role] input[type=checkbox] { accent-color:var(--role-main); }
  body[data-role] :is(button,a,input,select,textarea):focus-visible { outline-color:var(--role-mid); }
  body[data-role] .btn:not(.primary):not(.danger) { color:var(--role-ink); }
  body[data-role] .btn:not(.primary):not(.danger):hover { background:var(--role-soft); border-color:var(--role-line); }
  body[data-role] .btn.primary { background:var(--role-gradient); border-color:var(--role-main); color:#fff; }
  body[data-role] .btn.primary:hover { background:linear-gradient(115deg,var(--role-main),var(--role-mid)); }
  body[data-role] .btn.soft { background:var(--role-soft); border-color:var(--role-line); color:var(--role-ink); }
  body[data-role] :is(.tabs,.section-tabs) { background:var(--role-soft); border-color:var(--role-line); }
  body[data-role] :is(.tabs,.section-tabs) button.active { background:var(--role-gradient); color:#fff; }
  body[data-role] #main:not(.live-monitor) th { background:var(--role-gradient); color:#f6fbff; }
  body[data-role] #main:not(.live-monitor) tbody tr:not([class*="row-status-"]):nth-child(even)>td { background:var(--role-tint); }
  body[data-role] #main:not(.live-monitor) tbody tr:not([class*="row-status-"]):hover>td { background:var(--role-soft); }
  body[data-role] .context-help { color:var(--role-muted); }
  body[data-role] .context-help-body { background:var(--role-soft); border-color:var(--role-line); color:var(--role-ink); }
  body[data-role] .roll-header { background:var(--role-header); border-color:var(--role-line); border-left-color:var(--role-main); }
  body[data-role] .roll-header h2 { color:var(--role-ink); }
  body[data-role] :is(.group-meta,.roll-reference) { color:var(--role-muted); }
  body[data-role] .roll-toolbar { background:var(--role-tint); }
  body[data-role] .roll-footer { background:var(--role-header); border-color:var(--role-line); }
  body[data-role] .stats>.stat.metric-status-total { background:var(--role-board); border-color:var(--role-main); }

  /* The room monitor reflects the active role; individual state colours never change. */
  body[data-role] .live-command-board { background:var(--role-board); border-color:var(--role-main); }
  body[data-role] .live-board-eyebrow,
  body[data-role] .live-command-board .live-paper-list,
  body[data-role] .live-command-board .live-summary-context { color:var(--role-light-text); }
  body[data-role] .live-command-board .live-summary span { color:var(--role-light-text); }
  body[data-role] .live-building-tabs { background:var(--role-soft); border-color:var(--role-line); }
  body[data-role] .live-building-tabs button { color:var(--role-muted); }
  body[data-role] .live-building-tabs button.active { background:#fff; color:var(--role-ink); }
  body[data-role] .live-building-tabs button.active span { background:var(--role-main); color:#fff; }
  body[data-role] .building-symbol { background:var(--role-gradient); box-shadow:inset 0 -3px 0 var(--role-accent); }
  body[data-role] .live-building-section>header { border-color:var(--role-line); }
  body[data-role] .live-building-section>header h2,
  body[data-role] .live-room-card-head h3 { color:var(--role-ink); }
  body[data-role] .live-room-card { border-color:var(--role-line); background:linear-gradient(120deg,#fff,var(--role-tint)); }
  body[data-role] .live-room-card:hover { border-color:var(--role-main); background:#fff; }
  body[data-role] .live-room-card-head .room-open { color:var(--role-ink); background:var(--role-soft); }
  body[data-role] .live-room-card-stats .room-detail-link { color:var(--role-muted); }
  body[data-role] .live-monitor .live-legend-panel { border-color:var(--role-line); background:#ffffffed; }
  body[data-role] #live-room-detail .live-key-panel,
  body[data-role] #live-room-detail .live-room-exams { background:var(--role-soft); border-color:var(--role-line); }
  body[data-role] #live-room-detail .live-room-exams { border-left-color:var(--role-main); }
  body[data-role] #live-room-detail .live-view-switch { background:var(--role-soft); border-color:var(--role-line); }
  body[data-role] #live-room-detail .live-view-switch button.active { background:var(--role-main); color:#fff; }
  body[data-role] #live-room-detail .live-student-list th { background:var(--role-soft); color:var(--role-ink); }
  body[data-role] #live-room-detail .live-student-header { background:var(--role-header); }

  /* A teacher-selected exception is static in the roll; only the lamp may flash. */
  body[data-role] #main .roll-group .status-cell select { min-width:148px; }
  body[data-role] #main .roll-group tr.row-status-manual-not-entered>td { background:#fff3f5; border-bottom-color:#efd2da; }
  body[data-role] #main .roll-group tr.row-status-manual-not-entered>td:first-child { box-shadow:inset 3px 0 0 #c53958; }
  body[data-role] #main .row-status-manual-not-entered .status-cell select { color:#9d2c46; border-color:#cd637b; background:#fffafb; }
  body[data-role] #main .roll-group .roll-manual-note { display:block; color:#a2314b; font-size:13px; font-weight:600; line-height:1.55; margin-top:5px; }

  /* Dialog chrome follows the role; content alerts keep semantic styling. */
  body[data-role] .modal-head,
  body[data-role] dialog:has(#live-room-detail) .modal-head { background:var(--role-gradient); border-color:var(--role-main); }
  body[data-role] .modal-head h2 { color:#fff; }
  body[data-role] .modal-head .btn.icon { background:#ffffff17; border-color:#ffffff42; color:#fff; }
  body[data-role] .modal-head .btn.icon:hover { background:#ffffff2e; }
  body[data-role] .modal-foot { background:var(--role-tint); border-color:var(--role-line); }
  body[data-role] dialog:not(:has(#live-room-detail)) th { background:var(--role-soft); color:var(--role-ink); }

  /* Keep the current role legible under the generic hover and focus treatments. */
  body[data-role] :is(.user-area,.mobile-account-menu) .role-switch .btn.active,
  body[data-role] :is(.user-area,.mobile-account-menu) .role-switch .btn.active:is(:hover,:focus,:focus-visible,:active) {
    background:var(--role-gradient);
    color:#fff;
    border-color:var(--role-main);
  }
}