/* =================================================================
   site.css — loaded on every page (round 60)
     0. Names some pages lack (so every page has the same colours)
     1. Eye comfort modes (Settings > Eye comfort) — each has its own
        fixed colours, whatever light / dark is set to
     2. Touch effect (the ripple)
     3. LOOK 2 · ATELIER — the second design, chosen by the admin.
        Same colours as Look 1 (magenta). Serif titles, small mono
        labels, fine lines for structure, numbered lists.
   Everything here is screen only: printed sheets never change.
   ================================================================= */
@media screen {

/* ---------- 0. fallbacks (zero weight: any page's own value wins) ---------- */
:where(html){
  --purple:var(--brass, #FF00FF); --purple-tint:var(--brass-tint, #FFE6FF);
  --text-secondary:var(--ink-secondary, #6C6478); --bg:var(--parchment, #F6F5FB);
}

/* ---------- 1. eye comfort ---------- */
/* Paper: warm, low-glare reading colours (like a printed page) */
html[data-eye="paper"][data-eye]{
  color-scheme:light;
  --bg:#F4ECD8; --surface:#FBF6EA; --surface-2:#EFE5CE; --border:#DCCFB2;
  --text-primary:#3B2F21; --text-secondary:#6B5B45; --text-muted:#8F7E64;
  --purple:#A0522D; --purple-tint:#F1DFCB;
  --success:#4F7A28; --success-tint:#E4ECD3; --warning:#9A6A12; --warning-tint:#F3E6C6; --danger:#A33A2C; --danger-tint:#F3D9D2;
  --ink:#3B2F21; --ink-secondary:#6B5B45; --parchment:#F4ECD8; --parchment-2:#EFE5CE; --card:#FBF6EA; --line:#DCCFB2;
  --brass:#A0522D; --brass-tint:#F1DFCB; --seal:#A33A2C; --seal-tint:#F3D9D2; --moss:#4F7A28; --moss-tint:#E4ECD3;
}
/* Night: warm and dark, almost no blue light — for evenings */
html[data-eye="night"][data-eye]{
  color-scheme:dark;
  --bg:#17110B; --surface:#211910; --surface-2:#2A2016; --border:#3A2D20;
  --text-primary:#F0DCC0; --text-secondary:#C8AF8E; --text-muted:#9A8467;
  --purple:#E8A04E; --purple-tint:#3A2A17;
  --success:#A8C47A; --success-tint:#26301A; --warning:#E3B35A; --warning-tint:#3A2E15; --danger:#E7836A; --danger-tint:#3A1F18;
  --ink:#F0DCC0; --ink-secondary:#C8AF8E; --parchment:#17110B; --parchment-2:#211910; --card:#211910; --line:#3A2D20;
  --brass:#E8A04E; --brass-tint:#3A2A17; --seal:#E7836A; --seal-tint:#3A1F18; --moss:#A8C47A; --moss-tint:#26301A;
}
/* Soft dark: dim grey, gentle contrast — less glare and eye strain */
html[data-eye="dim"][data-eye]{
  color-scheme:dark;
  --bg:#1E1F22; --surface:#26282C; --surface-2:#2E3035; --border:#3A3D42;
  --text-primary:#D9DADC; --text-secondary:#A6A9AE; --text-muted:#7E8187;
  --purple:#C77DDB; --purple-tint:#3A2C40;
  --success:#6FBF8F; --success-tint:#22332A; --warning:#D9B262; --warning-tint:#3A3322; --danger:#E08A8A; --danger-tint:#3D2626;
  --ink:#D9DADC; --ink-secondary:#A6A9AE; --parchment:#1E1F22; --parchment-2:#26282C; --card:#26282C; --line:#3A3D42;
  --brass:#C77DDB; --brass-tint:#3A2C40; --seal:#E08A8A; --seal-tint:#3D2626; --moss:#6FBF8F; --moss-tint:#22332A;
}
/* Colour safe: blue and orange instead of red and green (colour blindness) */
html[data-eye="safe"][data-eye]{
  color-scheme:light;
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#E8EEF5; --border:#D3DCE6;
  --text-primary:#14202C; --text-secondary:#4A5866; --text-muted:#7A8794;
  --purple:#0072B2; --purple-tint:#DCEBF6;
  --success:#0072B2; --success-tint:#DCEBF6; --warning:#B37400; --warning-tint:#FBEBCC; --danger:#C44E00; --danger-tint:#FBE2D2;
  --ink:#14202C; --ink-secondary:#4A5866; --parchment:#F3F6FA; --parchment-2:#E8EEF5; --card:#FFFFFF; --line:#D3DCE6;
  --brass:#0072B2; --brass-tint:#DCEBF6; --seal:#C44E00; --seal-tint:#FBE2D2; --moss:#0072B2; --moss-tint:#DCEBF6;
}
html[data-eye="paper"] body, html[data-eye="night"] body, html[data-eye="dim"] body, html[data-eye="safe"] body{ background:var(--bg); color:var(--text-primary); }

/* ---------- 2. touch effect ---------- */
.ripple-box{ position:fixed; z-index:9800; overflow:hidden; pointer-events:none; }
.ripple-box i{ position:absolute; border-radius:50%; background:color-mix(in srgb, var(--text-primary, #000) 16%, transparent);
  transform:scale(0); animation:mg-ripple .6s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes mg-ripple{ 70%{ opacity:.55; } to{ transform:scale(1); opacity:0; } }
.tapped{ animation:mg-spring .34s cubic-bezier(.3,1.5,.5,1); }
@keyframes mg-spring{ 0%{ transform:scale(1); } 30%{ transform:scale(.96); } 100%{ transform:scale(1); } }
.haptic{ position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; }

/* the gear button that opens Settings (both looks) */
.set-btn{ width:34px; height:34px; border-radius:50%; background:var(--surface, var(--card)); border:1px solid var(--border, var(--line));
  color:var(--text-primary, var(--ink)); display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; }
.set-btn svg{ width:17px; height:17px; }
.set-btn.inline{ margin-left:auto; }
.set-btn.fixed{ position:fixed; top:calc(16px + env(safe-area-inset-top, 0px)); right:calc(16px + env(safe-area-inset-right, 0px)); z-index:999; box-shadow:0 2px 10px rgba(0,0,0,.12); }

/* buttons show only their own name — no people's names or staff IDs under them */
.hub-row .hub-id, .hub-sub:empty{ display:none !important; }

/* ---------- Look 1 on computers: a little more room ---------- */
@media (min-width:1100px){
  html:not([data-look="2"]) main{ max-width:1000px; }
  html:not([data-look="2"]) .hub-list{ display:grid; grid-template-columns:1fr 1fr; }
  html:not([data-look="2"]) .hub-list > .hub-row{ border-right:1px solid var(--border); }
  html:not([data-look="2"]) .hub-list > .hub-row:nth-child(2n){ border-right:none; }
  html:not([data-look="2"]) .hub-list > .hub-row:nth-last-child(2):nth-child(odd){ border-bottom:none; }
  html:not([data-look="2"]) .manage-list{ display:grid; grid-template-columns:1fr 1fr; }
  html:not([data-look="2"]) .manage-list > .manage-row{ border-right:1px solid var(--border); }
  html:not([data-look="2"]) .manage-list > .manage-row:nth-child(2n){ border-right:none; }
  html:not([data-look="2"]) .manage-list > .manage-row:nth-last-child(2):nth-child(odd){ border-bottom:none; }
}


/* =================================================================
   3. LOOK 2 · ATELIER
   ================================================================= */
html[data-look="2"]{
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --rule:color-mix(in srgb, var(--text-primary) 22%, transparent);
  --hair:color-mix(in srgb, var(--text-primary) 10%, transparent);
  --lift:0 1px 2px rgba(0,0,0,.06), 0 10px 26px -18px rgba(0,0,0,.4);
  --radius-lg:2px; --radius-md:2px; --radius-sm:2px;
}
html[data-look="2"] body{ font-family:var(--sans); }
html[data-look="2"] button, html[data-look="2"] input, html[data-look="2"] select, html[data-look="2"] textarea{ font-family:var(--sans); }

/* ---------- the home bar (home pages only) ---------- */
/* "hidden" turns the page into its own scroller and the bar stops sticking;
   "clip" cuts the same overflow without that (round 62) */
html.l2, html.l2 body{ overflow-x:clip; }
.l2-bar, .l2-menu, .l2-menubtn{ display:none; }
html.l2 .l2-bar{
  display:flex; position:sticky; top:0; z-index:95; align-items:stretch; gap:0;
  height:calc(60px + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) 32px 0;
  margin:calc(-24px - env(safe-area-inset-top, 0px)) -16px 26px; width:calc(100% + 32px);
  background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
html.l2 .l2-brand{ display:flex; align-items:center; gap:10px; margin-right:26px; text-decoration:none; color:var(--text-primary); flex:none; }
html.l2 .l2-brand b{ font:600 22px/1 var(--serif); letter-spacing:-.01em; }
html.l2 .l2-brand b i{ font-style:normal; color:var(--purple); }
html.l2 .l2-nav{ display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:none; }
html.l2 .l2-nav::-webkit-scrollbar{ display:none; }
html.l2 .l2-link{ display:flex; align-items:center; padding:0 14px; text-decoration:none; color:var(--text-muted);
  font:600 11.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
html.l2 .l2-link:hover{ color:var(--text-primary); }
html.l2 .l2-link.on{ color:var(--text-primary); border-bottom-color:var(--purple); }
@media (min-width:560px){ html.l2 .l2-bar{ margin:calc(-32px - env(safe-area-inset-top, 0px)) -24px 30px; width:calc(100% + 48px); } }
@media (min-width:1100px){
  html.l2 .l2-bar{ margin-left:calc(50% - 50vw + 16px); margin-right:calc(50% - 50vw + 16px); width:auto; padding:0 max(32px, calc(50vw - 520px)); }
}

/* the Menu button: in the home bar on phones, in every page header */
html.l2 .l2-menubtn{ display:flex; align-items:center; gap:9px; height:36px; padding:0 13px; border:1px solid var(--rule); border-radius:2px;
  background:transparent; color:var(--text-primary); font:700 10.5px var(--mono); text-transform:uppercase; letter-spacing:.13em; cursor:pointer; flex-shrink:0; }
html.l2 .l2-menubtn i{ width:15px; height:8px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; }
html.l2 .l2-menubtn.in-bar{ margin-left:auto; align-self:center; display:none; }
html.l2 .l2-menubtn.in-head{ margin-left:auto; align-self:center; }
@media (max-width:760px){
  html.l2 .l2-bar{ height:calc(56px + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) 16px 0; align-items:center; }
  html.l2 .l2-nav{ display:none; }
  html.l2 .l2-menubtn.in-bar{ display:flex; }
  html.l2 .l2-menubtn.in-head span{ display:none; }
  html.l2 .l2-menubtn.in-head{ padding:0; width:36px; justify-content:center; }
}

/* full-screen menu (phones and computers) */
html.l2 .l2-menu{ display:flex; position:fixed; inset:0; z-index:9900; flex-direction:column; overflow-y:auto;
  padding:calc(70px + env(safe-area-inset-top, 0px)) max(26px, calc(50vw - 300px)) calc(30px + env(safe-area-inset-bottom, 0px));
  background:var(--bg); transform:translateY(-102%); visibility:hidden; transition:transform .38s cubic-bezier(.7,0,.2,1), visibility 0s .38s; }
html.l2-open .l2-menu{ transform:none; visibility:visible; transition:transform .38s cubic-bezier(.7,0,.2,1); }
html.l2 .l2-close{ position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:16px; width:40px; height:40px; border:1px solid var(--rule);
  border-radius:2px; background:transparent; color:var(--text-primary); font:400 24px/1 var(--sans); cursor:pointer; }
html.l2 .l2-menu a{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 4px; text-decoration:none;
  border-bottom:1px solid var(--hair); font:600 32px/1.05 var(--serif); letter-spacing:-.02em; color:var(--text-primary); }
html.l2 .l2-menu a::after{ content:"\2192"; font:400 20px var(--sans); color:var(--text-muted); }
html.l2 .l2-menu a.on{ color:var(--purple); }
html.l2 .l2-menu small{ margin-top:22px; font:600 10.5px var(--mono); text-transform:uppercase; letter-spacing:.13em; color:var(--text-muted); }
html.l2-open body{ overflow:hidden; }

/* ---------- page header: a magazine masthead ---------- */
html[data-look="2"] .topbar.with-back{
  align-items:center; gap:14px; margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid var(--rule);
}
html[data-look="2"] .page-title{ font:600 36px/1.05 var(--serif); letter-spacing:-.025em; min-width:0; overflow-wrap:anywhere; }
html[data-look="2"] .page-title::after{ content:"."; color:var(--purple); }
html[data-look="2"] .back-btn{ width:36px; height:36px; border-radius:2px; background:transparent; border:1px solid var(--rule); flex-shrink:0; }
html[data-look="2"] .back-btn:hover{ border-color:var(--text-primary); }
html.l2 .topbar .set-btn{ display:none; }
@media (max-width:560px){ html[data-look="2"] .page-title{ font-size:28px; } }

/* ---------- labels and small print: mono ---------- */
html[data-look="2"] .field label, html[data-look="2"] .panel-label, html[data-look="2"] .crumb, html[data-look="2"] .card-sub + .card-title,
html[data-look="2"] .stat-label, html[data-look="2"] .summary-label, html[data-look="2"] .dy-label, html[data-look="2"] .pg-section,
html[data-look="2"] .tc-list-title, html[data-look="2"] .qb-label, html[data-look="2"] .group-label, html[data-look="2"] .sec-title,
html[data-look="2"] .set-h, html[data-look="2"] .pm-label, html[data-look="2"] .day,
html[data-look="2"] table.records-table th, html[data-look="2"] .pg-thead{
  font-family:var(--mono) !important; font-weight:600; text-transform:uppercase; letter-spacing:.11em; font-size:10.5px; color:var(--text-muted);
}
html[data-look="2"] footer{ font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }

/* ---------- surfaces: lifted cards with a fine line ---------- */
html[data-look="2"] .card, html[data-look="2"] .hub-list, html[data-look="2"] .manage-list, html[data-look="2"] .lock-card,
html[data-look="2"] .summary-card, html[data-look="2"] .step-nav, html[data-look="2"] .results, html[data-look="2"] .panel,
html[data-look="2"] .sw, html[data-look="2"] .box, html[data-look="2"] .pick-list, html[data-look="2"] .pg-list, html[data-look="2"] .pg-card,
html[data-look="2"] .pg-box, html[data-look="2"] .pg-table, html[data-look="2"] .dy-list, html[data-look="2"] .dy-box, html[data-look="2"] .dy-note,
html[data-look="2"] .tc-card, html[data-look="2"] .tc-hol, html[data-look="2"] .tc-sum > div, html[data-look="2"] .qd, html[data-look="2"] .q,
html[data-look="2"] .qb-box, html[data-look="2"] .qb-weeks, html[data-look="2"] .bb-switch, html[data-look="2"] .bb-yg, html[data-look="2"] .cbt-active,
html[data-look="2"] .stat, html[data-look="2"] .hub-stats, html[data-look="2"] .scope-form, html[data-look="2"] .st-hero, html[data-look="2"] .doc,
html[data-look="2"] .set-box, html[data-look="2"] .pm-stat, html[data-look="2"] .acts, html[data-look="2"] .stat-card, html[data-look="2"] .sess-btn,
html[data-look="2"] .terms, html[data-look="2"] .look{
  border-radius:2px !important; border:1px solid var(--rule); box-shadow:var(--lift);
}
html[data-look="2"] .card-title, html[data-look="2"] .pg-title, html[data-look="2"] .st-subject, html[data-look="2"] .tc-month,
html[data-look="2"] .greeting-name, html[data-look="2"] .bb-yg-h b, html[data-look="2"] .hub-stats-title, html[data-look="2"] .sess-btn .yr{
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
}
html[data-look="2"] .card-title{ font-size:22px; }
html[data-look="2"] .summary-value, html[data-look="2"] .stat-num, html[data-look="2"] .pg-amt, html[data-look="2"] .pay-amt,
html[data-look="2"] .pm-stat b, html[data-look="2"] .stat-card .big{ font-family:var(--serif); font-weight:600; }

/* ---------- lists: numbered, fine rules, every other row shaded ---------- */
html[data-look="2"] .hub-list, html[data-look="2"] .manage-list{ counter-reset:l2row; background:var(--surface); }
html[data-look="2"] .hub-row, html[data-look="2"] .manage-row{ border-bottom:1px solid var(--hair) !important; padding:16px 18px; }
html[data-look="2"] .hub-row::before, html[data-look="2"] .manage-row::before{
  counter-increment:l2row; content:counter(l2row, decimal-leading-zero); flex-shrink:0; width:24px;
  font:600 11px var(--mono); letter-spacing:.1em; color:var(--purple);
}
html[data-look="2"] .hub-row:hover, html[data-look="2"] .manage-row:hover{ background:var(--purple-tint); }
/* icons keep Look 1's magenta circles — they give the lists their colour */
html[data-look="2"] .hub-icon, html[data-look="2"] .row-icon, html[data-look="2"] .pick-icon, html[data-look="2"] .pg-ic, html[data-look="2"] .dy-ic, html[data-look="2"] .act .ic{
  border-radius:50% !important; background:var(--purple-tint) !important; border:0; color:var(--purple) !important;
}
html[data-look="2"] .hub-title, html[data-look="2"] .manage-row .row-title, html[data-look="2"] .pick-title, html[data-look="2"] .pg-tx b, html[data-look="2"] .dy-tx b{
  font:600 17px var(--serif); letter-spacing:-.01em;
}
html[data-look="2"] .hub-chevron, html[data-look="2"] .row-chevron, html[data-look="2"] .pick-chevron, html[data-look="2"] .pg-chev{ font-size:0 !important; }
html[data-look="2"] .hub-chevron::after, html[data-look="2"] .row-chevron::after, html[data-look="2"] .pick-chevron::after, html[data-look="2"] .pg-chev::after{
  content:"\2192"; font:400 18px var(--sans); color:var(--text-muted);
}
@media (min-width:1000px){
  html[data-look="2"] .hub-list, html[data-look="2"] .manage-list{ display:grid; grid-template-columns:1fr 1fr; }
  html[data-look="2"] .hub-row:nth-child(odd), html[data-look="2"] .manage-row:nth-child(odd){ border-right:1px solid var(--hair); }
}

/* ---------- controls: fine outlines, square; the main action is filled ---------- */
html[data-look="2"] button.primary-btn, html[data-look="2"] a.primary-btn, html[data-look="2"] .btn.main, html[data-look="2"] .pg-btn.main,
html[data-look="2"] .dy-btn.main, html[data-look="2"] .tc-btn.main, html[data-look="2"] .qb-btn.main, html[data-look="2"] .bb-act{
  border-radius:2px !important; letter-spacing:.02em;
}
html[data-look="2"] button.primary-btn, html[data-look="2"] a.primary-btn{ padding:15px; font-weight:700; box-shadow:0 8px 18px -10px var(--purple); }
html[data-look="2"] button.ghost-btn, html[data-look="2"] .btn, html[data-look="2"] .mini-btn, html[data-look="2"] .print-btn, html[data-look="2"] .pg-btn,
html[data-look="2"] .dy-btn, html[data-look="2"] .tc-btn, html[data-look="2"] .qb-btn, html[data-look="2"] .icon-btn, html[data-look="2"] .tc-nav,
html[data-look="2"] .step-nav-btn, html[data-look="2"] .day-nav button, html[data-look="2"] .week-nav button, html[data-look="2"] .big-btn,
html[data-look="2"] .btn-mini, html[data-look="2"] .term .bk, html[data-look="2"] .act button{
  border-radius:2px !important; border:1px solid var(--rule); background:transparent;
}
html[data-look="2"] .big-btn{ border-color:var(--rule); color:var(--text-primary); font-family:var(--serif); font-size:19px; font-weight:600; }
html[data-look="2"] .big-btn svg{ color:var(--purple); }
@media (hover:hover){ html[data-look="2"] .big-btn:hover{ background:var(--purple); color:#fff; border-color:var(--purple); } html[data-look="2"] .big-btn:hover svg{ color:#fff; } }
html[data-look="2"] .tap-btn{ border-radius:2px !important; }
html[data-look="2"] .chip, html[data-look="2"] .badge, html[data-look="2"] .dy-pill, html[data-look="2"] .pg-badge, html[data-look="2"] .hub-count{ border-radius:2px !important; font-family:var(--mono); letter-spacing:.04em; }
html[data-look="2"] .tc-tab, html[data-look="2"] .tabs .tab, html[data-look="2"] .dy-tabs button, html[data-look="2"] .dy-seg button, html[data-look="2"] .pg-filters button,
html[data-look="2"] .qb-weeks button, html[data-look="2"] .who button, html[data-look="2"] .qb-kind button, html[data-look="2"] .seg button{
  border-radius:2px !important; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px !important;
}
html[data-look="2"] .who, html[data-look="2"] .qb-kind, html[data-look="2"] .seg{ border-radius:2px !important; }
/* naturally round things stay round */
html[data-look="2"] .toggle, html[data-look="2"] .bb-toggle{ border-radius:999px !important; }
html[data-look="2"] .avatar, html[data-look="2"] .pg-av, html[data-look="2"] .dy-tick, html[data-look="2"] .tc-day.today::after,
html[data-look="2"] .who .av, html[data-look="2"] .eye i, html[data-look="2"] #send-btn, html[data-look="2"] #mic-btn{ border-radius:50% !important; }

/* fields: a clean underline; boxes for long text. Chat boxes keep their own shape. */
html[data-look="2"] .field input, html[data-look="2"] .search-input, html[data-look="2"] .pg-tr input, html[data-look="2"] .pg-field input, html[data-look="2"] .dy-in,
html[data-look="2"] main input[type=text]:not(#q), html[data-look="2"] main input[type=number], html[data-look="2"] main input[type=email],
html[data-look="2"] main input[type=tel], html[data-look="2"] main input[type=password], html[data-look="2"] main input[type=date], html[data-look="2"] main input[type=time]{
  border-radius:0 !important; background:transparent !important; border:0 !important; border-bottom:1px solid var(--rule) !important; padding-left:2px !important;
}
html[data-look="2"] main input:not(#q):focus{ outline:none !important; border-bottom-color:var(--purple) !important; box-shadow:0 1px 0 0 var(--purple) !important; }
html[data-look="2"] main textarea, html[data-look="2"] main select{ border-radius:2px !important; }
/* the Ask typing box stays round, like a chat app */
html[data-look="2"] .composer{ border-radius:24px !important; }

/* tables */
html[data-look="2"] table.records-table tbody td{ border-bottom:1px solid var(--hair); }

/* ---------- the home page: Look 1's simple layout, Look 2's style ---------- */
html.l2-home .topbar{ align-items:center; }
html.l2-home .greeting-label{ font:600 10.5px var(--mono); text-transform:uppercase; letter-spacing:.13em; color:var(--text-muted); }
html.l2-home .greeting-name{ font:600 34px/1.05 var(--serif); letter-spacing:-.02em; margin-top:4px; }
html.l2-home .greeting-name::after{ content:"."; color:var(--purple); }
html.l2-home #class-teacher-badge, html.l2-home #class-teacher-badge ~ span{
  border-radius:2px !important; background:transparent !important; border:1px solid var(--rule); color:var(--text-primary) !important;
  font:600 10px var(--mono) !important; text-transform:uppercase; letter-spacing:.08em; margin:8px 6px 0 0 !important;
}
html.l2-home .avatar{ border:1px solid var(--rule); }
html.l2-home .perforation{ border-top:1px solid var(--rule); margin:18px 0 22px; }
html.l2-home .ledger-card{ border:1px solid var(--rule); border-radius:2px; box-shadow:var(--lift); background:var(--surface); }
html.l2-home .reg-mark::before, html.l2-home .reg-mark::after{ background:var(--purple); }
html.l2-home #clock{ font:600 50px/1 var(--serif); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
html.l2-home #clock-date{ font:600 10.5px var(--mono); text-transform:uppercase; letter-spacing:.12em; margin-top:8px; }
html.l2-home #status-pill{ border-radius:2px; border-style:solid; font:600 10.5px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
html.l2-home .ledger-row{ border-bottom:1px solid var(--hair); }
html.l2-home .ledger-row:hover{ background:color-mix(in srgb, var(--purple) 7%, transparent); }
html.l2-home .row-index{ font:600 11px var(--mono); letter-spacing:.08em; color:var(--purple); }
html.l2-home .row-icon{ width:36px; height:36px; }
/* no role badges at the top of the home page */
html.l2-home #class-teacher-badge, html.l2-home .role-pill, html.l2-home .admin-badge{ display:none !important; }
html.l2-home .row-title{ font:600 18px var(--serif); letter-spacing:-.01em; }
html.l2-home .row-sub{ font-size:12.5px; color:var(--text-secondary); }
html.l2-home .row-value{ font:600 17px var(--serif); color:var(--purple); }
html.l2-home .row-chevron{ font-size:0; }
html.l2-home .row-chevron::after{ content:"\2192"; font:400 18px var(--sans); color:var(--text-muted); }
html.l2-home .featured::before{ background:var(--purple); }
html.l2-home .featured .row-title{ font:600 20px var(--serif); }
html.l2-home .row-badge{ border-radius:2px; font-family:var(--mono); }
html.l2-home .diary-alert-row{ border-radius:2px; }
html.l2-home .sk-dot{ border-radius:2px; }
@media (min-width:1000px){
  html.l2-home main{ max-width:960px !important; }
  html.l2-home .ledger-list:not([hidden]){ display:grid; grid-template-columns:1fr 1fr; column-gap:30px; }
  html.l2-home .ledger-list > #row-mark{ grid-column:1 / -1; }
  html.l2-home .ledger-list > :not(.ledger-row):not(.ledger-group){ display:none; }
  html.l2-home .ledger-list > .ledger-group{ grid-column:1 / -1; }
  html.l2-home .ledger-row:last-child{ border-bottom:1px solid var(--hair); }
}
/* the home bar already shows the school's name, so the gear moves into the menu */
html.l2-home .topbar .theme-toggle-btn, html.l2-home .topbar .set-btn{ display:none; }

/* ---------- Student Portal and CBT apps follow the look too ---------- */
html[data-look="2"] .stat, html[data-look="2"] .ballot-card, html[data-look="2"] .doc, html[data-look="2"] .test,
html[data-look="2"] .rcard, html[data-look="2"] .exam-h, html[data-look="2"] .who, html[data-look="2"] .hero{
  border-radius:2px !important;
}
html[data-look="2"] .brand-title, html[data-look="2"] .c-title, html[data-look="2"] .bc-title, html[data-look="2"] .doc-title,
html[data-look="2"] .f-title, html[data-look="2"] .bar-title, html[data-look="2"] .w-name, html[data-look="2"] .stat-num{
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
}
html[data-look="2"] .stat-label, html[data-look="2"] .bc-sub, html[data-look="2"] .eyebrow, html[data-look="2"] .r-eyebrow, html[data-look="2"] .ex-tag{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.1em;
}
html[data-look="2"] .tab, html[data-look="2"] .pick-btn, html[data-look="2"] .ghost-btn, html[data-look="2"] .btn.small{ border-radius:2px !important; }
html[data-look="2"] .bc-ic, html[data-look="2"] .f-icon{ border-radius:50% !important; }

/* computers: inner pages get room to breathe */
@media (min-width:1100px){ html.l2:not(.l2-home) main{ max-width:1000px !important; } }

} /* @media screen */

@media print{ .l2-bar, .l2-menu, .l2-menubtn, .ripple-box, .set-btn{ display:none !important; } }