/* ===========================================================
   ACT FOR IAS — Arjuna Tracker
   Palette taken from the crest: deep navy, ceremonial gold.
   =========================================================== */
:root{
  /* ---------------------------------------------------------------
     NAVY IS THE DEFAULT. The tracker looks the same on every device
     the first time it is opened — the operating system does not get a
     vote. A student switches to the light theme from the menu and the
     choice is remembered in a cookie, so the server can put the right
     data-theme on <html> before the first paint and nothing flashes.
     --------------------------------------------------------------- */
  --bg:#080E20; --bg-2:#050A16;
  --surface:#101A38; --surface-2:#16223F; --surface-3:#1C2A4D;
  --ink:#E6ECF9; --ink-2:#AEBBD6; --muted:#8290AE;
  --line:#253158; --line-2:#1D2850;

  --navy:#2E4894; --navy-2:#4560B8; --navy-deep:#050A16; --navy-soft:#19244C;
  --gold:#E1B43F; --gold-bright:#F0CE73; --gold-lift:#F7E3AC; --gold-soft:#30280F;

  --good:#3FBE8D; --good-soft:#0E3220;
  --warn:#E5B152; --warn-soft:#322710;
  --crit:#EC7F6E; --crit-soft:#361C18;
  --calm:#A3B1D0; --calm-soft:#1B2646;

  --cal0:#1B2648; --cal1:#3C3216; --cal2:#6E551B; --cal3:#A98122; --cal4:#E1B43F;
  --accent:var(--gold-bright); --accent-ink:var(--gold); --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2); --indigo-soft:var(--navy-soft);

  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(225,180,63,.16), 0 8px 30px -14px rgba(225,180,63,.32);

  /* one family across product and marketing, as the brand guide asks;
     numbers get tabular figures so columns still line up */
  --display:"Inter Tight","Inter",-apple-system,Segoe UI,Roboto,sans-serif;
  --body:"Inter",-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"Inter",-apple-system,Segoe UI,Roboto,sans-serif;
  --r:16px; --r-s:12px;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F1F4FB; --bg-2:#E7EBF5;
  --surface:#FFFFFF; --surface-2:#F7F9FD; --surface-3:#EFF3FB;
  --ink:#0C1526; --ink-2:#42506D; --muted:#7F8CA8;
  --line:#DFE5F1; --line-2:#ECF0F8;

  --navy:#13285F; --navy-2:#1D3A82; --navy-deep:#0B1838; --navy-soft:#E6EBF7;
  --gold:#9E7210; --gold-bright:#D9A92F; --gold-lift:#F0CD73; --gold-soft:#FBF2DA;

  --good:#0F7254; --good-soft:#DCEFE8;
  --warn:#936312; --warn-soft:#F9EED2;
  --crit:#A82F24; --crit-soft:#FAE2DF;
  --calm:#47546F; --calm-soft:#E7EBF4;

  --cal0:#E7EBF5; --cal1:#F6E6BB; --cal2:#EAC87A; --cal3:#D09F29; --cal4:#96700F;
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(158,114,16,.14), 0 8px 26px -16px rgba(158,114,16,.34);
  color-scheme:light;
}

/* Kept only so an old bookmark with ?theme=dark still resolves. */
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
body{
  background:
    radial-gradient(900px 420px at 12% -10%, color-mix(in srgb,var(--navy) 10%,transparent), transparent 70%),
    radial-gradient(760px 380px at 96% -6%, color-mix(in srgb,var(--gold-bright) 12%,transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 110;margin:0;text-wrap:balance;letter-spacing:-.015em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--display);font-variation-settings:"wdth" 100;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1000px;margin:0 auto;padding-inline:18px;padding-block:0 72px}
button{font:inherit}
a{color:var(--navy-2)}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}

/* ---------------- motion ---------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:scale(.94)}60%{transform:scale(1.015)}100%{opacity:1;transform:none}}
@keyframes flame{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.09)}}
@keyframes shimmer{0%{background-position:-180% 0}100%{background-position:280% 0}}
@keyframes rise{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-42px)}}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
.anim{animation:riseIn .5s cubic-bezier(.22,.75,.3,1) both}
/* The entrance animation belongs to the first paint only. Switching tabs
   un-hides a pane, which restarts any animation on the cards inside it — that
   left the leaderboard blank for the better part of a second every time it was
   opened. The body carries the flag and drops it once the page has settled. */
body.firstpaint .card,.hero{animation:riseIn .5s cubic-bezier(.22,.75,.3,1) both}
/* switching tabs gets a short fade instead, which costs nothing */
.tabpane:not(.hidden){animation:paneIn .16s ease both}
@keyframes paneIn{from{opacity:0}to{opacity:1}}
body.firstpaint .tabpane:not(.hidden){animation:none}
.hero{animation-delay:.02s}

/* ---------------- top bar ---------------- */
.topbar{
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
}
.topbar::after{content:"";display:block;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),var(--gold-lift),var(--gold-bright),transparent);
  opacity:.75}
.topbar-in{max-width:1000px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand img{width:38px;height:38px;object-fit:contain;flex:none;
  filter:drop-shadow(0 2px 5px rgba(14,23,48,.22));transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.brand:hover img{transform:rotate(-4deg) scale(1.06)}
.brand .wordmark{display:flex;flex-direction:column;line-height:1.1}
.brand .wordmark b{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:15px;letter-spacing:.02em;
  background:linear-gradient(92deg,var(--navy) 0%,var(--navy-2) 40%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .wordmark span{font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

.clock{margin-left:auto;display:flex;align-items:baseline;gap:9px;padding:5px 13px;border-radius:999px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-3));border:1px solid var(--line);box-shadow:var(--ring)}
.clock b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:21px;
  letter-spacing:-.02em;line-height:1;color:var(--ink)}
.clock b i{font-style:normal;font-size:13px;color:var(--muted);margin-left:1px}
.clock b .sec{font-size:12px;color:var(--gold);margin-left:1px}
.clock span{font-size:12px;color:var(--muted);white-space:nowrap}
.topnav{display:flex;gap:6px;align-items:center}
.topnav a{font-weight:600;font-size:12.5px;color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:9px;transition:background .18s,color .18s}
.topnav a:hover{background:var(--surface-2);color:var(--ink)}
.topnav a.on{background:var(--navy);color:#fff}

/* ---------------- banners ---------------- */
.demo{display:flex;gap:10px;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  border-radius:var(--r-s);padding:11px 14px;margin-top:18px;font-size:12.5px;color:var(--ink-2);animation:fadeIn .5s both}
.demo b{color:var(--ink)}
.alert{background:var(--crit-soft);color:var(--crit);border-radius:10px;padding:10px 13px;font-size:12.5px;margin-bottom:14px;text-align:left}

/* ---------------- hero ---------------- */
.hero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface) 55%,var(--surface-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;margin-top:18px}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-lift),var(--gold),transparent);
  opacity:.45}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{transform:rotate(-90deg);width:104px;height:104px;overflow:visible}
.ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .mid b{font-family:var(--mono);font-weight:700;font-size:24px;line-height:1;letter-spacing:-.03em}
.ring .mid span{font-size:9px;color:var(--muted);letter-spacing:.14em;font-weight:600}
.herotext{flex:1 1 220px;min-width:200px}
.herotext h1{font-size:22px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.herotext p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.lvlrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:13px 0 6px}
.lvlrow b{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--gold);letter-spacing:.01em}
.lvlrow span{font-family:var(--mono);font-size:12px;color:var(--muted)}
/* points live only inside academy contexts: the server marks the body of a non-academy account */
body.nopts .ptsonly{display:none!important}
body:not(.nopts) .nonpts{display:none!important}
/* reflection and focus dimension */
.jarea{margin:0 0 12px}
.areachips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
.areachip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:12.5px;padding:5px 10px;cursor:pointer}
.areachip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.jareasel{font-size:12px;padding:3px 6px;margin:6px 0 0;max-width:200px}
/* goals */
.toolgoal{display:flex;align-items:center;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.toolgoal .hint{margin:0}
.focusgoal{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.focusgoal .hint{margin:0}
.focusblocks{margin:14px 0 0}
.loglist li .goalsel{max-width:160px;font-size:12px;padding:3px 6px;margin-left:auto}
.goalcard .goalarea{margin:14px 0 4px}
.goalrow{padding:10px 0;border-bottom:1px solid var(--line-2)}
.goalrow:last-child{border-bottom:0}
.goalrow.paused .ghead .t b{color:var(--muted)}
.goalrow.archived{opacity:.7}
.ghead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ghead .t{flex:1 1 220px;min-width:0}
.ghead .t b{display:block;font-weight:600;font-size:14px}
.ghead .t span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.gbar{flex:0 0 120px;height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.gbar i{display:block;height:100%;background:var(--good);border-radius:999px}
.gms{list-style:none;margin:6px 0 0 4px;padding:0}
.gms li{display:flex;align-items:center;gap:6px}
.glinks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 0;min-width:0}
.glinks select{flex:1 1 160px;min-width:0;max-width:100%}
.gms+.chkadd input[type=date]{flex:0 1 150px;min-width:0}
.glinks .hint{margin:0}
.gactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.gcal{font-size:12px;color:var(--muted);margin:0}
.goalform{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.goalform input,.goalform select{font-size:13.5px;width:100%;max-width:none;margin:0;box-sizing:border-box}
.goalform .btn{align-self:flex-start}
.goalform .hint{margin:0}
.goalsel{max-width:220px}
/* the checklist under a habit or a task, skip today, postponing */
.checklist{margin:2px 0 6px 38px}
.checklist .chk{list-style:none;margin:0;padding:0}
.checklist .chk li{display:flex;align-items:center;gap:6px}
.chkrow{display:flex;align-items:center;gap:8px;background:none;border:0;color:inherit;padding:5px 0;font-size:13px;text-align:left;cursor:pointer;flex:1 1 auto;min-width:0}
.chkrow .box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.chkrow .box svg{width:10px;height:10px;opacity:0}
.chkrow[aria-pressed="true"] .box{background:var(--good);border-color:var(--good);color:#fff}
.chkrow[aria-pressed="true"] .box svg{opacity:1}
.chkrow[aria-pressed="true"] .chkname{color:var(--muted);text-decoration:line-through}
.chkdel{background:none;border:0;color:var(--muted);font-size:16px;line-height:1;padding:2px 6px;cursor:pointer}
.chkadd{display:flex;gap:6px;margin:4px 0 2px}
.chkadd input{flex:1 1 auto;min-width:0;font-size:13px;padding:6px 8px}
.tasks li{display:flex;flex-wrap:wrap;align-items:center}
.tasks li>.t-btn{flex:1 1 0;min-width:0}
.tasks li>.checklist{flex:1 0 100%}
.skipbtn{flex:0 0 auto;margin:0 8px 0 2px;background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px;padding:2px 8px;cursor:pointer;opacity:.75}
.skipbtn:hover{opacity:1;color:var(--ink)}
.tasks li.skipped{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;color:var(--muted);font-size:13px}
.postpone{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0 6px}
.postpone input[type=date]{font-size:12px;padding:4px 6px}
.steplegend{margin:4px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted);max-width:60ch}

.track{height:8px;border-radius:999px;background:var(--line-2);overflow:hidden;position:relative}
.track i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lift));
  transition:width .7s cubic-bezier(.22,.75,.3,1);position:relative}
.track i::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  background-size:220% 100%;animation:shimmer 3.6s linear infinite}
.chips{display:flex;gap:9px;flex:none;flex-wrap:wrap}
.chip{text-align:center;padding:10px 15px;border-radius:13px;min-width:88px;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s}
.chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.chip.streak{background:linear-gradient(165deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 60%,var(--surface)));
  border-color:color-mix(in srgb,var(--gold) 28%,transparent)}
.chip.streak .d,.chip.streak .l{color:var(--gold)}
.chip.streak .f{animation:flame 2.4s ease-in-out infinite}
/* On the navy ground the old navy-2-on-navy-soft chip was nearly invisible;
   the rank chip now uses its own readable ink in each theme. */
.chip.rank{background:var(--navy-soft);border-color:color-mix(in srgb,var(--navy-2) 40%,transparent)}
.chip.rank .d,.chip.rank .l{color:#B9C8EE}
:root[data-theme="light"] .chip.rank .d,
:root[data-theme="light"] .chip.rank .l{color:var(--navy-2)}
.chip.days{background:var(--calm-soft)} .chip.days .d,.chip.days .l{color:var(--calm)}
.chip .f{font-size:17px;line-height:1.15;display:block}
.chip .d{font-family:var(--mono);font-weight:700;font-size:23px;line-height:1.2}
.chip .l{font-size:9px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;opacity:.92}

/* ---------------- tabs ---------------- */
.tabs{display:flex;gap:2px;margin-top:20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;padding:10px 14px;font-weight:600;font-size:13px;color:var(--muted);
  cursor:pointer;white-space:nowrap;position:relative;transition:color .2s}
.tabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lift));transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.22,.75,.3,1)}
.tabs button:hover{color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabpane{animation:popIn .34s cubic-bezier(.22,.75,.3,1) both}

/* ---------------- cards ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-top:16px;
  transition:box-shadow .3s}
.card:hover{box-shadow:var(--shadow-l)}
.card>header{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card>header h2{font-size:14.5px;font-weight:700;margin-right:auto}
.card .body{padding:16px 18px}
.pill{font-family:var(--mono);font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.pill.good{background:var(--good-soft);border-color:transparent;color:var(--good)}
.pill.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.pill.crit{background:var(--crit-soft);border-color:transparent;color:var(--crit)}
.pill.gold{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 25%,transparent);color:var(--gold)}
.pill.ind{background:var(--navy-soft);border-color:transparent;color:var(--navy-2)}

/* ---------------- buttons ---------------- */
.btn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:600;font-size:12.5px;
  padding:8px 14px;border-radius:10px;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),background .18s,box-shadow .18s,border-color .18s}
.btn:hover{background:var(--surface-3);transform:translateY(-1px);box-shadow:var(--shadow-s)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.btn.pri{background:linear-gradient(180deg,var(--navy-2),var(--navy));border-color:var(--navy);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-s)}
.btn.pri:hover{background:linear-gradient(180deg,var(--navy-2),var(--navy-2))}
.btn.gold{background:linear-gradient(180deg,var(--gold-lift),var(--gold-bright));border-color:var(--gold-bright);
  color:#3A2A05;box-shadow:0 1px 0 rgba(255,255,255,.45) inset, var(--shadow-s)}
.btn.ok{background:var(--good);border-color:var(--good);color:#fff}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}
.btn.ghost{background:none}
.btn.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 32%,transparent);background:none}
.btn.danger:hover{background:var(--crit-soft)}

/* ---------------- task rows ---------------- */
.tasks{list-style:none;margin:0;padding:0}
.tasks li{border-bottom:1px solid var(--line-2)}
.tasks li:last-child{border-bottom:0}
.t-btn{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;color:inherit;text-align:left;
  padding:11px 18px;cursor:pointer;position:relative;transition:background .18s}
.t-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);
  transform:scaleY(0);transform-origin:center;transition:transform .22s}
.t-btn:hover{background:var(--surface-2)}
.t-btn:hover::before{transform:scaleY(1)}
.box{width:21px;height:21px;border-radius:7px;border:1.6px solid var(--line);flex:none;display:grid;place-items:center;
  color:transparent;transition:background .18s,border-color .18s,transform .18s}
.t-btn[aria-pressed="true"] .box{background:var(--good);border-color:var(--good);color:#fff}
.pop{animation:pop .32s cubic-bezier(.3,1.4,.5,1)}
.box svg{width:12px;height:12px}
.t-name{flex:1;min-width:0;font-weight:500;overflow-wrap:anywhere}
.t-sub{font-size:12px;color:var(--muted);display:block;font-weight:400;margin-top:1px}
.t-btn[aria-pressed="true"] .t-name{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.t-xp{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none}
.editrow{display:flex;align-items:center;gap:8px;padding:9px 18px;width:100%}
.editrow input{flex:1;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);color:var(--ink)}
.addrow{display:flex;gap:8px;padding:13px 18px;border-top:1px solid var(--line-2);animation:fadeIn .3s both}
.addrow input{flex:1;font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--ink)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;
  border-top:1px solid var(--line-2);background:var(--surface-2);border-radius:0 0 var(--r) var(--r);flex-wrap:wrap}
.foot .big{font-family:var(--mono);font-weight:700;font-size:19px}
.hint{font-size:12px;color:var(--muted)}
.floatxp{position:fixed;pointer-events:none;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--good);
  z-index:90;animation:rise .85s cubic-bezier(.2,.7,.3,1) forwards;text-shadow:0 1px 6px rgba(0,0,0,.18)}
.perfect{margin:0;padding:13px 18px;color:var(--gold);font-weight:700;font-size:13px;text-align:center;
  letter-spacing:.02em;border-top:1px solid color-mix(in srgb,var(--gold) 24%,transparent);position:relative;overflow:hidden;
  background:linear-gradient(100deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 55%,var(--surface)),var(--gold-soft))}
.perfect::after{content:"";position:absolute;top:0;bottom:0;width:70px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:sheen 2.6s ease-in-out infinite}
.secthead{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--surface-2);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.secthead .eyebrow{margin-right:auto}

/* ---------------- generic rows ---------------- */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.row:last-child{border-bottom:0}
.row .t{flex:1 1 190px;min-width:0}
.row .t b{display:block;font-weight:600;font-size:13.5px}
.row .t span{font-size:12px;color:var(--muted)}
.stage{display:flex;gap:3px;flex:none}
.stage i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.stage i.on{background:var(--navy-2)}
.bar{height:7px;border-radius:999px;background:var(--line-2);overflow:hidden;min-width:64px}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--navy-2),var(--navy));
  transition:width .6s cubic-bezier(.22,.75,.3,1)}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.mini>div{background:linear-gradient(180deg,var(--surface-2),var(--surface-3));border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;transition:transform .22s,box-shadow .22s}
.mini>div:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.mini b{display:block;font-family:var(--mono);font-weight:700;font-size:21px;line-height:1.3;margin-top:2px}
.form{display:grid;grid-template-columns:1.6fr 1.1fr auto;gap:9px;margin-bottom:16px}
.form.rev{grid-template-columns:1.6fr 1.1fr auto auto}
.form.tests{grid-template-columns:1.5fr 1fr .65fr .65fr auto}
.form.plan{grid-template-columns:1.6fr 1fr auto auto auto}
.form.plan .taskpri{margin-left:0}
.form input,.form select,input[type=date],input[type=number],.search{font:inherit;font-size:13px;padding:9px 11px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);min-width:0;
  transition:border-color .18s,box-shadow .18s}
.form input:focus,.form select:focus,input[type=date]:focus,input[type=number]:focus{
  border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 22%,transparent);outline:none}
.empty{color:var(--muted);font-size:12.5px;padding:16px 0}
.datestrip{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.dchip{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:7px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--muted)}
.dchip.done{background:var(--good-soft);border-color:transparent;color:var(--good);text-decoration:line-through}
.dchip.next{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--gold);font-weight:700}
.dchip.moved{border-style:dashed;border-color:var(--gold-bright)}

/* ---------------- badges ---------------- */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px}
.badge{border:1px solid var(--line);border-radius:12px;padding:12px 13px;background:var(--surface-2);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.badge:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.badge b{display:block;font-size:12.5px;font-weight:600}
.badge span{font-size:12px;color:var(--muted)}
.badge.on{background:var(--surface-2);
  border-color:color-mix(in srgb,var(--gold) 26%,var(--line));
  box-shadow:inset 3px 0 0 -1px var(--gold-bright)}
.badge.on b{color:var(--gold-bright)}

/* ---------------- tables ---------------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px}
th{text-align:left;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:0 12px 9px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid var(--line-2)}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rank{font-family:var(--display);font-weight:800;color:var(--muted);width:34px}
tr.me{background:var(--gold-soft)} tr.me:hover{background:var(--gold-soft)} tr.me .rank{color:var(--gold)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.pod{background:linear-gradient(180deg,var(--surface-2),var(--surface-3));border:1px solid var(--line);
  border-radius:14px;padding:14px;text-align:center;transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.pod:hover{transform:translateY(-3px)}
.pod.first{background:linear-gradient(165deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 50%,var(--surface)));
  border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.pod .m{font-size:21px;line-height:1}
.pod b{display:block;font-size:13px;margin-top:5px}
/* not a bare "span": the avatar above this line is one, and it must keep
   the size its circle was built for */
.pod span:not(.face){font-family:var(--mono);font-size:12px;color:var(--muted)}
.lbtoggle{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.lbtoggle button{border:0;background:none;font-weight:600;font-size:12px;color:var(--ink-2);padding:6px 12px;
  border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.lbtoggle button[aria-pressed="true"]{background:var(--navy);color:#fff}
.youstrip{display:flex;align-items:center;gap:15px;flex-wrap:wrap;border-radius:14px;padding:15px 18px;margin-bottom:16px;
  background:linear-gradient(120deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 45%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent)}
.youstrip .r{font-family:var(--mono);font-weight:700;font-size:30px;color:var(--gold);line-height:1}
.youstrip .txt{flex:1;min-width:150px}
.youstrip .txt b{display:block;font-size:13.5px}
.youstrip .txt span{font-size:12px;color:var(--ink-2);opacity:.9}

/* ---------------- break / rest ---------------- */
.breakbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:var(--calm-soft);
  border-radius:0 0 var(--r) var(--r);border-top:1px solid var(--line-2)}
.breakbar .hint{margin-right:auto}
.restday{text-align:center;padding:36px 18px;animation:popIn .5s both}
.restday .m{font-size:36px;animation:breathe 3.4s ease-in-out infinite}
.restday h3{font-size:18px;margin-top:10px}
.restday p{color:var(--muted);font-size:12.5px;margin:8px auto 16px;max-width:340px}

/* ---------------- calendar ---------------- */
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.calhead{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:3px}
.calday{position:relative;aspect-ratio:1;max-height:82px;min-height:54px;border-radius:11px;background:var(--cal0);display:flex;align-items:flex-start;
  justify-content:flex-end;padding:6px 8px;border:1px solid transparent;
  animation:popIn .34s cubic-bezier(.22,.75,.3,1) both;transition:transform .2s,box-shadow .2s}
.calday:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--shadow-s);z-index:2}
.calday span{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);opacity:.88}
.calday.l1{background:var(--cal1)} .calday.l2{background:var(--cal2)}
.calday.l3{background:var(--cal3)} .calday.l4{background:var(--cal4)}
.calday.l3 span,.calday.l4 span{color:#fff;opacity:.97}
.calday.perfect{box-shadow:inset 0 0 0 2px var(--good)}
.calday.brk{background:var(--calm-soft)}
.calday.brk::after{content:"";position:absolute;left:8px;bottom:8px;width:7px;height:7px;border-radius:50%;background:var(--calm)}
.calday.today{border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 26%,transparent)}
.calday.future{background:transparent;border:1px dashed var(--line)}
.calday.future span{opacity:.38}
.calday.blank{background:transparent;border:0;animation:none}
.calday .dot{position:absolute;left:8px;bottom:8px;width:7px;height:7px;border-radius:50%;background:var(--navy-2)}
.callegend{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--muted)}
.callegend i{width:16px;height:16px;border-radius:5px;display:inline-block;flex:none;background:var(--cal0)}
.callegend i.l0{background:var(--cal0)} .callegend i.l1{background:var(--cal1)}
.callegend i.l2{background:var(--cal2)} .callegend i.l3{background:var(--cal3)}
.callegend i.l4{background:var(--cal4)}
.callegend .grp{display:flex;align-items:center;gap:5px}

/* ---------------- year heatmap ---------------- */
.yearbox{display:flex;gap:10px;align-items:flex-start}
.ydays{display:grid;grid-template-rows:repeat(7,16px);gap:4px;padding-top:20px;flex:none}
.ydays span{font-family:var(--mono);font-size:9.5px;color:var(--muted);line-height:16px;text-align:right;width:26px}
/* min-width:0 or the flex item refuses to shrink below its content and the
   whole page gains a horizontal scrollbar on a narrow phone. */
.yearwrap{overflow-x:auto;padding-bottom:8px;flex:1 1 0;min-width:0;scrollbar-width:thin}
.yearscroll{min-width:max-content}
.ylabels{display:flex;height:18px;align-items:flex-end}
.ylabels span{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);flex:none}
.yearinner{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,16px);gap:4px;margin-top:4px}
.ycell{width:16px;height:16px;border-radius:4px;background:var(--cal0);
  transition:transform .18s,box-shadow .18s;cursor:default}
.ycell:hover{transform:scale(1.32);box-shadow:var(--shadow-s);z-index:2;position:relative}
.ycell.l1{background:var(--cal1)} .ycell.l2{background:var(--cal2)}
.ycell.l3{background:var(--cal3)} .ycell.l4{background:var(--cal4)}
.ycell.perfect{box-shadow:inset 0 0 0 2px var(--good)}
.ycell.brk{background:var(--calm-soft);box-shadow:inset 0 0 0 2px var(--calm)}
.ycell.none{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---------------- focus timer ---------------- */
.timerwrap{display:flex;gap:32px;align-items:center;flex-wrap:wrap;justify-content:center}
.timer{position:relative;width:248px;height:248px;flex:none}
.timer svg{width:248px;height:248px;display:block;overflow:visible}
.timer #timerArc{transition:stroke-dashoffset .9s linear, stroke .4s}
.timer.running::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold-bright) 35%,transparent);animation:breathe 2.6s ease-in-out infinite}
.timermid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.timermid b{display:block;font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:50px;
  letter-spacing:-.04em;line-height:1}
.timermid span{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:block;margin-top:7px}
.timer.rest #timerArc{stroke:var(--good)}
.timerside{flex:1 1 270px;min-width:250px}
.timerbtns{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.timerbtns .btn{min-width:92px;padding:10px 16px}
.soundrow{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:12.5px;color:var(--ink-2)}
.soundrow input{accent-color:var(--gold-bright);width:16px;height:16px}
.tset{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:4px}
.tset label{display:block}
.tset .eyebrow{display:block;margin-bottom:5px}
.tset input{width:100%;text-align:center;font-family:var(--mono);font-weight:600}
.tsetrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}

/* ---------------- admin ---------------- */
.subtabs{display:flex;gap:2px;margin-top:20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{background:none;border:0;padding:10px 14px;font-weight:600;font-size:13px;color:var(--muted);
  cursor:pointer;white-space:nowrap;position:relative;transition:color .2s}
.subtabs button::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lift));transform:scaleX(0);
  transition:transform .28s cubic-bezier(.22,.75,.3,1)}
.subtabs button[aria-selected="true"]{color:var(--ink)}
.subtabs button[aria-selected="true"]::after{transform:scaleX(1)}
.star{background:none;border:0;font-size:16px;cursor:pointer;line-height:1;padding:3px;filter:grayscale(1);opacity:.4;
  transition:filter .2s,opacity .2s,transform .2s}
.star:hover{transform:scale(1.18);opacity:.75}
.star[aria-pressed="true"]{filter:none;opacity:1;color:var(--gold-bright)}
.search{width:100%;max-width:290px}
.mentortag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);background:var(--gold-soft);padding:4px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.copybox{font-family:var(--mono);font-size:12px;word-break:break-all;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;margin-top:8px;animation:fadeIn .3s both}

/* ---------------- auth pages ---------------- */
.plainpage{display:grid;place-items:center;min-height:100vh;padding:32px 18px}
.login{width:100%;max-width:404px;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-l);padding:34px 30px 28px;text-align:center;position:relative;overflow:hidden;
  animation:popIn .55s cubic-bezier(.22,.75,.3,1) both}
.login::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lift),var(--gold))}
.authlogo{width:114px;height:auto;margin:0 auto 12px;display:block;
  filter:drop-shadow(0 8px 22px rgba(14,23,48,.28));animation:riseIn .6s cubic-bezier(.22,.75,.3,1) both}
.authlogo{filter:drop-shadow(0 8px 26px rgba(225,180,63,.24))}
:root[data-theme="light"] .authlogo{filter:drop-shadow(0 8px 22px rgba(14,23,48,.28))}
.login h2{font-size:20px;letter-spacing:-.01em}
.login p{color:var(--muted);font-size:12.5px;margin:7px 0 20px}
.login label{display:block;text-align:left;font-size:12px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
.login input{width:100%;font:inherit;font-size:13.5px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface-2);color:var(--ink);margin-bottom:14px;transition:border-color .18s,box-shadow .18s}
.login input:focus{border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 22%,transparent);outline:none}
.login form{text-align:left}
.login .btn{width:100%;padding:12px;font-size:13.5px}
.note{margin-top:18px;font-size:12px;color:var(--muted);border-top:1px solid var(--line-2);padding-top:16px;line-height:1.6}
.motto{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px;animation:fadeIn .8s .15s both}

/* ---------------- toast ---------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--navy-deep);color:#fff;
  padding:12px 18px;border-radius:12px;font-size:13px;z-index:100;opacity:0;pointer-events:none;max-width:90vw;
  box-shadow:var(--shadow-l);border:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.toast.on{animation:slideUp .32s cubic-bezier(.22,.75,.3,1) forwards}

@media (max-width:820px){
  .mini{grid-template-columns:repeat(2,1fr)}
  .tset{grid-template-columns:repeat(2,1fr)}
  .podium{grid-template-columns:1fr}
  .form,.form.tests,.form.plan{grid-template-columns:1fr 1fr}
  .form>*:last-child{grid-column:1/-1}
}
@media (max-width:600px){
  .clock b{font-size:17px}
  .clock > span{display:none}
  .timer,.timer svg{width:210px;height:210px}
  .timermid b{font-size:42px}
  .ydays{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- alive: one small light travelling the edge of a box ----------
   Not a glow, not a pulse — a single bright point that walks the border
   once every nine seconds, so the screen reads as running rather than
   printed. Three places only: the hero on Today, the sign-in card and the
   first setup screen. Reduced-motion hides it entirely. */
@property --bb{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes bbTurn{to{--bb:360deg}}
.alive{position:relative}
.alive::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--bb),transparent 0 70%,color-mix(in srgb,var(--gold-bright) 35%,transparent) 86%,var(--gold-lift) 95%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:bbTurn 9s linear infinite;opacity:.95}
.alive.slow::after{animation-duration:13s}
@media (prefers-reduced-motion:reduce){.alive::after{display:none}}

/* the wordmark gradient runs light-to-deep on the navy ground */
.brand .wordmark b{
  background:linear-gradient(92deg,var(--gold-lift) 0%,var(--gold-bright) 45%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}


/* ---------------- clock: centred in its pill ---------------- */
.clock{align-items:center;padding:7px 14px;gap:10px;line-height:1}
.clock b{display:flex;align-items:baseline;line-height:1;transform:translateY(-1px)}
.clock span{line-height:1;transform:translateY(1px)}

/* ---------------- timer presets ---------------- */
.presets{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.presetrow{display:flex;gap:7px;flex-wrap:wrap}
.presetrow button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-family:var(--mono);
  font-weight:600;font-size:12px;padding:7px 13px;border-radius:999px;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1),background .18s,color .18s,border-color .18s}
.presetrow button:hover{transform:translateY(-1px);background:var(--surface-3)}
.presetrow button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-lift),var(--gold-bright));
  border-color:var(--gold-bright);color:#3A2A05}

/* ---------------- student links ---------------- */
.slink{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid transparent;
  transition:border-color .18s,color .18s}
.slink:hover{color:var(--gold);border-bottom-color:var(--gold-bright)}

/* ---------------- site footer ---------------- */
.sitefoot{max-width:1000px;margin:8px auto 0;padding:26px 18px 40px;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;border-top:1px solid var(--line);position:relative}
.sitefoot::before{content:"";position:absolute;top:-1px;left:18px;width:88px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lift))}
.footphoto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--gold-bright);box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.footphoto:hover{transform:scale(1.07)}
.footlogo{width:40px;height:40px;object-fit:contain;flex:none;opacity:.95}
.foottext{display:flex;flex-direction:column;line-height:1.3}
.foottext b{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:800;font-size:14px;
  letter-spacing:.01em;color:var(--ink)}
.foottext span{font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold)}
@media (max-width:520px){.sitefoot{gap:12px;padding-bottom:32px}.footlogo{display:none}}


/* ===========================================================
   Brand lockup — the tagline is justified to the exact width of
   the title, so it can never run past it whatever the font does.
   =========================================================== */
:root{ --title:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif; }

.brand img{width:42px;height:42px}
.brand .wordmark{display:inline-grid;justify-items:stretch;gap:4px;line-height:1}
.brand .wordmark b{
  font-family:var(--title);font-weight:400;font-size:15.5px;letter-spacing:.005em;line-height:1;
  background:linear-gradient(92deg,var(--navy) 0%,var(--navy-2) 42%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.brand .tag{display:flex;justify-content:space-between;gap:6px;width:100%;line-height:1}
.brand .tag i{font-family:var(--display);font-variation-settings:"wdth" 100;font-style:normal;
  font-size:7px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.brand .tag i + i::before{content:"·";color:var(--gold);opacity:.85}


/* ===========================================================
   Footer
   =========================================================== */
.sitefoot{max-width:1000px;margin:10px auto 0;padding:28px 18px 44px;display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;border-top:1px solid var(--line);position:relative}
.sitefoot::before{content:"";position:absolute;top:-1px;left:18px;width:92px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-lift))}
.footbrand{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.footphoto{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--gold-bright);box-shadow:var(--shadow-s);
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.footphoto:hover{transform:scale(1.06)}
.footlogo{width:42px;height:42px;object-fit:contain;flex:none;opacity:.95}
.foottext{display:inline-grid;justify-items:stretch;gap:5px;line-height:1}
.foottext b{font-family:var(--title);font-weight:400;font-size:12.5px;letter-spacing:.005em;color:var(--ink);
  line-height:1.25;white-space:nowrap}
.foottext .tag{display:flex;justify-content:space-between;gap:6px;width:100%}
.foottext .tag i{font-family:var(--display);font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap;display:flex;align-items:center;gap:6px}
.foottext .tag i + i::before{content:"·";opacity:.7}

.footside{margin-left:auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footcontact .eyebrow{display:block;margin-bottom:5px}
.phones{display:flex;flex-direction:column;gap:2px}
.phones a{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
  letter-spacing:.01em;transition:color .18s}
.phones a:hover{color:var(--gold)}
.socials{display:flex;gap:9px}
.soc{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-2);
  transition:transform .22s cubic-bezier(.2,.8,.3,1),color .22s,background .22s,border-color .22s,box-shadow .22s}
.soc svg{width:19px;height:19px;display:block}
.soc:hover{transform:translateY(-3px);box-shadow:var(--shadow-s);color:#fff}
.soc.yt:hover{background:#FF0033;border-color:#FF0033}
.soc.ig:hover{background:linear-gradient(45deg,#F09433,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888);border-color:#CC2366}
@media (max-width:640px){
  .sitefoot{gap:16px}
  .footside{margin-left:0;width:100%;justify-content:space-between}
  .footlogo{display:none}
}

/* ===========================================================
   Subjects, reflection, import
   =========================================================== */
.subjpick{display:flex;gap:6px;align-items:stretch;min-width:0}
.subjpick select{flex:1;min-width:0}
.iconbtn{padding:0 11px;font-size:14px;line-height:1;flex:none}
.subjpanel{background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:14px 16px;margin-bottom:16px;
  animation:popIn .3s cubic-bezier(.22,.75,.3,1) both}
.subjlist{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.subjchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600}
.subjchip button{border:0;background:var(--line-2);color:var(--ink-2);width:19px;height:19px;border-radius:50%;
  cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center;transition:background .18s,color .18s}
.subjchip button:hover{background:var(--crit);color:#fff}
.subjadd{display:flex;gap:8px;flex-wrap:wrap}
.subjadd input{flex:1;min-width:170px;font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink)}

.moodrow{margin-bottom:18px}
.moodrow .eyebrow{display:block;margin-bottom:9px}
.moods{display:flex;gap:9px;flex-wrap:wrap}
.mood{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;padding:10px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,background .2s,box-shadow .2s}
.mood .e{font-size:21px;line-height:1}
.mood .n{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mood:hover{transform:translateY(-2px)}
.mood[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold-bright);box-shadow:var(--shadow-s)}
.mood[aria-pressed="true"] .n{color:var(--gold)}

.jfield{display:block;margin-bottom:16px}
.jfield .eyebrow{display:block;margin-bottom:7px}
.jfield textarea{width:100%;font:inherit;font-size:13.5px;line-height:1.6;padding:12px 13px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface-2);color:var(--ink);resize:vertical;
  transition:border-color .18s,box-shadow .18s}
.jfield textarea:focus{border-color:var(--gold-bright);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 20%,transparent)}
.jsave{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.jquote{margin:0;padding:15px 18px;border-top:1px solid var(--line-2);background:var(--surface-2);
  border-radius:0 0 var(--r) var(--r);font-size:13px;font-style:italic;color:var(--ink-2);text-align:center}
.jrow{flex-direction:column;align-items:stretch;gap:7px}
.jrow .t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:1 1 auto}
.jbody p{margin:0 0 5px;font-size:13px;color:var(--ink-2);line-height:1.55;overflow-wrap:anywhere}
.jrow .t{min-width:0;overflow-wrap:anywhere}
.jbody p i{font-style:normal;margin-right:3px}
.jbody .jnote{color:var(--muted);font-size:12.5px;padding-left:2px;border-left:2px solid var(--line);padding-left:10px;margin-top:8px}
.imports{display:grid;gap:4px}

/* badges with emblems */
.badge{display:flex;align-items:center;gap:11px}
.bemblem{font-size:21px;line-height:1;flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);filter:grayscale(1);opacity:.5;transition:filter .25s,opacity .25s}
.badge.on .bemblem{filter:none;opacity:1;background:var(--surface);
  border-color:color-mix(in srgb,var(--gold) 35%,transparent);box-shadow:0 2px 10px -4px rgba(0,0,0,.25)}
.btext{min-width:0}

/* ===========================================================
   Mobile — portrait first
   =========================================================== */
@media (max-width:760px){
  /* brand on the left, controls on the right, whatever sits between them (the clock hides on small phones) */
  .topbar-in{padding:9px 14px;gap:10px;flex-wrap:nowrap;justify-content:space-between}
  .topnav{margin-left:auto}
  .brand{gap:9px;min-width:0;flex:0 1 auto}
  .brand img{width:34px;height:34px}
  .brand .wordmark b{font-size:12.5px}
  .brand .tag i{font-size:6.2px;letter-spacing:.03em}
  .clock{margin-left:0;flex:none;padding:6px 10px;gap:7px}
  .clock b{font-size:16px}
  .clock .sec{display:none}
  .clock > span{display:none}
  .topnav{gap:2px;flex:none}
  .topnav a{padding:6px 8px;font-size:12px}
  .wrap{padding-inline:14px}

  .hero{padding:16px;gap:14px}
  .ring,.ring svg{width:86px;height:86px}
  .ring .mid b{font-size:20px}
  .herotext{flex:1 1 140px;min-width:140px}
  .herotext h1{font-size:18px}
  .chips{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .chip{min-width:0;padding:9px 6px}
  .chip .d{font-size:19px}
  .chip .l{font-size:8px;letter-spacing:.06em}

  .tabs{margin-top:14px;position:sticky;top:56px;z-index:20;
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px)}
  .tabs button{padding:10px 11px;font-size:12.5px}

  .card>header{padding:12px 14px}
  .card .body{padding:14px}
  .t-btn{padding:13px 14px;gap:11px}
  .box{width:23px;height:23px}
  .secthead{padding:9px 14px}
  .foot,.breakbar,.addrow{padding:12px 14px}
  .mini{grid-template-columns:repeat(2,1fr);gap:8px}
  .form,.form.tests,.form.plan{grid-template-columns:1fr;gap:8px}
  .form>*{grid-column:1/-1}
  .calgrid{gap:5px}
  .calday{border-radius:9px;min-height:42px;max-height:56px;padding:4px 6px}
  .calday span{font-size:12px}
  table{min-width:480px}
  .timer,.timer svg{width:200px;height:200px}
  .timermid b{font-size:40px}
  .tset{grid-template-columns:repeat(2,1fr)}
  .moods{gap:6px}
  .mood{min-width:0;flex:1;padding:9px 4px}
  .mood .n{font-size:9px}
  .sitefoot{padding:24px 14px 36px}
}
@media (max-width:420px){
  .brand .tag{display:none}
  .brand .wordmark b{font-size:13px}
  .clock b{font-size:15px}
  .topnav a{padding:6px 7px;font-size:12px}
  .chip .l{font-size:7.5px}
  .timer,.timer svg{width:176px;height:176px}
  .timermid b{font-size:34px}
  .badges{grid-template-columns:1fr}
}


/* mobile fixes found on a real 390px portrait screen */
@media (max-width:760px){
  .clock > span{display:none}
  .clock b{white-space:nowrap}
  .lvlrow{flex-direction:column;align-items:flex-start;gap:3px;margin:10px 0 6px}
  .lvlrow b,.lvlrow span{white-space:normal}
  .chip .l{white-space:nowrap}
  .chip .d{white-space:nowrap}
  .card>header{gap:8px}
  .card>header h2{flex:1 1 100%;margin-right:0}
  .card>header .pill{order:2}
  .card>header .btn{order:3;margin-left:auto}
}
@media (max-width:420px){
  .chip .l{font-size:7px;letter-spacing:.04em}
  .chip{padding:8px 4px}
}

/* the three hero chips must share the row evenly on a phone */
@media (max-width:760px){
  .chips>.chip{width:100%;min-width:0;justify-self:stretch}
}

/* ===========================================================
   Round 7 — catch-up, revision planner, strengths, badges,
   the celebration, the share card and the guide.
   =========================================================== */

/* ---------- Today / Yesterday switch ---------- */
.dayswitch{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.dayswitch button{border:0;background:none;font-family:var(--body);font-weight:600;font-size:12px;color:var(--ink-2);
  padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease}
.dayswitch button:hover:not(:disabled){color:var(--ink)}
.dayswitch button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:var(--shadow-s)}
.dayswitch button:disabled{opacity:.42;cursor:not-allowed}

.catchbar{display:flex;align-items:center;gap:12px;margin:0 18px 2px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(120deg,var(--warn-soft),color-mix(in srgb,var(--warn-soft) 45%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);animation:slideDown .32s cubic-bezier(.22,.75,.3,1) both}
.catchbar>span{font-size:20px;line-height:1}
.catchbar b{display:block;font-size:13px;color:var(--warn)}
.catchbar span.hint,.catchbar div span{display:block;font-size:12px;color:var(--ink-2)}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- trophy case ---------- */
.trophycard{background:linear-gradient(140deg,var(--surface),var(--surface-2))}
.trophies{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.trophy{flex:0 0 auto;width:92px;text-align:center;padding:12px 6px 10px;border-radius:13px;
  background:linear-gradient(165deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 45%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.trophy:hover{transform:translateY(-3px);box-shadow:var(--shadow-s)}
.trophy span{display:block;font-size:26px;line-height:1.1;filter:drop-shadow(0 4px 8px rgba(169,123,18,.28))}
.trophy i{display:block;margin-top:6px;font-style:normal;font-size:12px;font-weight:600;color:var(--gold);line-height:1.25}

/* ---------- revision: plan your own dates ---------- */
.revitem{border-bottom:1px solid var(--line-2)}
.revitem:last-child{border-bottom:0}
.revitem .row{border-bottom:0}
.revitem.open{background:var(--surface-2);border-radius:13px;margin:6px 0;padding:0 12px;
  border:1px solid var(--line);box-shadow:var(--shadow-s)}
.mtag{display:inline-block;margin-left:8px;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px;background:var(--navy-soft);color:var(--navy-2);vertical-align:1px}
.planedit{padding:4px 0 16px;animation:slideDown .28s cubic-bezier(.22,.75,.3,1) both}
.pehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0 14px;border-top:1px dashed var(--line);margin-top:4px}
.modeswitch{display:flex;background:var(--surface-3);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.modeswitch button{border:0;background:none;font-family:var(--body);font-weight:600;font-size:12px;color:var(--ink-2);
  padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease}
.modeswitch button[aria-pressed="true"]{background:var(--gold-bright);color:#26200C;box-shadow:var(--shadow-s)}
.pedates{display:flex;flex-direction:column;gap:7px}
.pedate{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;background:var(--surface);
  border:1px solid var(--line-2);transition:border-color .18s ease}
.pedate:hover{border-color:var(--line)}
.pedate.done{opacity:.62;background:none}
.pnum{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;background:var(--navy-soft);color:var(--navy-2)}
.pedate.done .pnum{background:var(--good-soft);color:var(--good)}
.pdone{font-size:12px;color:var(--muted)}
.pedate input[type="date"]{flex:0 1 158px;min-width:0}
.pwhen{font-family:var(--mono);font-size:12px;color:var(--muted);margin-right:auto}
.pwhen.warn{color:var(--warn);font-weight:600}
.pwhen.crit{color:var(--crit);font-weight:600}
.pdel{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer;transition:background .16s ease,color .16s ease}
.pdel:hover{background:var(--crit-soft);color:var(--crit)}
.peadd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.peadd input[type="date"]{flex:0 1 158px}

/* ---------- tests: strengths and weaknesses ---------- */
.swsplit{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.swhead{margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--line-2)}
.swhead.good{color:var(--good);border-bottom-color:color-mix(in srgb,var(--good) 40%,transparent)}
.swhead.crit{color:var(--crit);border-bottom-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.swrow{gap:9px}
.swrow .t b{font-size:13px}
.swmeta{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;font-family:var(--mono)}
.swrow.strong .t b::before{content:"▲";color:var(--good);font-size:9px;margin-right:6px;vertical-align:1px}
.swrow.weak .t b::before{content:"▼";color:var(--crit);font-size:9px;margin-right:6px;vertical-align:1px}

.subjbreak{display:flex;flex-direction:column;gap:8px}
.sbcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2);
  transition:box-shadow .2s ease,border-color .2s ease}
.sbcard.open{box-shadow:var(--shadow-s);border-color:color-mix(in srgb,var(--navy-2) 28%,var(--line))}
.sbhead{width:100%;display:flex;align-items:center;gap:11px;padding:11px 13px;border:0;background:none;
  cursor:pointer;text-align:left;font-family:var(--body);color:var(--ink)}
.sbhead:hover{background:var(--surface-3)}
.sbname{flex:1 1 120px;min-width:0;font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbbar{flex:0 0 72px;height:7px;border-radius:999px;background:var(--line-2);overflow:hidden}
.sbbar i{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.22,.75,.3,1)}
.sbchev{font-size:12px;color:var(--muted);transition:transform .22s ease}
.sbcard.open .sbchev{transform:rotate(180deg)}
.sbbody{padding:2px 13px 10px;animation:slideDown .24s ease both}
.sbtest{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--line-2)}
.sbtest b{flex:1 1 140px;min-width:0;font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbtest span{font-size:12px;color:var(--muted);font-family:var(--mono)}
.sbtest em{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;min-width:42px;text-align:right}
.sbtest em.good{color:var(--good)}.sbtest em.warn{color:var(--warn)}.sbtest em.crit{color:var(--crit)}

/* ---------- badge vault ---------- */
.badgeprog{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.badgeprog .bar{flex:1 1 auto;height:9px}
.badgeprog .bar i{background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.badgeprog span{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap}
.bgroup{margin-bottom:26px}
.bgroup:last-child{margin-bottom:0}
.bghead{display:flex;align-items:center;gap:12px;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.bghead>div{flex:1 1 auto;min-width:0}
.bghead b{display:block;font-size:13.5px;font-weight:700}
.bghead span{display:block;font-size:12px;color:var(--muted)}

/* ---------- the celebration ---------- */
/* A short phone in landscape can make any of these taller than the screen, so
   they scroll rather than pushing their own buttons out of reach. */
.celebrate{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:24px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:color-mix(in srgb,var(--navy-deep) 76%,transparent);backdrop-filter:blur(7px);
  animation:fadeIn .22s ease both}
.celebrate>.celcard{margin:auto}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-16px;width:8px;height:14px;border-radius:2px;opacity:.95;
  animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(760deg);opacity:.15}}
.celcard{position:relative;width:min(380px,100%);text-align:center;padding:30px 26px 24px;border-radius:22px;
  background:linear-gradient(165deg,var(--surface),var(--surface-2));border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);
  box-shadow:var(--shadow-l),0 0 0 6px color-mix(in srgb,var(--gold) 9%,transparent);
  animation:popIn .48s cubic-bezier(.2,1.3,.4,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.82) translateY(14px)}to{opacity:1;transform:none}}
.celemblem{font-size:62px;line-height:1;filter:drop-shadow(0 10px 18px rgba(169,123,18,.34));
  animation:emblemPulse 2.4s ease-in-out infinite}
@keyframes emblemPulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.09) rotate(2deg)}}
.celeyebrow{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-top:14px}
.celcard h3{font-family:var(--display);font-size:22px;font-weight:800;margin:6px 0 8px;letter-spacing:-.01em}
.celcard p{font-size:12.5px;color:var(--ink-2);margin:0 0 20px}
.celbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- the share card ---------- */
.sharewrap{position:fixed;inset:0;z-index:72;display:flex;align-items:center;justify-content:center;
  padding:20px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:color-mix(in srgb,var(--navy-deep) 80%,transparent);backdrop-filter:blur(7px);animation:fadeIn .22s ease both}
.sharewrap>.sharebox,.sharewrap>.acctbox{margin:auto}
.sharebox{width:min(400px,100%);animation:popIn .4s cubic-bezier(.2,1.2,.4,1) both;display:flex;flex-direction:column}
.sharecard{border-radius:20px;padding:24px 22px 18px;color:#F4F1E6;
  background:radial-gradient(120% 90% at 78% -10%,#22407F 0%,#13285F 42%,#0B1838 100%);
  border:1px solid rgba(225,180,63,.34);box-shadow:0 28px 60px -28px rgba(0,0,0,.85)}
.shtop{display:flex;align-items:center;gap:11px;padding-bottom:16px;border-bottom:1px solid rgba(225,180,63,.24)}
.shtop img{width:38px;height:38px;object-fit:contain}
.shbrand b{display:block;font-family:var(--display);font-size:13.5px;font-weight:800;letter-spacing:.11em;color:#E1B43F}
.shbrand span{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,230,.58)}
.shname{font-family:var(--display);font-size:24px;font-weight:800;margin-top:18px;line-height:1.15;letter-spacing:-.01em}
.shlevel{font-family:var(--mono);font-size:12px;color:#E1B43F;margin-top:5px}
.shstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.shstats>div{text-align:center;padding:11px 4px;border-radius:12px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09)}
.shstats .e{display:block;font-size:15px;line-height:1.1}
.shstats b{display:block;font-family:var(--mono);font-size:16px;font-weight:700;margin-top:4px}
.shstats i{display:block;font-style:normal;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(244,241,230,.55);margin-top:2px}
.shbadgehead{color:rgba(244,241,230,.55)!important;margin:20px 0 9px}
.shbadges{display:flex;flex-wrap:wrap;gap:7px;min-height:34px}
.shb{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  background:rgba(225,180,63,.13);border:1px solid rgba(225,180,63,.3)}
.shfoot{display:flex;justify-content:space-between;gap:10px;margin-top:20px;padding-top:13px;
  border-top:1px solid rgba(225,180,63,.24);font-family:var(--mono);font-size:9.5px;color:rgba(244,241,230,.5)}
.sharebtns{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.sharebtns .hint{flex:1 1 180px;color:rgba(244,241,230,.72)}

/* ---------- how to play ---------- */
.guidecard .body{padding-bottom:22px}
.glead{font-size:14px;line-height:1.65;color:var(--ink-2);margin:0 0 22px;padding-left:14px;
  border-left:3px solid var(--gold-bright)}
.glead b{color:var(--ink)}
.gsteps{display:flex;flex-direction:column;gap:12px}
.gstep{display:flex;gap:13px;padding:14px 15px;border-radius:13px;background:var(--surface-2);
  border:1px solid var(--line-2);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.gstep:hover{transform:translateX(3px);box-shadow:var(--shadow-s);border-color:var(--line)}
.gnum{flex:0 0 auto;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:700;color:#26200C;
  background:linear-gradient(160deg,var(--gold-lift),var(--gold-bright));box-shadow:var(--shadow-s)}
.gstep>div{min-width:0}
.gstep>div>b{display:block;font-size:13.5px;font-weight:700;margin-bottom:4px}
.gstep p b{color:var(--ink);font-weight:700}
.gstep p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.gxp,.glevels{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.xptable{display:flex;flex-direction:column;gap:7px}
.xprow{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--line-2)}
.xpe{flex:0 0 auto;font-size:17px;line-height:1}
.xpt{flex:1 1 auto;min-width:0}
.xpt b{display:block;font-size:12.5px;font-weight:600}
.xpt span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.xpmax{display:inline-block;white-space:nowrap;margin-top:5px;font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--navy);background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:2px 8px}
.xptotal{margin-top:6px;border:2px solid var(--gold-bright);background:var(--surface)}
.xptotal .xpt b{font-size:13.5px}
.xptotal em{font-size:14px}
.xptotal .xpe{color:var(--gold-bright)}
#xpBreak i svg{width:14px;height:14px;vertical-align:-2px}
.xprow em{flex:0 0 auto;font-style:normal;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--gold);text-align:right;max-width:44%}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}
.lvstep{text-align:center;padding:14px 8px 12px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line-2);opacity:.6;transition:transform .2s ease,opacity .2s ease}
.lvstep.passed{opacity:1;border-color:color-mix(in srgb,var(--good) 30%,transparent);background:var(--good-soft)}
.lvstep.here{opacity:1;transform:translateY(-4px);border-color:var(--gold-bright);
  background:linear-gradient(160deg,var(--gold-soft),color-mix(in srgb,var(--gold-soft) 45%,var(--surface)));
  box-shadow:var(--shadow-s)}
.lve{display:block;font-size:22px;line-height:1.1}
.lvstep b{display:block;font-size:12px;font-weight:700;margin-top:6px;line-height:1.3}
.lvstep i{display:block;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:3px}
.gclose{margin:24px 0 0;padding:14px 16px;border-radius:12px;background:var(--navy-soft);
  font-size:12.5px;line-height:1.6;color:var(--navy-2)}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .swsplit{grid-template-columns:1fr;gap:22px}
  .shstats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .catchbar{margin:0 14px 2px;padding:11px 12px}
  .dayswitch{order:3}
  .card>header .dayswitch button{padding:6px 11px}
  .trophy{width:80px}
  .revitem.open{padding:0 10px}
  .pedate{flex-wrap:wrap}
  .pedate input[type="date"]{flex:1 1 130px}
  .pwhen{flex:1 1 auto}
  .gstep{padding:13px}
  .gstep:hover{transform:none}
  .xprow{align-items:flex-start}
  .xprow em{max-width:38%}
  .sharecard{padding:20px 18px 16px}
  .shname{font-size:21px}
  .celcard{padding:26px 20px 20px}
  .celemblem{font-size:54px}
}
@media (max-width:420px){
  .ladder{grid-template-columns:repeat(2,1fr)}
  .pehead{gap:8px}
  .modeswitch button{padding:6px 10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .celemblem,.confetti i{animation:none}
  .gstep:hover,.trophy:hover{transform:none}
}

/* ===========================================================
   Round 8 — account, subject balance, prior history,
   tappable badges, the drawn share card and the FAQ.
   =========================================================== */

.navbtn{border:0;background:none;font-family:var(--body);font-size:inherit;font-weight:inherit;
  color:inherit;cursor:pointer;padding:0;text-decoration:none}
.navbtn:hover{color:var(--gold)}
.offscreen{position:absolute;left:-99999px;top:0;width:1px;height:1px;pointer-events:none}

/* ---------- badges are buttons now ---------- */
.badge{font-family:var(--body);text-align:left;width:100%;cursor:pointer;color:inherit;
  -webkit-appearance:none;appearance:none}
.badge:focus-visible,.trophy:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.badge:active{transform:translateY(-1px)}
.trophy{border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);font-family:var(--body);cursor:pointer;color:inherit}
.trophies.wrapped{flex-wrap:wrap;overflow:visible}
.trophymore{margin-top:10px}
.celemblem.locked{filter:grayscale(1);opacity:.5}

/* ---------- arriving with history ---------- */
.priorpanel{margin:14px 0 4px;padding:15px 16px;border-radius:13px;background:var(--surface-2);
  border:1px dashed var(--line);animation:slideDown .28s cubic-bezier(.22,.75,.3,1) both}
.priorgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.priorgrid label{display:block;font-size:12px;font-weight:600;color:var(--ink-2)}
.priorgrid input{width:100%;margin-top:6px}

/* ---------- subject balance ---------- */
.balnote{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding:13px 15px;border-radius:12px;
  background:linear-gradient(120deg,var(--crit-soft),color-mix(in srgb,var(--crit-soft) 40%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--crit) 24%,transparent)}
.balnote>span{font-size:20px;line-height:1.1}
.balnote b{display:block;font-size:13px;color:var(--crit)}
.balnote span:last-child{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
.balrows{display:flex;flex-direction:column;gap:9px}
.balrow{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line-2)}
.balrow.over{border-color:color-mix(in srgb,var(--crit) 26%,transparent)}
.balname{flex:1 1 150px;min-width:0}
.balname b{display:block;font-size:13px;font-weight:600}
.balname span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.balbar{flex:0 0 120px;height:9px;border-radius:999px;background:var(--line-2);overflow:hidden}
.balbar i{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.22,.75,.3,1);
  background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.balbar i.cold{background:linear-gradient(90deg,var(--calm),var(--crit))}
.balnum{flex:0 0 auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);min-width:64px;text-align:right}

/* ---------- the account sheet ---------- */
.acctbox{width:min(440px,100%);border-radius:20px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-l);animation:popIn .4s cubic-bezier(.2,1.2,.4,1) both}
.acctbox>header{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.acctbox>header h3{margin:0;font-size:15px;font-weight:700;flex:1 1 auto}
.acctbody{padding:6px 18px 20px}
.acctrow{padding:16px 0;border-bottom:1px solid var(--line-2)}
.acctrow:last-of-type{border-bottom:0}
.acctmail{margin:6px 0 4px;font-family:var(--mono);font-size:13px;font-weight:600;word-break:break-all}
.acctform{display:flex;gap:9px;flex-wrap:wrap}
.acctform.col{flex-direction:column}
.acctform input{flex:1 1 150px;min-width:0}
.acctnote{margin:4px 0 0;padding-top:14px;border-top:1px dashed var(--line);line-height:1.6}

/* ---------- the share card ---------- */
.shbadgehero{display:flex;align-items:center;gap:15px;margin-top:20px;padding:16px;border-radius:16px;
  background:rgba(225,180,63,.11);border:1px solid rgba(225,180,63,.32)}
.shemblem{font-size:52px;line-height:1;flex:0 0 auto;
  filter:drop-shadow(0 8px 16px rgba(225,180,63,.35))}
.shbadgehero>div{min-width:0}
.shbadgehero i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#E1B43F}
.shbadgehero b{display:block;font-family:var(--display);font-size:19px;font-weight:800;margin-top:3px;line-height:1.2}
.shbadgehero>div>span{display:block;font-size:12px;color:rgba(244,241,230,.62);margin-top:3px;line-height:1.4}
.sharebtns{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.sharebtns .btn{flex:1 1 auto}
.sharehint{margin:10px 2px 0;color:rgba(244,241,230,.7);line-height:1.5}

/* ---------- the FAQ ---------- */
.gfaq{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.faq{display:flex;flex-direction:column;gap:9px}
.faqq{padding:12px 14px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line-2)}
.faqq b{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px}
.faqq span{display:block;font-size:12px;line-height:1.6;color:var(--ink-2)}
.faqq span b{display:inline;font-size:inherit}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .priorgrid{grid-template-columns:1fr 1fr}
  .priorgrid label:last-child{grid-column:1 / -1}
}
@media (max-width:600px){
  .balrow{flex-wrap:wrap;gap:8px 12px}
  .balname{flex:1 1 100%}
  .balbar{flex:1 1 auto}
  .balnum{min-width:0}
  .acctbox{width:100%}
  .acctform{flex-direction:column}
  .acctform .btn{width:100%}
  .sharebtns .btn{flex:1 1 46%}
  .shbadgehero{gap:12px;padding:13px}
  .shemblem{font-size:42px}
}

/* ---------- admin: reset link + change history ---------- */
.resetout{margin-top:14px;padding:13px 15px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.resetlink{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.resetlink code{flex:1 1 240px;min-width:0;font-family:var(--mono);font-size:12px;padding:8px 10px;
  border-radius:8px;background:var(--surface-3);border:1px solid var(--line-2);
  overflow-wrap:anywhere;color:var(--ink-2)}
/* the "I've studied this before" toggle sits beside Add, not under it */
#rvPriorBtn{align-self:stretch}
#rvPriorBtn.pri{background:linear-gradient(180deg,var(--gold-lift),var(--gold-bright));
  border-color:var(--gold-bright);color:#26200C}
@media (max-width:760px){
  /* topic on its own row, subject on its own row, then Add and the history
     toggle side by side rather than the toggle stretched across the card.
     These have to beat the generic single-column rule above, hence the
     repeated class. */
  .form.rev.rev{grid-template-columns:1fr auto}
  .form.rev.rev>input:first-child,.form.rev.rev>.subjpick{grid-column:1 / -1}
  .form.rev.rev>#rvAdd{grid-column:1}
  .form.rev.rev>#rvPriorBtn{grid-column:2}
}

/* very short screens: the confetti layer must not trap the scroll */
@media (max-height:620px){
  .celcard{padding:20px 18px 16px}
  .celemblem{font-size:44px}
  .celcard h3{font-size:19px}
}

/* Very narrow phones (320px): aspect-ratio plus a min-height forces each day
   cell wider than its grid track, which pushes the whole page sideways. Let
   the width drive the height instead. */
@media (max-width:380px){
  .calgrid{gap:4px}
  .calday{min-height:0;max-height:none;padding:3px 4px;border-radius:8px}
  .calday span{font-size:9.5px}
  .calday .dot,.calday.brk::after{left:5px;bottom:5px;width:5px;height:5px}
  .calhead{font-size:8.5px;letter-spacing:.08em}
  .mini{grid-template-columns:repeat(2,1fr)}
}

/* ===========================================================
   Round 9 — the theme switch
   =========================================================== */
.themetog{position:relative;width:52px;height:28px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:var(--surface-2);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.themetog:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));box-shadow:var(--shadow-s)}
.themetog:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
/* The thumb is gold in both themes with a dark glyph on it, so the switch is
   legible at a glance on either ground — it is the position that tells you
   which theme you are in, not a colour you have to squint at. */
.themetog .thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;
  background:linear-gradient(160deg,var(--gold-lift),var(--gold-bright));
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.themetog .thumb i{position:absolute;font-size:12px;line-height:1;color:#2A2004;
  transition:opacity .2s ease,transform .3s ease}
.themetog .tmoon{opacity:1}
.themetog .tsun{opacity:0;transform:rotate(-90deg)}
:root[data-theme$="-light"] .themetog{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
:root[data-theme$="-light"] .themetog .thumb{transform:translateX(24px)}
:root[data-theme$="-light"] .themetog .tmoon{opacity:0;transform:rotate(90deg)}
:root[data-theme$="-light"] .themetog .tsun{opacity:1;transform:none;color:#4A3505}
.themetog.floating{position:fixed;top:18px;right:18px;z-index:9}

/* A theme swap should not replay every entrance animation at once. */
.theme-swap *,.theme-swap *::before,.theme-swap *::after{
  transition:background-color .26s ease,color .26s ease,border-color .26s ease,box-shadow .26s ease !important;
  animation:none !important}

/* ---------- the share sheet's buttons ---------- */
.sharebtns{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.sharebtns .btn{flex:1 1 calc(50% - 5px);justify-content:center;padding:11px 14px}
.sharebtns .btn.wide{flex:1 1 100%;font-size:13.5px;padding:13px 16px}
.sharebtns .btn span{margin-right:2px}
@media (max-width:420px){
  .sharebtns .btn{flex:1 1 100%}
}

/* ===========================================================
   Round 10 — the phone topbar

   The brand was the only flexible item in the bar, so every pixel the
   clock, the theme switch and the two links needed was taken out of it.
   Squashed past its content the wordmark simply spilled out of its box
   and ran underneath the clock — which is what looked like the time
   overlapping the logo. Now the wordmark can never overflow, the
   tagline steps aside on a phone, and below 480px the crest carries the
   brand on its own.
   =========================================================== */
@media (max-width:760px){
  .brand{min-width:0}
  .brand img{flex:none}
  .brand .tag{display:none}
  .brand .wordmark{min-width:0;max-width:100%;overflow:hidden}
  .brand .wordmark b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .topbar-in{gap:8px}
  .clock{padding:6px 9px;gap:6px}
  .topnav{gap:0}
  .topnav a,.topnav .navbtn{padding:6px 7px;font-size:12px}
  .themetog{width:46px;height:25px}
  .themetog .thumb{width:19px;height:19px}
  :root[data-theme$="-light"] .themetog .thumb{transform:translateX(21px)}
}
@media (max-width:520px){
  /* the crest is the brand at this width; the words only get in the way */
  .brand .wordmark{display:none}
  .brand img{width:32px;height:32px}
}

/* ---------- where today's XP came from ---------- */
.xpbreak{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:7px}
.xpbreak span{display:inline-flex;align-items:baseline;gap:4px;font-size:12px;color:var(--muted);white-space:nowrap}
.xpbreak i{font-style:normal;font-size:12px}
.xpbreak b{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--ink-2)}
@media (max-width:420px){.xpbreak{gap:3px 9px}.xpbreak span{font-size:12px}}

/* ===========================================================
   Round 11 — characters, the duel, and the app shell
   =========================================================== */

/* ---------- the face ---------- */
/* ---------------------------------------------------------------
   ONE NUMBER SETS THE WHOLE FACE. Every size below changes --d and
   nothing else: the circle, the glyph and the line box can no longer
   drift apart, which is what put the emoji outside its circle twice.

   The glyph is centred by line-height rather than by flex. Flex with
   line-height:1 centres a box the height of the font size, but an
   emoji font's ink is taller than that and hangs above the baseline,
   so on Windows (Segoe UI Emoji) it rode up and out. A line-height
   equal to the circle spreads the leftover space evenly above and
   below the font's own ascent and descent, which is where the ink
   actually is — so it lands centred whatever emoji font is installed.
   --------------------------------------------------------------- */
.face{--d:32px;
  display:block;text-align:center;
  width:var(--d);height:var(--d);line-height:var(--d);
  font-size:calc(var(--d) * .52);
  border-radius:50%;flex:none;overflow:hidden;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--body);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.28);
  user-select:none}
.myface{width:52px;height:52px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;
  flex:none;transition:transform .2s cubic-bezier(.3,1.3,.5,1)}
.myface .face{--d:52px}
.myface:hover{transform:scale(1.07) rotate(-4deg)}
.myface:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:50%}

/* ---------- picking one ---------- */
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;
  max-height:320px;overflow-y:auto;padding:4px;margin:0 -4px;
  border:1px solid var(--line-2);border-radius:13px;background:var(--surface-2)}
.avpick{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 8px;
  border:1px solid transparent;border-radius:11px;background:none;cursor:pointer;
  font-family:var(--body);transition:background .16s,border-color .16s,transform .16s}
.avpick:hover{background:var(--surface-3);transform:translateY(-2px)}
.avpick.on{border-color:var(--gold-bright);background:var(--gold-soft)}
.avpick i{font-style:normal;font-size:9.5px;font-weight:600;color:var(--muted);
  text-align:center;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avpick.on i{color:var(--gold)}
.avpick:focus-visible{outline:2px solid var(--gold-bright);outline-offset:1px}

/* ---------- leaderboard faces ---------- */
td.who{display:flex;align-items:center;gap:9px;font-weight:600}
.whoname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raceme{margin-left:auto;border:1px solid var(--line);background:none;color:var(--muted);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;cursor:pointer;opacity:0;transition:opacity .16s,color .16s,border-color .16s}
tr:hover .raceme,.raceme:focus-visible{opacity:1}
.raceme:hover{color:var(--gold);border-color:var(--gold)}
tr.rival{background:color-mix(in srgb,var(--gold-soft) 55%,transparent)}
tr.rival .raceme{opacity:1;color:var(--gold);border-color:var(--gold)}
.pod .face{margin:0 auto 6px}

/* ---------- head to head ---------- */
.duel{margin:14px 0 18px;padding:15px 16px;border-radius:15px;
  background:linear-gradient(140deg,var(--surface-2),var(--surface-3));
  border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line))}
.duelhead{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.duelhead .eyebrow{margin:0;flex:1 1 auto}
.duelrow{display:flex;align-items:center;gap:12px}
.duelside{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:11px}
.duelside.them{flex-direction:row-reverse;text-align:right}
.duelside>div{min-width:0}
/* scoped to the text block on purpose: the avatar beside it is a <span>
   too, and a loose ".duelside span" was silently resetting its font size —
   which is the whole reason the emoji stopped matching its circle */
.duelside>div b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duelside>div span{display:block;font-family:var(--mono);font-size:12px;color:var(--gold);margin-top:2px}
.duelside>div i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
/* on a phone the two sides and the score fight for the same 350 pixels, so
   the faces come down a little and the middle stops stealing width */
@media (max-width:430px){
  .duelrow{gap:8px}
  .duelside{gap:8px}
  .duelside .face{--d:38px!important}
  .duelside>div b{font-size:12.5px}
  .duelside>div span{font-size:12px}
  .duelside>div i{font-size:12px}
}
.duelvs{flex:none;text-align:center;padding:0 4px}
.duelvs b{display:block;font-family:var(--mono);font-size:20px;font-weight:700;line-height:1.1}
.duelvs b.good{color:var(--good)} .duelvs b.crit{color:var(--crit)}
.duelvs span{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.duelpick{display:flex;align-items:flex-start;gap:12px;margin:14px 0 18px;padding:13px 15px;
  border-radius:13px;background:var(--surface-2);border:1px dashed var(--line)}
.duelpick>span{font-size:19px;line-height:1.1}
.duelpick b{display:block;font-size:13px}
.duelpick span:last-child{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}

@media (max-width:600px){
  .avgrid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));max-height:270px}
  .duelrow{gap:8px}
  .duelside{gap:8px}
  .duelside>div b{font-size:12.5px}
  .raceme{opacity:1}
  .myface{width:44px;height:44px}
  .myface .face{--d:44px}
}

/* ---------- offline + install bars ---------- */
.offbar{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:10px;
  padding:9px 18px;font-size:12px;font-weight:600;
  background:linear-gradient(90deg,var(--warn-soft),color-mix(in srgb,var(--warn-soft) 50%,var(--surface)));
  color:var(--warn);border-bottom:1px solid color-mix(in srgb,var(--warn) 28%,transparent)}
.offbar>span:first-child{font-size:14px}

.installbar{display:flex;align-items:center;gap:12px;max-width:1000px;margin:14px auto 0;
  padding:12px 15px;border-radius:14px;background:var(--surface-2);
  border:1px solid color-mix(in srgb,var(--gold) 28%,var(--line));box-shadow:var(--shadow-s);
  animation:slideDown .35s cubic-bezier(.22,.75,.3,1) both}
.installbar img{border-radius:10px;flex:none}
.installbar>div{flex:1 1 auto;min-width:0}
.installbar b{display:block;font-size:13px}
.installbar span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
@media (max-width:600px){
  .installbar{margin:12px 14px 0;flex-wrap:wrap}
  .installbar>div{flex:1 1 100%;order:2}
  .installbar img{order:1}
  .installbar .btn{order:3;flex:1 1 auto}
  .offbar{padding:8px 14px;font-size:12px}
}

/* ---------- mentorship triage ---------- */
.triage{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tr{padding:13px 14px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line-2)}
.tr b{display:block;font-family:var(--mono);font-size:26px;font-weight:700;line-height:1.1;color:var(--muted)}
.tr span{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-top:3px}
.tr i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:7px;line-height:1.45}
.tr.crit{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 28%,transparent)}
.tr.crit b,.tr.crit span{color:var(--crit)}
.tr.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.tr.warn b,.tr.warn span{color:var(--warn)}
.tr.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.tr.good b,.tr.good span{color:var(--good)}
tr.urgent{background:color-mix(in srgb,var(--crit-soft) 45%,transparent)}
.mface{display:inline-flex;align-items:center;gap:8px}
@media (max-width:760px){.triage{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.triage{grid-template-columns:1fr}.tr i{display:none}}

/* ===========================================================
   THE CONSISTENCY COACH
   =========================================================== */
.coachcard .body{padding-top:18px}
.coachtop{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

.cring{position:relative;width:118px;height:118px;flex:0 0 auto}
.cring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.cring circle{fill:none;stroke-width:9;stroke-linecap:round}
.cring .cr-bg{stroke:var(--line-2)}
.cring .cr-fg{stroke:var(--calm);transition:stroke-dashoffset 1.1s cubic-bezier(.22,.9,.3,1)}
.cring.great .cr-fg{stroke:var(--good)}
.cring.good  .cr-fg{stroke:var(--gold-bright)}
.cring.warn  .cr-fg{stroke:var(--warn)}
.cring.low   .cr-fg{stroke:var(--crit)}
.cring-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px}
.cring-in b{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:-.02em}
.cring-in span{font-size:13px;color:var(--muted);margin-top:8px}
.cring.great .cring-in b{color:var(--good)}
.cring.good  .cring-in b{color:var(--gold-bright)}
.cring.warn  .cring-in b{color:var(--warn)}
.cring.low   .cring-in b{color:var(--crit)}

.coachsum{flex:1 1 260px;min-width:0}
.cheadline{font-family:var(--display);font-size:19px;line-height:1.3;letter-spacing:-.01em}
.cheadline b{color:var(--gold-bright)}
.coachsum .hint{margin:7px 0 0}

.cfacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cfact{display:flex;align-items:baseline;gap:6px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:999px;padding:5px 12px 6px}
.cfact span{font-size:12px}
.cfact b{font-family:var(--display);font-size:15px}
.cfact em{font-style:normal;font-size:12px;color:var(--muted)}
.cfact.goal{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 26%,transparent)}
.cfact.goal b{color:var(--gold-bright)}

.cnext{display:flex;align-items:center;gap:14px;margin-top:20px;padding:15px 16px;
  border-radius:var(--r-s);background:linear-gradient(140deg,var(--navy-soft),var(--surface-2));
  border:1px solid var(--line);position:relative;overflow:hidden}
.cnext::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 90px at 8% 0%,rgba(225,180,63,.09),transparent 70%)}
.cnext-i{font-size:24px;flex:0 0 auto;animation:cnudge 3.4s ease-in-out infinite}
.cnext-t{flex:1 1 auto;min-width:0}
.cnext-t b{display:block;font-family:var(--display);font-size:15.5px;letter-spacing:-.005em}
.cnext-t span{display:block;font-size:13px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.cnext .btn{flex:0 0 auto}
@keyframes cnudge{0%,88%,100%{transform:translateY(0)}92%{transform:translateY(-4px)}96%{transform:translateY(-1px)}}

.cweek{margin-top:22px}
.cbars{display:flex;gap:8px;align-items:flex-end}
.cbar{flex:1 1 0;min-width:0;text-align:center}
.cb-t{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:5px}
.cb-track{height:74px;border-radius:7px;background:var(--surface-2);border:1px solid var(--line-2);
  display:flex;align-items:flex-end;overflow:hidden}
.cb-track i{display:block;width:100%;border-radius:6px;
  background:linear-gradient(180deg,var(--navy-2),var(--navy));
  transition:height .7s cubic-bezier(.22,.9,.3,1)}
.cbar.weak .cb-track{border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.cbar.weak .cb-track i{background:linear-gradient(180deg,var(--crit),color-mix(in srgb,var(--crit) 60%,#000))}
.cbar.weak .cb-t,.cbar.weak .cb-d{color:var(--crit)}
.cb-d{font-size:12px;color:var(--ink-2);margin-top:6px}

.cbounce{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:14px 15px;
  border-radius:var(--r-s);border:1px solid var(--line)}
.cbounce.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.cbounce.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.cbounce>span{font-size:19px;line-height:1.2}
.cbounce b{display:block;font-size:14px;letter-spacing:-.005em}
.cbounce.good b{color:var(--good)}
.cbounce.warn b{color:var(--warn)}
.cbounce div span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.55}

.clevers{margin-top:20px;border-top:1px solid var(--line-2);padding-top:14px}
.clevers summary{cursor:pointer;font-size:13.5px;color:var(--ink-2);list-style:none;
  display:flex;align-items:center;gap:8px;user-select:none}
.clevers summary::-webkit-details-marker{display:none}
.clevers summary::after{content:"▾";margin-left:auto;color:var(--muted);transition:transform .18s}
.clevers[open] summary::after{transform:rotate(180deg)}
.clevers summary:hover{color:var(--ink)}
.clev{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.cl{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:14px 15px}
.cl-i{font-size:19px;margin-bottom:7px}
.cl b{display:block;font-family:var(--display);font-size:14.5px;letter-spacing:-.005em;margin-bottom:5px}
.cl p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.6}

.flashme{animation:flashme 1.6s ease}
@keyframes flashme{
  0%,100%{box-shadow:0 0 0 0 transparent}
  15%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent);border-radius:var(--r-s)}
}

@media (max-width:560px){
  .coachtop{gap:16px}
  .cring{width:96px;height:96px}
  .cring-in b{font-size:26px}
  .cheadline{font-size:17px}
  .cnext{flex-wrap:wrap}
  .cnext .btn{width:100%;margin-top:4px}
  .cb-track{height:60px}
  .cbars{gap:5px}
  .cb-t{font-size:9.5px}
  .cb-d{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .cnext-i{animation:none}
  .cring .cr-fg,.cb-track i{transition:none}
  .flashme{animation:none}
}

/* ===========================================================
   HOW TO PLAY — "Your first 100 days"
   A scrolled story. Every scene is drawn in SVG so it weighs
   nothing, works offline and recolours itself with the theme.
   =========================================================== */
.storycard .body{padding-top:18px}
.story{position:relative;padding-left:42px;margin-top:22px}

.spine{position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--line-2);border-radius:2px}
.spine i{position:absolute;left:0;top:0;width:100%;border-radius:2px;height:0;
  background:linear-gradient(180deg,var(--gold),var(--navy-2));transition:height .25s linear}
.spine .walker{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;background:var(--surface);border:2px solid var(--gold);
  box-shadow:0 0 0 4px var(--bg),0 4px 14px -6px rgba(0,0,0,.6);transition:top .25s linear;z-index:2}

.scene{position:relative;display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:6px 26px;align-items:center;padding:30px 0;border-bottom:1px dashed var(--line-2)}
.scene:last-of-type{border-bottom:0}
.scene::before{content:"";position:absolute;left:-35px;top:40px;width:13px;height:13px;border-radius:50%;
  background:var(--surface-3);border:2px solid var(--line);transition:background .3s,border-color .3s,transform .3s}
.scene.in::before{background:var(--gold);border-color:var(--gold-lift);transform:scale(1.15)}

.s-tag{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.s-tag b{font-family:var(--display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-bright);background:var(--gold-soft);padding:4px 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent)}
.s-tag span{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

.s-art{grid-column:1;background:linear-gradient(150deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:12px;overflow:hidden}
.s-art svg{width:100%;height:auto;display:block}
.s-txt{grid-column:2;min-width:0}
.s-txt h3{margin:0 0 8px;font-family:var(--display);font-size:18px;line-height:1.28;letter-spacing:-.012em}
.s-txt p{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.s-txt .s-rule{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-s);font-size:13px;color:var(--ink);
  background:var(--navy-soft);border-left:3px solid var(--navy-2)}
.s-txt .s-rule b{color:var(--gold-bright)}
.scene-dark .s-txt .s-rule{background:var(--crit-soft);border-left-color:var(--crit)}
.scene-dark .s-txt .s-rule b{color:var(--crit)}
.scene-gold .s-txt .s-rule{background:var(--gold-soft);border-left-color:var(--gold)}

/* --- the scene entrance --- */
.scene .s-art,.scene .s-txt,.scene .s-tag{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.9,.3,1)}
.scene.in .s-tag{opacity:1;transform:none}
.scene.in .s-art{opacity:1;transform:none;transition-delay:.06s}
.scene.in .s-txt{opacity:1;transform:none;transition-delay:.12s}

/* --- shared SVG furniture --- */
.s-art .a-card{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.s-art .a-box{fill:none;stroke:var(--line);stroke-width:1.6}
.s-art .a-box.on{stroke:var(--good)}
.s-art .a-line{fill:var(--line)}
.s-art .a-line.dim{fill:var(--line-2)}
.s-art .a-tick{fill:none;stroke:var(--good);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14}
.scene.in .a-tick{animation:sdraw .42s cubic-bezier(.3,.9,.4,1) forwards}
.scene.in .a-tick.t1{animation-delay:.32s}
.scene.in .a-tick.t2{animation-delay:.52s}
.scene.in .a-tick.t3{animation-delay:.72s}
@keyframes sdraw{to{stroke-dashoffset:0}}

.s-art text{font-family:var(--body);text-anchor:middle}
.s-art .a-cap{fill:var(--muted);font-size:9.5px;letter-spacing:.04em}
.s-art .a-cap.w{fill:var(--ink-2)}
.s-art .a-cap.gold{fill:var(--gold-bright);font-weight:600;font-size:12px}
.s-art .a-cap.crit{fill:var(--crit);font-weight:600}
.s-art .a-cap.crit.big{font-size:12px}
.s-art .a-cap.l{font-size:12px;fill:var(--ink)}
.s-art .a-emoji{font-size:17px}
.s-art .a-emoji.sm{font-size:13px}
.s-art .a-xp{fill:var(--gold-bright);font-family:var(--display);font-size:22px;font-weight:700}

.s-art .a-halo{fill:var(--line-2)}
.s-art .a-flame.off{opacity:.35}
.scene.in .a-pop{opacity:0;animation:spop .6s cubic-bezier(.2,1.5,.4,1) .9s forwards}
@keyframes spop{0%{opacity:0;transform:translateY(8px) scale(.85)}100%{opacity:1;transform:none}}
.s-art .a-pop{transform-box:fill-box;transform-origin:center}

/* --- day 3: the ladder --- */
.s-art .a-path{fill:none;stroke:var(--navy-2);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260}
.scene.in .a-path{animation:sdraw2 1.1s cubic-bezier(.3,.8,.3,1) .1s forwards}
@keyframes sdraw2{to{stroke-dashoffset:0}}
.s-art .a-stop{fill:var(--surface);stroke:var(--line);stroke-width:2;opacity:.5}
.scene.in .a-stop{animation:slight .4s ease forwards}
.scene.in .a-stop.s1{animation-delay:.35s}
.scene.in .a-stop.s2{animation-delay:.6s}
.scene.in .a-stop.s3{animation-delay:.85s}
.scene.in .a-stop.s4{animation-delay:1.1s}
@keyframes slight{to{opacity:1;fill:var(--gold);stroke:var(--gold-lift)}}

/* --- day 7 & 12: the chain --- */
.s-art .a-chain rect{fill:var(--navy-2);opacity:0}
.scene.in .a-chain rect{animation:slink .34s cubic-bezier(.2,1.4,.4,1) forwards}
.scene.in .a-chain rect:nth-child(1){animation-delay:.10s}
.scene.in .a-chain rect:nth-child(2){animation-delay:.18s}
.scene.in .a-chain rect:nth-child(3){animation-delay:.26s}
.scene.in .a-chain rect:nth-child(4){animation-delay:.34s}
.scene.in .a-chain rect:nth-child(5){animation-delay:.42s}
.scene.in .a-chain rect:nth-child(6){animation-delay:.50s}
.scene.in .a-chain rect:nth-child(7){animation-delay:.58s}
.scene.in .a-chain rect:nth-child(8){animation-delay:.66s}
@keyframes slink{from{opacity:0;transform:translateY(-6px) scale(.7)}to{opacity:1;transform:none}}
.s-art .a-chain rect{transform-box:fill-box;transform-origin:center}
.s-art .a-chain.broke .gap{fill:none;stroke:var(--crit);stroke-width:1.6;stroke-dasharray:3 3}
.s-art .a-chain.broke .after{fill:var(--good)}
.s-art .a-badgec{fill:var(--gold-soft);stroke:var(--gold);stroke-width:1.6}
.scene.in .a-badge{opacity:0;animation:spop .5s cubic-bezier(.2,1.6,.4,1) .78s forwards;
  transform-box:fill-box;transform-origin:center}

/* --- day 30: the level bar --- */
.s-art .a-bar-bg{fill:var(--line-2)}
.s-art .a-bar-fill{fill:var(--gold);transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.scene.in .a-bar-fill{animation:sfill 1.3s cubic-bezier(.3,.85,.3,1) .2s forwards}
@keyframes sfill{to{transform:scaleX(1)}}
.s-art .a-lvl-old{opacity:1}
.scene.in .a-lvl-old{animation:sfade .5s ease 1.1s forwards}
@keyframes sfade{to{opacity:.3}}
.s-art .a-lvl-new{opacity:0;transform-box:fill-box;transform-origin:center}
.scene.in .a-lvl-new{animation:spop .55s cubic-bezier(.2,1.5,.4,1) 1.25s forwards}

/* --- day 45: the race --- */
.s-art .a-track{fill:var(--line-2)}
.s-art .a-av.me{fill:var(--gold-soft);stroke:var(--gold);stroke-width:2}
.s-art .a-av.them{fill:var(--navy-soft);stroke:var(--navy-2);stroke-width:2}
.s-art .a-run{transform:translateX(26px)}
.scene.in .r-them{animation:srun1 1.5s cubic-bezier(.3,.8,.3,1) .2s forwards}
.scene.in .r-me{animation:srun2 1.5s cubic-bezier(.3,.8,.3,1) .2s forwards}
@keyframes srun1{to{transform:translateX(112px)}}
@keyframes srun2{to{transform:translateX(150px)}}

/* --- day 70: the mock scores --- */
.s-art .a-cols rect{fill:var(--navy-2);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.scene.in .a-cols rect{animation:sgrow .8s cubic-bezier(.3,.9,.3,1) forwards}
.scene.in .a-cols .c1{animation-delay:.10s;--h:.34}
.scene.in .a-cols .c2{animation-delay:.22s;--h:.46}
.scene.in .a-cols .c3{animation-delay:.34s;--h:.58}
.scene.in .a-cols .c4{animation-delay:.46s;--h:.78}
.scene.in .a-cols .c5{animation-delay:.58s;--h:1}
.s-art .a-cols .c5{fill:var(--gold)}
@keyframes sgrow{to{transform:scaleY(var(--h,1))}}

/* --- day 100: the share card --- */
.s-art .a-share{fill:var(--surface);stroke:var(--gold);stroke-width:1.6}
.s-art .a-stats{opacity:0}
.scene.in .a-stats{animation:spop .5s ease .7s forwards;transform-box:fill-box;transform-origin:center}
.s-art .a-spark{opacity:0}
.scene.in .a-spark{animation:ssparkle 2.2s ease .9s infinite}
@keyframes ssparkle{0%,100%{opacity:0}30%,60%{opacity:1}}

.storyend{margin-top:26px;text-align:center;padding:24px 18px;border-radius:var(--r-s);
  background:linear-gradient(150deg,var(--navy-soft),var(--surface-2));border:1px solid var(--line)}
.storyend .se-i{font-size:28px;margin-bottom:6px}
.storyend h3{margin:0 0 6px;font-family:var(--display);font-size:17px;letter-spacing:-.01em}
.storyend p{margin:0;font-size:13px;color:var(--ink-2)}

@media (max-width:720px){
  .story{padding-left:32px}
  .spine{left:9px}
  .scene{grid-template-columns:1fr;gap:14px;padding:26px 0}
  .scene::before{left:-27px;top:32px;width:11px;height:11px}
  .s-art,.s-txt{grid-column:1}
  .s-art{max-width:320px}
  .s-txt h3{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){
  .scene .s-art,.scene .s-txt,.scene .s-tag{opacity:1;transform:none;transition:none}
  .s-art .a-tick{stroke-dashoffset:0}
  .s-art .a-path{stroke-dashoffset:0}
  .s-art .a-stop{opacity:1;fill:var(--gold);stroke:var(--gold-lift)}
  .s-art .a-chain rect{opacity:1}
  .s-art .a-badge,.s-art .a-pop,.s-art .a-stats,.s-art .a-lvl-new{opacity:1}
  .s-art .a-bar-fill{transform:none}
  .s-art .a-cols rect{transform:scaleY(var(--h,1))}
  .s-art .a-cols .c1{--h:.34}.s-art .a-cols .c2{--h:.46}.s-art .a-cols .c3{--h:.58}
  .s-art .a-cols .c4{--h:.78}.s-art .a-cols .c5{--h:1}
  .s-art .r-them{transform:translateX(112px)}
  .s-art .r-me{transform:translateX(150px)}
  .s-art .a-spark{opacity:1}
  .spine i,.spine .walker{transition:none}
  .scene.in .a-tick,.scene.in .a-path,.scene.in .a-stop,.scene.in .a-chain rect,
  .scene.in .a-badge,.scene.in .a-pop,.scene.in .a-stats,.scene.in .a-lvl-new,
  .scene.in .a-lvl-old,.scene.in .a-bar-fill,.scene.in .a-cols rect,
  .scene.in .r-me,.scene.in .r-them,.scene.in .a-spark{animation:none}
}

/* ===========================================================
   LEADERBOARD — turning up vs completion, side by side
   Two different numbers that students kept reading as one, so
   they are drawn in two different colours and captioned below.
   =========================================================== */
.meter{display:flex;align-items:center;gap:7px}
.meter .bar{min-width:46px;flex:1 1 46px;height:6px}
.meter .n{font-size:12px;min-width:30px;text-align:right}
.meter.done .bar i{background:var(--navy-2)}
.meter.done .n{color:var(--ink-2)}
.meter.up .bar i{background:var(--calm)}
.meter.up.great .bar i{background:var(--good)}
.meter.up.good  .bar i{background:var(--gold-bright)}
.meter.up.warn  .bar i{background:var(--warn)}
.meter.up.low   .bar i{background:var(--crit)}
.meter.up.great .n{color:var(--good)}
.meter.up.good  .n{color:var(--gold-bright)}
.meter.up.warn  .n{color:var(--warn)}
.meter.up.low   .n{color:var(--crit)}

.lbkey{margin-top:16px;display:grid;gap:9px}
.lbkey>div{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);line-height:1.55}
.lbkey b{color:var(--ink)}
.lbkey .short{display:none}
@media (max-width:620px){
  .lbkey .short{display:inline;font-style:normal;color:var(--muted);font-size:12px;margin-left:5px}
  .lbkey .short::before{content:"("} .lbkey .short::after{content:")"}
}
.kdot{flex:0 0 auto;width:9px;height:9px;border-radius:3px;margin-top:5px}
.kdot.up{background:var(--gold-bright)}
.kdot.done{background:var(--navy-2)}

@media (max-width:560px){
  .meter .bar{min-width:34px;flex:1 1 34px}
  .meter .n{font-size:12px;min-width:27px}
}

/* On a phone the leaderboard has to show the two numbers it is now about.
   Level is the first thing to go — it is already on the student's own hero
   chip and it reads "Novice Aspirant" for most of the table — and the meters
   drop their bars and keep their figures. Nobody should have to swipe
   sideways to find out whether they are turning up. */
@media (max-width:620px){
  #tab-board table{min-width:0;font-size:12.5px;table-layout:fixed}
  #tab-board th,#tab-board td{padding-left:4px;padding-right:4px}
  #tab-board th:nth-child(3),#tab-board td:nth-child(3){display:none}   /* level */
  #tab-board th[data-short]{font-size:0}
  #tab-board th[data-short]::after{content:attr(data-short);font-size:9.5px;letter-spacing:.11em}
  #tab-board .meter .bar{display:none}
  #tab-board .meter{justify-content:flex-end}
  #tab-board .meter .n{font-size:12px;min-width:0}
  #tab-board td.who{gap:7px;min-width:0}
  #tab-board .whoname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* the race button becomes a two-letter chip, so the name keeps its room */
  #tab-board .raceme{margin-left:5px;padding:2px 5px;font-size:0;flex:0 0 auto}
  #tab-board .raceme::after{content:"vs";font-size:9.5px;letter-spacing:.06em}
  #tab-board tr.rival .raceme::after{content:"vs"}
  /* under table-layout:fixed it is the header cells that set the widths,
     so the rank column has to be pinned on the th, not the td */
  #tab-board .rank{width:18px}
  #tab-board th:nth-child(1){width:18px}
  #tab-board th:nth-child(4),#tab-board td:nth-child(4){width:34px;text-align:right}
  /* wide enough for the word STREAK: pinned any narrower and the header
     overflowed its cell and ran straight into the next one */
  #tab-board th:nth-child(5),#tab-board td:nth-child(5){width:58px;text-align:right}
  /* "100%" needs real room, and two right-aligned figures with no gap read
     as one number — which is how UP and DONE ended up printed as "100%63%" */
  #tab-board th:nth-child(6),#tab-board td:nth-child(6){width:46px;text-align:right}
  #tab-board th:nth-child(7),#tab-board td:nth-child(7){width:48px;text-align:right}
}
@media (max-width:430px){
  #tab-board th:nth-child(5),#tab-board td:nth-child(5){display:none}   /* streak */
  /* scoped to the table: the head-to-head card above it keeps its own size,
     and the glyph shrinks with its circle instead of overflowing it */
  #tab-board table .face{--d:22px!important}
}
/* the smallest phones still in use: every pixel back to the names */
@media (max-width:370px){
  #tab-board th,#tab-board td{padding-left:3px;padding-right:3px}
  #tab-board table .face{--d:19px!important}
  #tab-board td.who{gap:5px}
  #tab-board .raceme{margin-left:3px;padding:2px 4px}
  #tab-board .rank{width:14px}
  #tab-board th:nth-child(1){width:14px}
  #tab-board th:nth-child(4),#tab-board td:nth-child(4){width:32px}
  #tab-board th:nth-child(6),#tab-board td:nth-child(6){width:42px}
  #tab-board th:nth-child(7),#tab-board td:nth-child(7){width:44px}
}

/* ===========================================================
   THE MAINS ANSWER LOG
   =========================================================== */
.mnform{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:16px;margin-bottom:18px;display:grid;gap:13px}
.mnform label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-family:var(--display);
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);min-width:0}
.mnform input,.mnform select,.mnform textarea{font-family:var(--body);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  letter-spacing:normal;text-transform:none;width:100%;min-width:0}
.mnform textarea{resize:vertical;line-height:1.55}
.mnform input:focus,.mnform select:focus,.mnform textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft)}
.mnrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mnrow.four{grid-template-columns:repeat(4,1fr)}
.mnform .subjpick{display:flex;gap:6px;align-items:stretch}
.mnform .subjpick select{flex:1 1 auto}
.mnactions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mnactions .hint{margin:0}

.mnphoto{border-top:1px dashed var(--line-2);padding-top:14px}
.mnprev{margin-top:12px;display:flex;gap:12px;align-items:flex-start}
.mnprev img{width:96px;height:96px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.mnprev>div{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.mnprev b{font-size:12px;color:var(--good);font-family:var(--mono)}

.mnitem{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:14px 15px;margin-bottom:11px}
.mnhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.mnhead .paper{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-bright);background:var(--gold-soft);padding:3px 9px;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--gold) 24%,transparent)}
.mnhead .mndate{font-size:12px;color:var(--muted);font-family:var(--mono)}
.mnhead .mndel{margin-left:auto}
.mnhead .mndel.danger{color:var(--crit);border-color:var(--crit)}
.mnqtext{margin:0 0 8px;font-size:14px;line-height:1.55;color:var(--ink)}
.mnmeta{font-size:12px;color:var(--muted);font-family:var(--mono)}
.mnnote,.mnfb{margin-top:11px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.6}
.mnnote{background:var(--surface-3);border-left:3px solid var(--navy-2)}
.mnfb{background:var(--gold-soft);border-left:3px solid var(--gold)}
.mnnote b,.mnfb b{display:block;font-size:12px;font-family:var(--display);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:4px}
.mnnote b{color:var(--navy-2)} .mnfb b{color:var(--gold-bright)}
.mnnote span,.mnfb span{color:var(--ink-2)}
.mnimgwrap{margin-top:11px}
.mnimgbox{margin-top:10px}
.mnimgbox img{max-width:100%;border-radius:10px;border:1px solid var(--line);display:block}

.mnstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px}
.mnstat{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:13px 14px;text-align:center}
.mnstat span{font-size:17px;display:block;margin-bottom:4px}
.mnstat b{display:block;font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.mnstat em{font-style:normal;font-size:12px;color:var(--muted)}
.mnstat.good b{color:var(--good)} .mnstat.warn b{color:var(--warn)} .mnstat.crit b{color:var(--crit)}
.mnpapers{display:grid;gap:8px}
.mnpaper{display:flex;align-items:center;gap:11px;font-size:13px}
.mnpaper b{min-width:62px;font-family:var(--display);font-size:12.5px}
.mnpaper .bar{flex:1 1 auto;min-width:0}
.mnpaper .bar i{background:var(--gold)}
.mnpaper .n{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:96px;text-align:right}
.mnpaper.off{opacity:.45}

/* ===========================================================
   WHY THE MARKS WERE LOST
   =========================================================== */
.errtags{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:14px 15px;margin:14px 0 4px}
.errtags .eyebrow .hint{margin:0 0 0 8px;font-size:12px;letter-spacing:normal;text-transform:none;
  font-family:var(--body);font-weight:400}
.errrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.errrow.sm{gap:8px}
.etag{display:flex;flex-direction:column;gap:4px;font-size:12px;font-family:var(--display);
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:10px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);min-width:0}
.etag input{font-family:var(--mono);font-size:16px;color:var(--ink);background:none;border:0;
  border-bottom:1px solid var(--line);padding:3px 0;width:100%;letter-spacing:normal}
.etag input:focus{outline:none;border-bottom-color:var(--gold)}
.etag em{font-style:normal;font-size:12px;font-family:var(--body);font-weight:400;letter-spacing:normal;
  text-transform:none;color:var(--muted);line-height:1.4}
.etag.concept{border-color:color-mix(in srgb,var(--crit) 32%,transparent);color:var(--crit)}
.etag.silly{border-color:color-mix(in srgb,var(--warn) 34%,transparent);color:var(--warn)}
.etag.elim{border-color:color-mix(in srgb,var(--navy-2) 42%,transparent);color:var(--navy-2)}
.errnote{margin-top:10px;width:100%;font-family:var(--body);font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.errnote:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

.tagbtn{margin-left:8px}
.tagbtn.on{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.tagholder{margin:-4px 0 12px}
.tagedit{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);padding:13px}
.tagact{display:flex;gap:10px;align-items:center;margin-top:10px}
.tagact .hint{margin:0}

.errsplit{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ebox{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:14px;text-align:center;position:relative}
.ebox .ei{font-size:20px;margin-bottom:5px}
.ebox b{display:block;font-family:var(--display);font-size:26px;letter-spacing:-.02em;line-height:1}
.ebox .epct{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}
.ebox em{display:block;font-style:normal;font-size:12px;margin:7px 0 9px;font-weight:600}
.ebox .bar{height:5px}
.ebox.concept b,.ebox.concept em{color:var(--crit)} .ebox.concept .bar i{background:var(--crit)}
.ebox.silly b,.ebox.silly em{color:var(--warn)}     .ebox.silly .bar i{background:var(--warn)}
.ebox.elim b,.ebox.elim em{color:var(--navy-2)}     .ebox.elim .bar i{background:var(--navy-2)}
.ebox.lead{box-shadow:0 0 0 1px var(--gold) inset}
.errlead{margin:18px 0 0;padding:13px 14px;border-radius:var(--r-s);font-size:13.5px;line-height:1.6;
  background:var(--navy-soft);border-left:3px solid var(--gold);color:var(--ink-2)}
.errlead b{color:var(--ink)}
.enote{background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;
  padding:11px 12px;margin-bottom:8px}
.enote b{display:block;font-size:12px;color:var(--gold-bright);margin-bottom:3px}
.enote span{font-size:12.5px;color:var(--ink-2);line-height:1.55}

/* ===========================================================
   SYLLABUS COVERAGE
   =========================================================== */
.covempty{text-align:center;padding:26px 16px}
.covempty .ce-i{font-size:34px;margin-bottom:8px}
.covempty h3{margin:0 0 8px;font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.covempty p{margin:0 auto 16px;max-width:460px;font-size:13.5px;color:var(--ink-2);line-height:1.65}

.covtop{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.covring{position:relative;width:118px;height:118px;flex:0 0 auto}
.covring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.covring circle{fill:none;stroke-width:9;stroke-linecap:round}
.covring .cv-bg{stroke:var(--line-2)}
.covring .cv-pace{stroke:var(--muted);stroke-width:3;opacity:.75}
.covring .cv-fg{stroke:var(--calm);transition:stroke-dashoffset 1s cubic-bezier(.22,.9,.3,1)}
.covring.great .cv-fg{stroke:var(--good)}
.covring.good  .cv-fg{stroke:var(--gold-bright)}
.covring.warn  .cv-fg{stroke:var(--warn)}
.covring.low   .cv-fg{stroke:var(--crit)}
.covring-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px}
.covring-in b{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:-.02em}
.covring-in span{font-size:13px;color:var(--muted);margin-top:8px}
.covsum{flex:1 1 250px;min-width:0}
.cvheadline{font-family:var(--display);font-size:18px;line-height:1.35;letter-spacing:-.01em}
.cvheadline b{color:var(--gold-bright)}
.covsum .hint{margin:7px 0 0}
.covlegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:13px;font-size:12px;color:var(--muted)}
.covlegend span{display:flex;align-items:center;gap:6px}
.covlegend b{color:var(--ink);font-family:var(--mono)}
.covlegend .dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.covlegend .dot.done{background:var(--gold-bright)}
.covlegend .dot.target{background:var(--line)}
.covlegend .dot.pace{background:var(--muted)}

.covrows{display:grid;gap:9px}
.covrow{display:flex;align-items:center;gap:12px;font-size:13px}
.covrow b{min-width:120px;font-size:13px}
.covrow .bar{flex:1 1 auto;min-width:0}
.covrow .bar.good i{background:var(--good)}
.covrow .bar.warn i{background:var(--warn)}
.covrow .bar.crit i{background:var(--crit)}
.covrow .n{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:112px;text-align:right}
.covrow.unset{opacity:.5}

.covpanel{margin-top:20px;border-top:1px solid var(--line-2);padding-top:16px}
.covset{display:grid;gap:9px}
.covsetrow{display:flex;align-items:center;gap:10px}
.covsetrow b{min-width:118px;font-size:13px}
.covsetrow .hint{margin:0;flex:1 1 auto;font-size:12px}
.covsetrow input{width:78px;font-family:var(--mono);font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 9px;text-align:right}
.covsetrow input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

@media (max-width:620px){
  .mnrow,.mnrow.four{grid-template-columns:1fr 1fr}
  .errrow{grid-template-columns:1fr;gap:8px}
  .etag{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
  .etag input{width:64px;flex:0 0 auto;order:2}
  .etag em{flex:1 1 100%;order:3}
  .errsplit{grid-template-columns:1fr;gap:9px}
  .ebox{display:flex;align-items:center;gap:12px;text-align:left;flex-wrap:wrap}
  .ebox .ei{margin:0;font-size:18px}
  .ebox b{font-size:21px}
  .ebox .epct{margin:0}
  .ebox em{margin:0;flex:1 1 auto}
  .ebox .bar{flex:1 1 100%}
  .covtop{gap:16px}
  .covring{width:96px;height:96px}
  .covring-in b{font-size:25px}
  .cvheadline{font-size:16.5px}
  .covrow b{min-width:88px;font-size:12.5px}
  .covrow .n{min-width:92px;font-size:12px}
  .covsetrow b{min-width:84px;font-size:12.5px}
  .mnpaper .n{min-width:78px;font-size:12px}
  .mnpaper b{min-width:50px}
}

/* the mentor's feedback box under each answer */
.fbedit{margin-top:12px;border-top:1px dashed var(--line-2);padding-top:11px}
.fbedit textarea{width:100%;font-family:var(--body);font-size:13px;color:var(--ink);line-height:1.55;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 11px;resize:vertical}
.fbedit textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.fbact{display:flex;gap:10px;align-items:center;margin-top:8px}
.fbact .hint{margin:0}

/* the practice strip inside the Tests tab */
#tab-tests .subtabs{margin-top:0;margin-bottom:18px}
#tab-tests .subtabs button{font-size:13.5px}
@media (max-width:480px){ #tab-tests .subtabs button{padding:10px 11px;font-size:12.5px} }

/* ===========================================================
   HOW TO PLAY — the four panes, and the rules as cards
   =========================================================== */
#tab-guide .subtabs{margin-top:0;margin-bottom:18px}
#tab-guide .subtabs button{font-size:13.5px}
@media (max-width:620px){ #tab-guide .subtabs button{padding:10px 11px;font-size:12.5px} }

.seact{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

.rulewrap{margin-top:8px}
.rulegrp{margin-bottom:30px}
.rulegrp:last-child{margin-bottom:0}
.rg-head{margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,.9,.3,1)}
.rg-head.in{opacity:1;transform:none}
.rg-head h3{margin:0 0 5px;font-family:var(--display);font-size:17px;letter-spacing:-.012em;color:var(--gold-bright)}
.rg-head p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}

.rulelist{display:grid;gap:11px}
.rulecard{display:flex;gap:14px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:15px 16px;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.22,.9,.3,1) var(--d,0ms),
             border-color .2s,box-shadow .2s}
.rulecard.in{opacity:1;transform:none}
.rulecard:hover{border-color:color-mix(in srgb,var(--gold) 26%,var(--line-2));box-shadow:var(--shadow-s)}
.rl-i{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:20px;background:var(--surface-3);border:1px solid var(--line)}
.rulecard.in .rl-i span{display:inline-block;animation:rulepop .5s cubic-bezier(.2,1.5,.4,1) var(--d,0ms) both}
@keyframes rulepop{0%{transform:scale(.4) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}
.rl-b{flex:1 1 auto;min-width:0}
.rl-b b{display:block;font-family:var(--display);font-size:15.5px;letter-spacing:-.008em;margin-bottom:5px}
.rl-b>p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.rl-b>p b{display:inline;font-family:var(--body);font-size:inherit;color:var(--ink);margin:0}
.rl-why{margin-top:11px;padding:10px 12px;border-radius:9px;background:var(--gold-soft);
  border-left:3px solid var(--gold)}
.rl-why em{display:block;font-style:normal;font-size:12px;font-family:var(--display);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:4px}
.rl-why span{display:block;font-size:13px;color:var(--ink);line-height:1.6}

@media (max-width:560px){
  .rulecard{gap:11px;padding:13px 13px}
  .rl-i{width:36px;height:36px;font-size:17px;border-radius:10px}
  .rl-b b{font-size:14.5px}
  .rl-b>p{font-size:13px}
  .rg-head h3{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .rulecard,.rg-head{opacity:1;transform:none;transition:none}
  .rulecard.in .rl-i span{animation:none}
}

/* ===========================================================
   IN THEIR OWN WORDS
   =========================================================== */
.wfilter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.wchips{display:flex;gap:6px;flex-wrap:wrap}
.wchips button{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2);
  font-family:var(--body);font-size:12.5px;padding:6px 11px;border-radius:999px;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s}
.wchips button:hover{color:var(--ink);border-color:var(--line)}
.wchips button[aria-pressed="true"]{background:var(--gold-soft);color:var(--gold-bright);
  border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.wfilter input{flex:1 1 200px;min-width:0;font-family:var(--body);font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 11px}
.wfilter input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

.wlist{display:grid;gap:9px}
.wlist[aria-busy="true"]{opacity:.55}
.wempty{margin:0;padding:20px 0;color:var(--muted);font-size:13px;text-align:center}
.witem{display:flex;gap:12px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:12px 14px;
  border-left:3px solid var(--line)}
.witem.reflect{border-left-color:var(--gold)}
.witem.answer{border-left-color:var(--navy-2)}
.witem.testnote{border-left-color:var(--crit)}
.witem.task{border-left-color:var(--good)}
.witem.topic{border-left-color:var(--calm)}
.witem.plan{border-left-color:var(--warn)}
.w-i{flex:0 0 auto;font-size:16px;line-height:1.4}
.w-b{flex:1 1 auto;min-width:0}
.w-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.w-kind{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.w-who{font-size:12.5px;font-weight:600;color:var(--gold-bright);text-decoration:none}
.w-who:hover{text-decoration:underline}
.w-date{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
.w-title{display:block;font-size:13.5px;line-height:1.5;color:var(--ink)}
.w-body{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6;white-space:pre-line}
.w-meta{display:block;margin-top:5px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.wmorewrap{display:flex;justify-content:center;margin-top:14px}

@media (max-width:560px){
  .wfilter input{flex:1 1 100%}
  .wchips button{font-size:12px;padding:5px 9px}
  .w-date{margin-left:0}
  .witem{padding:11px 12px;gap:10px}
}

/* ===========================================================
   THE FEE LINE
   One quiet strip at the foot of the dashboard. It carries the same
   weight whether the date is next month or three weeks gone: a student
   behind on fees already knows, and this is the screen where they log
   their study.
   =========================================================== */
.feecard{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 18px;margin-top:14px}
.feecard[data-state="clear"]{opacity:.78}
.feerow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.feemain{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
.feelab{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);flex:none}
.feemain b{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.feewhen{font-size:13px;color:var(--ink-2)}
.feeside{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}
.feebal{font-size:12px;color:var(--muted);font-family:var(--mono)}
.feeack{margin-top:10px;font-size:12.5px;color:var(--ink-2);background:var(--surface-3);
  border-radius:var(--r-s);padding:9px 12px;line-height:1.5}
.feenote{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.feenote input{flex:1 1 240px;min-width:0;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);border-radius:var(--r-s);padding:9px 12px;font:inherit;font-size:13px}
.feenote input:focus{outline:none;border-color:var(--gold-bright)}
@media (max-width:560px){
  .feerow{flex-direction:column;align-items:flex-start;gap:8px}
  .feeside{margin-left:0;width:100%;justify-content:space-between}
  .feemain b{font-size:18px}
}

/* the PIN row in the account panel */
.pinstate{font-family:var(--mono);font-size:12px;margin:0 0 9px;color:var(--muted)}
.pinstate.on{color:var(--good)}
#pinSet input,#pinA,#pinB{letter-spacing:.24em}

/* ---------- how to get in: the sign-up instructions ---------- */
.howto{text-align:left;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.howto .eyebrow{margin-bottom:9px}
.howto .steps{margin:0 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.howto .steps li{font-size:13px;line-height:1.55;color:var(--ink-2)}
.howto .steps li b{color:var(--ink)}
.howto .hint{font-size:12px;line-height:1.55;margin:0}
.contactrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.contactrow .btn{flex:1 1 auto;justify-content:center;text-align:center;white-space:nowrap;text-decoration:none}
.btn.wa{background:linear-gradient(180deg,#31C56B,#128C7E);border-color:#128C7E;color:#fff}
.btn.wa:hover{background:linear-gradient(180deg,#3ad177,#15a08e)}
@media (max-width:420px){ .contactrow .btn{flex-basis:100%} }

/* ---------- backup panel ---------- */
.bkstate{display:flex;gap:12px;padding:13px 15px;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--line)}
.bkstate.good{border-left-color:var(--good)}
.bkstate.warn{border-left-color:var(--warn)}
.bkstate b{display:block;font-size:13.5px;margin-bottom:3px}
.bkstate span{font-size:12px;color:var(--muted);line-height:1.5}
.bklist{display:flex;flex-direction:column;gap:6px}
.bkrow{display:flex;align-items:center;gap:12px;padding:9px 13px;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-s)}
.bkrow b{font-size:12.5px;font-weight:600;flex:1;min-width:0}
.bkrow span{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none}
.bkrow .btn{flex:none;text-decoration:none}
@media (max-width:520px){ .bkrow{flex-wrap:wrap} .bkrow b{flex-basis:100%} }

/* ---------- a task's days, time and weight ---------- */
.taskedit{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:11px 12px;display:flex;flex-direction:column;gap:10px}
.taskwhen{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.daypills{display:flex;gap:4px;flex:none}
.daypill{width:29px;height:29px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);font-family:var(--mono);font-size:12px;
  font-weight:700;cursor:pointer;padding:0;
  transition:background .16s,color .16s,border-color .16s,transform .16s}
.daypill:hover{transform:translateY(-1px);border-color:var(--line)}
.daypill.on{background:linear-gradient(180deg,var(--gold-lift,#F7DFA0),var(--gold-bright));
  border-color:var(--gold-bright);color:#3A2A05}
.daypill:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.dayslab{font-size:12px;color:var(--muted);min-width:7ch}
.tasktime,.taskpri{background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:6px 9px;font:inherit;font-size:12.5px}
.tasktime{width:132px;font-family:var(--mono)}
.tasktime:focus,.taskpri:focus{outline:none;border-color:var(--gold-bright)}
.taskpri{margin-left:auto}
.editonly{max-width:62ch;line-height:1.6;margin:10px 0 0}
/* a plan item is a row plus, when it is still live, the same two controls —
   the divider moves to the wrapper so the controls sit inside their own item */
.planitem{border-bottom:1px solid var(--line-2)}
.planitem:last-child{border-bottom:0}
.planitem>.row{border-bottom:0;padding-bottom:9px}
/* no day pills here, so the two controls read better kept together on the left
   than flung to opposite ends of the card */
.planitem>.taskwhen{padding:0 0 12px}
.planitem>.taskwhen .taskpri{margin-left:0}
.whenlab{font-size:12px;color:var(--muted)}
/* how a task reads on the day itself: taskRow returns the <li> */
.tasks li.mustdo .t-btn{border-left:3px solid var(--gold-bright)}
.tasks li.optional .t-btn{opacity:.8}
@media (max-width:560px){
  .taskwhen{gap:8px}
  .taskpri{margin-left:0;flex:1 1 100%}
  .daypill{width:100%;min-width:27px}
  .daypills{flex:1 1 auto}
  .dayslab{display:none}
}

/* ---------- the nudge at the time you said ----------
   Deliberately the same shape as the news bar so the dashboard never grows a
   second visual language, but red-tinted: this one is about a clock. */
.remindbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:13px 16px;
  border-radius:var(--r);background:linear-gradient(120deg,rgba(214,90,74,.13),transparent 70%),var(--surface);
  border:1px solid rgba(214,90,74,.34)}
.rmclock{font-size:19px;flex:none;line-height:1}
.rmin{flex:1;min-width:0}
.rmin b{display:block;font-family:var(--display);font-size:14.5px;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmin span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.rmacts{display:flex;align-items:center;gap:8px;flex:none}
.rmsnooze{background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:6px 9px;font:inherit;font-size:12.5px}
.rmsnooze:focus{outline:none;border-color:var(--gold-bright)}
@media (max-width:560px){
  .remindbar{flex-wrap:wrap;gap:10px}
  .rmin{flex:1 1 calc(100% - 34px)}
  .rmacts{flex:1 1 100%}
  .rmsnooze{flex:1}
}

/* ---------- when the work actually happens ---------- */
.clockbars{display:flex;align-items:flex-end;gap:2px;height:84px;margin:4px 0 6px}
.clockbars i{flex:1 1 0;border-radius:3px 3px 0 0;background:var(--surface-3);
  transition:background .2s,height .4s ease}
.clockbars i.hot{background:linear-gradient(180deg,var(--gold-bright),var(--gold))}
.clockaxis{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:12px;color:var(--muted);letter-spacing:.02em}

/* ---------- the little "what does this mean" ---------- */
.info{order:8;flex:none;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  font-family:var(--display);font-size:12px;font-weight:700;font-style:italic;
  cursor:pointer;padding:0;line-height:1;transition:border-color .16s,color .16s}
.info:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.info:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.explain{padding:14px 18px;border-bottom:1px solid var(--line-2);
  background:var(--surface-2);max-width:none}
/* only the opening line is a heading — a <b> inside a sentence stays a
   bold word, not a shouted block that snaps the sentence in half */
.explain>b:first-child{display:block;font-family:var(--display);font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:8px}
.explain p b{color:var(--ink);font-weight:600}
.explain p{margin:0 0 9px;font-size:13px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.explain p:last-child{margin-bottom:0}

/* ---------- a card you can fold away ---------- */
.fold{order:9;flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface-2);cursor:pointer;padding:0;position:relative;
  transition:border-color .16s,background .16s}
.fold:hover{border-color:var(--gold-bright)}
.fold:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.fold::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translate(-50%,-30%) rotate(-135deg);transition:transform .22s ease,border-color .16s}
.fold:hover::after{border-color:var(--ink-2)}
.fold[aria-expanded="false"]::after{transform:translate(-50%,-70%) rotate(45deg)}
.body.folded{display:none}
.card.isfolded>header{border-bottom:0}

/* ---------- which card: the week, or everything ---------- */
.shmode{display:flex;gap:4px;align-self:center;margin:0 0 12px;padding:3px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:11px}
.shmode button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12.5px;
  font-weight:600;padding:7px 15px;border-radius:9px;cursor:pointer;transition:background .16s,color .16s}
.shmode button:hover{color:var(--ink)}
.shmode button.on{background:linear-gradient(180deg,var(--gold-lift,#F7DFA0),var(--gold-bright));color:#3A2A05}
.shmode button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

/* ---------- the way back ----------
   Warm, not red. A student who has been away has had enough red. */
.backcard{background:linear-gradient(150deg,color-mix(in srgb,var(--good-soft) 70%,var(--surface)),var(--surface) 70%);
  border-color:color-mix(in srgb,var(--good) 30%,var(--line))}
.backtag{display:inline-block;font-family:var(--display);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--good);margin-bottom:8px}
.backcard h2{font-family:var(--display);font-size:19px;letter-spacing:-.015em;margin:0 0 8px}
.backlead{margin:0 0 15px;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:60ch}
.backcard .tasks{margin:0}
.backkept{margin:14px 0 0;font-size:12px;color:var(--muted)}
@media (max-width:560px){ .backcard h2{font-size:17px} .backlead{font-size:13px} }

/* a backlog is served a few rows at a time */
.showmore{margin:10px 18px 4px}

/* ---------- the one thing standing in front of the app ----------
   Dimmed backdrop, a card that rises rather than snaps, and an answer
   always within thumb reach at the bottom on a phone. */
.popwrap{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:22px;background:rgba(4,8,20,.66);backdrop-filter:blur(3px);
  animation:popfade .18s ease both}
.popwrap.hidden{display:none}
@keyframes popfade{from{opacity:0}to{opacity:1}}
.pop{width:min(440px,100%);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r);padding:24px 24px 20px;box-shadow:0 26px 70px rgba(0,0,0,.55);
  animation:poprise .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes poprise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.poptag{display:inline-block;font-family:var(--display);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:9px}
.pop b{display:block;font-family:var(--display);font-size:19px;line-height:1.28;
  letter-spacing:-.015em;margin-bottom:9px}
.pop p{margin:0;display:flex;flex-direction:column;gap:7px}
.pop p span{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.popacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.popacts .btn{flex:1 1 auto;justify-content:center}
body.popopen{overflow:hidden}
@media (max-width:520px){
  .popwrap{align-items:flex-end;padding:0}
  .pop{width:100%;border-radius:var(--r) var(--r) 0 0;border-bottom:0;padding:22px 18px 22px}
  @keyframes poprise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* ---------- writing to students ---------- */
.composer{display:flex;flex-direction:column;gap:15px;max-width:660px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld>span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  font-family:var(--display);font-weight:600}
.fld>span i{text-transform:none;letter-spacing:0;font-style:normal;opacity:.7}
.fld input,.fld textarea,.fld select{font:inherit;font-size:13.5px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);width:100%}
.fld textarea{resize:vertical;line-height:1.6}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--gold-bright)}
/* hugs its buttons and sits against the left edge of the field above it,
   whether or not it wraps */
.seg{display:flex;width:fit-content;max-width:100%;align-self:flex-start;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:11px;padding:3px;gap:3px}
.seg.wrap{flex-wrap:wrap}
@media (max-width:520px){ .seg{width:100%} .seg button{flex:1 1 auto} }
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12.5px;
  font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;
  transition:background .16s,color .16s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:linear-gradient(180deg,var(--gold-lift,#F7DFA0),var(--gold-bright));
  color:#3A2A05}
.findrow{display:flex;gap:8px}
.findrow input{flex:1}
.hits{display:flex;flex-direction:column;gap:5px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.hits .hit{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;color:var(--ink);font:inherit}
.hits .hit:hover{border-color:var(--gold-bright)}
.hits .hit b{font-size:13px}
.hits .hit span{font-size:12px;color:var(--muted)}
.sendrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.msgrow{padding:15px 0;border-bottom:1px solid var(--line-2)}
.msgrow:last-child{border-bottom:0}
.msgrow.off{opacity:.55}
.msgrow .mh{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.msgrow .mh b{font-size:14px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);color:var(--muted)}
.chip.pop{border-color:rgba(225,180,63,.45);color:var(--gold-bright)}
.msgrow .ms{display:block;font-size:12px;color:var(--muted);margin-top:5px}
.readbar{height:4px;border-radius:999px;background:var(--surface-2);margin:9px 0 11px;overflow:hidden}
.readbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-bright),var(--good));transition:width .4s ease}
.msgrow .ma{display:flex;gap:8px;flex-wrap:wrap}
.readers{margin-top:12px;display:flex;flex-direction:column;gap:9px;font-size:12px}
.readers b{font-family:var(--display);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.namelist{display:flex;flex-wrap:wrap;gap:6px}
.namelist span{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:4px 9px;font-size:12px;color:var(--ink-2)}

/* ---------- what changed in this release ---------- */
.newsbar{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;padding:15px 17px;
  border-radius:var(--r);background:linear-gradient(120deg,var(--gold-soft),transparent 70%),var(--surface);
  border:1px solid rgba(225,180,63,.3)}
.newsin{flex:1;min-width:0}
.newstag{display:inline-block;font-family:var(--display);font-size:9px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:6px}
.newsbar b{display:block;font-family:var(--display);font-size:15px;margin-bottom:5px;letter-spacing:-.01em}
.newsbar p{margin:0;display:flex;flex-direction:column;gap:4px}
.newsbar p span{font-size:13px;line-height:1.55;color:var(--ink-2)}
.newsbar .btn{flex:none}
@media (max-width:560px){
  .newsbar{flex-direction:column;gap:12px}
  .newsbar .btn{width:100%}
}

/* ---------- which habits are sticking ---------- */
.habits{display:flex;flex-direction:column;gap:9px;margin:14px 0 12px}
.habit{display:grid;grid-template-columns:minmax(0,1fr) 108px 46px;grid-template-rows:auto auto;
  align-items:center;column-gap:14px;row-gap:3px}
.habit b{grid-column:1;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.habit b i{font-style:normal;font-family:var(--display);font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-bright);background:var(--gold-soft);
  padding:2px 6px;border-radius:999px;flex:none}
.hbar{grid-column:2;grid-row:1;height:7px;border-radius:999px;background:var(--line-2);overflow:hidden}
.hbar i{display:block;height:100%;border-radius:999px;background:var(--muted);
  transition:width .5s cubic-bezier(.2,.8,.3,1)}
.habit.good .hbar i{background:var(--good)}
.habit.mid  .hbar i{background:var(--warn)}
.habit.low  .hbar i{background:var(--crit)}
.hfig{grid-column:3;grid-row:1;font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right}
.habit.good .hfig{color:var(--good)}
.habit.mid  .hfig{color:var(--warn)}
.habit.low  .hfig{color:var(--crit)}
.habit.thin .hfig{color:var(--muted);font-size:12px}
.hsub{grid-column:1 / -1;grid-row:2;font-size:12px;color:var(--muted)}
@media (max-width:560px){
  .habit{grid-template-columns:minmax(0,1fr) 58px;column-gap:10px}
  .hbar{grid-column:1 / -1;grid-row:2;margin-top:2px}
  .hfig{grid-column:2;grid-row:1}
  .hsub{grid-row:3}
}
.habitmore{align-self:flex-start;margin-top:4px}
.acctform.col textarea{background:var(--surface);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--r-s);padding:10px 12px;font:inherit;font-size:13.5px;line-height:1.55;resize:vertical}
.acctform.col textarea:focus{outline:none;border-color:var(--gold-bright)}

/* ===========================================================
   THE RECALL DECK
   Quiet while you are reading your own words, loud only where a
   decision has to be made: which card to open, and how it went.
   =========================================================== */
body.noscroll{overflow:hidden}

.rcempty{text-align:center;padding:26px 16px}
.rcempty .ce-i{font-size:34px;margin-bottom:8px}
.rcempty h3{margin:0 0 8px;font-family:var(--display);font-size:18px;letter-spacing:-.01em}
.rcempty p{margin:0 auto 16px;max-width:460px;font-size:13.5px;color:var(--ink-2);line-height:1.65}

.rcbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 16px}
.rcbar .hint{margin:0}

.rcform{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin:0 0 18px;display:flex;flex-direction:column;gap:12px}
.rcformbtns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rcformbtns .hint{margin:0}

/* ---------- subject → topic ---------- */
.rctree{display:flex;flex-direction:column;gap:16px}
.rcsub{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.rcsubhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.rcsubhead b{font-family:var(--display);font-size:14px}
.rcdim{font-size:12px;color:var(--muted)}
.rctop{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:11px 14px;background:transparent;border:0;border-top:1px solid var(--line-2);
  color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
  transition:background .14s}
.rctop:first-of-type{border-top:0}
.rctop:hover{background:var(--surface-2)}
.rctop.hasdue{box-shadow:inset 3px 0 0 var(--gold-bright)}
.rctitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcmeta{font-size:12px;color:var(--muted);flex:none}

/* ---------- the cards themselves ---------- */
.rcitems{display:flex;flex-direction:column;gap:10px}
.rcpart{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-family:var(--display);font-weight:600;margin:8px 0 0}
.rcitem{border:1px solid var(--line-2);border-left:3px solid var(--line-2);
  border-radius:0 var(--r) var(--r) 0;padding:12px 14px;background:var(--surface-2)}
.rcitem.hard{border-left-color:var(--crit)}
.rcitem.mastered{opacity:.6;border-left-color:var(--good)}
.rcitem.editing{display:flex;flex-direction:column;gap:9px}
.rcitem textarea{font:inherit;font-size:13.5px;padding:10px 12px;line-height:1.6;resize:vertical;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);width:100%}
.rcitop{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
.rcif{font-size:13.5px;line-height:1.55;flex:1;min-width:180px}
.rcib{margin:7px 0 0;font-size:13px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap}
.rciacts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px}
.rciacts .btn.danger{color:var(--crit);border-color:transparent}
.rctag{font-family:var(--mono);font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:999px;
  background:var(--surface-3);color:var(--muted);flex:none;letter-spacing:.04em}
.rctag.k-mnemonic{color:var(--gold-bright)}
.rctag.k-note{color:var(--good)}

/* ---------- asking ---------- */
.rcwrap{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,8,20,.74);backdrop-filter:blur(4px)}
.rcwrap.hidden{display:none}
.rcbox{width:min(600px,100%);max-height:92vh;overflow:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px 20px;
  box-shadow:0 26px 70px rgba(0,0,0,.55)}
.rcbox>header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.rcprog{font-family:var(--mono);font-size:12px;color:var(--muted)}
.rcwhere{flex:1;min-width:0;font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rccard{min-height:150px;display:flex;flex-direction:column;gap:12px;
  padding:18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r)}
.rckindtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted)}
.rcfront{font-size:17px;line-height:1.5;font-family:var(--display);white-space:pre-wrap}
.rcback{font-size:14px;line-height:1.7;color:var(--ink-2);white-space:pre-wrap;
  padding-top:12px;border-top:1px solid var(--line-2);animation:rcfade .2s ease both}
@keyframes rcfade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.rcacts{margin-top:14px}
.btn.wide{width:100%;justify-content:center}
.rcrate{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.rcrate .btn{justify-content:center}
.btn.rcag{border-color:transparent;background:var(--crit-soft);color:var(--crit)}
.btn.rcok{border-color:transparent;background:var(--gold-soft);color:var(--gold-bright)}
.btn.rcez{border-color:transparent;background:var(--good-soft);color:var(--good)}
.rcfoot{margin:12px 0 0;text-align:center}
.rcdone{text-align:center;padding:22px 10px}
.rcdone .ce-i{font-size:34px;margin-bottom:8px}
.rcdone h3{margin:0 0 8px;font-family:var(--display);font-size:18px}
.rcdone p{margin:0 auto 16px;max-width:400px;font-size:13.5px;color:var(--ink-2);line-height:1.65}

@media (max-width:520px){
  .rcbox{padding:14px 14px 16px;max-height:96vh}
  .rcfront{font-size:15.5px}
  .rcrate{grid-template-columns:1fr;gap:7px}
}

/* ---------- the shared shelf (student side) ---------- */
.shbar{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 14px}
.shbar select,.shbar input{font:inherit;font-size:13.5px;padding:9px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.shbar input{flex:1;min-width:150px}
.shbar select:focus,.shbar input:focus{outline:none;border-color:var(--gold-bright)}
.shlist{display:flex;flex-direction:column;gap:11px}
.shcard{border:1px solid var(--line-2);border-radius:var(--r);padding:13px 15px;background:var(--surface-2)}
.shcard.mine{border-left:3px solid var(--line-2)}
.shcard.mine.st-live{border-left-color:var(--good)}
.shcard.mine.st-waiting{border-left-color:var(--warn)}
.shcard.mine.st-declined{border-left-color:var(--crit)}
.shtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.shsub{font-size:12px;color:var(--muted)}
.shfront{display:block;font-size:13.5px;line-height:1.55}
.shback{margin:6px 0 0;font-size:13px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap}
.shfoot{margin-top:9px}
.shnote{margin:9px 0 0;padding:9px 11px;border-radius:9px;background:var(--surface-3);
  font-size:12.5px;line-height:1.6;color:var(--ink-2)}

/* ---------- the review queue (mentor side) ---------- */
.sqseg{margin:0 0 14px}
.shflagline{margin:0 0 14px;padding:10px 13px;border-radius:9px;
  background:var(--crit-soft);color:var(--crit);font-size:12.5px}
.sqlist{display:flex;flex-direction:column;gap:13px}
.sqcard{border:1px solid var(--line-2);border-radius:var(--r);padding:14px 15px;
  background:var(--surface-2);display:flex;flex-direction:column;gap:9px}
.sqcard.flagged{border-color:var(--crit)}
.sqtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sqtop b{font-family:var(--display);font-size:13.5px}
.sqcard textarea,.sqcard input{font:inherit;font-size:13.5px;padding:10px 12px;line-height:1.6;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);width:100%}
.sqcard textarea{resize:vertical}
.sqcard textarea:focus,.sqcard input:focus{outline:none;border-color:var(--gold-bright)}
.sqcard .sqf{font-family:var(--display)}
.sqacts{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sqacts .btn.danger{color:var(--crit);border-color:transparent}
.sqwhy{display:flex;flex-direction:column;gap:4px;flex-basis:100%;
  font-size:12px;color:var(--ink-2);padding:8px 11px;border-radius:9px;background:var(--crit-soft)}

/* ---------- tracker ↔ admissions reconciliation ---------- */
.lnkcols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:820px){ .lnkcols{grid-template-columns:1fr} }
.lnkcol{display:flex;flex-direction:column;gap:9px;min-width:0}
.lnkhead{display:flex;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.lnkhead b{font-family:var(--display);font-size:12.5px;letter-spacing:.03em}
.lnkrow{border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px;background:var(--surface-2)}
.lnktop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.lnktop b,.lnktop .sname{font-family:var(--display);font-size:13.5px}
.lnkcand{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;
  padding:7px 0 0;border-top:1px dashed var(--line-2)}
.lnkcand.none{color:var(--muted)}
.lnkcand>span:not(.pill){flex:1;min-width:120px}
.lnksearch{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-2)}
.lnksearch input{width:100%;font:inherit;font-size:12.5px;padding:8px 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;color:var(--ink)}
.lnksearch input:focus{outline:none;border-color:var(--gold-bright)}
.lnkhits{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.lnkhits:empty{margin:0}

/* ---------- the batch filter, read from the admissions side ---------- */
.batchbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 14px}
.batchbar .eyebrow{margin:0;padding-right:2px}
.bchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;text-decoration:none;border:1px solid var(--line);
  color:var(--ink-2);background:var(--surface-2);transition:border-color .14s,color .14s}
.bchip:hover{border-color:var(--gold-bright);color:var(--ink)}
.bchip.on{background:linear-gradient(180deg,var(--gold-lift,#F7DFA0),var(--gold-bright));
  border-color:transparent;color:#201803}
.bchip i{font-style:normal;font-family:var(--mono);font-size:12px;opacity:.65}
.bchip.on i{opacity:.8}

/* ---------- the three sittings ----------
   One row, three choices, and the number is the whole sitting. Big
   enough to hit with a thumb without looking, because this is the
   first thing touched after sitting down and the last thing anybody
   wants to squint at. */
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px}
.customrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:-8px 0 18px}
.customrow label{display:flex;flex-direction:column;gap:4px;flex:1 1 120px;min-width:0}
.customrow input{width:100%;box-sizing:border-box}
.timermid b.long{font-size:34px}
.levels .level{
  display:grid;gap:3px;justify-items:center;text-align:center;
  padding:14px 8px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  transition:border-color .12s,background .12s,transform .12s;
}
.levels .level:hover{transform:translateY(-1px);background:var(--surface-3)}
.levels .level b{font-size:19px;font-family:var(--mono);color:var(--ink);line-height:1.1}
.levels .level span{font-size:12px;color:var(--muted);white-space:nowrap}
.levels .level em{font-size:12px;color:var(--muted);font-style:normal;line-height:1.25;opacity:.85}
.levels .level.on{border-color:var(--accent);background:var(--accent-soft)}
.levels .level.on b{color:var(--accent)}
@media (max-width:520px){
  .levels{gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .levels .level{padding:12px 5px;min-width:0}
  .timermid b.long{font-size:28px}
  .levels .level span{white-space:normal}
  .levels .level b{font-size:17px}
  .levels .level em{display:none}
}

/* ================= the way in =================
   A sign-in screen is the one page a student sees before they have any
   reason to trust the thing. It used to be a tall card alone in the
   middle of a dark screen: an enormous crest, two empty boxes and three
   stacked dividers trailing off the bottom. It said nothing about what
   was behind it, and the primary button was a blue that appears nowhere
   else in the academy's colours.

   Now: the card on the left at a size a thumb can work, and on a wide
   screen a quiet panel on the right that says what this is. The panel
   is decoration on a phone and is simply not rendered there. */
.authpage { display: block; min-height: 100vh; background: var(--bg); }
.authwrap {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr;
  place-items: center; gap: 0; padding: 32px 18px;
}
@media (min-width: 900px) {
  .authwrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px; max-width: 1060px; margin: 0 auto; padding: 40px 32px;
    align-items: center;
  }
  .authwrap .login { order: 1; margin: 0; }
  .authwrap .authside { order: 2; display: block; }
}
.authside { display: none; max-width: 30em; }
.authside .sidemark { width: 74px; height: auto; display: block; margin-bottom: 18px; }
.authside h1 {
  font-family: var(--display); font-size: 33px; line-height: 1.16;
  letter-spacing: -.015em; margin: 0 0 14px; color: var(--ink);
}
.authside p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 22px; max-width: 30em; }
.authpoints { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.authpoints li {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  padding-left: 26px; position: relative;
}
.authpoints li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--gold-bright); font-weight: 800;
}
.authpoints b { color: var(--ink); font-weight: 700; }

/* the card itself, calmer */
.authwrap .login { text-align: left; padding: 30px 28px 24px; max-width: 408px; }
.authwrap .login h2 { font-size: 24px; margin: 0 0 2px; }
.authwrap .login > p { margin: 0 0 22px; font-size: 13px; }
.authback {
  display: inline-block; font-size: 12px; color: var(--muted);
  text-decoration: none; margin-bottom: 16px;
}
.authback:hover { color: var(--ink); }
.authwrap .authlogo {
  width: 58px; margin: 0 0 14px; filter: none;
  animation: riseIn .6s cubic-bezier(.22,.75,.3,1) both;
}
.motto.onlysmall { text-align: left; margin: 0 0 10px; }
@media (min-width: 900px) {
  .motto.onlysmall, .authwrap .authlogo { display: none; }
  .authback { margin-bottom: 4px; }
}

/* a field with its own icon, which is how anybody knows what goes in it */
.ifield { position: relative; margin-bottom: 15px; }
.ifield .ic {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 14px; line-height: 1; opacity: .5; pointer-events: none;
}
.ifield input { margin-bottom: 0; padding-left: 38px; padding-right: 13px; min-height: 46px; }
.ifield:has(.peek) input { padding-right: 62px; }
.peek {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px 8px;
  font: inherit; font-size:12px; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; text-transform: uppercase;
}
.peek:hover { color: var(--gold-bright); }

/* one block at the bottom instead of three rules across the card */
.authfoot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--muted); line-height: 1.65;
}
.authfoot p { margin: 0 0 7px; }
.authfoot p:last-child { margin-bottom: 0; }
/* the privacy and terms line under the sign-in card: present, quiet */
.authfoot .legalline { margin-top: 12px; font-size: 12px; color: var(--muted); }
.authfoot .legalline a { color: var(--muted); }
.authfoot .legalline a:hover { color: var(--gold-bright); }

/* the button carries the academy's own colour, not a default blue */
.authwrap .btn.pri {
  background: linear-gradient(180deg, var(--gold-lift), var(--gold-bright));
  border-color: var(--gold-bright); color: #3A2A05;
  font-weight: 800; min-height: 48px; letter-spacing: .01em;
}
.authwrap .btn.pri:hover { filter: brightness(1.05); }
.btn.block { display: block; width: 100%; }

/* A focus ring should say "you are here", not "you got it wrong". The old
   one drew a gold border AND a gold halo at once, which on a field a
   student has not typed into yet reads as a validation error. */
.authwrap .login input:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-bright) 14%, transparent);
  outline: none;
}
/* the links in here belong to the academy's palette, not the browser's */
.authwrap .login a { color: var(--gold-bright); text-decoration: none; border-bottom: 1px solid transparent; }
.authwrap .login a:hover { border-bottom-color: currentColor; }
.authwrap .login .authback { color: var(--muted); border-bottom: 0; }
.authwrap .login .authback:hover { color: var(--ink); }


/* ===========================================================
   Batch C — one icon set, four groups, the setup screens, and
   "how did it go" on every revision.
   =========================================================== */

/* ---- the drawn icons ---- */
.ic{display:inline-block;vertical-align:-.22em;flex:none}
.eyebrow .ic{vertical-align:-3px;margin-right:5px;color:var(--gold-bright)}
.secthead .eyebrow .ic{margin-right:6px}
.swhead.good .ic{color:var(--good)} .swhead.crit .ic{color:var(--crit)}
.chip .f{display:flex;align-items:center;justify-content:center;height:22px}
.chip.streak .f{color:var(--gold-bright)}
.chip.rank .f{color:#B9C8EE}
:root[data-theme="light"] .chip.rank .f{color:var(--navy-2)}
.chip.days .f{color:var(--calm)}
.cnext-i .ic,.ce-i .ic,.se-i .ic,.xpe .ic,.lve .ic,.rl-i .ic,.cl-i .ic,.cfact>span .ic,.mnstat>span .ic,.cbounce>span .ic,.ei .ic{color:var(--gold-bright)}
.cnext-i,.ce-i,.se-i,.cl-i,.cfact>span,.mnstat>span,.cbounce>span,.ei{display:flex;align-items:center;justify-content:center}
.ce-i{height:44px;margin:0 auto 10px}
.cl-i{height:26px;justify-content:flex-start}
.restday .m{display:flex;justify-content:center;color:var(--calm)}
.rmclock .ic{color:var(--gold-bright)}
.offbar .ic{color:currentColor}
.demo .ic{color:var(--warn)}
.balnote>span .ic{color:var(--calm)}
.sbchev .ic{transition:transform .2s}
.sbcard.open .sbchev .ic{transform:rotate(180deg)}
.mood .e{display:flex;justify-content:center;color:var(--muted)}
.mood[aria-pressed="true"] .e{color:var(--gold)}
.jbody p i .ic{color:var(--gold);vertical-align:-3px}
.jrow .t span .ic{color:var(--gold);vertical-align:-3px;margin-right:2px}
.mtag .ic{vertical-align:-2px}
.topnav a .ic,.navbtn .ic{vertical-align:-3px;margin-right:5px}
.themetog .thumb i .ic{display:block;width:13px;height:13px}
.btn .ic{vertical-align:-3px}
.iconbtn .ic{vertical-align:-2px}
.bghead b .ic{color:var(--gold-bright);vertical-align:-2px}
.lvlrow b .ic{vertical-align:-2px;margin-right:2px}
.pill.net{background:var(--gold-soft);border-color:color-mix(in srgb,var(--gold) 25%,transparent);color:var(--gold)}
.trend{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-2);flex:none}
.trend.up{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)}
.trend.down{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.trend.flat{color:var(--muted)}

/* badges keep their own emoji — it is the student's trophy — but every one
   sits in the same medallion, so the vault reads as a set */
.bemblem{border-radius:50%;width:40px;height:40px;
  background:radial-gradient(circle at 35% 30%,var(--surface-3),var(--surface-2) 70%);
  border:1.5px solid var(--line)}
.badge.on .bemblem{background:radial-gradient(circle at 35% 30%,var(--gold-lift),var(--gold-bright) 72%,var(--gold));
  border-color:color-mix(in srgb,var(--gold) 70%,#fff);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent),0 4px 12px -4px rgba(169,123,18,.5)}
.trophy span{width:48px;height:48px;margin:0 auto;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-lift),var(--gold-bright) 72%,var(--gold));
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px color-mix(in srgb,var(--gold) 45%,transparent)}
.pod .m{width:40px;height:40px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--surface-3),var(--surface-2) 70%);border:1.5px solid var(--line)}
.pod.first .m{background:radial-gradient(circle at 35% 30%,var(--gold-lift),var(--gold-bright) 72%,var(--gold));border-color:transparent}

/* ---- four groups, then the pages of the chosen group ---- */
.gnav{display:flex;gap:6px;margin-top:20px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gnav::-webkit-scrollbar{display:none}
.gnav button{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);font-weight:600;font-size:13px;padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s,transform .16s}
.gnav button .ic{color:var(--muted);transition:color .18s}
.gnav button:hover{color:var(--ink);background:var(--surface-2);transform:translateY(-1px)}
.gnav button[aria-selected="true"]{background:linear-gradient(180deg,var(--navy-2),var(--navy));border-color:var(--navy);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,var(--shadow-s)}
.gnav button[aria-selected="true"] .ic{color:var(--gold-lift)}
.tabs.subnav{margin-top:8px;border-bottom:1px solid var(--line-2)}
.tabs.subnav button{padding:8px 12px;font-size:12.5px}
.tabs.subnav.solo{display:none}
.tabs button.hidden{display:none}
@media (max-width:760px){
  .gnav{margin-top:14px;position:sticky;top:var(--topbar-h,56px);z-index:21;padding:6px 0 6px;
    background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px)}
  .gnav button{flex:1 1 0;justify-content:center;padding:9px 8px;font-size:12.5px;gap:5px}
  /* the page row sits exactly under the group row; both heights are measured, because the
     top bar grows on a phone with a safe area and the group row grew with its icons */
  .tabs.subnav{top:calc(var(--topbar-h,56px) + var(--gnav-h,50px))}
  .navword{display:none}
  .topnav a .ic,.navbtn .ic{margin-right:0}
  .topnav a,.topnav .navbtn{padding:6px 8px}
}

/* ---- how did it go ---- */
.revhow{display:inline-flex;gap:4px;flex:none;margin-left:auto}
.revhow .how{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;padding:6px 9px;border-radius:9px;cursor:pointer;
  transition:transform .16s,background .18s,border-color .18s,color .18s}
.revhow .how:hover{transform:translateY(-1px);box-shadow:var(--shadow-s)}
.revhow .how.forgot:hover{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 40%,transparent);color:var(--crit)}
.revhow .how.ok:hover{background:var(--navy-soft);border-color:color-mix(in srgb,var(--navy-2) 50%,transparent);color:var(--ink)}
.revhow .how.knew:hover{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 40%,transparent);color:var(--good)}
.revhow .how.knew{color:var(--good)}
.revhow .how.forgot{color:var(--crit)}
.t-btn.revrow{cursor:default;flex-wrap:wrap}
.t-btn.revrow:hover{background:none}
.t-btn.revrow:hover::before{transform:scaleY(0)}
.box.rv{color:var(--navy-2);border-color:color-mix(in srgb,var(--navy-2) 45%,var(--line));background:var(--navy-soft)}
.box.rv .ic{width:12px;height:12px}
.revhow-help b{color:var(--ink)}
@media (max-width:600px){
  .revhow .how span{display:none}
  .revhow .how{padding:7px 9px}
  .t-btn.revrow{gap:9px}
}
@media (max-width:420px){
  .row .revhow{margin-left:0;width:100%}
}

/* ---- the test form grows a paper and a length ---- */
.form.tests{display:flex;flex-wrap:wrap;gap:9px}
.form.tests>*{flex:1 1 110px;min-width:0}
.form.tests #tsName{flex:2 1 180px}
.form.tests .subjpick{flex:1 1 170px}
.form.tests #tsPaper{flex:1 1 200px}
.form.tests button.pri{flex:0 0 auto}
.form.tests .hidden{display:none}

.featoff{display:none !important}

/* ---- the quiet banner for students already here ---- */
.onbbanner{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--navy-soft),var(--surface) 70%);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.onbb-i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--gold-bright);
  background:radial-gradient(circle at 35% 30%,var(--surface-3),var(--surface-2) 70%);border:1px solid var(--line)}
.onbb-t{flex:1 1 220px;min-width:0}
.onbb-t b{display:block;font-size:13.5px}
.onbb-t span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;line-height:1.5}
.onbb-acts{display:flex;gap:8px;flex-wrap:wrap}

/* ---- the three setup screens ---- */
body.onbopen{overflow:hidden}
.onbwrap{position:fixed;inset:0;z-index:130;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
  padding:24px 14px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px)}
.onbwrap.hidden{display:none}
.onbbox{width:min(720px,100%);margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-l);display:flex;flex-direction:column;min-height:60vh;transition:opacity .3s ease,transform .35s cubic-bezier(.22,.75,.3,1)}
.onbwrap.pre .onbbox{opacity:0;transform:translateY(12px)}
.onbhead{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.onbhead img{border-radius:8px}
.onbsteps{display:flex;gap:6px;margin-right:auto}
.onbsteps i{width:26px;height:5px;border-radius:3px;background:var(--line);transition:background .25s}
.onbsteps i.on{background:linear-gradient(90deg,var(--gold),var(--gold-lift))}
.onbstep{padding:22px 22px 10px;flex:1 1 auto}
.onbstep h2{font-family:var(--display);font-size:24px;letter-spacing:-.015em;margin:0 0 8px;line-height:1.2}
.onblead{margin:0 0 18px;font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:60ch}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pillar{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:18px 16px 16px;border-radius:16px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1.5px solid var(--line);color:inherit;font:inherit;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.3,1),border-color .2s,box-shadow .2s}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.pillar[aria-pressed="true"]{border-color:var(--gold-bright);box-shadow:var(--glow)}
.pillar b{font-family:var(--display);font-size:15.5px;letter-spacing:-.005em}
.pillar span{font-size:12.5px;color:var(--muted);line-height:1.5}
.pil-i{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--gold-bright);
  background:radial-gradient(circle at 35% 30%,var(--navy-soft),var(--surface-2) 72%);border:1px solid var(--line)}
.pillar[aria-pressed="true"] .pil-i{background:radial-gradient(circle at 35% 30%,var(--gold-lift),var(--gold-bright) 72%,var(--gold));color:#2A2004;border-color:transparent}
.onbskip{margin:18px 0 0;text-align:center}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--gold);text-decoration:underline;cursor:pointer}
.onbstep .fld{display:block;margin:0 0 16px}
.onbstep .fld>span:first-child{display:block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.onbstep .fld select,.onbstep .fld input[type=date],.onbstep .fld input[type=time],.onbstep .fld input:not([type]),.paperedit input{
  font:inherit;font-size:13.5px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);min-width:0}
.onbstep .fld select{width:100%}
.onbstep .fld .hint{display:block;margin-top:6px}
.onbstep .fld.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.onbstep .fld.inline>span:first-child{margin:0}
.onbstep .fld.inline .hint{margin:0;flex:1 1 100%}
.catchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.catchip{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s}
.catchip .ic{color:var(--muted)}
.catchip:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--line));color:var(--ink)}
.catchip[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold-bright);color:var(--gold)}
.catchip[aria-pressed="true"] .ic{color:var(--gold)}
.chipedit{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chipadd{display:inline-flex;gap:6px;align-items:center;flex:1 1 220px}
.chipadd input{flex:1 1 auto;font:inherit;font-size:13px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--ink);min-width:0}
.papers{margin:4px 0 14px;padding:14px 16px;border-radius:var(--r-s);background:var(--surface-2);border:1px solid var(--line-2)}
.papers .eyebrow{display:block;margin-bottom:8px}
.paper{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13px;flex-wrap:wrap}
.paper:last-of-type{border-bottom:0}
.paper b{font-weight:600}
.paper span{color:var(--muted);font-family:var(--mono);font-size:12px}
.papers .hint{margin:10px 0 0}
.paperedit{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:8px;margin-top:10px}
.switchrow{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--r-s);border:1px solid var(--line-2);
  background:var(--surface-2);margin-bottom:8px;cursor:pointer}
.switchrow input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold)}
.switchrow b{display:block;font-size:13.5px;font-weight:600}
.switchrow span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.onbfoot{display:flex;align-items:center;gap:12px;padding:14px 22px 18px;border-top:1px solid var(--line-2);
  position:sticky;bottom:0;background:var(--surface);border-radius:0 0 22px 22px}
.onbfoot .hint{flex:1 1 auto;text-align:right}
.onbfoot .btn.pri{min-width:150px}
.acctmode{margin:4px 0 0;font-weight:600;font-size:13.5px}
@media (max-width:760px){
  .onbwrap{padding:0;align-items:stretch}
  .onbbox{border-radius:0;border:0;min-height:100%;width:100%}
  .onbfoot{border-radius:0}
  .pillars{grid-template-columns:1fr}
  .pillar{flex-direction:row;align-items:center;gap:14px}
  .pillar .pil-i{flex:none}
  .pillar b{display:block}
  .paperedit{grid-template-columns:1fr 1fr}
  .onbstep h2{font-size:21px}
}
.pil-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.w-i .ic{color:var(--gold-bright)}
.onbstep .fld>span.hint,.onbstep .fld .hint{text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;font-size:12px;color:var(--muted)}
.onbstep .fld.inline{display:flex !important;align-items:center;gap:10px;flex-wrap:wrap;text-align:left}
.onbstep .fld.inline>span:first-child{margin:0;flex:0 0 auto}
.onbstep .fld.inline input[type=time]{width:auto;max-width:150px;flex:0 0 auto}
.onbstep .fld.inline .hint{flex:1 1 100%;margin:0}
.form.tests #tsAtt,.form.tests #tsCor{flex:0 1 118px}
.form.tests #tsTotal{flex:0 1 96px}
.form.tests #tsPaper{flex:1 1 190px;max-width:260px}
@media (max-width:480px){
  .gnav{gap:5px}
  .gnav button{flex-direction:column;gap:3px;padding:7px 4px;font-size:12px;border-radius:14px}
  .gnav button .ic{width:18px;height:18px}
}


/* THEMES:BEGIN — generated by deploy/build-themes.php from tracker/data/themes.json. Do not edit by hand. */
/* Aroh — Aroh brand: Dusk Indigo, Sunrise Amber, Snow */
:root[data-theme="aroh-light"]{
  --bg:#F7F8FA;
  --bg-2:#EDEEF0;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --surface-3:#EEF0F5;
  --ink:#161A35;
  --ink-2:#4B5470;
  --muted:#6B7390;
  --line:#E4E8F0;
  --line-2:#EDF0F5;
  --navy:#262D63;
  --navy-2:#3A4390;
  --navy-deep:#1B2045;
  --navy-soft:#E9EBF6;
  --gold:#9A631D;
  --gold-bright:#E9962B;
  --gold-lift:#F1BB75;
  --gold-soft:#FAE8D0;
  --accent-2:#494F7C;
  --on-primary:#FFFFFF;
  --on-accent:#231706;
  --hero-tint:rgba(233,150,43,0.12);
  --good:#2A7C7D;
  --good-soft:#E2F0F0;
  --warn:#B45309;
  --warn-soft:#F5E7DD;
  --crit:#B91C1C;
  --crit-soft:#F7E4E4;
  --calm:#39416A;
  --calm-soft:#E9EAEF;
  --cal0:#EDEEF0;
  --cal1:#F7DAB5;
  --cal2:#F2C080;
  --cal3:#E9962B;
  --cal4:#BA7822;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(233,150,43,0.18), 0 8px 30px -14px rgba(38,45,99,0.45);
  color-scheme:light;
}
:root[data-theme="aroh-dark"]{
  --bg:#0F1229;
  --bg-2:#0B0D1E;
  --surface:#181C3A;
  --surface-2:#1E2346;
  --surface-3:#242A54;
  --ink:#ECEEF6;
  --ink-2:#A6ACC6;
  --muted:#8A91B3;
  --line:#2A2F55;
  --line-2:#222749;
  --navy:#3A4390;
  --navy-2:#8E97E3;
  --navy-deep:#080A17;
  --navy-soft:#1C2150;
  --gold:#F2A93E;
  --gold-bright:#F2A93E;
  --gold-lift:#F7C782;
  --gold-soft:#382D2D;
  --accent-2:#565DA0;
  --on-primary:#FFFFFF;
  --on-accent:#241909;
  --hero-tint:rgba(242,169,62,0.1);
  --good:#5BB5B2;
  --good-soft:#15323A;
  --warn:#FBBF24;
  --warn-soft:#393128;
  --crit:#FB7185;
  --crit-soft:#39233A;
  --calm:#C1C5D7;
  --calm-soft:#30344C;
  --cal0:#25273C;
  --cal1:#533F2F;
  --cal2:#815E34;
  --cal3:#B27F38;
  --cal4:#F2A93E;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(242,169,62,0.18), 0 8px 30px -14px rgba(58,67,144,0.45);
  color-scheme:dark;
}
/* default: Aroh dark */
:root{
  --bg:#0F1229;
  --bg-2:#0B0D1E;
  --surface:#181C3A;
  --surface-2:#1E2346;
  --surface-3:#242A54;
  --ink:#ECEEF6;
  --ink-2:#A6ACC6;
  --muted:#8A91B3;
  --line:#2A2F55;
  --line-2:#222749;
  --navy:#3A4390;
  --navy-2:#8E97E3;
  --navy-deep:#080A17;
  --navy-soft:#1C2150;
  --gold:#F2A93E;
  --gold-bright:#F2A93E;
  --gold-lift:#F7C782;
  --gold-soft:#382D2D;
  --accent-2:#565DA0;
  --on-primary:#FFFFFF;
  --on-accent:#241909;
  --hero-tint:rgba(242,169,62,0.1);
  --good:#5BB5B2;
  --good-soft:#15323A;
  --warn:#FBBF24;
  --warn-soft:#393128;
  --crit:#FB7185;
  --crit-soft:#39233A;
  --calm:#C1C5D7;
  --calm-soft:#30344C;
  --cal0:#25273C;
  --cal1:#533F2F;
  --cal2:#815E34;
  --cal3:#B27F38;
  --cal4:#F2A93E;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(242,169,62,0.18), 0 8px 30px -14px rgba(58,67,144,0.45);
  color-scheme:dark;
}
/* Aroh Night — Aroh on true black, for OLED phones */
:root[data-theme="night-light"]{
  --bg:#F7F8FA;
  --bg-2:#EDEEF0;
  --surface:#FFFFFF;
  --surface-2:#F7F8FA;
  --surface-3:#EEF0F5;
  --ink:#161A35;
  --ink-2:#4B5470;
  --muted:#6B7390;
  --line:#E4E8F0;
  --line-2:#EDF0F5;
  --navy:#262D63;
  --navy-2:#3A4390;
  --navy-deep:#1B2045;
  --navy-soft:#E9EBF6;
  --gold:#9A631D;
  --gold-bright:#E9962B;
  --gold-lift:#F1BB75;
  --gold-soft:#FAE8D0;
  --accent-2:#494F7C;
  --on-primary:#FFFFFF;
  --on-accent:#231706;
  --hero-tint:rgba(233,150,43,0.12);
  --good:#2A7C7D;
  --good-soft:#E2F0F0;
  --warn:#B45309;
  --warn-soft:#F5E7DD;
  --crit:#B91C1C;
  --crit-soft:#F7E4E4;
  --calm:#39416A;
  --calm-soft:#E9EAEF;
  --cal0:#EDEEF0;
  --cal1:#F7DAB5;
  --cal2:#F2C080;
  --cal3:#E9962B;
  --cal4:#BA7822;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(233,150,43,0.18), 0 8px 30px -14px rgba(38,45,99,0.45);
  color-scheme:light;
}
:root[data-theme="night-dark"]{
  --bg:#000000;
  --bg-2:#000000;
  --surface:#0C0E1C;
  --surface-2:#13162A;
  --surface-3:#1A1E36;
  --ink:#ECEEF6;
  --ink-2:#A6ACC6;
  --muted:#8A91B3;
  --line:#23264A;
  --line-2:#1A1D3A;
  --navy:#3A4390;
  --navy-2:#8E97E3;
  --navy-deep:#000000;
  --navy-soft:#151838;
  --gold:#F2A93E;
  --gold-bright:#F2A93E;
  --gold-lift:#F7C782;
  --gold-soft:#2C1E0B;
  --accent-2:#565DA0;
  --on-primary:#FFFFFF;
  --on-accent:#241909;
  --hero-tint:rgba(242,169,62,0.1);
  --good:#5BB5B2;
  --good-soft:#10262C;
  --warn:#FBBF24;
  --warn-soft:#2D2206;
  --crit:#FB7185;
  --crit-soft:#2D1418;
  --calm:#C1C5D7;
  --calm-soft:#25262C;
  --cal0:#171717;
  --cal1:#493313;
  --cal2:#79551F;
  --cal3:#AE7A2D;
  --cal4:#F2A93E;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(242,169,62,0.18), 0 8px 30px -14px rgba(58,67,144,0.45);
  color-scheme:dark;
}
/* Mono — Black and white only */
:root[data-theme="mono-light"]{
  --bg:#FAFAFA;
  --bg-2:#F0F0F0;
  --surface:#FFFFFF;
  --surface-2:#FCFCFC;
  --surface-3:#F3F3F3;
  --ink:#0E0E0E;
  --ink-2:#464646;
  --muted:#6B6B6B;
  --line:#E1E1E1;
  --line-2:#ECECEC;
  --navy:#111111;
  --navy-2:#373737;
  --navy-deep:#0C0C0C;
  --navy-soft:#E3E3E3;
  --gold:#111111;
  --gold-bright:#111111;
  --gold-lift:#8A8A8A;
  --gold-soft:#E8E8E8;
  --accent-2:#373737;
  --on-primary:#FFFFFF;
  --on-accent:#FFFFFF;
  --hero-tint:rgba(17,17,17,0.12);
  --good:#2B2B2B;
  --good-soft:#ECECEC;
  --warn:#5A5A5A;
  --warn-soft:#EFEFEF;
  --crit:#111111;
  --crit-soft:#E6E6E6;
  --calm:#444444;
  --calm-soft:#EFEFEF;
  --cal0:#F0F0F0;
  --cal1:#DDDDDD;
  --cal2:#AAAAAA;
  --cal3:#666666;
  --cal4:#111111;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(17,17,17,0.18), 0 8px 30px -14px rgba(17,17,17,0.45);
  color-scheme:light;
}
:root[data-theme="mono-dark"]{
  --bg:#000000;
  --bg-2:#000000;
  --surface:#0D0D0D;
  --surface-2:#161616;
  --surface-3:#1F1F1F;
  --ink:#F0F0F0;
  --ink-2:#CCCCCC;
  --muted:#A3A3A3;
  --line:#2A2A2A;
  --line-2:#1F1F1F;
  --navy:#FAFAFA;
  --navy-2:#FBFBFB;
  --navy-deep:#000000;
  --navy-soft:#373737;
  --gold:#FAFAFA;
  --gold-bright:#FAFAFA;
  --gold-lift:#FFFFFF;
  --gold-soft:#262626;
  --accent-2:#FBFBFB;
  --on-primary:#262626;
  --on-accent:#262626;
  --hero-tint:rgba(250,250,250,0.1);
  --good:#E0E0E0;
  --good-soft:#1C1C1C;
  --warn:#BDBDBD;
  --warn-soft:#1C1C1C;
  --crit:#FAFAFA;
  --crit-soft:#262626;
  --calm:#C4C4C4;
  --calm-soft:#1C1C1C;
  --cal0:#171717;
  --cal1:#333333;
  --cal2:#666666;
  --cal3:#A3A3A3;
  --cal4:#FAFAFA;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(250,250,250,0.18), 0 8px 30px -14px rgba(250,250,250,0.45);
  color-scheme:dark;
}
/* Heirloom — 03 Charcoal × Champagne Gold */
:root[data-theme="heirloom-light"]{
  --bg:#F7F3E8;
  --bg-2:#EDE9DF;
  --surface:#FFFFFF;
  --surface-2:#FBF8F2;
  --surface-3:#F0ECE1;
  --ink:#121212;
  --ink-2:#4D4B46;
  --muted:#77736B;
  --line:#DEDBD1;
  --line-2:#E9E6DB;
  --navy:#171717;
  --navy-2:#3C3C3C;
  --navy-deep:#101010;
  --navy-soft:#E1DDD3;
  --gold:#8C6F1D;
  --gold-bright:#D4A72C;
  --gold-lift:#E3C676;
  --gold-soft:#F6ECD1;
  --accent-2:#3C3C3C;
  --on-primary:#FFFFFF;
  --on-accent:#201907;
  --hero-tint:rgba(212,167,44,0.12);
  --good:#15803D;
  --good-soft:#DEEDE4;
  --warn:#B45309;
  --warn-soft:#F5E7DD;
  --crit:#B91C1C;
  --crit-soft:#F7E4E4;
  --calm:#474541;
  --calm-soft:#E8E8E8;
  --cal0:#EDE9DF;
  --cal1:#F0E0B5;
  --cal2:#E5CA80;
  --cal3:#D4A72C;
  --cal4:#AA8623;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(212,167,44,0.18), 0 8px 30px -14px rgba(23,23,23,0.45);
  color-scheme:light;
}
:root[data-theme="heirloom-dark"]{
  --bg:#191919;
  --bg-2:#121212;
  --surface:#252525;
  --surface-2:#2E2E2E;
  --surface-3:#373737;
  --ink:#F1F1F1;
  --ink-2:#D0CDC7;
  --muted:#AAA49A;
  --line:#404040;
  --line-2:#323232;
  --navy:#E5BE55;
  --navy-2:#E9C76D;
  --navy-deep:#0E0E0E;
  --navy-soft:#463D26;
  --gold:#E5BE55;
  --gold-bright:#E5BE55;
  --gold-lift:#EED591;
  --gold-soft:#3E3724;
  --accent-2:#E9C76D;
  --on-primary:#221D0D;
  --on-accent:#221D0D;
  --hero-tint:rgba(229,190,85,0.1);
  --good:#34D399;
  --good-soft:#1E3A30;
  --warn:#FBBF24;
  --warn-soft:#42371B;
  --crit:#FB7185;
  --crit-soft:#42292C;
  --calm:#C4BFB8;
  --calm-soft:#393835;
  --cal0:#2E2E2E;
  --cal1:#564B2B;
  --cal2:#7F6C37;
  --cal3:#AC9044;
  --cal4:#E5BE55;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(229,190,85,0.18), 0 8px 30px -14px rgba(229,190,85,0.45);
  color-scheme:dark;
}
/* Evergreen — 04 Forest Green × Mint */
:root[data-theme="evergreen-light"]{
  --bg:#F5F9F5;
  --bg-2:#EBEFEB;
  --surface:#FFFFFF;
  --surface-2:#FAFCFA;
  --surface-3:#EEF2EE;
  --ink:#0E2C22;
  --ink-2:#3E4D46;
  --muted:#60766C;
  --line:#DDE0DD;
  --line-2:#E8EBE8;
  --navy:#12372A;
  --navy-2:#38574C;
  --navy-deep:#0D271D;
  --navy-soft:#DEE6E1;
  --gold:#3E8266;
  --gold-bright:#6EE7B7;
  --gold-lift:#A1EFD0;
  --gold-soft:#DFFAEF;
  --accent-2:#38574C;
  --on-primary:#FFFFFF;
  --on-accent:#11231B;
  --hero-tint:rgba(110,231,183,0.12);
  --good:#15803D;
  --good-soft:#DEEDE4;
  --warn:#B45309;
  --warn-soft:#F5E7DD;
  --crit:#B91C1C;
  --crit-soft:#F7E4E4;
  --calm:#39574B;
  --calm-soft:#E7EBEA;
  --cal0:#EBEFEB;
  --cal1:#CCF7E6;
  --cal2:#A8F1D4;
  --cal3:#6EE7B7;
  --cal4:#58B992;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(110,231,183,0.18), 0 8px 30px -14px rgba(18,55,42,0.45);
  color-scheme:light;
}
:root[data-theme="evergreen-dark"]{
  --bg:#103329;
  --bg-2:#0C251E;
  --surface:#1C3D34;
  --surface-2:#26453C;
  --surface-3:#2F4E45;
  --ink:#F1F3F2;
  --ink-2:#C4D5CF;
  --muted:#94B3A7;
  --line:#39564D;
  --line-2:#2A4941;
  --navy:#86F5C5;
  --navy-2:#97F6CD;
  --navy-deep:#091C17;
  --navy-soft:#2A5E4B;
  --gold:#86F5C5;
  --gold-bright:#86F5C5;
  --gold-lift:#B0F9D9;
  --gold-soft:#255645;
  --accent-2:#97F6CD;
  --on-primary:#14251E;
  --on-accent:#14251E;
  --hero-tint:rgba(134,245,197,0.1);
  --good:#34D399;
  --good-soft:#16503D;
  --warn:#FBBF24;
  --warn-soft:#3A4C28;
  --crit:#FB7185;
  --crit-soft:#3A3E3A;
  --calm:#B4CAC1;
  --calm-soft:#2D4F45;
  --cal0:#26453C;
  --cal1:#336D58;
  --cal2:#4B9477;
  --cal3:#65BF99;
  --cal4:#86F5C5;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(134,245,197,0.18), 0 8px 30px -14px rgba(134,245,197,0.45);
  color-scheme:dark;
}
/* Lagoon — 06 Deep Teal × Warm Yellow */
:root[data-theme="lagoon-light"]{
  --bg:#F7FAF8;
  --bg-2:#EDF0EE;
  --surface:#FFFFFF;
  --surface-2:#FBFCFB;
  --surface-3:#F0F3F1;
  --ink:#0E3036;
  --ink-2:#424D4F;
  --muted:#65777A;
  --line:#DEE1DF;
  --line-2:#E9ECEA;
  --navy:#123C43;
  --navy-2:#385B61;
  --navy-deep:#0D2A2F;
  --navy-soft:#E0E7E6;
  --gold:#886F34;
  --gold-bright:#F4C95D;
  --gold-lift:#F8DC96;
  --gold-soft:#FDF3DB;
  --accent-2:#385B61;
  --on-primary:#FFFFFF;
  --on-accent:#251E0E;
  --hero-tint:rgba(244,201,93,0.12);
  --good:#15803D;
  --good-soft:#DEEDE4;
  --warn:#B45309;
  --warn-soft:#F5E7DD;
  --crit:#B91C1C;
  --crit-soft:#F7E4E4;
  --calm:#3C5A5F;
  --calm-soft:#E7ECEC;
  --cal0:#EDF0EE;
  --cal1:#FBECC6;
  --cal2:#F8DF9E;
  --cal3:#F4C95D;
  --cal4:#C3A14A;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(244,201,93,0.18), 0 8px 30px -14px rgba(18,60,67,0.45);
  color-scheme:light;
}
:root[data-theme="lagoon-dark"]{
  --bg:#10373D;
  --bg-2:#0C282C;
  --surface:#1C4147;
  --surface-2:#26494E;
  --surface-3:#2F5156;
  --ink:#F1F3F3;
  --ink-2:#CAD4D5;
  --muted:#9EB0B3;
  --line:#39595E;
  --line-2:#2A4D52;
  --navy:#FFD978;
  --navy-2:#FFDE8B;
  --navy-deep:#091E22;
  --navy-soft:#455B4A;
  --gold:#FFD978;
  --gold-bright:#FFD978;
  --gold-lift:#FFE6A7;
  --gold-soft:#3B5448;
  --accent-2:#FFDE8B;
  --on-primary:#262112;
  --on-accent:#262112;
  --hero-tint:rgba(255,217,120,0.1);
  --good:#34D399;
  --good-soft:#16534E;
  --warn:#FBBF24;
  --warn-soft:#3A4F39;
  --crit:#FB7185;
  --crit-soft:#3A414A;
  --calm:#BBC8CA;
  --calm-soft:#2F5257;
  --cal0:#26494E;
  --cal1:#58684F;
  --cal2:#88885B;
  --cal3:#BCAC67;
  --cal4:#FFD978;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(255,217,120,0.18), 0 8px 30px -14px rgba(255,217,120,0.45);
  color-scheme:dark;
}
/* Royal Crest — The ACT FOR IAS crest colours, for ACT batches */
:root[data-theme="crest-light"]{
  --bg:#F1F4FB;
  --bg-2:#E7EAF1;
  --surface:#FFFFFF;
  --surface-2:#F7F9FD;
  --surface-3:#EAEDF3;
  --ink:#0F204C;
  --ink-2:#535B6D;
  --muted:#75819B;
  --line:#D9DCE2;
  --line-2:#E4E7ED;
  --navy:#13285F;
  --navy-2:#394A79;
  --navy-deep:#0D1C43;
  --navy-soft:#DBE0EB;
  --gold:#8F6F1F;
  --gold-bright:#D9A92F;
  --gold-lift:#E6C778;
  --gold-soft:#F7ECD1;
  --accent-2:#394A79;
  --on-primary:#FFFFFF;
  --on-accent:#211907;
  --hero-tint:rgba(217,169,47,0.12);
  --good:#15803D;
  --good-soft:#DEEDE4;
  --warn:#B45309;
  --warn-soft:#F5E7DD;
  --crit:#B91C1C;
  --crit-soft:#F7E4E4;
  --calm:#495A84;
  --calm-soft:#E7EAEF;
  --cal0:#E7EAF1;
  --cal1:#F2E1B6;
  --cal2:#E8CB82;
  --cal3:#D9A92F;
  --cal4:#AE8726;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(19,40,95,.06);
  --shadow-s:0 1px 2px rgba(14,23,48,.05), 0 2px 8px -4px rgba(14,23,48,.12);
  --shadow:0 1px 2px rgba(14,23,48,.05), 0 12px 28px -18px rgba(14,23,48,.32);
  --shadow-l:0 2px 6px rgba(14,23,48,.06), 0 26px 50px -30px rgba(14,23,48,.45);
  --glow:0 0 0 1px rgba(217,169,47,0.18), 0 8px 30px -14px rgba(19,40,95,0.45);
  color-scheme:light;
}
:root[data-theme="crest-dark"]{
  --bg:#080E20;
  --bg-2:#060A17;
  --surface:#141A2B;
  --surface-2:#1E2434;
  --surface-3:#282D3D;
  --ink:#F0F1F2;
  --ink-2:#BAC2D2;
  --muted:#8290AE;
  --line:#323746;
  --line-2:#232939;
  --navy:#E1B43F;
  --navy-2:#E5BF5A;
  --navy-deep:#040812;
  --navy-soft:#383327;
  --gold:#E1B43F;
  --gold-bright:#E1B43F;
  --gold-lift:#ECCE82;
  --gold-soft:#2F2C26;
  --accent-2:#E5BF5A;
  --on-primary:#221B09;
  --on-accent:#221B09;
  --hero-tint:rgba(225,180,63,0.1);
  --good:#34D399;
  --good-soft:#103136;
  --warn:#FBBF24;
  --warn-soft:#342E21;
  --crit:#FB7185;
  --crit-soft:#342032;
  --calm:#A8B1C6;
  --calm-soft:#232B3F;
  --cal0:#1E2434;
  --cal1:#494029;
  --cal2:#756130;
  --cal3:#A48636;
  --cal4:#E1B43F;
  --accent:var(--gold-bright);
  --accent-ink:var(--gold);
  --accent-soft:var(--gold-soft);
  --indigo:var(--navy-2);
  --indigo-soft:var(--navy-soft);
  --ring:0 0 0 1px rgba(255,255,255,.055);
  --shadow-s:0 1px 2px rgba(0,0,0,.45), 0 2px 10px -6px rgba(0,0,0,.7);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.95);
  --shadow-l:0 2px 8px rgba(0,0,0,.55), 0 30px 60px -34px rgba(0,0,0,1);
  --glow:0 0 0 1px rgba(225,180,63,0.18), 0 8px 30px -14px rgba(225,180,63,0.45);
  color-scheme:dark;
}
/* THEMES:END */

/* ---- the second accent, put to work everywhere ---- */
body{
  background:
    radial-gradient(900px 420px at 12% -10%, color-mix(in srgb,var(--navy) 14%,transparent), transparent 70%),
    radial-gradient(760px 380px at 96% -6%, color-mix(in srgb,var(--gold-bright) 12%,transparent), transparent 70%),
    radial-gradient(700px 500px at 50% 110%, color-mix(in srgb,var(--accent-2) 9%,transparent), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
.hero{
  background:
    radial-gradient(520px 200px at 100% 0%, color-mix(in srgb,var(--accent-2) 16%,transparent), transparent 70%),
    radial-gradient(460px 220px at 0% 100%, var(--hero-tint), transparent 70%),
    linear-gradient(135deg,var(--surface) 0%,var(--surface) 55%,var(--surface-2) 100%)}
.hero::before{background:linear-gradient(90deg,transparent,var(--gold-bright),var(--accent-2),var(--navy-2),transparent);opacity:.7}
.ring .mid b{background:linear-gradient(135deg,var(--gold-bright),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.track i{background:linear-gradient(90deg,var(--gold),var(--gold-lift),var(--accent-2))}
.chip.rank{background:color-mix(in srgb,var(--accent-2) 16%,var(--surface));border-color:color-mix(in srgb,var(--accent-2) 40%,transparent)}
.chip.rank .d,.chip.rank .l,.chip.rank .f{color:var(--accent-2)}
:root[data-theme="light"] .chip.rank .d,:root[data-theme="light"] .chip.rank .l,:root[data-theme="light"] .chip.rank .f{color:var(--accent-2)}
.chip.days{background:color-mix(in srgb,var(--calm) 14%,var(--surface));border-color:color-mix(in srgb,var(--calm) 36%,transparent)}
.gnav button[aria-selected="true"]{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 22px -12px color-mix(in srgb,var(--navy) 70%,transparent)}
.gnav button[aria-selected="true"] .ic{color:color-mix(in srgb,var(--on-primary) 85%,var(--gold-lift))}
.gnav button[aria-selected="true"]{color:var(--on-primary)}
.btn.pri,.topnav a.on,.lbtoggle button[aria-pressed="true"],.dayswitch button[aria-pressed="true"]{color:var(--on-primary)}
.card{border-top:1px solid color-mix(in srgb,var(--line) 70%,var(--accent-2))}
.secthead .eyebrow .ic{color:var(--accent-2)}
.pill.ind{background:color-mix(in srgb,var(--accent-2) 16%,var(--surface));color:var(--accent-2)}
.box.rv{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 45%,var(--line));background:color-mix(in srgb,var(--accent-2) 12%,var(--surface))}
.mini>div{border-top:2px solid color-mix(in srgb,var(--gold-bright) 45%,transparent)}
.mini>div:nth-child(2){border-top-color:color-mix(in srgb,var(--accent-2) 55%,transparent)}
.mini>div:nth-child(3){border-top-color:color-mix(in srgb,var(--navy-2) 55%,transparent)}
.mini>div:nth-child(4){border-top-color:color-mix(in srgb,var(--good) 55%,transparent)}
.perfect{background:linear-gradient(100deg,var(--gold-soft),color-mix(in srgb,var(--accent-2) 14%,var(--surface)),var(--gold-soft))}
.celcard,.onbbox{border-top:2px solid color-mix(in srgb,var(--accent-2) 60%,transparent)}
.pil-i{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent-2) 22%,var(--surface-2)),var(--surface-2) 72%)}

/* ---- the picker ---- */
.themepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:8px}
.swatch{display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:10px 11px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:left;
  transition:transform .18s,border-color .18s,box-shadow .18s}
.swatch:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.swatch[aria-pressed="true"]{border-color:var(--gold-bright);box-shadow:var(--glow);color:var(--ink)}
.swatch .dots{display:flex;gap:4px}
.swatch .dots i{width:16px;height:16px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.15) inset}
.swatch .dots i:nth-child(1){background:var(--s1)} .swatch .dots i:nth-child(2){background:var(--s2)} .swatch .dots i:nth-child(3){background:var(--s3)} .swatch .dots i:nth-child(4){background:var(--s4)}
.acctform.col input{flex:0 0 auto}

/* ===========================================================
   BRAND RULES (Brand Theme Exploration Guide, Oct 2026)
   Primary on controls and navigation. Accent only where it means
   progress, a selected state, a call to action or an achievement — scarce
   enough that it signals. Simple geometry, flat colour fields, no
   decorative gradients. 12–20px radii, one icon stroke, one type family.
   =========================================================== */
body{background:var(--bg);font-variant-numeric:tabular-nums}
h1,h2,h3{font-variation-settings:normal;letter-spacing:-.02em}
.eyebrow{font-variation-settings:normal}
.hero{background:var(--surface)}
.hero::before{background:var(--gold-bright);opacity:1;height:3px}
.ring .mid b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink)}
.track i{background:var(--gold-bright)}
.track i::after{display:none}
.lvlrow b{color:var(--ink)}
.chip.streak{background:var(--gold-soft);border-color:transparent}
.chip.streak .d,.chip.streak .l,.chip.streak .f{color:var(--gold)}
.chip.rank{background:var(--navy-soft);border-color:transparent}
.chip.rank .d,.chip.rank .l,.chip.rank .f{color:var(--navy)}
:root[data-theme$="-dark"] .chip.rank .d,:root[data-theme$="-dark"] .chip.rank .l,:root[data-theme$="-dark"] .chip.rank .f{color:var(--ink)}
.chip.days{background:var(--surface-2);border-color:var(--line)}
.chip.days .d,.chip.days .l,.chip.days .f{color:var(--ink-2)}
.btn.pri{background:var(--navy);border-color:var(--navy);color:var(--on-primary);box-shadow:none}
.btn.pri:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn.gold{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--on-accent);box-shadow:none}
.btn.gold:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
.gnav button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-primary);box-shadow:none}
.gnav button[aria-selected="true"] .ic{color:var(--on-primary)}
.tabs button::after,.subtabs button::after{background:var(--gold-bright)}
.lbtoggle button[aria-pressed="true"],.dayswitch button[aria-pressed="true"],.topnav a.on{background:var(--navy);color:var(--on-primary)}
.bar i{background:var(--navy)}
.card{border-top:1px solid var(--line)}
.mini>div{background:var(--surface-2);border-top:1px solid var(--line)}
.mini>div:nth-child(2),.mini>div:nth-child(3),.mini>div:nth-child(4){border-top-color:var(--line)}
.perfect{background:var(--gold-soft)}
.perfect::after{display:none}
.eyebrow .ic{color:var(--ink-2)}
.secthead .eyebrow .ic{color:var(--navy)}
:root[data-theme$="-dark"] .secthead .eyebrow .ic{color:var(--ink-2)}
.pill.ind{background:var(--navy-soft);color:var(--navy)}
:root[data-theme$="-dark"] .pill.ind{color:var(--ink)}
.box.rv{color:var(--navy);border-color:var(--line);background:var(--navy-soft)}
:root[data-theme$="-dark"] .box.rv{color:var(--ink)}
.celcard,.onbbox{border-top:3px solid var(--gold-bright)}
.pil-i{background:var(--navy-soft);color:var(--navy)}
:root[data-theme$="-dark"] .pil-i{color:var(--ink)}
.pillar[aria-pressed="true"] .pil-i{background:var(--gold-bright);color:var(--on-accent)}
.onbsteps i.on{background:var(--gold-bright)}
.bemblem,.trophy span,.pod .m{background:var(--surface-2)}
.badge.on .bemblem,.trophy span,.pod.first .m{background:var(--gold-bright);box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--gold-soft)}
.themetog .thumb{background:var(--gold-bright)}
.themetog .thumb i .ic{color:var(--on-accent)}
.toast{background:var(--navy-deep);color:#fff}
.swatch .dots i{box-shadow:0 0 0 1px rgba(0,0,0,.18) inset}
.swatch[aria-pressed="true"]{border-color:var(--navy);box-shadow:none}
.themepick{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.topbar{border-bottom:1px solid var(--line)}
@media (max-width:480px){.themepick{grid-template-columns:repeat(2,1fr)}}

/* The ACT crest look keeps its gold calls to action (brand guide, Vikram 6 Oct).
   Every Aroh look follows the Aroh kit: brand-fill buttons, amber only for the sun, today and progress. */
[data-theme^="crest-"] .btn.pri,[data-theme^="crest-"] .gnav button[aria-selected="true"],[data-theme^="crest-"] .lbtoggle button[aria-pressed="true"],[data-theme^="crest-"] .dayswitch button[aria-pressed="true"],[data-theme^="crest-"] .topnav a.on{
  background:var(--gold-bright);border-color:var(--gold-bright);color:var(--on-accent)}
[data-theme^="crest-"] .btn.pri:hover{background:var(--gold-lift);border-color:var(--gold-lift)}
[data-theme^="crest-"] .gnav button[aria-selected="true"] .ic{color:var(--on-accent)}
.swatch[aria-pressed="true"]{border-color:var(--navy-2)}
.lbtoggle button[aria-pressed="true"],.dayswitch button[aria-pressed="true"],.topnav a.on{background:var(--navy);border-color:var(--navy);color:var(--on-primary)}
/* phones: a field under 16px makes iPhone Safari zoom the whole page on focus */
@media (max-width:760px){
  input,select,textarea{font-size:16px !important}
  .form input,.form select,.acctform input,.chipadd input,.onbstep .fld input,.onbstep .fld select{font-size:16px !important}
}
#pinSet input::placeholder,#pinA::placeholder,#pinB::placeholder{letter-spacing:0}

/* ---- UI batch, part 1 ---- */
@media (max-width:760px){
  .acctform input,.acctform select{flex:0 0 auto;width:100%}
}
.guidehead{display:flex;align-items:center;gap:14px;margin-top:18px;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line)}
.guidehead h2{font-size:16px;margin:0}
.guidehead .hint{display:block;margin-top:2px}
.guidehead .btn .ic{margin-right:4px}
.subtabs.guidetabs{flex-wrap:wrap;overflow:visible}
.subtabs.guidetabs button{padding:9px 12px;font-size:12.5px}
.switchrow.remindrow{align-items:center;cursor:default}
.switchrow.remindrow>div{flex:1 1 auto;min-width:0}
.switchrow.remindrow input[type=time]{margin-left:auto;flex:0 0 auto;font:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.pillarpick{border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px 6px;margin:12px 0 8px}
.pillarpick legend{padding:0 6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.pillarpick label{display:flex;align-items:flex-start;gap:10px;padding:8px 4px;cursor:pointer;font-weight:400}
.pillarpick input{margin-top:3px;accent-color:var(--gold-bright)}
.pillarpick b{display:block;font-size:13.5px;font-weight:600}
.pillarpick small{display:block;font-size:12px;color:var(--muted)}

/* ---- the account panel, rebuilt: a home with six doors ---- */
.acctbox{width:min(480px,100%);border-radius:22px}
.accthead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.accthead h3{flex:1 1 auto;margin:0;font-size:15px;font-weight:700;text-align:center}
.accthead .btn{flex:0 0 auto;min-width:64px}
.accthead #acctBack .ic{margin-right:3px}
.acctbody{padding:8px 16px 18px}
.acctid{display:flex;align-items:center;gap:14px;padding:14px 4px 16px}
.acctface{width:56px;height:56px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;flex:none;position:relative}
.acctface .face{--d:56px}
.acctface::after{content:"";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--gold-bright);
  border:2px solid var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M17 3a2.8 2.8 0 0 1 4 4L7.5 20.5 2 22l1.5-5.5z'/%3E%3C/svg%3E");
  background-size:9px;background-position:center;background-repeat:no-repeat}
.acctwho{min-width:0;flex:1 1 auto}
.acctwho b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.01em;line-height:1.2}
.acctwho .acctmail{display:block;margin:3px 0 0;font-family:var(--body);font-size:12.5px;font-weight:400;color:var(--muted)}
.acctwho .acctmode{display:block;margin:4px 0 0;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.acctmenu{display:flex;flex-direction:column;gap:8px}
.acctmenu button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);color:inherit;font:inherit;cursor:pointer;transition:transform .16s,border-color .16s,background .16s}
.acctmenu button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gold-bright) 45%,var(--line));background:var(--surface-3)}
.am-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--navy-soft);color:var(--navy)}
:root[data-theme$="-dark"] .am-i{color:var(--ink)}
.am-t{flex:1 1 auto;min-width:0}
.am-t b{display:block;font-size:14px;font-weight:600}
.am-t span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-c{color:var(--muted);flex:none}
.acctsec .acctrow{padding:16px 0}
.acctsec .acctrow:first-child{padding-top:10px}
.acctbox .acctrow .eyebrow{margin-bottom:4px}
.acctbox input:not([type=checkbox]):not([type=radio]),.acctbox select{font:inherit;font-size:14px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);color:var(--ink);width:100%;min-width:0;height:auto}
.acctbox input:focus{outline:none;border-color:var(--gold-bright);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 22%,transparent)}
.acctbox .acctform{gap:8px}
.acctbox .acctform input{flex:1 1 160px}
.acctbox .acctform .btn{flex:0 0 auto}
.acctbox .acctform.col .btn,.acctbox .acctform.col input{width:100%}
.acctmode.big{font-family:var(--display);font-size:17px;letter-spacing:-.01em;margin:4px 0 0}
.acctnote{margin:18px 0 0;font-size:12px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){
  .acctbox .acctform{flex-direction:column}
  .acctbox .acctform input,.acctbox .acctform .btn{width:100%;flex:0 0 auto}
  .acctmenu button{padding:13px 12px}
}

/* ---- the characters: drawn, animated, one family ---- */
.face{display:grid;place-items:center;background:none;box-shadow:0 2px 8px rgba(0,0,0,.22);line-height:0}
.face .av{display:block;width:100%;height:100%}
/* a photo in the same circle as the character */
.face.photo{background:var(--line)}
.face.photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.photorow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.photorow #photoFace .face{--d:64px}
.photoacts{display:flex;gap:8px;flex-wrap:wrap}
.av .av-eyes{transform-box:fill-box;transform-origin:center;animation:av-blink 5.2s var(--av-delay,0s) infinite}
.av .av-body{transform-box:fill-box;transform-origin:center 90%}
.av.anim-bob .av-body{animation:av-bob 3.4s var(--av-delay,0s) ease-in-out infinite}
.av.anim-wiggle .av-body{animation:av-wiggle 3.8s var(--av-delay,0s) ease-in-out infinite}
.av.anim-float .av-body{animation:av-float 4.2s var(--av-delay,0s) ease-in-out infinite}
.av.anim-nod .av-body{animation:av-nod 3.6s var(--av-delay,0s) ease-in-out infinite}
.av .av-steam{animation:av-steam 2.6s ease-in-out infinite}
@keyframes av-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes av-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes av-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}
@keyframes av-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes av-nod{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(1.5px) scaleY(.96)}}
@keyframes av-steam{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.av *{animation:none !important}}
.avmine{display:flex;align-items:center;gap:14px;padding:4px 2px 14px}
.avmine .face{--d:64px}
.avmine b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.01em}
.avmine span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.avgrouphead{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.avgroup{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.avgrid{display:block;max-height:none}
.avpick .face{--d:44px}
.avpick i{font-size:11px}/* the three pillars on the request form: radio beside full-width text */
.pillarpick label{display:flex !important;flex-direction:row;align-items:flex-start;gap:10px;margin:0;width:100%;font-size:13px}
.pillarpick label>span{flex:1 1 auto;min-width:0;display:block}
.pillarpick label input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0}

/* ---------- the calm batch (Oct 2026) ---------- */
.pacebar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;margin-top:10px}
.pacebar i{display:block;height:100%;width:0;background:var(--gold-bright);border-radius:3px;transition:width .4s ease}
.summits{display:inline-flex;align-items:center;gap:2px;margin-left:6px;font-size:11px;font-weight:700;color:var(--gold);vertical-align:1px}
.summits svg{color:var(--gold-bright)}
.unlocknote{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin:14px 0 -4px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12.5px;line-height:1.45;background:var(--surface-2)}
.unlocknote svg{flex:none;margin-top:2px;color:var(--gold)}
.badge:not(.on){border-style:dashed;background:transparent}
.badge:not(.on) > :first-child{filter:grayscale(1);opacity:.55}
.draftbox{width:100%;font:inherit;font-size:13.5px;line-height:1.5;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);resize:vertical}/* the pace card: the shared number on top, the two people under it */
.duel .duelrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.duel .duelvs{grid-column:1 / -1;order:-1;text-align:center;padding:4px 0 2px}
.duel .duelvs b{font-size:26px;letter-spacing:-.02em;white-space:nowrap;display:block}
.duel .duelvs span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.duel .duelside{display:flex;gap:10px;align-items:center;min-width:0}
.duel .duelside > div{min-width:0}
.duel .duelside b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duel .duelside span{display:block;font-size:12px;color:var(--ink-2)}
.duel .duelside i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ===========================================================
   AROH BRAND (10 Oct 2026)
   Type, logo placement and the few hard-coded colours that used to be
   navy and gold. Theme colours themselves come from the generated block
   above; this is what sits on top of every look.
   =========================================================== */
:root{
  --display:"Outfit","Hanken Grotesk",-apple-system,Segoe UI,Roboto,sans-serif;
  --title:"Outfit","Hanken Grotesk",-apple-system,Segoe UI,Roboto,sans-serif;
  --body:"Hanken Grotesk",-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px; --r-s:8px;
}
/* the logo is two images; the theme decides which one shows */
img.logo.logo-l{display:none}img.logo.logo-d{display:block}
html[data-theme$="-light"] img.logo.logo-l{display:block}
html[data-theme$="-light"] img.logo.logo-d{display:none}
.brand img.logo{width:auto;height:24px;filter:none;transition:none}
.brand:hover img.logo{transform:none}
.brand .tagline{font-size:12px;color:var(--muted);letter-spacing:.01em}
.footbrand{gap:14px}
.footbrand img.logo{width:auto;height:20px;opacity:1}
.footbrand .tagline,.foottext .tagline{font-size:12.5px;color:var(--muted)}
img.logo.authlogo,img.logo.sidemark{width:auto;height:96px;filter:none;animation:riseIn .6s cubic-bezier(.22,.75,.3,1) both}
.login img.logo{margin:0 auto 14px}
.onbhead img.logo{height:22px;width:auto}
/* the share card is always indigo and snow, whatever look is on */
.sharecard{background:radial-gradient(120% 90% at 78% -10%,#3A4390 0%,#262D63 42%,#0F1229 100%);
  border:1px solid rgba(242,169,62,.32);color:#F7F8FA}
.shtop{border-bottom:1px solid rgba(242,169,62,.22)}
.shtop img{width:auto;height:30px}
.shbrand b{color:#F2A93E}
/* the walker on the guide's spine is now the sun dot */
.walker.sun{width:12px;height:12px;border-radius:999px;background:var(--gold-bright);font-size:0;
  box-shadow:0 0 0 3px var(--surface)}
/* numbers that should line up */
.clock b,.floatxp,.lvl b,.xpnum,.metric{font-family:var(--mono);font-variant-numeric:tabular-nums}
.shbrand span{text-transform:none;letter-spacing:.01em;font-size:12px;color:rgba(247,248,250,.66)}

/* ---------- this week's climb ---------- */
.climb{margin:0 0 14px;padding:12px 12px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.climbhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.climbweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.cw{display:grid;justify-items:center;gap:3px;padding:8px 2px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0;text-align:center}
.cw .dn{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cw svg{width:24px;height:24px;display:block}
.cw .cap{font-size:11px;color:var(--ink-2)}
.cw .sw{font-family:var(--mono);font-size:10px;color:var(--gold);min-height:12px}
.cw.now{border-color:var(--gold-bright);box-shadow:inset 0 0 0 1px var(--gold-bright)}
.cw.later{opacity:.55}
.cw.kept{background:color-mix(in srgb,var(--gold-bright) 10%,var(--surface))}
.climbvoice{margin:10px 2px 0;font-family:var(--display);font-weight:500;font-size:14.5px;line-height:1.4;color:var(--ink)}
.climbstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.climbstats div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}
.climbstats b{display:block;font-family:var(--mono);font-size:22px;font-weight:500;line-height:1.2;color:var(--ink)}
.climbstats span{font-size:12px;color:var(--muted)}
@media (max-width:560px){.cw .cap{font-size:10px}.cw svg{width:20px;height:20px}.climbweek{gap:4px}.cw{padding:7px 1px 5px}}
/* ---------- the Sunday review, and the rhythm picker ---------- */
.reviewcard header{gap:10px}
.reviewcard header h2{flex:1 1 auto}
.reviewstats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:8px}
.reviewstats b{font-size:20px}
.reviewcard .climbvoice{margin-top:4px}
.taskrhythm{font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:6px 8px;max-width:100%}
.daypills.hidden{display:none}
@media (max-width:560px){.reviewstats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- the world: the mountain and the sky ---------- */
.plate{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.plate canvas{display:block;width:100%;cursor:pointer}
.platefoot{display:flex;justify-content:space-between;align-items:baseline;gap:8px 18px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--line)}
.platefoot .voice{font-family:var(--display);font-weight:500;font-size:15px;line-height:1.4;color:var(--ink);flex:1 1 260px;min-width:0}
.platefoot .alt{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.platefoot .alt b{color:var(--ink);font-weight:500}
.skyplate{background:#0F1229;border-color:#2A2F55}
.skyplate .platefoot{border-top-color:#2A2F55}
.skyplate .voice{color:#ECEEF6}.skyplate .alt{color:#A6ACC6}
.skypin{position:absolute;z-index:3;max-width:min(250px,72vw);padding:10px 12px;border:1px solid rgba(242,169,62,.38);border-radius:12px;
  background:rgba(15,18,41,.95);color:#ECEEF6;backdrop-filter:blur(6px);box-shadow:0 14px 34px -14px #000;font-size:13px;pointer-events:auto}
.skypin .pname{font-weight:700;line-height:1.3}
.skypin .psub{color:#F2A93E;font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.skypin dl{margin:8px 0 0;display:grid;grid-template-columns:auto auto;gap:3px 12px}
.skypin dt{color:#A6ACC6;font-size:12px}.skypin dd{margin:0;text-align:right;font-size:12px;font-variant-numeric:tabular-nums}
.skypin .skygo{margin-top:8px;width:100%}
.lvlgo{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;align-items:baseline;gap:10px}
.lvlgo:hover b{text-decoration:underline;text-underline-offset:3px}
.climbnext{margin:12px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.climbnext b{display:block;font-weight:600;font-size:15px;margin-bottom:2px}
.climbnext span{font-size:13.5px;color:var(--ink-2)}
.hutnote{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--calm-soft);color:var(--ink);font-size:13.5px}
.hutnote svg{flex:none;color:var(--navy-2)}
.ckeys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 22px;list-style:none;margin:16px 0 0;padding:0}
.ckeys li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);min-width:0}
.ckeys b{display:block;color:var(--ink);font-weight:600}
.ck{flex:none;width:24px;height:24px;border-radius:7px;margin-top:2px;background:var(--surface-2);border:1px solid var(--line);position:relative}
.ck::after{content:"";position:absolute;inset:0;margin:auto;border-radius:50%}
.ck-step::after{width:10px;height:10px;background:var(--gold-bright)}
.ck-tent::after{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--navy-2);border-radius:0}
.ck-hut::after{width:12px;height:9px;background:var(--muted);border-radius:2px 2px 0 0;top:4px}
.ck-open::after{width:10px;height:10px;border:1.5px dashed var(--muted)}
.ck-flag::after{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid var(--gold-bright);border-radius:0}
.ck-range::after{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:11px solid var(--muted);border-radius:0}
.ck-bright::after{width:9px;height:9px;background:#EEF3FF;box-shadow:0 0 8px 3px rgba(238,243,255,.5)}
.ck-faint::after{width:7px;height:7px;background:#EEF3FF;opacity:.3}
.ck-due::after{width:9px;height:9px;background:#F2A93E;box-shadow:0 0 8px 3px rgba(242,169,62,.45)}
.ck-gold::after{width:9px;height:9px;background:#F2A93E}
.ck-bright,.ck-faint,.ck-due,.ck-gold{background:#0F1229;border-color:#2A2F55}
.rev .flash{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:10px;transition:outline-color .6s}
/* ---------- the inbox ---------- */
.navbtn{position:relative}
.navbadge{position:absolute;top:-4px;right:-6px;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--gold-bright);color:var(--on-accent);
  font-family:var(--mono);font-size:10.5px;font-weight:600;line-height:17px;text-align:center;font-style:normal}
.inboxlist{display:grid;gap:10px}
.inboxitem{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.inboxitem.unread{border-color:color-mix(in srgb,var(--gold-bright) 45%,var(--line));box-shadow:inset 3px 0 0 var(--gold-bright)}
.inboxitem .ih{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.inboxitem .ifrom{color:var(--gold)}
.inboxitem b{display:block;font-size:15px;margin-bottom:4px}
.inboxitem p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);white-space:pre-line}
/* ---------- plan-locked tabs ---------- */
.tabs button.locked{opacity:.75}
.tabs button.locked i{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-left:6px;padding:1px 6px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:999px}

/* ---------- the Study Room, friends and chat ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.person{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.person.here{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.person .pt{display:flex;flex-direction:column;min-width:0;flex:1}
.person .pt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .pt span{font-size:12px;color:var(--muted)}
.person.here .pt span{color:var(--good)}
.person .pacts{display:flex;gap:6px}
.rooms{display:grid;gap:8px;margin-top:8px}
.roomcard{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.roomcard.here{border-color:var(--gold-bright)}
.roomcard .rt{display:flex;flex-direction:column;min-width:0}
.roomcard .rt b{font-size:15px}.roomcard .rt span{font-size:12.5px;color:var(--muted)}
.roomhost{margin-top:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0F1229}
.roomtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
#roomFrame iframe{display:block;width:100%;border:0;min-height:480px}
.friendfind{display:flex;gap:8px;margin-bottom:8px}
.friendfind input{flex:1;min-width:0}
.hits,.flist{display:grid;gap:8px;margin-bottom:10px}
.chatlog{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px 10px}
.msg{max-width:78%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--surface-2);font-size:14px;line-height:1.45;align-self:flex-start;display:flex;flex-direction:column;gap:2px}
.msg.me{align-self:flex-end;background:color-mix(in srgb,var(--navy) 22%,var(--surface));border-radius:14px 14px 4px 14px}
.msg i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--muted);align-self:flex-end}
.chatbox{display:flex;gap:8px}
.chatbox input{flex:1;min-width:0}
.chatacts{margin-top:8px;font-size:12.5px;color:var(--muted)}
.toggles{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:8px 0}
.toggles label{display:flex;align-items:center;gap:6px;font-size:13.5px}
.chatadmin{display:grid;gap:6px;max-height:260px;overflow:auto;font-size:13px}
.chatadmin div{padding:6px 10px;border-radius:10px;background:var(--surface-2)}
.chatadmin b{font-weight:600;margin-right:6px}
/* ---------- step 7: language, the phone, the shield ---------- */
.langpick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.langopt{padding:12px 10px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-2);
  font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.langopt:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
.langopt[aria-pressed="true"]{border-color:var(--gold-bright);box-shadow:var(--glow);color:var(--ink)}
/* Devanagari and Telugu need their own faces; the Latin stack stays for numbers and the brand */
html[lang="hi"]{--display:"Noto Sans Devanagari","Outfit","Hanken Grotesk",sans-serif;--title:"Noto Sans Devanagari","Outfit",sans-serif;--body:"Noto Sans Devanagari","Hanken Grotesk",sans-serif}
html[lang="te"]{--display:"Noto Sans Telugu","Outfit","Hanken Grotesk",sans-serif;--title:"Noto Sans Telugu","Outfit",sans-serif;--body:"Noto Sans Telugu","Hanken Grotesk",sans-serif}
html[lang="hi"] body,html[lang="te"] body{line-height:1.65}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="te"] h1,html[lang="te"] h2,html[lang="te"] h3{letter-spacing:0;font-variation-settings:normal}
html[lang="hi"] .eyebrow,html[lang="te"] .eyebrow{letter-spacing:.04em;font-size:10.5px}
html[lang="hi"] .brand,html[lang="te"] .brand,html[lang="hi"] .wordmark,html[lang="te"] .wordmark{font-family:"Outfit","Hanken Grotesk",sans-serif}
.timerbtns .btn.sm{min-width:0;padding:7px 12px}

/* ---------- design review, 10 Oct: the day first ---------- */
.heromore{display:none}
.acctout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:14px 0 4px}
.ringmark{pointer-events:none}
body.onpage .hero,body.onpage .gnav,body.onpage .tabs,body.onpage .demo{display:none}
body.onpage .guidehead{margin-top:6px}
/* plan items: the row is the control; its buttons show on a tap */
.planitem .btn,.planitem .when{display:none}
.planitem.open .btn{display:inline-flex}
.planitem.open .when{display:flex}
.planitem .chkadd,.planitem .postpone{display:none}
.planitem.open .chkadd,.planitem.open .postpone{display:flex}
.planitem{cursor:pointer}
.planitem.open{box-shadow:var(--glow)}
#clockDate{display:none}
@media (max-width:760px){
  .clock{display:none}
  .hero{position:relative}
  .heromore{display:flex;position:absolute;right:10px;top:10px;width:30px;height:30px;align-items:center;justify-content:center;
    border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);cursor:pointer;transition:transform .2s}
  .heromore[aria-expanded="true"]{transform:rotate(180deg)}
  .hero.compact{padding:12px 14px;gap:12px;flex-wrap:nowrap;align-items:center}
  .hero.compact .ring,.hero.compact .ring svg{width:58px;height:58px}
  .hero.compact .ring .mid b{font-size:14px}
  .hero.compact .ring .mid span{font-size:6.5px;letter-spacing:.08em}
  .hero.compact .myface{display:none}
  .hero.compact #heroDate,.hero.compact .track,.hero.compact .chips,.hero.compact .mentortag{display:none}
  .hero.compact .herotext{flex:1 1 auto;min-width:0;padding-right:34px}
  .hero.compact .herotext h1{font-size:16px;margin:0}
  .hero.compact .lvlrow{margin-top:2px}
  .hero.compact .steplegend{display:block;font-size:10.5px;line-height:1.35;margin:3px 0 0;max-width:none}
  /* on a phone the three answers sit on their own line under the topic, with their words */
  .t-btn.revrow{flex-wrap:wrap}
  .t-btn.revrow .revhow{flex:1 0 100%;margin:6px 0 0 30px;justify-content:flex-start}
  .revhow .how span{display:inline;font-size:10.5px;margin-left:3px}
  .revhow .how{padding:5px 8px;gap:3px}
  .revhow .how{padding:5px 7px}
}

/* ---------- the opening ---------- */
.splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg);transition:opacity .5s ease,visibility .5s}
.splash.lift{opacity:0;visibility:hidden}
.splashmark{overflow:visible}
.sp-letters{fill:var(--ink);opacity:0;transform:translateY(10px);animation:spRise .7s cubic-bezier(.22,.75,.3,1) .1s both}
.sp-sun{fill:var(--accent);transform-origin:146.5px 10px;transform:translateY(34px) scale(.6);opacity:0;
  animation:spSun .8s cubic-bezier(.2,.7,.2,1) .45s both}
.sp-line{font-family:var(--display);font-size:16px;letter-spacing:.02em;color:var(--ink-2);opacity:0;animation:spFade .6s ease 1s both}
@keyframes spRise{to{opacity:1;transform:translateY(0)}}
@keyframes spSun{60%{opacity:1}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spFade{to{opacity:1}}
html.splashing body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.splash{display:none}}

/* ---------- the first week, and the tour ---------- */
.journey{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.jtrack{margin:0 0 12px}
.jsteps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jstep{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;transition:transform .16s,border-color .16s}
.jstep:hover{transform:translateY(-1px);border-color:var(--line)}
.jn{flex:none;width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;
  background:var(--surface-3);color:var(--ink-2)}
.jsteps li.done .jn{background:var(--good-soft);color:var(--good)}
.jsteps li.done .jt b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.jsteps li.done .jt span{display:none}
.jt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.jt b{font-size:13.5px;font-weight:600}
.jt span{font-size:12px;color:var(--ink-2);line-height:1.4}
.jgo{flex:none;color:var(--muted)}
.jdone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--good-soft)}
.jdone b{flex:1;font-size:14px}
.tourwrap{position:fixed;inset:0;z-index:95}
.tourhole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px color-mix(in srgb,var(--bg) 72%,transparent),0 0 0 2px var(--accent);pointer-events:none;transition:all .35s ease}
.tourcard{position:fixed;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 24px));padding:16px 18px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);transition:top .35s ease}
.tourcard b{display:block;font-family:var(--display);font-size:17px;margin:4px 0 6px}
.tourcard p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.touracts{display:flex;justify-content:space-between;gap:8px;margin-top:14px}

/* ---------- the review of 11 Oct: no red, quieter numbers, the drawer ---------- */
/* Red is not in the palette. What used to be red is slate: a state, not an alarm. */
:root[data-theme$="-light"]{--crit:#6B7390;--crit-soft:#EEF0F5}
:root[data-theme$="-dark"]{--crit:#A6ACC6;--crit-soft:#232848}
.alert{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--ink)}
body.drawer{overflow:hidden}
body.offdash #noticeBars,body.offdash #windDown{display:none}
.navbadge{right:auto;left:14px;top:-5px}
.bemblem .ic,.trophies .ic{color:var(--brand,var(--navy-2))}
.chip.streak .f .ic{color:var(--accent)}
/* locked levels in the guide are grey; reached ones take the glacier */
.ladder .rung:not(.on),.glevels .rung:not(.on){opacity:.55;filter:grayscale(1)}

/* the celebration tile: a brand-fill square with a line icon, no emoji, no gold shadow */
.celemblem{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:18px;background:var(--navy);color:var(--on-primary);filter:none;font-size:0}
.celemblem .ic{width:36px;height:36px}

/* ---------- the seven areas ---------- */
.areahead{list-style:none;margin:10px 0 2px;padding:0 2px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.areahead:first-child{margin-top:0}
.t-area{flex:none;display:inline-flex;align-items:center;color:var(--muted);margin-right:6px}
.taskarea{font:inherit;font-size:12.5px;padding:6px 8px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.areapick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.areaopt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
.areaopt:hover{transform:translateY(-1px)}
.areaopt .ai{color:var(--muted)}
.areaopt b{font-size:13.5px;color:var(--ink)}
.areaopt .ab{font-size:11.5px;line-height:1.4}
.areaopt[aria-pressed="true"]{border-color:var(--navy-2);box-shadow:var(--glow);color:var(--ink)}
.areaopt[aria-pressed="true"] .ai{color:var(--navy-2)}
.areaideas{margin-top:12px;display:grid;gap:8px}
.idearow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ideahead{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-right:4px}
.ideahead b{font-weight:600;color:var(--ink-2)}
.ideachip{font:inherit;font-size:12.5px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.ideachip:hover{border-color:var(--navy-2)}
.areabars{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2)}
.areabars .seven{display:flex;align-items:flex-end;gap:10px;height:120px;margin:12px 0 8px}
.sbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;min-width:0}
.sbar i{display:block;width:100%;max-width:38px;border-radius:6px 6px 3px 3px;background:var(--navy-2);opacity:.9;transition:height .4s ease}
.sbar:last-child i{background:var(--accent)}
.sbar b{font-family:var(--mono);font-size:12px}
.sbar span{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- recovery, last night, the welcome back ---------- */
.esslist{display:grid;gap:6px;max-height:220px;overflow:auto;padding-right:4px}
.essrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);font-size:13.5px;cursor:pointer}
.essrow input{accent-color:var(--navy-2);width:16px;height:16px}
.barpick{display:flex;gap:8px}
.barbtn{font:inherit;font-size:13px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-2);cursor:pointer}
.barbtn[aria-pressed="true"]{border-color:var(--navy-2);color:var(--ink);box-shadow:var(--glow)}
.lastnight{margin-bottom:12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2)}
.lastnight .secthead{margin-bottom:4px}
.showrest{list-style:none;padding:8px 2px 0}
.backacts{margin:10px 0 12px}
.backrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* ---- background sound under the focus clock ---- */
.bgpick{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bgchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.bgchip{font:600 13px var(--body);padding:7px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.bgchip:hover{border-color:var(--navy)}
.bgchip.on{background:var(--navy);border-color:var(--navy);color:var(--on-primary,#fff)}
.bgchip.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px;animation:bglive 1.6s ease-in-out infinite}
@keyframes bglive{0%,100%{opacity:.35}50%{opacity:1}}
.bgvol{display:flex;align-items:center;gap:10px}
.bgvol input[type=range]{flex:1 1 auto;accent-color:var(--navy);max-width:220px}
@media (prefers-reduced-motion:reduce){.bgchip.live::before{animation:none}}

/* the app icon on each look's swatch */
.swatch{position:relative}
.swatch .swicon{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:6px;opacity:.95}

/* the steps to the home screen */
.phonehow{margin:12px 0 0;padding-left:20px;color:var(--ink-2);font-size:14px;line-height:1.5}
.phonehow li{margin:0 0 6px}
.bgchip.wait{opacity:.7}
.bgchip.wait::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted);margin-right:7px;vertical-align:1px;animation:bglive .8s ease-in-out infinite}

/* on a phone the top bar is solid: a translucent blurred bar smears whatever
   scrolls under it, and the hero's light was showing through by the bell */
@media (max-width:760px){.topbar{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---- the tools an area carries ---- */
.areatools{margin-top:16px}
.toolset{margin-top:10px}
.toolset .hint{margin:4px 0 8px}
.toolchip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;margin:6px 0;border-radius:12px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink);cursor:pointer}
.toolchip b{font-size:13.5px;flex:0 0 auto;min-width:76px}
.toolchip span{flex:1 1 auto;font-size:12.5px;color:var(--muted);line-height:1.4}
.toolchip i{font-style:normal;font:600 11px var(--mono);letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--line);color:var(--ink-2)}
.toolchip[aria-pressed="true"]{border-color:var(--navy)}
.toolchip[aria-pressed="true"] i{background:var(--navy);color:var(--on-primary,#fff)}
.toolcard .htool{padding:12px 0;border-top:1px solid var(--line)}
.toolcard .htool:first-child{border-top:0;padding-top:0}
.toolcard .secthead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.toolcard .secthead .tnote{text-align:right}
.toolcard .acctform.times input[type=time]{max-width:120px}
.toolcard .acctform.bills{flex-wrap:wrap}
.toolcard .acctform.bills input{min-width:0}
.toolcard .acctform.bills input:first-child{flex:2 1 120px}
.toolcard .acctform.bills input[type=number]{flex:1 1 70px;max-width:110px}
.loglist.bills li{justify-content:flex-start}
.loglist.bills .paid{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface-2);color:var(--on-primary,#fff);cursor:pointer;flex:none;font-size:13px;line-height:1}
.loglist.bills li.ispaid .paid{background:var(--navy);border-color:var(--navy)}
.loglist.bills li.ispaid .bn{text-decoration:line-through;color:var(--muted)}
.loglist.bills .bn{flex:1 1 auto}
.loglist.bills .bd{color:var(--muted);font-size:12px}
.weekplan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.wday{display:grid;gap:3px;justify-items:center;padding:8px 2px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);cursor:pointer;min-width:0}
.wday b{font:700 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.wday span{font-size:11.5px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wday.today{border-color:var(--accent);background:var(--accent-soft)}
.wday.today b{color:var(--accent-ink,var(--accent))}
.wday.editing{border-color:var(--navy)}
.hwedit{margin-top:10px}
.hwpresets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hwdone{margin-top:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.spark{display:block;width:100%;max-width:360px;height:60px;margin:8px 0 4px}
.loglist{list-style:none;margin:6px 0 0;padding:0;font-size:13px;color:var(--ink-2)}
.loglist li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px dashed var(--line)}
.loglist li:first-child{border-top:0}
.loglist .x{background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:0 4px}
.toolcard textarea{width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);color:var(--ink);padding:9px 11px;font:inherit;font-size:13.5px;resize:vertical}
.hdrow{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.hdrow b{font:700 15px var(--mono);min-width:22px;text-align:center}

/* ---- how this works, under every tab ---- */
.howto{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:0 14px}
.howto summary{cursor:pointer;list-style:none;padding:9px 0;font:600 12.5px var(--body);color:var(--muted);display:flex;align-items:center;gap:8px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--navy);color:var(--on-primary,#fff);font:700 11px var(--mono)}
.howto[open] summary{color:var(--ink)}
.howto p{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
/* ---- the sky as a list ---- */
.skylist{margin:12px 0 6px}
.skylist summary{cursor:pointer;font:600 13px var(--body);color:var(--muted);padding:6px 0}
.skyrows{display:flex;flex-direction:column;gap:4px;margin-top:6px;max-height:360px;overflow:auto}
.skyrow{display:grid;grid-template-columns:14px 1fr auto auto;gap:10px;align-items:center;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer}
.skyrow i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.skyrow.due i{background:var(--accent);animation:bglive 1.6s ease-in-out infinite}
.skyrow.gold i{background:var(--gold-bright,var(--accent))}
.skyrow b{font-weight:600;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skyrow .sub{font-size:12px;color:var(--muted)}
.skyrow .when{font:600 11.5px var(--mono);color:var(--ink-2)}
@media (max-width:520px){.skyrow{grid-template-columns:14px 1fr auto}.skyrow .sub{display:none}}
/* ---- a reflection kept to oneself ---- */
.jpriv{display:inline-block;margin-top:6px;background:none;border:1px dashed var(--line-2);border-radius:999px;padding:4px 10px;font:600 11.5px var(--body);color:var(--muted);cursor:pointer}
.jpriv.on{border-style:solid;border-color:var(--navy);color:var(--ink)}
/* ---- attendance, admin ---- */
.attform{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.attform label{display:grid;gap:4px}
.attform input{width:100%;box-sizing:border-box}
.attform .attfile{grid-column:1/-1}
.attform .btn{justify-self:start}
.attform .hint{grid-column:1/-1}
.attrecent{list-style:none;margin:0;padding:0}
.attrecent li{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px dashed var(--line);font-size:13px}
.attrecent li:first-child{border-top:0}
.attrecent i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--line);color:var(--ink-2)}
.attrecent li.yes i{background:var(--navy);color:var(--on-primary,#fff)}
.attrecent small{margin-left:auto;color:var(--muted)}

/* ---------- design review, 14 Oct: a quieter hero ----------
   the date as an eyebrow, the name in the display face, the mascot on the ring, a hairline stat row instead of pills,
   the legend as one line with the bar and the coming-update note behind a ?; amber only on the ring, the track, the sun */
#hero{align-items:flex-start;gap:16px 22px}
#hero .ring{position:relative;overflow:visible}
#hero .ring .myface{position:absolute;right:-8px;bottom:-4px;width:40px;height:40px;margin:0;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:2px solid var(--surface);box-sizing:border-box}
#hero .ring .myface .face{--d:30px;box-shadow:none}
#hero .ring .myface .face svg.av{width:100%!important;height:100%!important;transform:none!important} /* the ring's own svg rules must not reach the avatar */
#hero .herotext{flex:1 1 220px;min-width:0;align-self:center}
#hero .herodate{margin:0 0 2px;font-size:12.5px;font-weight:500;letter-spacing:.01em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero .herotext h1{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.01em;line-height:1.15;margin:0}
#hero .lvlrow{margin:10px 0 7px}
#hero .steplegend{order:3;flex:1 0 100%;margin:0;padding-top:10px;border-top:1px solid var(--line-2);font-size:12px;line-height:1.45;color:var(--muted);max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
#hero .legendmore{width:20px;height:20px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);font:600 11px/1 var(--mono);cursor:pointer;padding:0;flex:none}
#hero .legendmore[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-2)}
#hero .stepnote{order:4;flex:1 0 100%;margin:-6px 0 0;font-size:12px;line-height:1.45;color:var(--muted);max-width:60ch}
#hero .chips{order:2;flex:1 0 100%;display:flex;gap:0;margin:0;padding-top:12px;border-top:1px solid var(--line-2);width:auto}
#hero .chips .chip{flex:1 1 0;width:auto;min-width:0;text-align:left;padding:0 18px;border:0;border-left:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none;transform:none}
#hero .chips .chip:first-child,#hero .chips .chip.hidden+.chip{border-left:0;padding-left:0}
#hero .chips .chip .f{display:none}
#hero .chips .chip .d{font-family:var(--mono);font-weight:700;font-size:22px;line-height:1.1;color:var(--ink)}
#hero .chips .chip .l{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);opacity:1}
#hero .chips .chip.days .d{color:var(--calm)}
#hero .chips .chip.streak .d{color:var(--gold)}
/* the folded state is a phone thing: the fold button only exists under 761 px, so these rules stop there too
   (from 14 to 23 Oct they applied at every width and the desktop hero stayed folded, without its date or stat row) */
@media (max-width:760px){
  #hero.compact .myface,#hero.compact .chips,#hero.compact .stepnote,#hero.compact .legendmore{display:none}
  #hero.compact{flex-wrap:wrap;align-items:center}
  #hero.compact .herotext{align-self:center}
  #hero.compact .herodate{display:none}
  #hero.compact .herotext h1{font-family:var(--display);font-size:17px}
  #hero.compact .steplegend{order:3;flex:1 0 100%;border-top:0;padding-top:0;margin:2px 0 0;font-size:10.5px;line-height:1.35;display:block}
}
@media (max-width:760px){
  #hero:not(.compact){padding:18px 16px 16px;gap:14px 16px}
  #hero:not(.compact) .ring,#hero:not(.compact) .ring svg{width:92px;height:92px}
  #hero:not(.compact) .ring .mid b{font-size:21px}
  #hero:not(.compact) .ring .mid span{font-size:7.5px}
  #hero:not(.compact) .ring .myface{width:38px;height:38px;right:-6px;bottom:-3px}
  #hero:not(.compact) .ring .myface .face{--d:28px}
  #hero:not(.compact) .herotext{flex:1 1 0;padding-right:28px}
  #hero:not(.compact) .herotext h1{font-size:22px}
  #hero .chips{display:flex;grid-template-columns:none}
  #hero .chips .chip{padding:0 12px}
  #hero .chips .chip .d{font-size:20px}
  #hero .steplegend{font-size:11.5px}
}

/* ---------- Phase 1b: the planner ---------- */
/* today's progress: a second hairline row under the stats; four figures, mono numbers, small labels */
#hero .progress{order:2;flex:1 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding-top:12px;border-top:1px solid var(--line-2)}
#hero .progress .pfig{min-width:0;padding:0 18px;border-left:1px solid var(--line-2)}
#hero .progress .pfig:first-child{border-left:0;padding-left:0}
#hero .progress .pfig b{display:block;font-family:var(--mono);font-weight:700;font-size:17px;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero .progress .pfig span{display:block;margin-top:4px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
/* one tile per dimension on: name, habits today, focus */
#hero .dimtiles{order:2;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding-top:12px}
#hero .dtile{flex:1 1 92px;min-width:0;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline;padding:8px 10px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface-2)}
#hero .dtile .dn{font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero .dtile b{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink)}
#hero .dtile i{grid-column:1/-1;font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hero .dtile.full{border-color:color-mix(in srgb,var(--good) 45%,var(--line-2))}
#hero .dtile.full b{color:var(--good)}
#hero .dtile.quiet{opacity:.72}
@media (max-width:760px){#hero.compact .progress,#hero.compact .dimtiles{display:none}}
@media (max-width:760px){
  #hero .progress{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  #hero .progress .pfig{padding:0 12px}
  #hero .progress .pfig:nth-child(3){border-left:0;padding-left:0}
  #hero .progress .pfig b{font-size:15px}
}
/* the three for today */
.top3{margin:0 0 4px}
.top3 .secthead{background:transparent;padding-top:12px}
.top3list{border-top:1px solid var(--line-2)}
.top3list .t-btn .box{border-color:var(--gold)}
.top3hint{padding:4px 18px 10px;margin:0}
.top3pick{padding:6px 18px 12px;display:flex;flex-direction:column;gap:6px}
.top3pick .soundrow{margin:0}
/* the week */
.weekgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wkday{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;padding:8px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.wkday:hover{border-color:color-mix(in srgb,var(--gold-bright) 45%,var(--line))}
.wkday.today{border-color:var(--accent);background:var(--accent-soft,var(--surface-2))}
.wkday.past{opacity:.8}
.wkday.open{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.wkday .wkh{display:flex;align-items:baseline;justify-content:space-between;gap:4px}
.wkday .wkh b{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wkday.today .wkh b{color:var(--accent-ink,var(--accent))}
.wkday .wkh span{font:700 14px var(--mono);color:var(--ink)}
.wkitems{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;min-width:0}
.wkitems li{font-size:11px;line-height:1.35;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:9px;position:relative}
.wkitems li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.wkitems li.wk-habit{color:var(--muted)} .wkitems li.wk-habit::before{background:var(--line-2)}
.wkitems li.wk-block::before{background:var(--navy-2);border-radius:1px;width:4px;height:9px;top:3px}
.wkitems li.wk-task::before{background:var(--gold)}
.wkitems li.wk-task.done{text-decoration:line-through;color:var(--muted)} .wkitems li.wk-task.done::before{background:var(--good)}
.wkitems li.wk-goal::before{background:var(--calm)}
.wkitems li.wkempty{color:var(--muted);padding-left:0} .wkitems li.wkempty::before{display:none}
.weekday{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 0 12px}
.weekday .secthead{border-radius:14px 14px 0 0}
.weekday .secthead+.secthead{border-radius:0;margin-top:6px}
.weekday .wkp{margin:8px 18px 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.weekday .wkp b{color:var(--ink);font-weight:600}
.weekday .loglist{margin:0 18px}
.weekday .loglist li{justify-content:flex-start;gap:8px} .weekday .loglist li span:first-child{flex:1 1 auto;min-width:0}
.weekday .linkbtn{margin:10px 18px 0}
.blockform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 18px 0}
.blockform input:not([type=time]){flex:1 1 180px;min-width:0}
.blockform input[type=time]{flex:0 0 auto;max-width:120px}
.blockform select{flex:0 1 auto}
@media (max-width:640px){
  .weekgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wkday{flex-direction:row;align-items:flex-start;gap:10px;padding:8px 10px}
  .wkday .wkh{flex-direction:column;align-items:center;gap:0;flex:0 0 36px}
  .wkday .wkitems{flex:1 1 auto}
  .wkitems li{white-space:normal}
  .blockform input:not([type=time]){flex:1 1 100%}
}
/* the month view's marks and the day box */
.calday .marks{position:absolute;right:5px;bottom:4px;display:flex;gap:3px}
.calday .marks .mk{display:block;width:6px;height:6px;border-radius:50%;background:var(--muted)}
.calday .marks .mk.task{background:var(--gold)} .calday .marks .mk.block{background:var(--navy-2);border-radius:1px;width:4px} .calday .marks .mk.goal{background:var(--calm)}
.calday.l3 .marks .mk,.calday.l4 .marks .mk{box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.calday.open{box-shadow:inset 0 0 0 2px var(--navy)}
.calday.future{cursor:pointer}
.caldaybox{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 0 12px}
.caldaybox .secthead{border-radius:14px 14px 0 0}
.caldaybox .wkp{margin:8px 18px 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.caldaybox .linkbtn{margin:10px 18px 0}
/* the dashboard's sections, under Account */
.dashoff{display:none!important}
.dashlist{display:flex;flex-direction:column;gap:6px}
.dashrow{display:flex;align-items:center;gap:6px}
.dashrow.off .dashtog span{color:var(--muted)}
.dashtog{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.dashtog:disabled{cursor:default;opacity:.8}
.dashtog i{flex:none;width:30px;height:18px;border-radius:999px;background:var(--line-2);position:relative;transition:background .2s}
.dashtog i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
.dashtog[aria-pressed="true"] i{background:var(--navy)}
.dashtog[aria-pressed="true"] i::after{left:14px}
.dashrow .btn.sm{padding:6px 8px}
/* the feed card */
.icslist{margin:4px 0 0;padding:0 0 0 18px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.icslist li{margin:2px 0}
.icsurl{margin-top:10px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface-2)}
.icsurl input{font-family:var(--mono);font-size:12px}

/* ---------- Phase 2: the quiet room ---------- */
.roomme{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.roomme b{font-size:14px}
.roomme .hint{margin:0}
.roomme .pacts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.phours{font:600 11.5px var(--mono);color:var(--muted);letter-spacing:.02em}
.person .pt .phours{margin-top:3px}
.person.anon .pt b{color:var(--ink-2);font-weight:500}
.anonface{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--muted);flex:none}
.person.paused{border-style:dashed}
.person.paused .pt span{color:var(--muted)}
.person.here.paused{border-color:var(--line-2)}
/* ---- the hall: a meeting grid without the video ---- */
.hall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hall .empty{grid-column:1/-1}
.hall .tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-width:0;position:relative}
.hall .tile.live{border-color:color-mix(in srgb,var(--good) 55%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--good-soft) 55%,var(--surface)),var(--surface))}
.hall .tile.live::before{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--good);animation:bglive 1.6s ease-in-out infinite}
.hall .tile.dim{opacity:.72;border-style:dashed}
.hall .tile.idle{opacity:.85}
.hall .tile.away{opacity:.55}
.hall .tile b{font-size:13.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.hall .tile.anon b{color:var(--ink-2);font-weight:500}
.hall .tile .tgroup{font-style:normal;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 7px;border-radius:999px;background:var(--surface-2)}
.hall .tile .tact{font-size:12px;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.3em}
.hall .tile .tstat{font:600 11px var(--mono);letter-spacing:.03em;color:var(--muted)}
.hall .tile.live .tstat{color:var(--good)}
.hall .tile .phours{font-size:10.5px}
.anonface.big{width:44px;height:44px}
@media (max-width:520px){.hall{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hall .tile{padding:12px 8px 10px}}
.hall .tile.me{border-color:color-mix(in srgb,var(--gold) 60%,var(--line))}
.hall .tile .tgroup.you{background:var(--gold-soft);color:var(--gold)}
/* ---- the clock inside the room ---- */
.roomclock{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.roomclock b{font:700 34px/1 var(--mono);letter-spacing:.02em;color:var(--ink)}
.roomclock.live b{color:var(--good)}
.roomclock span{font:600 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.roomfor{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.roomfor select{max-width:100%}
.roomme .linkbtn{align-self:flex-start}

/* ---------- Aroh UPSC, Batch 1 ---------- */
/* what the UPSC profile does not show (the code and data stay) */
body.upsc #climbCard,body.upsc #journeyCard,body.upsc #reviewCard,body.upsc #toolCards,body.upsc #goalCards,body.upsc #coachCard,body.upsc #trophyCard,
body.upsc #areaIdeas,body.upsc #streakHint,body.upsc #hero .lvlrow,body.upsc #hero .track,body.upsc #hero .steplegend,body.upsc #hero .stepnote,body.upsc #hero .legendmore,
body.upsc #hero .chip.rank,body.upsc #hero .chip.streak,body.upsc #hero .dimtiles,body.upsc .ptsonly,body.upsc #tab-dash .foot,
body.upsc #acctWrap [data-open="climb"],body.upsc #acctWrap [data-open="dash"],body.upsc #areaPick,body.upsc #areaLine,body.upsc #areaTools,body.upsc #focusAreaSel,
body.upsc #tab-plan,body.upsc #tab-focus,body.upsc #tab-reflect,body.upsc #tab-room,body.upsc #backCard,body.upsc #hero .ring,body.upsc #celebrate{display:none!important}
body.upsc #hero .chips{border-top:0;padding-top:0}
body.upsc #hero .chip.days{padding-left:0;border-left:0}
/* the exam line and the standing line */
#hero .examline{margin:6px 0 0;font:600 13px var(--mono);letter-spacing:.02em;color:var(--accent)}
#hero .standline{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
@media (max-width:760px){body.upsc #hero.compact .examline{display:block;font-size:11.5px;margin-top:2px}body.upsc #hero.compact .standline{display:none}}
/* the bottom bar on phones: four words, always in reach */
@media (max-width:760px){
  body.upsc .gnav{position:fixed;top:auto;bottom:0;left:0;right:0;margin:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);z-index:40;gap:4px}
  body.upsc .gnav button{flex:1 1 0;flex-direction:column;gap:2px;padding:6px 4px;font-size:11px;border:0;background:none;box-shadow:none;transform:none}
  body.upsc .gnav button[aria-selected="true"]{background:var(--surface-2);color:var(--ink)}
  body.upsc .gnav button[aria-selected="true"] .ic{color:var(--accent)}
  body.upsc .tabs.subnav{display:none}
  body.upsc main,body.upsc .wrap{padding-bottom:84px}
  body.upsc footer{padding-bottom:84px}
}
/* the Next card */
.nextcard header h2{font-size:17px}
.nextrow{display:flex;flex-direction:column;gap:12px}
.nexttext b{display:block;font-size:17px;font-weight:600;line-height:1.3}
.nexttext span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.nexttext span i{font-style:normal}
.nextcard .pacts{display:flex;gap:10px;flex-wrap:wrap}
.nextfoot{margin:12px 0 0!important}
.nextoffer{padding:10px 12px;border:1px solid color-mix(in srgb,var(--good) 45%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--good-soft) 50%,var(--surface));margin-bottom:12px}
.nextoffer p{margin:0 0 8px;font-size:14px}
.undobar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 18px 14px;padding:8px 12px;border-radius:10px;background:var(--surface-2);font-size:13px}
/* the setup card */
.prepq{margin-top:14px}.prepq:first-child{margin-top:0}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip2{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:600 13px var(--body);cursor:pointer}
.chip2[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-primary,#fff)}
.stagelist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.stageopt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);cursor:pointer;font:inherit}
.stageopt b{font-size:14px}.stageopt span{font-size:12px;color:var(--muted)}
.stageopt[aria-pressed="true"]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.prepcov{margin-top:10px}
.hoursrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.hourfld{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.hourfld input{width:64px;text-align:center;font:600 15px var(--mono)}
.prepcard .btn.pri{margin-top:16px}
/* the syllabus */
.sylsearch{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);margin-bottom:12px;color:var(--muted)}
.sylsearch input{flex:1 1 auto;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;min-width:0;padding:0}
.sylsearch input:focus{outline:none}
.paperrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;margin-bottom:8px}
.paperrow:hover{border-color:color-mix(in srgb,var(--gold-bright) 45%,var(--line))}
.paperrow.quiet{opacity:.75}
.paperrow .pn{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.paperrow .pn b{font-size:15px;font-weight:600}
.paperrow .pn i{font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.thinbar{flex:0 0 72px;height:4px;border-radius:999px;background:var(--line-2);overflow:hidden}
.thinbar i{display:block;height:100%;background:var(--accent)}
#sylPapers .secthead{background:transparent;padding-left:4px;padding-right:4px}
.official{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:0 14px}
.official summary{cursor:pointer;list-style:none;padding:10px 0;font:600 12.5px var(--body);color:var(--muted)}
.official summary::-webkit-details-marker{display:none}
.official ol{margin:4px 0 10px;padding-left:20px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.official p.hint{margin:0 0 10px}
.secthead.sticky{position:sticky;top:calc(var(--topbar-h,56px) + var(--gnav-h,50px));z-index:5;border-radius:10px;margin-top:8px}
body.upsc .secthead.sticky{top:var(--topbar-h,56px)}
.unitrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 10px;border:0;border-bottom:1px solid var(--line-2);background:none;color:var(--ink);cursor:pointer;font:inherit}
.unitrow:last-child{border-bottom:0}
.unitrow:hover{background:var(--surface-2)}
.unitrow .un{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.35;display:flex;flex-direction:column}
.unitrow .un i{font-style:normal;font-size:11.5px;color:var(--muted)}
.unitrow .umarks{display:flex;gap:6px;color:var(--muted);font:600 11px var(--mono)}
.unitrow .umarks em{font-style:normal;display:inline-flex;align-items:center}
.stchip{flex:none;font:600 11px var(--mono);letter-spacing:.03em;padding:4px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted);background:transparent;white-space:nowrap}
.stchip.st-studying{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.stchip.st-covered{border-color:var(--good);color:var(--on-primary,#fff);background:var(--good)}
.stchip.st-later{border-style:dashed}
/* the unit sheet */
.sheetwrap{position:fixed;inset:0;background:rgba(8,10,24,.55);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;background:var(--surface);border-radius:18px 18px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.35);max-height:92vh;overflow:auto}
.sheetgrip{width:40px;height:4px;border-radius:999px;background:var(--line-2);margin:0 auto 12px}
.sheetplace{margin:0;font-size:12px;color:var(--muted)}
.sheet h3{margin:4px 0 12px;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.25}
.states{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.stbtn{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:600 12.5px var(--body);cursor:pointer}
.stbtn[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:var(--on-primary,#fff)}
.stbtn.st-covered[aria-pressed="true"]{background:var(--good);border-color:var(--good)}
.stbtn.st-studying[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#1a1300)}
.sheetacts{display:flex;gap:10px;flex-wrap:wrap}
.sheetacts .btn{flex:1 1 160px}
.sheet .hint{margin:12px 0 0}
.sheetmeta{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sheetmeta input{font:inherit;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);width:100%;box-sizing:border-box}
.sheetmeta input:focus{outline:none;border-color:var(--accent)}
/* inside Today the clock card sits right above the hall, so the hall keeps only its tiles and its note */
body.upsc #roomMe .roomclock,body.upsc #roomMe .pacts,body.upsc #roomMe .roomfor{display:none}
.sheetclose{width:100%;margin-top:14px}
@media (min-width:761px){.sheetwrap{align-items:center}.sheet{border-radius:18px;padding-bottom:18px}}
/* the folded planner and the day's close inside Today */
.planfold{margin:0 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);padding:0 14px}
.planfold>summary{cursor:pointer;list-style:none;padding:12px 0;font:600 14px var(--body);color:var(--ink-2);display:flex;align-items:center;gap:8px}
.planfold>summary::-webkit-details-marker{display:none}
.planfold[open]>summary{color:var(--ink);border-bottom:1px solid var(--line)}
.planfold>.card{margin:12px 0;box-shadow:none}

/* ---------- Aroh UPSC, Batch 2: the brand, applied ---------- */
/* tokens: 6 px controls, 14 px cards, full only for pills and the sun dot; hairlines, no shadows; no red on a student's screen */
body.upsc{--r:14px;--r-s:6px;--shadow:none;--shadow-l:none;--crit:var(--ink-2);--crit-soft:var(--surface-2);--warn:var(--ink-2);--warn-soft:var(--surface-2);--sp-1:4px;--sp-2:8px;--sp-3:16px;--sp-4:24px;--sp-5:48px}
body.upsc .card{box-shadow:none;border-radius:var(--r);margin-top:var(--sp-3)}
body.upsc .card:hover{box-shadow:none;transform:none}
body.upsc .btn,body.upsc .chip2,body.upsc .stbtn,body.upsc input,body.upsc select,body.upsc textarea,body.upsc .taskpri,body.upsc .goalsel,body.upsc .askbtn,body.upsc .memrow,body.upsc .paperrow,body.upsc .official,body.upsc .sylsearch,body.upsc .planfold,body.upsc .nextoffer,body.upsc .undobar,body.upsc .alert{border-radius:var(--r-s)}
body.upsc .btn{transform:none;transition:background .16s,border-color .16s,color .16s}
body.upsc .btn:hover,body.upsc .btn:active{transform:none;box-shadow:none}
body.upsc .pill,body.upsc .stchip,body.upsc .sundot{border-radius:999px}
body.upsc .btn.pri{background:var(--navy);border-color:var(--navy);color:var(--on-primary,#fff)}
body.upsc .hero::before{display:none}
body.upsc #hero .chips,body.upsc #hero .chip.days,body.upsc .howto,body.upsc [data-dash="today"],body.upsc #habitCard,body.upsc #clockCard,body.upsc #covCard,body.upsc #tab-revision .mini,body.upsc #rvPriorBtn,body.upsc #rvPrior,body.upsc #myTarget,body.upsc #myTargetHint,
body.upsc #hallCard header,body.upsc #hallCard #roomMe,body.upsc #hallCard .roomfor,body.upsc #hallCard .micnote,body.upsc #tab-tests .tabs,body.upsc #tab-tests [role="tablist"],body.upsc #acctWrap [data-open="planpane"],body.upsc #errCard.quiet,body.upsc #tsErr.quiet{display:none!important}
body.upsc [data-dash="today"].editing{display:block!important}
@media (min-width:761px){body.upsc .card>.body{padding:var(--sp-4)}body.upsc .card{margin-top:var(--sp-4)}body.upsc .tabpane>.card:first-child,body.upsc .tabpane>#upscRevise{margin-top:0}}
/* motion only on state change */
body.upsc *{animation-duration:.18s}
@media (prefers-reduced-motion:reduce){body.upsc *{animation:none!important;transition:none!important}}
/* the sun dot: now */
.sundot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent);vertical-align:middle;margin-right:6px}
/* the next step */
body.upsc .nextcard .body{padding-top:var(--sp-3)}
.nextkicker{margin:0 0 6px;font:600 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nextname{margin:0;font:500 22px/1.25 var(--display);color:var(--ink)}
.nextmeta{margin:6px 0 0;font-size:13px;color:var(--ink-2)}
.nextmeta b{font:600 13px var(--mono);color:var(--ink)}
.nextwhy{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.nextacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-3)}
.nextacts .btn.pri{padding:11px 22px;font-size:14px}
/* also worth doing */
.also{margin-top:var(--sp-3)}
.also .eyebrow{display:block;margin:0 4px 6px}
.alsorow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:8px}
.alsorow .at{flex:1 1 auto;min-width:0}
.alsorow .at b{display:block;font-size:14.5px;font-weight:600}
.alsorow .at span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.alsorow .btn{flex:none}
/* the day in one line, slipping, the hall */
.dayline,.slipline,.hallline{margin:var(--sp-3) 4px 0;font-size:13px;color:var(--ink-2)}
.dayline b{font:600 13px var(--mono);color:var(--ink)}
.slipline button,.hallline button{margin-left:8px}
/* every day */
.everyday .body{padding-top:14px}
.edhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.edhead .eyebrow{margin:0}
.edrow{display:flex;flex-wrap:wrap;gap:8px}
.edchip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink);font:500 13px var(--body);cursor:pointer}
.edchip i{display:inline-flex;width:16px;height:16px;border-radius:999px;border:1.5px solid var(--line-2);align-items:center;justify-content:center;color:transparent;font-style:normal}
.edchip[aria-pressed="true"]{border-color:var(--good);color:var(--ink)}
.edchip[aria-pressed="true"] i{background:var(--good);border-color:var(--good);color:var(--on-primary,#fff);font-size:10px}
.edtasks{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.edtask{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);background:var(--surface-2);font-size:13.5px}
.edtask input{width:18px;height:18px;accent-color:var(--good)}
.week7{display:flex;gap:4px;margin-top:12px;align-items:flex-end;height:18px}
.week7 i{display:block;width:10px;border-radius:2px;background:var(--line-2)}
.week7 i.on{background:var(--good)}
.week7 i.now{background:var(--accent)}
/* the session card */
.sesscard{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.sessclock{font:500 40px/1 var(--mono);color:var(--ink);letter-spacing:.02em}
.sesson{font-size:13px;color:var(--ink-2);margin-top:6px}
.sessacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-3);align-items:center}
.sessacts .linkbtn{margin-left:auto}
.sheet.wide{max-width:720px}
/* revise */
.revlead{margin:0;font:500 20px/1.3 var(--display);color:var(--ink)}
#revCatch{margin:8px 0 0}
#revCatch:empty{display:none}
.revcard{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:12px}
.revcard .rn{font-size:16px;font-weight:600;line-height:1.3}
.revcard .rs{font-size:12.5px;color:var(--muted);margin-top:2px}
.revcard .rw{font-size:13px;color:var(--ink-2);margin-top:6px}
.revcard .rw.urgent{color:var(--ink)}
.revjudge{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.revjudge .linkbtn{margin-left:auto;font-size:12.5px}
.revcard.gone{opacity:0;transform:translateX(24px);transition:opacity .2s,transform .2s}
.revdone{margin:14px 4px 0;font-size:13.5px;color:var(--ink-2)}
body.upsc #revMoreBody .card{margin:12px 0;box-shadow:none}
body.upsc #revMoreBody .card>header h2{font-size:15px}
body.upsc #revAddBody .form.rev{margin:12px 0}
body.upsc #revMoreBody .form.rev{display:none}
/* the topic sheet's memory rows */
.memrows{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.memrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;font:inherit}
.memrow .mi{display:inline-flex;color:var(--muted)}
.memrow .mt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.memrow .mt b{font-size:14px;font-weight:600}
.memrow .mt span{font-size:12.5px;color:var(--muted)}
/* one card at a time */
.cardface{min-height:120px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);margin:10px 0 14px}
.csq{margin:0;font:500 18px/1.35 var(--display);color:var(--ink)}
.csa{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.csa p{margin:0;font-size:15px;line-height:1.45}
.csa .hint{margin-top:8px}
.cshook{margin-top:10px!important;font-size:13.5px;color:var(--ink-2);padding-left:10px;border-left:2px solid var(--accent)}
.csjudge{display:flex;gap:8px;flex-wrap:wrap}
.csjudge .btn{flex:1 1 100px}
.csnote{margin:12px 0 0!important;min-height:18px}
.hookcard{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);margin-top:10px}
.hookcard .hr{font-size:12.5px;color:var(--muted)}
.hookcard .hh{font:500 17px/1.35 var(--display);color:var(--ink);margin:4px 0 6px}
.hookcard .hm,.hookcard .hw,.hookcard .ht{font-size:13.5px;color:var(--ink-2);margin:4px 0 0}
.hookcard .ht{color:var(--ink)}
/* practise, action first */
.asklead{margin:0 0 12px;font:500 20px/1.3 var(--display);color:var(--ink)}
.askrow{display:flex;gap:10px;flex-wrap:wrap}
.askbtn{flex:1 1 200px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);cursor:pointer;font:inherit}
.askbtn .mi{color:var(--navy);margin-bottom:4px}
.askbtn b{font-size:15px}
.askbtn span{font-size:12.5px;color:var(--muted)}
body.upsc #ttab-mcq,body.upsc #ttab-aw{display:block!important}
body.upsc #practiseSheetBody .form{margin:12px 0}
/* account, four doors */
.acctgroup{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:10px;padding:0 6px}
.acctgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 10px;font:600 14px var(--body);color:var(--ink)}
.acctgroup>summary::-webkit-details-marker{display:none}
.acctgroup>summary span{font-weight:400;font-size:12.5px;color:var(--muted);margin-left:auto}
.acctgroup .acctmenu{margin:0 0 6px}
body.upsc .acctmenu>button{box-shadow:none}
body.upsc .newsbar.compact{padding:8px 14px}body.upsc .newsbar.compact .newsin{display:flex;align-items:center;gap:10px;flex-wrap:wrap}body.upsc .newsbar.compact .newsin b{font-size:13.5px;font-weight:600;flex:1 1 auto}body.upsc .newsbar.compact .newstag{margin:0}
body.upsc #tab-tests .subtabs{display:none!important}
body.upsc #hero .pfigs,body.upsc #hero .pfig,body.upsc #hero .figs{display:none!important}
body.upsc .newsbar.compact .btn{width:auto;flex:0 0 auto;padding:6px 12px}
body.upsc .newsbar.compact .newsin{flex-direction:row;flex-wrap:wrap;align-items:center}

/* ---- Aroh UPSC, Batch 3: the streak as study days, the rising seven, the welcome, the goal, achievements, links ---- */
.welcomeline{margin:0 4px var(--sp-3);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:14px;color:var(--ink)}
.welcomeline .askyear{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13px;color:var(--ink-2)}
.goalline{margin:6px 4px 0;font-size:13px;color:var(--ink-2);cursor:pointer}
.goalline b{font-weight:600;color:var(--ink)}
.remember{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:var(--sp-3) 4px 0;font-size:13px;color:var(--ink-2);cursor:pointer}
.remember .rmtext b{font:600 13px var(--mono);color:var(--ink)}
.seven{display:inline-flex;gap:5px;align-items:flex-end}
.seven i{display:block;width:9px;height:9px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent}
.seven i.study{background:var(--good);border-color:var(--good)}
.seven i.today{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--surface);background:var(--accent)}
.seven.big{gap:8px;margin-top:10px}
.seven.big i{width:14px;height:14px}
.achline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 4px 0;font-size:13px;color:var(--ink-2)}
.achline .achtag{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.achline b{color:var(--ink)}
.achline .linkbtn{margin-left:auto}
.linkcard .body{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.linklead{margin:0;font-size:14px}
.linklead .hint{display:block;margin-top:2px}
.linkrow{padding:12px 0;border-top:1px solid var(--line)}
.linkrow:first-child{border-top:0;padding-top:0}
.linkrow .lt b{font-size:15px}
.linkrow .lq{margin:4px 0 8px;font-size:13px;color:var(--ink-2)}
.lopt{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);margin-top:6px}
.lopt .ln b{font-size:14px}
.lacts{display:flex;gap:8px}
.linktag{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.linktag .linkbtn{font-size:12px}
.rmhead{display:flex;align-items:baseline;gap:8px}
.rmnum{font:600 40px/1 var(--mono);color:var(--ink)}
.rmlabel{font-size:14px;color:var(--ink-2)}
#rmSeven{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.achlist{display:flex;flex-direction:column;gap:8px}
.achrow{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.achrow .achic{display:inline-flex;width:24px;height:24px;border-radius:999px;background:var(--good);color:var(--on-primary,#fff);align-items:center;justify-content:center;flex:none}
.achrow .acht b{display:block;font-size:14px}
.achrow .acht span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.lbmini{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.lbrow{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);font-size:13.5px}
.lbrow:first-child{border-top:0}
.lbrow.me{background:var(--surface-2)}
.lbrank{font:600 12px var(--mono);color:var(--muted);width:32px}
.lbname{flex:1 1 auto;font-weight:600}
.lbpts{font:500 12.5px var(--mono);color:var(--ink-2)}
.lbmini .hint{margin:8px 12px}

/* ---- the content check (admin) ---- */
.cclist{display:flex;flex-direction:column;gap:10px}
.ccitem{border:1px solid var(--line);border-radius:var(--r-s,10px);padding:12px 14px;background:var(--surface)}
.ccitem.ok{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.ccitem.warn{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.cchead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cctext p{margin:4px 0;font-size:13.5px}
.cctext .ccq{font-weight:600;font-size:14.5px}
.cctext .cca{color:var(--ink)}
.cctext .ccw{color:var(--ink-2)}
.cctext .ccs{color:var(--muted);font-size:12.5px}
.cctext .ccr{color:var(--warn);font-size:12.5px}
.cctext .ccl{color:var(--crit);font-size:12.5px}
.ccform{display:grid;grid-template-columns:2fr 1fr 2fr;gap:8px;margin-top:10px}
.ccform input{width:100%;min-width:0}
.ccacts{grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.ccform{grid-template-columns:1fr}}

/* Batch 3 (final audit): a habit name with no spaces must never widen the page; the chip wraps inside its row and the row wraps inside the card */
.edrow{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.edchip{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:break-word;text-align:left}
.edtask{overflow-wrap:anywhere}
.nextname,.alsorow .at b,.revcard .rn,.linkrow .lt b,.lopt .ln b{overflow-wrap:anywhere}

/* Batch 3 (final audit): on a phone the top-bar buttons (Inbox, Guide, Account) are full 44 px touch targets; the bar's height is measured, so the layout follows */
@media (max-width:760px){.topnav a,.topnav .navbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}}

/* Batch 3 (final audit): a topic title with no spaces wraps inside the revision list and the Revise lead instead of widening the page */
.revitem .t{min-width:0}
.revitem .t b,.revlead .revnext,#rmAhead{overflow-wrap:anywhere}

/* Final gate: the "Also worth doing" meta line keeps its pieces on one line (the nested spans were blocks, which left a lone dot on its own line); the drawer names the seven days as their own fact */
.alsorow .at > span span{display:inline;margin:0}
.rmsevenlabel{display:block;margin:0 0 6px}

/* Final gate: an achievement line keeps its date on the same line as its words (the nested spans were blocks) */
.achrow .acht > span span{display:inline;margin:0}

/* Batch 4: a resurfaced achievement reads as a quiet memory, not a new badge */
.achline.resurf{cursor:pointer}.achline.resurf .achtag{color:var(--muted)}

/* Batch 4: the free confetti layer and the session-close sheet */
.confettifree{position:fixed;inset:0;z-index:69;pointer-events:none}
#closeSheet textarea{width:100%;min-height:56px;margin-top:6px;resize:vertical}
#closeSheet .sheetacts{margin-top:14px}
#closeSheet h3{margin:4px 0 2px}
/* Batch 5 A (25 Oct 2026): the hero's exam line opens Account › Your goal; the exam date row; the undo bar inside the topic sheet */
#hero .examline[role="button"]{cursor:pointer}
#hero .examline[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.examdate{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.examdate input{max-width:170px}
#unitSheet .undobar{margin:0 0 12px}
#csUndo .undobar{margin:12px 0 0}
/* Batch 5 B (25 Oct 2026): five destinations; the Study Hall tab; the length sheet; the Analysis tab */
@media (max-width:760px){.gnav button{padding:7px 2px;font-size:11px}}
.hallkicker{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;color:var(--ink)}
.hfsubjects{margin-top:12px}
.hfsubjects .eyebrow{margin:0 0 6px}
.hfrow,.anrow{display:flex;align-items:center;gap:10px;padding:5px 0}
.hfname,.anname{flex:0 0 38%;font-size:13.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hfbar,.anbar{flex:1 1 auto;height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.hfbar i,.anbar i{display:block;height:100%;background:var(--navy);border-radius:999px}
.anbar.good i{background:var(--good)}
.anbar.quiet i{background:var(--line)}
.hfrow b,.anval{flex:0 0 auto;font:600 13px var(--mono);color:var(--ink)}
.anval{min-width:70px;text-align:right}
.lenchips{display:flex;gap:8px;flex-wrap:wrap}
.lenchip{padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:600 13px var(--body);cursor:pointer}
.lenchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-primary,#fff)}
.lscustom{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.lscustom label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.lscustom input{max-width:120px}
.lssearch{margin-top:8px}
.lshits{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.lshit{display:flex;align-items:baseline;gap:8px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.lshit .un{font-weight:600;color:var(--ink)}
.lshit i{font-style:normal;font-size:12px;color:var(--muted)}
.anweeks{display:flex;gap:6px;align-items:flex-end;margin:4px 0 10px}
.anweek{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted)}
.anweek .anwbar{width:100%;height:64px;border-radius:8px;background:var(--surface-2);display:flex;align-items:flex-end;overflow:hidden}
.anweek .anwbar i{display:block;width:100%;background:var(--navy);border-radius:8px 8px 0 0}
.anweek.now .anwbar i{background:var(--accent)}
.anweek b{font:600 13px var(--mono);color:var(--ink)}
.anline{margin:8px 0 0;font-size:13.5px;color:var(--ink-2)}
.anline b{font-family:var(--mono);color:var(--ink)}
.andue{flex:1 1 auto;display:flex;gap:6px;flex-wrap:wrap}
.duechip{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.duechip.crit{background:color-mix(in srgb,var(--crit) 14%,transparent);color:var(--crit)}
.duechip.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--ink)}
.duechip.quiet{color:var(--muted)}
.anloghead{margin:22px 0 8px}
#tab-analysis .ancard .body > .hint{margin-top:10px}
/* Batch 5 B: on its own tab the hall shows the student's own panel again (clock, Start, what the block is for); Today's one-liner stays a link */
body.upsc #tab-hall #hallCard #roomMe{display:flex!important}
body.upsc #tab-hall #roomMe .roomclock{display:flex}
body.upsc #tab-hall #roomMe .pacts{display:flex}
body.upsc #tab-hall #roomMe .roomfor,body.upsc #tab-hall #hallCard .roomfor{display:flex!important}
body.upsc #tab-hall #hallCard header{display:flex!important}
/* Batch 5 B: the student's own topics */
.sheetown{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.ownrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ownedit{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.ownedit input{flex:1 1 180px}
.linkbtn.quiet{color:var(--muted);text-decoration:none}
.sylown{padding:6px 0 10px}
.sylgone{margin:4px 0 12px;padding:8px 12px;border:1px dashed var(--line);border-radius:10px}
.sylgone summary{cursor:pointer;color:var(--muted);font-size:13px}
.gonerow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;color:var(--ink-2);font-size:13.5px}
.umarks .ownmark{font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}

/* Batch 5 C: Prelims PYQs of a topic, one at a time */
.pqlabel{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
.pqface{margin-top:0}
.pqq{margin:0;font:500 16.5px/1.45 var(--display);color:var(--ink);white-space:pre-line}
/* 27 Oct 2026: a CSAT passage reads as body text above its question, with a rule between */
.pqpass{margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line);font:400 15.5px/1.6 var(--body,inherit);color:var(--ink);white-space:pre-line;max-height:none}
.pqopts{display:flex;flex-direction:column;gap:8px}
.pqopt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:14.5px;line-height:1.4;cursor:pointer}
.pqopt:disabled{cursor:default}
.pqopt .pql{flex:0 0 auto;font-weight:600;color:var(--muted)}
.pqopt.right{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pqopt.right .pql{color:var(--ink)}
.pqopt.wrong{opacity:.6}
.pqopt.wrong .pqt{text-decoration:line-through}
.pqsol{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pqverdict{margin:0 0 6px;font-weight:600}
.pqtext{margin:0;font-size:14.5px;line-height:1.5;white-space:pre-line}
.pqactions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.pqreport{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.pqreport .hint{margin:0 0 8px}
.pqreasons{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.pqreason{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.pqreason input{accent-color:var(--ink)}
.ccact{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ccact input{flex:1 1 200px;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.pqreport textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);resize:vertical}

/* Batch 6 A: all your work, by subject */
.worktable{width:100%;border-collapse:collapse;font-size:13px}
.worktable .wl{display:none}
.worktable th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
.worktable td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--ink)}
.worktable td.wsub{font-weight:600;white-space:normal;min-width:120px}
.worktable td.n{font-variant-numeric:tabular-nums;color:var(--ink-2)}
@media (max-width:680px){
  .worktable, .worktable tbody{display:block;width:100%;max-width:100%;min-width:0}   /* the generic table min-width does not apply to the stacked layout */
  .worktable thead{display:none}
  .worktable tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
  .worktable td{display:flex;justify-content:space-between;gap:12px;border:0;padding:2px 0;white-space:normal}
  .worktable td.wsub{display:block;font-size:14px;margin-bottom:4px;min-width:0}
  .worktable td.dash{display:none}
  .worktable .wl{display:inline;color:var(--muted);font-size:12.5px}
  .worktable .wv{text-align:right}
}

/* Batch 6 B: Mains PYQs */
.msmeta{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.mstime{font:600 22px/1 var(--mono);color:var(--ink);letter-spacing:.04em;font-variant-numeric:tabular-nums;min-width:72px}
#msSol .eyebrow{margin:0 0 6px}
#msRate{margin-top:8px}

/* Batch 7 (25 Oct 2026): the simplification pass */
.usstatus{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.usstatus .stchip{font-size:11.5px;padding:5px 10px}
.ussum{margin:10px 0 0}
.usgroup{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 12px}
.usgroup>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:11px 0;font:inherit}
.usgroup>summary::-webkit-details-marker{display:none}
.usgroup>summary b{font-size:14px;font-weight:600;color:var(--ink)}
.usgroup>summary span{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usgroup>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0;flex:none;transition:transform .15s}
.usgroup[open]>summary::after{transform:rotate(-135deg);margin:4px 4px 0 0}
.usgroup[open]>summary{border-bottom:1px solid var(--line)}
.usgroup .memrows{margin:10px 0 12px}
.usgroup.more .sheetmeta{margin:10px 0 0}
.usgroup.more .sheetown{margin:10px 0 12px}
.usgroup #usRevisit{display:inline-block;margin:0 0 12px}
.ushist{padding:10px 0 4px}
.ushist .ushl{margin:0 0 6px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ushist .hint{margin:0 0 6px}
.sylview{margin:0 0 12px}
.subjfold{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:0 0 8px;padding:0 12px}
.subjfold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:12px 0}
.subjfold>summary::-webkit-details-marker{display:none}
.subjfold .sfhead{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.subjfold .sfhead b{font-size:15px;font-weight:600;color:var(--ink)}
.subjfold .sfhead i{font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.subjfold>summary .thinbar{flex:0 0 64px}
.subjfold .sfchev{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px 0;flex:none;transition:transform .15s}
.subjfold[open] .sfchev{transform:rotate(-135deg);margin:4px 4px 0 0}
.subjfold[open]>summary{border-bottom:1px solid var(--line)}
.subjfold .sfbody{padding:4px 0 8px}
.subjfold .sylown{padding:8px 0 4px}
.ansub{padding:9px 0;border-bottom:1px solid var(--line-2)}
.ansub:last-of-type{border-bottom:0}
.ansubname{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.anchips{display:flex;flex-wrap:wrap;gap:6px}
.anchip{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.anchip.good{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--ink)}
.msans{font-size:14.5px;line-height:1.55;color:var(--ink)}
.msans h4{margin:16px 0 6px;font:700 10px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.msans h4:first-child{margin-top:4px}
.msans h5{margin:12px 0 4px;font:600 14px var(--body);color:var(--ink)}
.msans p{margin:0 0 8px;max-width:62ch}
.msans p.mspoint{padding-left:1.4em;text-indent:-1.4em}
#msTop{display:inline-block;margin:4px 0 12px}
.usgroup>summary b{white-space:nowrap}
.anweek>span{display:block;min-height:2.6em;line-height:1.3}

/* =====================================================================
   Batch 9 (26 Oct 2026): easy to read (UPSC profile only).
   Students said the letters were small and the screens wordy. Body 16px; secondary 15px; labels 13px and nothing smaller;
   card titles 18px; the next step 22px. Words in the brand's two families (Outfit headings, Hanken body); the mono face only
   on clocks. One colour per kind of work, from the brand palette: learn = Dusk Indigo, practise = Glacier Teal,
   revise = Sunrise Amber (kept rare). Colour sits in markers, dots, bars and the (i); body text stays ink.
   ===================================================================== */
body.upsc{
  --c-learn:var(--indigo,var(--navy-2)); --c-learn-soft:var(--indigo-soft,var(--navy-soft)); --c-learn-ink:var(--indigo,var(--navy-2));
  --c-practise:var(--good); --c-practise-soft:var(--good-soft); --c-practise-ink:var(--good);
  --c-revise:var(--accent,var(--gold-bright)); --c-revise-soft:var(--accent-soft,var(--gold-soft)); --c-revise-ink:var(--accent-ink,var(--gold));
  --clock:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --mono:var(--body);
  font-size:16px;line-height:1.5;
}
body.upsc [data-feat]{--feat:var(--c-learn);--feat-soft:var(--c-learn-soft);--feat-ink:var(--c-learn-ink)}
body.upsc [data-feat="practise"]{--feat:var(--c-practise);--feat-soft:var(--c-practise-soft);--feat-ink:var(--c-practise-ink)}
body.upsc [data-feat="revise"]{--feat:var(--c-revise);--feat-soft:var(--c-revise-soft);--feat-ink:var(--c-revise-ink)}
/* type */
body.upsc .hint,body.upsc .empty{font-size:15px;line-height:1.45;color:var(--ink-2)}
body.upsc .eyebrow{font-size:13px;letter-spacing:.08em}
body.upsc .card>header h2{font-size:18px}
body.upsc .pill{font:600 13px var(--body);letter-spacing:0}
body.upsc .btn{font-size:15px}
body.upsc .btn.sm{font-size:15px;padding:9px 14px;min-height:40px}
body.upsc .linkbtn{font-size:15px}
body.upsc .toast{font-size:15px}
body.upsc .sessclock,body.upsc .roomclock b,body.upsc .mstime,body.upsc .timermid b,body.upsc .clock b{font-family:var(--clock)}
body.upsc .roomclock span{font:600 13px var(--body);letter-spacing:.04em}
body.upsc .nextkicker{font:700 13px var(--body);letter-spacing:.08em;color:var(--feat-ink,var(--ink-2));margin:0}
body.upsc .nextname{font-size:22px}
body.upsc .nextmeta,body.upsc .nextmeta b{font:500 15px var(--body)}
body.upsc .nextmeta b{font-weight:700}
body.upsc .nextwhy{font-size:15px}
body.upsc .nextacts .btn.pri{font-size:16px}
body.upsc .alsorow .at b{font-size:16px}
body.upsc .alsorow .at span{font-size:15px;color:var(--ink-2)}
body.upsc .dayline,body.upsc .slipline,body.upsc .hallline,body.upsc .dayline b{font:500 15px var(--body)}
body.upsc .dayline b{font-weight:700;color:var(--ink)}
body.upsc .remember,body.upsc .remember .rmtext b,body.upsc .achline,body.upsc .welcomeline{font-size:15px;font-family:var(--body)}
body.upsc .achline .achtag{font:700 13px var(--body)}
body.upsc .edchip{font-size:15px}
body.upsc .planfold>summary{font-size:16px}
body.upsc .revlead{font:600 18px/1.35 var(--display)}
body.upsc #revLeadCard.calm .revlead{font:500 16px/1.4 var(--body)}
body.upsc .revnextline{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
body.upsc .revnextline .revnext{font-weight:600;color:var(--ink)}
body.upsc .revsub{display:block;margin-top:2px;font:500 15px var(--body);color:var(--ink-2)}
body.upsc #revLeadCard .body{padding-right:56px}
body.upsc .revcard .rs,body.upsc .revcard .rw{font-size:15px}
body.upsc .revjudge .linkbtn{font-size:15px}
body.upsc .revdone{font-size:15px}
body.upsc .nextoffer p{font-size:15px}
body.upsc .sesson{font-size:15px}
body.upsc .lenchip{font-size:15px}
/* the header: the exam line in plain body type; off the Today tab, one thin line */
body.upsc #hero .examline{font:600 15px var(--body);letter-spacing:0;color:var(--ink-2)}
@media (max-width:760px){body.upsc #hero.compact .examline{font-size:15px}}
body.upsc #examMini{display:none}
body.upsc.offdash #hero{padding:8px 14px;min-height:0;gap:0}
body.upsc.offdash #hero>:not(.herotext){display:none}
body.upsc.offdash #hero .herotext{padding-right:0}
body.upsc.offdash #hero .herotext>:not(#examMini){display:none}
body.upsc.offdash #examMini{display:block;margin:0;font:600 15px var(--body);color:var(--ink-2)}
body.upsc.offdash #examMini::before{content:"\23F3\00A0"}
body.upsc.offdash #hero.nomini{display:none}
/* the bottom bar */
@media (max-width:760px){body.upsc .gnav button{font-size:13px}}
/* syllabus */
body.upsc .paperrow .pn b,body.upsc .subjfold .sfhead b{font-size:16px}
body.upsc .paperrow .pn i,body.upsc .subjfold .sfhead i{font-size:14px;color:var(--ink-2)}
body.upsc .unitrow .un{font-size:16px}
body.upsc .unitrow .un i{font-size:13px;color:var(--ink-2)}
body.upsc .unitrow .umarks{font:600 13px var(--body)}
body.upsc .thinbar i{background:var(--c-learn)}
body.upsc .stchip{font:600 13px var(--body);letter-spacing:0}
body.upsc .stchip.st-studying{border-color:var(--c-learn);color:var(--ink);background:var(--c-learn-soft)}
body.upsc .stchip.st-covered{border-color:var(--navy);background:var(--navy);color:var(--on-primary,#fff)}
/* the topic sheet and the PYQ sheets */
body.upsc .sheetplace{font-size:14px;color:var(--ink-2)}
body.upsc .sheet{position:relative}
body.upsc .sheet>.sheetplace,body.upsc .sheet>h3,body.upsc .sheet>.pqlabel{padding-right:44px}
body.upsc .usgroup>summary b{font-size:16px}
body.upsc .usgroup>summary span{font-size:14px;color:var(--ink-2)}
body.upsc .usgroup[data-feat]>summary b::before{content:"";display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--feat);margin-right:8px;vertical-align:1px}
body.upsc .usgroup[data-feat] .memrow .mi{color:var(--feat-ink)}
body.upsc .memrow .mt b{font-size:16px}
body.upsc .memrow .mt span{font-size:14px;color:var(--ink-2)}
body.upsc .ushist .ushl{font-size:15px}
body.upsc .pqlabel,body.upsc .msmeta{font-size:14px;color:var(--ink-2)}
body.upsc .pqq{font-size:17px}
body.upsc .pqopt{font-size:16px}
body.upsc .msans{font-size:16px}
body.upsc .msans h4{font-size:13px}
/* the hall */
body.upsc .hallkicker{font:600 18px/1.35 var(--display);padding-right:44px}
body.upsc #hallFacts .body{position:relative}
body.upsc .hfrow,body.upsc .hfrow b{font:500 15px var(--body)}
body.upsc .hfrow b{font-weight:700}
body.upsc .phours{font:500 14px var(--body);color:var(--ink-2)}
body.upsc .hall .tile b{font-size:15px}
body.upsc .hall .tile .tact{font-size:14px}
body.upsc .hall .tile .tstat,body.upsc .hall .tile .tgroup{font:600 13px var(--body);letter-spacing:.02em}
body.upsc .hall .tile .phours{font-size:13px}
body.upsc #roomPeople+p.hint{display:none}
/* analysis */
body.upsc .anrow .anname,body.upsc .anval,body.upsc .hfrow .hfname{font:500 15px var(--body)}
body.upsc .anval{font-weight:700}
body.upsc .anweek{font-size:13px}
body.upsc .anweek b{font:700 15px var(--body)}
body.upsc .anline,body.upsc .anline b{font:500 15px var(--body)}
body.upsc .anline b{font-weight:700;color:var(--ink)}
body.upsc .ansubname{font-size:16px}
body.upsc .anchip{font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
body.upsc .anchip[class*="f-"]::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--c-learn);flex:none}
body.upsc .anchip.f-learn{background:var(--c-learn-soft)}
body.upsc .anchip.f-practise{background:var(--c-practise-soft)}
body.upsc .anchip.f-practise::before{background:var(--c-practise)}
body.upsc .anchip.f-revise{background:var(--c-revise-soft)}
body.upsc .anchip.f-revise::before{background:var(--c-revise)}
body.upsc .anbar.learn i{background:var(--c-learn)}
body.upsc .anbar.practise i{background:var(--c-practise)}
body.upsc .duechip{font-size:14px}
body.upsc .duechip.crit{background:var(--c-revise-soft);color:var(--ink)}
/* the colour of each kind of work, on cards and rows */
body.upsc .card[data-feat],body.upsc .alsorow[data-feat]{border-left:4px solid var(--feat)}
body.upsc #revSet .revcard{border-left:4px solid var(--c-revise)}
/* the round (i): what this is and how to use it */
.infob{position:relative;flex:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;margin:0;border-radius:999px;border:1.5px solid currentColor;background:var(--surface);color:var(--ink-2);cursor:pointer;font:700 15px/1 var(--display);vertical-align:middle}
.infob::before{content:"i"}
.infob::after{content:"";position:absolute;inset:-8px}
.infob:hover{background:var(--surface-2)}
.infob:focus-visible{outline:2px solid var(--c-learn,var(--navy-2));outline-offset:3px}
body.upsc .infob[data-feat]{color:var(--feat-ink)}
.infob.corner{position:absolute;top:12px;right:12px;z-index:1}
body.upsc .card{position:relative}
body.upsc .card>header .infob{margin-left:4px}
.nextkickrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px}
body.upsc .edhead{justify-content:flex-start}
body.upsc .edhead .eyebrow{margin-right:auto}
body.upsc .edhead .infob{margin-left:16px}
/* the (i) sheet */
.infosheet .infohead{display:flex;align-items:center;gap:8px;margin:6px 0 0}
.infosheet .infodot{width:12px;height:12px;border-radius:999px;background:var(--feat,var(--navy-2))}
#infoTitle{margin:6px 0 8px;font:600 22px/1.25 var(--display);color:var(--ink)}
.infowhat{margin:0 0 16px;font-size:17px;line-height:1.5;color:var(--ink)}
.infohow{list-style:none;margin:8px 0 16px;padding:0;counter-reset:st}
.infohow li{counter-increment:st;display:flex;gap:12px;align-items:flex-start;margin:0 0 10px;font-size:16px;line-height:1.45;color:var(--ink)}
.infohow li::before{content:counter(st);flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--feat-soft,var(--navy-soft));color:var(--ink);font:700 14px var(--body)}
.infocolours{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.infocolours .eyebrow{width:100%}
.infocolours span[data-feat]{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--feat-soft);font-size:14px;color:var(--ink)}
.infocolours span[data-feat] i{width:10px;height:10px;border-radius:999px;background:var(--feat)}
.infosheet .btn.pri{width:100%}
/* the joy bar: a small celebration, still visible with the sound off or with reduced motion */
.joybar{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));transform:translateX(-50%);z-index:72;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(92vw,440px);padding:12px 16px;border-radius:14px;border:1px solid var(--line);border-left:4px solid var(--c-revise,var(--accent));background:var(--surface);box-shadow:0 12px 32px -14px rgba(8,10,24,.5);font:600 16px/1.35 var(--body);color:var(--ink);pointer-events:none}
.joybar .joyemo{font-size:24px;line-height:1;flex:none}
.joybar.in{animation:joyin .35s ease-out both}
.joybar.out{opacity:0;transform:translate(-50%,-8px);transition:opacity .35s,transform .35s}
@keyframes joyin{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
body.upsc .joybar.in{animation-duration:.35s}
@media (prefers-reduced-motion:reduce){.joybar.in{animation:none}.joybar.out{transition:none}}
/* Batch 9, second pass: the folds on Today and the test log keep the 13px floor too */
body.upsc .lbtoggle button,body.upsc .dayswitch button{font-size:15px}
body.upsc .row .t span,body.upsc .ghead .t span,body.upsc .linktag,body.upsc .swmeta,body.upsc .askbtn span{font-size:14px;color:var(--ink-2);font-family:var(--body)}
body.upsc .row .t b{font-size:15px}
body.upsc .dchip{font:600 13px var(--body)}
body.upsc .wkitems li{font-size:13px}
body.upsc .wkday .wkh b{font:700 13px var(--body);letter-spacing:.04em}
body.upsc .revhow .how span{font-size:13px}
body.upsc .mood .n{font-size:13px;letter-spacing:.02em}
body.upsc .areachip,body.upsc .soundrow{font-size:14px}
body.upsc .jquote{font-size:15px}
body.upsc .sbname{font-size:14px}
body.upsc .card:has(>.infob.corner)>header{padding-right:56px}
body.upsc .anweek b{min-height:1.5em}
body.upsc #hallCard #roomPill{display:none}
body.upsc .card>header:has(>.infob.corner){padding-right:56px}

/* =====================================================================
   Batch 10 (26 Oct 2026): clear for new students, familiar for current ones (UPSC profile only).
   The character beside the name; the streak and achievements as chips under the exam line; one card shape (a coloured
   icon of its kind of work, a title, one line, one button); the UPSC Guide; the one-line promise; ACT's habits one tap away.
   ===================================================================== */
/* the header */
body.upsc #hero{display:flex;align-items:center;gap:14px}
body.upsc .heroface{flex:none;width:56px;height:56px;padding:0;border:2px solid var(--line);border-radius:999px;background:var(--surface-2);cursor:pointer;display:grid;place-items:center;overflow:hidden}
body.upsc .heroface:hover{border-color:var(--c-learn)}
body.upsc .heroface:focus-visible{outline:2px solid var(--c-learn);outline-offset:3px}
body.upsc .heroface .face{width:52px;height:52px;border-radius:999px;overflow:hidden;display:grid;place-items:center}
body.upsc .heroface .face svg,body.upsc .heroface .face img{width:52px;height:52px;object-fit:cover}
body.upsc .herochips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
body.upsc .herochip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 14px var(--body);cursor:pointer}
body.upsc .herochip .ic{color:var(--c-revise-ink)}
body.upsc .herochip[data-chip="streak"]{background:var(--c-revise-soft);border-color:transparent}
body.upsc .herochip[data-chip="streak"] .ic{color:var(--c-revise)}
body.upsc .herochip:focus-visible{outline:2px solid var(--c-learn);outline-offset:2px}
body.upsc.offdash #examMini .ministreak{display:inline-flex;align-items:center;gap:4px}
body.upsc.offdash #examMini .ministreak .ic{color:var(--c-revise)}
/* one card shape: the coloured icon of its kind of work */
.featic{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
body.upsc .featic[data-feat]{background:var(--feat-soft);color:var(--feat-ink)}
body.upsc .nextkickrow{justify-content:flex-start}
body.upsc .nextkickrow .nextkicker{margin-right:auto}
body.upsc .alsorow{gap:12px}
body.upsc .edhead{gap:10px}
body.upsc #revLeadCard .body{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:start}
body.upsc #revLeadCard .body>.featic{grid-row:span 2}
body.upsc #revLeadCard .body>p{grid-column:2;margin:0}
body.upsc #revLeadCard .body>p:empty{display:none}
body.upsc .ancard>header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.upsc .hallkicker{gap:12px}
/* the syllabus: the PYQs on each subject */
body.upsc .sfpyq{color:var(--c-practise-ink);font-weight:600}
/* a student's first week: what Aroh is, in one line */
.promiseline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 4px var(--sp-3,16px);padding:12px 14px;border-radius:var(--r);background:var(--c-learn-soft,var(--navy-soft));font:500 15px/1.4 var(--body);color:var(--ink)}
/* ACT's habits, one tap away for a new student */
.edsuggest{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.edsuggest .hint{margin:0}
.edadd{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px dashed var(--line);border-radius:999px;background:transparent;color:var(--ink);font:500 15px var(--body);cursor:pointer}
.edadd:hover{border-style:solid;border-color:var(--c-learn,var(--navy-2))}
/* the UPSC Guide; the general guide stays for other students */
body.upsc #tab-guide>:not(.guidehead):not(#upscGuide){display:none!important}
#upscGuide .gpromise{margin:0 0 6px;font:600 20px/1.35 var(--display);color:var(--ink)}
#upscGuide .gloop,#upscGuide .gmap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
#upscGuide .gloop li,#upscGuide .gmap li{display:flex;gap:12px;align-items:flex-start}
#upscGuide .gloop b,#upscGuide .gmap b{display:block;font:600 16px var(--body);color:var(--ink)}
#upscGuide .gloop span:not(.featic),#upscGuide .gmap span:not(.featic){display:block;font-size:15px;line-height:1.45;color:var(--ink-2)}
#upscGuide .gfaq details{border-bottom:1px solid var(--line-2);padding:12px 0}
#upscGuide .gfaq details:last-child{border-bottom:0}
#upscGuide .gfaq summary{cursor:pointer;font:600 16px/1.4 var(--body);color:var(--ink)}
#upscGuide .gfaq p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* Batch 10, second pass: the label before a name stays on its line; the chips sit side by side; the face sits by the name */
body.upsc .alsorow .at b span{display:inline;margin:0;font:inherit;color:var(--ink-2)}
body.upsc .herochip{padding:5px 10px;gap:5px;font-size:14px}
body.upsc:not(.offdash) #hero{align-items:flex-start}
body.upsc .heroface{margin-top:2px}
body.upsc #hero{flex-wrap:wrap}
body.upsc #hero .herotext{flex:1 1 0;min-width:0}
body.upsc #heroChips{flex-basis:100%;margin:0}

/* =====================================================================
   Batch 11 (26 Oct 2026): quiet luxury (UPSC profile only).
   Quiet text buttons instead of amber links; no coloured card edges (the icon tile carries the colour); one container level; a
   faint shadow instead of outlines in light looks, a hairline in dark ones; small toasts above the tabs; the light/dark switch in
   Account; no footer in the app; a pressed state on every control; small motions that stop under reduced motion.
   ===================================================================== */
body.upsc{--q-shadow:0 1px 2px rgba(22,26,53,.05),0 10px 28px -18px rgba(22,26,53,.24)}
/* links become quiet text buttons; amber stays for the sun, the streak and celebrations */
body.upsc .linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;border-radius:8px;color:var(--ink-2);font:600 15px var(--body);text-decoration:none}
body.upsc .linkbtn:hover{color:var(--ink);background:var(--surface-2)}
/* cards: no coloured edge, no outline, a faint lift */
body.upsc .card,body.upsc .alsorow,body.upsc .revcard,body.upsc .welcomeline,body.upsc .sesscard{border:1px solid transparent;box-shadow:var(--q-shadow)}
body.upsc .card[data-feat],body.upsc .alsorow[data-feat],body.upsc #revSet .revcard{border-left:1px solid transparent}
:root[data-theme$="-dark"] body.upsc .card,:root[data-theme$="-dark"] body.upsc .alsorow,:root[data-theme$="-dark"] body.upsc .revcard,:root[data-theme$="-dark"] body.upsc .welcomeline,:root[data-theme$="-dark"] body.upsc .sesscard,:root[data-theme="dark"] body.upsc .card{border-color:var(--line-2);box-shadow:none}
body.upsc .alive::after{display:none}
/* one container level */
body.upsc .planfold{border:0;border-radius:0;background:transparent;padding:0;margin:0}
body.upsc .planfold>summary{min-height:52px;padding:12px 4px;border-top:1px solid var(--line-2)}
body.upsc .morefold{margin-top:var(--sp-4,24px)}
body.upsc .morefold>summary{font-size:16px;color:var(--ink)}
body.upsc .morebody{padding:0 0 8px}
body.upsc .morebody .planfold>summary{padding-left:16px;font-size:15px}
body.upsc #sylCard .subjfold{border:0;border-radius:0;border-bottom:1px solid var(--line-2);background:transparent;margin:0;padding:0 2px}
body.upsc #roomMe{border:0;background:transparent;padding:0}
/* toasts: one short line above the tabs */
body.upsc .toast{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 32px -14px rgba(8,10,24,.45);font:600 15px/1.35 var(--body);max-width:min(92vw,420px);padding:10px 16px;border-radius:12px}
@media (max-width:760px){body.upsc .toast{bottom:calc(84px + env(safe-area-inset-bottom))}}
/* the top bar and the footer */
body.upsc #themeTog{display:none}
body.upsc .sitefoot{display:none}
/* a pressed state on every control */
body.upsc .btn,body.upsc .linkbtn,body.upsc .iconbtn,body.upsc .segbtn,body.upsc .edchip,body.upsc .edadd,body.upsc .edmore,body.upsc .herochip,body.upsc .memrow,body.upsc .hallgo,body.upsc .unitrow{transition:transform .09s ease,background-color .12s ease}
body.upsc .btn:active,body.upsc .iconbtn:active,body.upsc .segbtn:active,body.upsc .edchip:active,body.upsc .edadd:active,body.upsc .edmore:active,body.upsc .herochip:active,body.upsc .memrow:active,body.upsc .hallgo:active{transform:scale(.98)}
.iconbtn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink-2);cursor:pointer}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn:focus-visible,.segbtn:focus-visible,.hallgo:focus-visible{outline:2px solid var(--c-learn,var(--navy-2));outline-offset:2px}
/* the header: the days, then the date */
body.upsc #examLine{display:flex;flex-direction:column;gap:2px}
@media (max-width:760px){body.upsc #hero.compact .examline{display:flex}}
body.upsc #examLine .exdays{font:600 16px/1.35 var(--body);color:var(--ink)}
body.upsc #examLine .exdate{font:500 13px var(--body);color:var(--ink-2)}
body.upsc #heroMore{display:none!important}
body.upsc .hero.compact .herotext{padding-right:0}
body.upsc .herochip{min-height:44px}
/* the next step: one meta line, a full-width Start */
body.upsc .nextcard .body{padding:24px}
body.upsc .nextkickrow{margin:0 0 6px}
body.upsc .nextmeta{margin-top:12px}
body.upsc .nextacts{flex-direction:column;align-items:stretch;gap:4px;margin-top:24px}
body.upsc .nextacts .btn.pri{width:100%;min-height:52px;font-size:17px}
body.upsc .nextacts .linkbtn{align-self:center}
/* the three answers of a revision, as one control */
.judge{margin-top:16px}
.judgelead{margin:0 0 8px;font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:var(--surface-2)}
.segbtn{min-height:48px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 15px var(--body);cursor:pointer}
.segbtn:hover{background:var(--surface)}
.segbtn.chosen{background:var(--surface);box-shadow:0 1px 3px rgba(22,26,53,.14)}
.segbtn:disabled{cursor:default}
body.upsc .card.folding,body.upsc .revcard.folding{opacity:.3;transform:scale(.985);transition:opacity .22s ease,transform .22s ease}
body.upsc #revSet .revcard{padding:20px}
body.upsc #revSet .revcard .linkbtn{margin-top:8px}
.revback{display:flex;align-items:center;gap:8px;margin:12px 4px 0;font-size:15px;color:var(--ink-2)}
.revback .ic{color:var(--c-learn,var(--navy-2))}
.revback b{color:var(--ink);font-weight:600}
.revthen{margin:12px 4px 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.revthen b{color:var(--ink);font-weight:600}
body.upsc #dayLine{display:none!important}
/* every day */
body.upsc .edchip{border:0;background:var(--surface-2);min-height:44px;padding:8px 14px}
body.upsc .edchip i{width:22px;height:22px;border:1.5px solid color-mix(in srgb,var(--ink-2) 45%,transparent)}
body.upsc .edchip[aria-pressed="true"] i{background:var(--c-learn);border-color:var(--c-learn);color:#fff;font-size:13px}
body.upsc .edchip.ticking i{animation:aroh-tick .24s ease-out}
@keyframes aroh-tick{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
body.upsc .edhead .eyebrow{margin-right:0}
body.upsc .edhead>.iconbtn,body.upsc .edhead>.linkbtn{margin-left:auto}
body.upsc .edhead .infob{margin-left:4px}
.edcount{font:700 13px var(--body);color:var(--c-learn-ink,var(--navy-2))}
.edmore{min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:600 15px var(--body);cursor:pointer}
.edmore:hover{background:var(--surface-2);color:var(--ink)}
body.upsc .edadd{min-height:44px}
/* the hall line: faces when there is news */
.hallgo{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 12px 4px 10px;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--q-shadow,none);color:var(--ink);font:600 15px var(--body);cursor:pointer}
.hallfaces{display:inline-flex}
.hallfaces .face{width:24px;height:24px;border-radius:999px;border:2px solid var(--surface);margin-left:-8px;overflow:hidden;display:grid;place-items:center}
.hallfaces .face:first-child{margin-left:0}
.hallfaces .face svg,.hallfaces .face img{width:24px;height:24px}
/* the new achievement as a small card */
body.upsc .achline:not(.resurf){display:flex;align-items:center;gap:12px;margin:var(--sp-3,16px) 0 0;padding:10px 6px 10px 14px;border-radius:var(--r);background:var(--surface);box-shadow:var(--q-shadow)}
.achtxt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
body.upsc .achtxt .achtag{font:700 13px var(--body);letter-spacing:.02em;text-transform:none;color:var(--c-revise-ink)}
.achtxt b{font:600 16px var(--body);color:var(--ink)}
.achmore{flex:none;font:600 13px var(--body);padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
/* the last seven days are study days: indigo */
body.upsc .seven i.study{background:var(--c-learn);border-color:var(--c-learn)}
body.upsc .seven i.today{border-color:var(--ink-2);background:transparent;box-shadow:none}
/* the session: one calm card */
body.upsc .sesscard .body{padding:24px}
body.upsc .sesskick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;text-transform:none;letter-spacing:0;font:600 15px var(--body);color:var(--ink-2)}
body.upsc .sesskick .sesstopic{color:var(--ink)}
body.upsc .sessclock{font:600 56px/1.05 var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:12px 0 12px;color:var(--ink)}
.sessbar{height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.sessbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--c-learn,var(--navy-2));transition:width 1s linear}
body.upsc .sessacts{display:flex;align-items:center;gap:8px;margin-top:20px}
body.upsc .sessacts .btn.pri{flex:1 1 auto;min-height:52px;font-size:17px}
body.upsc .sundot.breathe{animation:aroh-breathe 2.4s ease-in-out infinite}
@keyframes aroh-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
/* the three dots */
.minimenuwrap{position:relative;display:inline-flex}
.minimenu{position:absolute;right:0;top:calc(100% + 6px);z-index:6;min-width:210px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 40px -18px rgba(8,10,24,.45);display:flex;flex-direction:column}
.minimenu button{min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 15px var(--body);text-align:left;cursor:pointer}
.minimenu button:hover{background:var(--surface-2)}
/* the syllabus: quiet until something happens */
body.upsc .unitrow{padding:14px 4px;min-height:52px}
body.upsc .unitrow .stchip{border:0;background:transparent;padding:0;display:inline-flex;align-items:center;gap:6px;font:600 13px var(--body);color:var(--ink-2)}
body.upsc .unitrow .stchip.st-none{display:none}
body.upsc .unitrow .stchip.st-studying,body.upsc .unitrow .stchip.st-covered{color:var(--c-learn-ink);background:transparent;border:0}
body.upsc .unitrow .stchip.st-studying::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--c-learn)}
body.upsc .unitrow .stchip.st-covered .ic{color:var(--c-learn)}
body.upsc .sylsearch{position:sticky;top:calc(var(--topbar-h,56px) + 8px);z-index:3;background:var(--surface)}
.sylclear{position:relative;flex:none;width:36px;height:36px;border:0;border-radius:999px;background:var(--surface-2);color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.sylclear::after{content:"";position:absolute;inset:-4px}
/* the sheets: an x at the top left, the (i) and the three dots at the top right */
body.upsc .sheet:has(>.sheetx){padding-top:58px}
.sheet>.sheetx{position:absolute;top:8px;left:8px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.sheet>.sheetx:hover{background:var(--surface-2);color:var(--ink)}
body.upsc .sheet>.infob.corner{top:16px;right:16px}
.sheet>.sheetmore{position:absolute;top:8px;right:60px;z-index:3}
body.upsc #usClose,body.upsc #pqClose,body.upsc #msClose{display:none}
body.upsc #pqReport,body.upsc #msReport{display:none!important}
/* the topic page: the chip is the control */
body.upsc #usStatusChange{display:none}
body.upsc #usStatusChip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;cursor:pointer}
body.upsc #usStatusChip::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 0 0 2px}
body.upsc .usgroup.more>summary b::before{content:"";display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--line);margin-right:8px;vertical-align:1px}
/* the PYQ label as a chip; the model answer's dot points; the chosen answer */
.pqchip{display:inline-flex;align-items:center;padding:3px 10px;margin-right:8px;border-radius:999px;background:var(--c-practise-soft,var(--surface-2));color:var(--ink);font:600 13px var(--body)}
.pqlib{font-size:13px;color:var(--ink-2)}
.msans p.msdot{position:relative;padding-left:18px}
.msans p.msdot::before{content:"";position:absolute;left:2px;top:.65em;width:8px;height:8px;border-radius:999px;background:var(--c-practise,var(--good))}
body.upsc #msWrite .pqactions{flex-direction:column;align-items:stretch}
body.upsc #msStart{width:100%;min-height:52px;font-size:17px}
body.upsc #msSkip{align-self:center}
body.upsc #msRate .btn.chosen{background:var(--c-learn-soft);border-color:var(--c-learn)}
/* the Study Hall: one title, one status line, the clock card as the card */
body.upsc .halltitle{margin:0 0 6px;padding-right:48px;font:600 18px var(--display);color:var(--ink)}
body.upsc .hallkicker{font:500 15px/1.45 var(--body);color:var(--ink-2)}
body.upsc .hallkicker .featic{display:none}
body.upsc #hallCard>header{display:none!important}
body.upsc #roomMe .roomfor,body.upsc #roomMe>.phours{display:none!important}
body.upsc #roomMe .roomclock b{font:600 48px/1 var(--body);font-variant-numeric:tabular-nums}
body.upsc #roomMe .roomclock span{text-transform:none;letter-spacing:0;font:500 15px var(--body);color:var(--ink-2)}
body.upsc #roomMe .pacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.upsc #roomStart{flex:1 1 auto;min-height:52px;font-size:17px}
.hallfirst{grid-column:1/-1;text-align:center;padding:20px 0 8px;font-size:15px;color:var(--ink-2)}
/* analysis: the icon and the title on one row */
body.upsc .ancard>header{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center}
body.upsc .ancard>header .featic{grid-row:span 2}
body.upsc .ancard>header h2{margin:0}
body.upsc .ancard>header .pill{grid-column:2;justify-self:start;background:none;border:0;padding:0;font:500 13px var(--body);color:var(--ink-2)}
body.upsc .ancard .anname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.upsc .ancard .andue+.anval{display:none}
/* account */
#acctClose .xic{display:none}
body.upsc #acctClose{order:-1;width:44px;height:44px;padding:0;border:0;display:grid;place-items:center}
body.upsc #acctClose .xic{display:inline-flex}
body.upsc #acctClose .xtx{display:none}
body.upsc .accthead{justify-content:flex-start;gap:8px}
body.upsc .acctgroup>summary span{display:none}
body.upsc .acctgroup>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(-45deg)}
body.upsc .acctgroup[open]>summary::after{transform:rotate(45deg)}
body.upsc .acctgroup>summary{min-height:52px;font-size:16px}
body.upsc #acctEmail,body.upsc #acctMode{display:none}
body.upsc .acctsec[data-sec="home"]{display:flex;flex-direction:column}
body.upsc .acctsec[data-sec="home"].hidden{display:none}
body.upsc .acctout{order:9;border:0!important;background:transparent!important;box-shadow:none!important;text-decoration:none!important;color:var(--ink-2);justify-content:center;margin-top:8px;min-height:48px}
.lookmode{margin:0 0 12px;width:max-content}
.lookmode button{min-height:40px;padding:0 18px}
/* motion: tabs cross-fade, sheets rise, the session card arrives */
body.upsc .tabpane:not(.hidden){animation:aroh-pane .12s ease-out}
body.upsc .sheetwrap:not(.hidden)>.sheet{animation:aroh-sheet .22s cubic-bezier(.2,.8,.2,1)}
body.upsc .sesscard:not(.hidden){animation:aroh-morph .24s cubic-bezier(.2,.8,.2,1)}
@keyframes aroh-pane{from{opacity:0}to{opacity:1}}
@keyframes aroh-sheet{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@keyframes aroh-morph{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){body.upsc .tabpane,body.upsc .sheet,body.upsc .sesscard,body.upsc .sundot,body.upsc .edchip i{animation:none!important}}
/* Batch 11, second pass: .seg is an older control too, so the revision answers are scoped; the achievement card stays on one line */
.judge .seg{display:grid;grid-template-columns:repeat(3,1fr);width:auto;max-width:none;border:0;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2)}
.judge .seg .segbtn{min-height:48px;padding:0 6px;border-radius:10px;color:var(--ink);font:600 15px var(--body)}
.judge .seg .segbtn.chosen{background:var(--surface);box-shadow:0 1px 3px rgba(22,26,53,.14)}
body.upsc .achline:not(.resurf){flex-wrap:nowrap}
body.upsc #tab-hall #hallCard #roomMe .roomfor,body.upsc #tab-hall #hallCard #roomMe>.phours,body.upsc #tab-hall #hallCard>header{display:none!important}
body.upsc .sheet:has(>.sheetx)>.sheetgrip{position:absolute;top:8px;left:50%;transform:translateX(-50%);margin:0}
body.upsc .hall .tile.idle .tstat{display:none}
body.upsc #tab-hall .secthead{background:transparent;border:0;padding-left:0}
/* Batch 11, third pass: every button at least 44px to touch */
body.upsc .btn,body.upsc .btn.sm,body.upsc .stbtn,body.upsc #usStatusChip{min-height:44px}
body.upsc .sheetacts .btn.pri,body.upsc #usPrimary{min-height:52px;font-size:17px}

/* 27 Oct 2026: the sign-up and sign-in pages. The theme switch had no room on a phone and sat on the card edge; the ways
   to sign in, start or request access were small links, now plain secondary buttons. */
.authpage .themetog.floating { top: 14px; right: 14px; }
@media (max-width: 899px) { .authwrap { padding-top: 72px; } }
.authalt { display: grid; gap: 8px; margin: 4px 0 14px; }
.authalt p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.authalt p:first-child { margin-top: 0; }
.authalt .btn { min-height: 46px; }

/* Batch 11 (27 Oct 2026): the one Undo, in the toast's place */
.undofloat{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:9999;display:flex;align-items:center;gap:14px;width:min(92vw,460px);box-sizing:border-box;
  padding:10px 12px 10px 16px;border-radius:12px;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 32px -14px rgba(8,10,24,.45);
  font:600 15px/1.35 var(--body);opacity:0;pointer-events:none;transition:opacity .2s,transform .25s}
.undofloat.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.undofloat span{flex:1;min-width:0}
.undofloat .linkbtn{flex:none;font-weight:700;padding:6px 8px;min-height:36px}
@media (max-width:760px){.undofloat{bottom:calc(84px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.undofloat{transition:none}}
.rmtopic,.rmtest{display:block;margin-top:10px;font-size:13px}

/* 27 Oct 2026: Quick revision */
.nshead{margin:16px 0 6px;font:700 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.nsask{margin:2px 0;font-size:14.5px;line-height:1.5}
.nslist{margin:0;padding:0 0 0 20px}
.nsitem{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.nsitem:last-child{border-bottom:0}
.nsq{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.nsa{margin:3px 0 0;font:600 15.5px/1.5 var(--body);color:var(--ink)}
.nsw{margin:3px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.nsacts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}

/* 28 Oct 2026 (docs/aroh-pricing-2026-10.md): a locked thing, shown where it is, with one quiet line that names the plan; a tap opens the plans */
.lockline{display:flex;align-items:flex-start;gap:8px;margin:10px 0 2px;padding:10px 12px;border:1px dashed var(--line);border-radius:var(--r-s,8px);
  color:var(--muted);font:500 15px/1.45 var(--body);text-decoration:none;background:transparent}
.lockline:hover,.lockline:focus-visible{color:var(--ink);border-color:var(--gold)}
.lockline .lockic{flex:none;font-size:14px;line-height:1.5}
.nsitem.nslock{list-style:none;margin-left:-18px}
/* 28 Oct 2026: the admin's plans and prices card */
#pricesCard .pricegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:4px 0 8px}
#pricesCard .pricefield{display:flex;flex-direction:column;gap:5px;font-size:14px}
#pricesCard .pricefield span{font-weight:600;color:var(--ink)}
#pricesCard .pricefield input{width:100%;font-family:var(--mono);font-size:16px}
#pricesCard .pricefield small{color:var(--muted);font-size:13px}
#pricesCard .subhead{font-family:var(--display);font-weight:600;font-size:17px;margin:16px 0 6px}
#pricesCard .switchrow{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px}
#pricesCard .saverow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
/* 28 Oct 2026: a friend's tile in Study with others */
.hall .tile .tgroup.friend{background:var(--good-soft,rgba(42,124,125,.14));color:var(--good,#2A7C7D)}

/* 28 Oct 2026: where a card, hook or explanation comes from, in small quiet type under it */
.srcline{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.srcline span:first-child{font-weight:600}

/* ================= 28 Oct 2026: Study Hall redesign (UPSC). Vikram: "it feels less like studying with others and more like a tech".
   A room of people, not a grid of status cards: seats on one quiet floor, a face and a name, one plain line, a small lamp lit while
   someone studies (teal for others, amber for you). No borders per person, no pulsing dot, no stacked counters. The header shows
   the faces in the room and the subjects on the desks as chips instead of a bar chart. ================= */
body.upsc #tab-hall .hall{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:22px 8px;padding:24px 12px 20px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r)}
body.upsc #tab-hall .seat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0;padding:2px 4px}
body.upsc #tab-hall .seatface{position:relative;display:inline-flex;border-radius:50%;margin-bottom:8px;transition:opacity .3s ease}
body.upsc #tab-hall .seatface .anonface.big{width:52px;height:52px;background:var(--surface-3);color:var(--muted)}
body.upsc #tab-hall .seat .lamp{position:absolute;right:-2px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:var(--good);border:3px solid var(--surface-2)}
body.upsc #tab-hall .seat.me .lamp{background:var(--gold-bright)}
body.upsc #tab-hall .seat.me .seatface{box-shadow:0 0 0 3px var(--surface-2),0 0 0 5px var(--gold-lift)}
body.upsc #tab-hall .seat.away .seatface,body.upsc #tab-hall .seat.idle:not(.me) .seatface{opacity:.55}
body.upsc #tab-hall .seat b{display:block;max-width:100%;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.upsc #tab-hall .seat.anon b{font-weight:500;color:var(--ink-2)}
body.upsc #tab-hall .seatfriend{font-size:13px;font-weight:600;color:var(--good);line-height:1.3}
body.upsc #tab-hall .seatline{font-size:13.5px;line-height:1.35;color:var(--muted)}
body.upsc #tab-hall .seat.on .seatline{color:var(--ink-2)}
body.upsc #tab-hall .seathours{font-size:13px;line-height:1.35;color:var(--muted)}
body.upsc #tab-hall .hallfirst{grid-column:1/-1;margin:6px 0;text-align:center}
body.upsc #tab-hall .hffaces{display:flex;align-items:center;margin:14px 0 4px;padding-left:6px}
body.upsc #tab-hall .hffaces .hfface{position:relative;display:inline-flex;margin-left:-8px;border-radius:50%;box-shadow:0 0 0 2.5px var(--surface)}
body.upsc #tab-hall .hffaces .hfface .anonface{width:34px;height:34px;background:var(--surface-3)}
body.upsc #tab-hall .hffaces .hfface.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 2px var(--surface)}
body.upsc #tab-hall .hffaces .hfmore{margin-left:8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
body.upsc #tab-hall .hallkicker .featic{display:none}
body.upsc #tab-hall .hfchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
body.upsc #tab-hall .hfchip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:14px;line-height:1.3;color:var(--ink-2)}
body.upsc #tab-hall .hfchip b{font-weight:600;font-size:13px;color:var(--good)}
@media (max-width:520px){body.upsc #tab-hall .hall{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 4px;padding:18px 6px 14px}body.upsc #tab-hall .seat b{font-size:14px}body.upsc #tab-hall .seatline{font-size:13px}}
@media (max-width:360px){body.upsc #tab-hall .hall{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.upsc #tab-hall .friendfind{align-items:center;gap:10px;margin-bottom:12px}
body.upsc #tab-hall .friendfind input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:15px}
body.upsc #tab-hall .friendfind input:focus{outline:2px solid var(--ring,var(--navy-2));outline-offset:1px;border-color:transparent}
body.upsc #tab-hall .seatline .seatmin{white-space:nowrap}
body.upsc #tab-hall .seatline .seatmin::before{content:"· "}
body.upsc #tab-hall #friendsCard header{flex-wrap:nowrap;align-items:center}
body.upsc #tab-hall #friendPill{white-space:nowrap}

/* 28 Oct 2026: Account rows about "areas", which UPSC students never use */
body.upsc .acctrow.noupsc{display:none}

/* 29 Oct 2026: a PYQ not yet signed off says so (Vikram: "mention Verification Required"); amber ink only */
.pqcheck{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn);font-size:13px;font-weight:600;white-space:nowrap}

/* 29 Oct 2026: Log a test (Vikram: students could not find where to log outside tests). The door on the Syllabus tab is a full-width
   tile in the practise colour, right under the search; the sheet asks three things in order (topics, score, name) and keeps the
   reasons folded. Tap targets stay at 44px or more; text at 13px or more. */
.logtest{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;margin:0 0 14px;cursor:pointer;font:inherit;
  border:1px solid var(--feat, var(--line));background:var(--feat-soft, var(--surface-2));color:var(--ink);border-radius:12px;min-height:56px}
.logtest .mi{display:inline-flex;color:var(--feat-ink, var(--muted))}
.logtest .mt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.logtest .mt b{font-size:15px}
.logtest .mt span{font-size:13px;color:var(--muted)}
.tlsub{margin:2px 0 14px}
.tlblock{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.tllabel{font-weight:600;font-size:15px;color:var(--ink)}
.tlopt{font-weight:400;font-size:13px;color:var(--muted);margin-left:4px}
.tlchips{display:flex;flex-wrap:wrap;gap:8px}
.tlchips:empty{display:none}
.tlchip{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;background:var(--c-practise-soft, var(--surface-2));color:var(--ink);font-size:14px;max-width:100%}
.tlchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlchipx{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;min-width:32px;min-height:32px;cursor:pointer;border-radius:999px}
.tlsearch{margin-bottom:0}
.tlresults{display:flex;flex-direction:column;gap:6px}
.tlresults:empty{display:none}
.tlres{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;width:100%;padding:10px 12px;min-height:44px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;cursor:pointer;border-radius:var(--r-s, 10px)}
.tlres b{font-size:14px;font-weight:600}
.tlres span{font-size:13px;color:var(--muted)}
.tlhint{margin:2px 0 0;font-size:13px;color:var(--muted)}
.tlfull{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:44px;cursor:pointer}
.tlfull input{width:20px;height:20px}
.tlscore{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tlscore label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.tlscore input{font-size:20px;padding:10px 12px;min-height:48px}
.tlpct{margin:0;font-size:14px;color:var(--ink);min-height:20px}
.tlpct.bad{color:var(--c-revise-ink, var(--ink))}
.tlwhy{margin:0 0 18px}
.tlwhy summary{cursor:pointer;font-size:14px;color:var(--ink);min-height:44px;display:flex;align-items:center}
.tlwhy .errrow{margin-top:8px}
.tlgo{width:100%;min-height:48px;font-size:16px}
.tldone p{margin:0 0 10px;font-size:15px}
.tlnudge{color:var(--ink);font-weight:600}
.tldoneacts{flex-wrap:wrap;gap:8px}
.anlog{margin-top:12px;display:inline-flex;align-items:center;gap:6px}
@media (max-width:420px){ .tlwhy .errrow{grid-template-columns:1fr} }
#testSheet .tlsub{margin:4px 0 18px}
.tlnames{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.tlnames li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 12px;border-radius:var(--r-s, 10px);background:var(--surface-2);font-size:15px}
.tlnow{font-size:13px;color:var(--c-practise-ink, var(--muted));white-space:nowrap}
.tldone .hint{margin-bottom:14px}

/* 29 Oct 2026: the Big Picture (Vikram: beautiful to look at and easy to understand without too many words; for looking only).
   One colour per kind of work from the brand (learn indigo, practise teal, revise amber); big numbers, one or two words under each;
   explanations behind (i). Low scores are muted ink, never an alarm colour. */
#anHost .card{position:relative;padding:18px 16px}
#anHost .card>.infob.corner{top:12px;right:12px}
.bph{font-family:var(--display);font-size:18px;margin:0 0 12px}
.bplead{margin:0 44px 14px 0;font-size:16px;line-height:1.4;color:var(--ink)}
.bphrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bpringbox{position:relative;width:132px;height:132px;flex:0 0 auto}
.bpring{width:132px;height:132px;display:block}
.bpring circle{fill:none;stroke-width:14;stroke-linecap:round}
.bpring .r-tr{stroke:var(--surface-2)}
.bpring .r-st{stroke:var(--c-learn-soft, var(--surface-3))}
.bpring .r-cv{stroke:var(--c-learn, var(--navy))}
.bpringmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bpringmid b{font-family:var(--display);font-size:30px;line-height:1}
.bpringmid span{font-size:13px;color:var(--muted)}
.bpleg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.bpleg li{display:flex;align-items:center;gap:6px}
.bpleg .bpdot{width:12px;height:12px;flex:0 0 12px;border-radius:50%;display:inline-block}
.bpleg .bpdot.r-cv{background:var(--c-learn, var(--navy))}
.bpleg .bpdot.r-st{background:var(--c-learn-soft, var(--surface-3))}
.bpleg .bpdot.r-tr{background:var(--surface-2);box-shadow:0 0 0 1px var(--line) inset}
.bppills{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-top:16px}
.bppill{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--feat-soft, var(--surface-2))}
.bppill .mi{color:var(--feat-ink, var(--muted));display:inline-flex}
.bppill b{font-family:var(--display);font-size:22px;line-height:1.1}
.bppill span{font-size:13px;color:var(--muted)}
.bpstep{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;margin:0 0 8px;min-height:56px;border:1px solid var(--line);
  border-left:4px solid var(--feat, var(--line));background:var(--surface);color:var(--ink);border-radius:12px;cursor:pointer;font:inherit}
.bpstep .mi{color:var(--feat-ink, var(--muted));display:inline-flex}
.bpstep .mt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.bpstep .mt b{font-size:15px}
.bpstep .mt span{font-size:13px;color:var(--muted)}
.bpstep .ar{color:var(--muted);display:inline-flex}
.bptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.bptile{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:12px;background:var(--feat-soft, var(--surface-2))}
.bptile .mi{color:var(--feat-ink, var(--muted));display:inline-flex}
.bptile b{font-family:var(--display);font-size:24px;line-height:1.15}
.bptile span{font-size:13px;color:var(--muted)}
.bphl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.bphlb{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.bphlb span{font-size:13px;color:var(--muted)}
.bphlb b{font-size:15px;line-height:1.25}
.bphlb em{font-style:normal;font-family:var(--display);font-size:20px}
.bphlb.good em{color:var(--c-practise-ink, var(--ink))}
.bphlb.low em{color:var(--c-revise-ink, var(--ink))}
.bpsrow{border-top:1px solid var(--line)}
.bpsrow>summary{list-style:none;cursor:pointer;padding:12px 0;display:flex;flex-direction:column;gap:8px}
.bpsrow>summary::-webkit-details-marker{display:none}
.bpstop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bpstop b{font-size:15px}
.bpacc{font-family:var(--display);font-size:14px;padding:3px 10px;border-radius:999px;white-space:nowrap}
.bpacc.good{background:var(--c-practise-soft, var(--surface-2));color:var(--c-practise-ink, var(--ink))}
.bpacc.mid{background:var(--c-revise-soft, var(--surface-2));color:var(--c-revise-ink, var(--ink))}
.bpacc.low{background:var(--surface-2);color:var(--muted)}
.bpbar{height:10px;border-radius:999px;background:var(--surface-2);display:flex;overflow:hidden}
.bpbar i{display:block;height:100%}
.bpbar .cv{background:var(--c-learn, var(--navy))}
.bpbar .st{background:var(--c-learn-soft, var(--surface-3))}
.bpmeta{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
.bpmeta>span{display:inline-flex;align-items:center;gap:4px}
.bpdetail{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:0 0 10px}
.bpdetail>div{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:10px;background:var(--surface-2)}
.bpdetail b{font-size:16px}
.bpdetail span{font-size:13px;color:var(--muted)}
.bpgo{margin:0 0 12px;min-height:44px}
.bpidle>summary{cursor:pointer;padding:12px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--line);min-height:44px}
.bpchartbox{margin:0 0 6px}
.bpchart{width:100%;height:auto;display:block}
.bpchart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.bpchart .gl{font-size:14px;fill:var(--muted)}
.bpchart .ln{fill:none;stroke:var(--c-practise, var(--navy));stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.bpchart .pt{stroke:var(--surface);stroke-width:2;fill:var(--c-practise, var(--navy))}
.bpchart .pt.k-mock{fill:var(--c-learn, var(--navy))}
.bpchart .pt.k-mains{fill:var(--c-revise, var(--accent))}
.bpcap{margin:4px 0 10px;font-size:14px}
.bpcap .up{color:var(--c-practise-ink, var(--ink));font-weight:600}
.bpkinds{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.bpkind{display:inline-flex;align-items:center;gap:6px}
.bpkind i{width:10px;height:10px;border-radius:50%;background:var(--c-practise, var(--navy))}
.bpkind.k-mock i{background:var(--c-learn, var(--navy))}
.bpkind.k-mains i{background:var(--c-revise, var(--accent))}
.tlkind:last-child:nth-child(odd){grid-column:1 / -1}
.tlpartshead{display:grid;grid-template-columns:1fr 64px 64px 36px;gap:6px;font-size:13px;color:var(--muted);margin:0 0 4px}
.tllab{display:block}
.bptests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bptests li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.bptests .mi{display:inline-flex;color:var(--muted)}
.bptests .mt{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
.bptests .mt b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bptests .mt span{font-size:13px;color:var(--muted)}
.bptests .sc{font-family:var(--display);font-size:15px;white-space:nowrap}
.bpsub{margin:14px 0 6px;font-size:14px;color:var(--muted)}
.bperr{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.bperr i{display:block;height:100%}
.bperr .concept,.bperrleg i.concept{background:var(--c-learn, var(--navy))}
.bperr .silly,.bperrleg i.silly{background:var(--c-revise, var(--accent))}
.bperr .elim,.bperrleg i.elim{background:var(--c-practise, var(--navy))}
.bperrleg{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;font-size:13px;color:var(--muted)}
.bperrleg>span{display:inline-flex;align-items:center;gap:5px}
.bperrleg i{width:10px;height:10px;border-radius:50%;display:inline-block}
.bperrleg b{color:var(--ink)}
.bprevnums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bprn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border-radius:12px;background:var(--surface-2)}
.bprn b{font-family:var(--display);font-size:22px}
.bprn span{font-size:13px;color:var(--muted);text-align:center}
.bprn.hot{background:var(--c-revise-soft, var(--surface-2))}
.bprn.hot b{color:var(--c-revise-ink, var(--ink))}
.bpgood{margin:12px 0 0;font-size:14px;color:var(--c-practise-ink, var(--ink))}
/* the Log a test sheet: kinds, toggles, a mock's subjects */
.tlkinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tlkind{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;min-height:76px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:12px;cursor:pointer;font:inherit}
.tlkind .mi{color:var(--muted);display:inline-flex;margin-bottom:2px}
.tlkind b{font-size:15px}
.tlkind span:last-child{font-size:13px;color:var(--muted)}
.tlkind[aria-checked="true"]{border-color:var(--c-practise, var(--navy));background:var(--c-practise-soft, var(--surface-2));box-shadow:0 0 0 1px var(--c-practise, var(--navy)) inset}
.tlkind[aria-checked="true"] .mi{color:var(--c-practise-ink, var(--ink))}
.tlpick{display:flex;flex-wrap:wrap;gap:8px}
.tlopt2{min-height:40px;padding:8px 14px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;cursor:pointer;font:inherit;font-size:14px}
.tlopt2[aria-pressed="true"]{background:var(--c-practise-soft, var(--surface-2));border-color:var(--c-practise, var(--navy));color:var(--c-practise-ink, var(--ink));font-weight:600}
.tlsecond{margin-top:12px}
.tlbrowse{margin-top:4px}
.tlbrowse>summary{cursor:pointer;font-size:14px;color:var(--ink);min-height:44px;display:flex;align-items:center}
.tlbsub{border-top:1px solid var(--line)}
.tlbsub>summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px;padding:10px 0;min-height:44px;align-items:center;font-size:14px}
.tlbn{font-size:13px;color:var(--c-practise-ink, var(--muted))}
.tlbitem{display:flex;align-items:center;gap:10px;padding:8px 0 8px 4px;font-size:14px;min-height:40px;cursor:pointer}
.tlbitem input{width:20px;height:20px;flex:0 0 auto}
.tlball{font-weight:600}
.tlcount{width:100%;margin:0;font-size:13px;color:var(--muted)}
.tlparthint{margin:0 0 8px}
.tlparts{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.tlpart{display:grid;grid-template-columns:1fr 64px 64px 36px;gap:6px;align-items:center}
.tlpart select,.tlpart input{min-height:42px;font-size:14px;min-width:0}
.tlscore.three{grid-template-columns:1fr 1fr 1fr}
.tlrow2{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.tlrow2 label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.tlrow2 input{min-height:44px;font-size:15px;min-width:0}
.tlnet{margin:0 0 10px;font-size:15px}
.tlnet b{font-family:var(--display);font-size:22px}
.logtestwrap{margin:0 0 14px}
.logtestwrap .logtest{margin:0}
.logall{display:block;margin:8px 4px 0;min-height:36px;font-size:14px}
#testsAllHost .card{margin:0 0 12px}
@media (max-width:420px){ .tlscore.three{grid-template-columns:1fr 1fr} .tlscore.three label:first-child{grid-column:1 / -1} .tlrow2{grid-template-columns:1fr} .bphrow{gap:14px} }

/* 30 Oct 2026: Prelims or Mains first; Mains rows of marks by subject have four fields */
.tlfmts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tlfmt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px;min-height:64px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:12px;cursor:pointer;font:inherit}
.tlfmt b{font-size:16px}
.tlfmt span{font-size:13px;color:var(--muted)}
.tlfmt[aria-checked="true"]{border-color:var(--c-practise, var(--navy));background:var(--c-practise-soft, var(--surface-2));box-shadow:0 0 0 1px var(--c-practise, var(--navy)) inset}
.tlpart.m,.tlpartshead.m{grid-template-columns:1fr 52px 58px 58px 32px}

/* 30 Oct 2026: the optional subject picker, at the end of the subjects */
.optpick{border-top:1px solid var(--line);margin-top:6px;padding:14px 0 4px}
.optpickhead{display:flex;align-items:center;gap:12px}
.optpickhead .mi{color:var(--muted);display:inline-flex}
.optpickhead .mt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.optpickhead .mt b{font-size:15px}
.optpickhead .mt span{font-size:13px;color:var(--muted)}
.optpickrow{display:flex;gap:8px;margin-top:10px}
.optpickrow select{flex:1 1 auto;min-width:0;min-height:44px;font-size:15px}
.usofficial{margin:-4px 0 10px;font-size:13px;color:var(--muted);line-height:1.45}

/* 30 Oct 2026 (team review): a score line per kind of test, in the kind's own colour */
.bpchart .ln.k-mock{stroke:var(--c-learn, var(--navy))}
.bpchart .ln.k-mains{stroke:var(--c-revise, var(--accent));stroke-dasharray:4 3}

/* 30 Oct 2026 (team review): what is checked on a past question, part by part */
.pqchecks{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.pqchecks summary{cursor:pointer;color:var(--muted);font-size:13px;min-height:32px;display:flex;align-items:center}
.pqchecks ul{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:4px}
.pqchecks li{padding-left:16px;position:relative;line-height:1.45}
.pqchecks li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--line)}
.pqchecks li.pc-checked::before{background:var(--c-practise, var(--accent))}
.pqchecks li.pc-partial::before{background:var(--c-revise, var(--accent))}
.pqchecks .hint{margin:2px 0 0;font-size:13px}

/* 30 Oct 2026: the Anthropology optional without its add-on: its name and one quiet line */
.optlocked{display:flex;flex-direction:column;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.optlocked b{font-size:16px}

/* ================= 30 Oct 2026: the timetable, the time today, and the ways out of the one step =================
   Calm, one main action per row (Start when the slot is now), the tick at the edge, the slot running now marked in amber,
   a done slot quietly teal. Text 13px and up. */
.chipbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:600 14px var(--body);cursor:pointer}
.chipbtn[aria-pressed="true"]{background:var(--c-learn,var(--navy));border-color:var(--c-learn,var(--navy));color:var(--on-primary,#fff)}
.chipbtn:focus-visible,.tttick:focus-visible,.ttkind:focus-visible,.ttday:focus-visible,.tttemp:focus-visible,.altrow:focus-visible,.hourchip:focus-visible,.ttedrow:focus-visible{outline:2px solid var(--c-learn,var(--navy));outline-offset:2px}
.chipsrow{display:flex;flex-wrap:wrap;gap:8px}
.ttcard .body{padding-top:16px}
.tthead{display:flex;align-items:center;gap:10px;min-width:0}
.tttitle{margin:0;font:600 18px/1.2 var(--display)}
.ttheadacts{display:flex;align-items:center;gap:12px}
.ttlead{margin:4px 0 14px;color:var(--ink-2);font-size:15px;line-height:1.5}
.ttlight{margin:2px 0 12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:14px}
.tttemps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tttemp{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;min-height:72px;transition:border-color .15s ease}
.tttemp:hover{border-color:var(--c-learn,var(--navy))}
.tttemp b{font:600 15px var(--body)}
.tttemp span{font-size:13px;color:var(--muted);line-height:1.4}
.tttemp.own{border-style:dashed}
.ttask{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:var(--surface-2)}
.ttask p{margin:0 0 10px;font-size:14px;line-height:1.5}
.ttlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ttrow{display:grid;grid-template-columns:72px 30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ttrow:last-child{border-bottom:0}
.tttime{display:flex;flex-direction:column;gap:1px;white-space:nowrap;font:500 13px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.tttime b{font-weight:600;color:var(--ink)}
.tttime span{color:var(--muted)}
.ttmark{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted)}
.tttx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tttx b{font:600 15px/1.3 var(--body);color:var(--ink);overflow-wrap:anywhere}
.ttsub{font-size:13px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.ttact{display:flex;align-items:center;gap:8px}
.tttick,.ttauto{width:36px;height:36px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--line-2,var(--line));display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.tttick[aria-pressed="true"],.ttauto{background:var(--c-practise,var(--good));border-color:var(--c-practise,var(--good));color:var(--on-primary,#fff)}
.ttauto{cursor:default}
.ttrow[data-state="now"]{background:linear-gradient(90deg,color-mix(in srgb,var(--c-revise,var(--accent)) 12%,transparent),transparent 70%);border-radius:12px;padding-left:8px;margin-left:-8px}
.ttrow[data-state="now"] .ttmark{background:var(--c-revise,var(--accent));color:#161A35}
.ttrow[data-state="next"] .ttmark{color:var(--c-learn,var(--navy))}
.ttrow.done .ttmark{background:color-mix(in srgb,var(--c-practise,var(--good)) 16%,transparent);color:var(--c-practise,var(--good))}
.ttrow.done .tttx b{color:var(--ink-2)}
.ttrow.done .ttsub{color:var(--c-practise,var(--good))}
.ttrow[data-state="past"]:not(.done) .tttx b{color:var(--ink-2)}
.ttrow.soft{opacity:.72}
.ttmore{margin:8px 0 0;padding:8px 0;background:none;border:0;color:var(--c-learn,var(--navy));font:600 14px var(--body);cursor:pointer;min-height:40px}
.ttfoot{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ttany{margin-top:14px}
.ttanyhead{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ttlist2{display:flex;flex-direction:column}
.ttedrow{display:grid;grid-template-columns:72px minmax(0,1fr) 20px;align-items:center;gap:12px;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink);cursor:pointer;min-height:56px}
.ttedrow .ar{color:var(--muted)}
.ttform{margin:14px 0 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.ttfh{margin:0 0 6px;font:600 17px var(--display)}
.ttlab{margin:14px 0 8px;font:600 13px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ttkinds{display:flex;flex-wrap:wrap;gap:8px}
.ttkind{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:600 14px var(--body);cursor:pointer}
.ttkind[aria-pressed="true"]{border-color:var(--c-learn,var(--navy));background:color-mix(in srgb,var(--c-learn,var(--navy)) 10%,var(--surface));color:var(--ink)}
.ttsel{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ttsel select,.ttform #ttName{width:100%;min-height:44px;font-size:15px;min-width:0}
.tttimes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tttimes label,.ttweek{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2)}
.tttimes input,.ttweek input{min-height:44px;font-size:16px}
.ttrep{display:flex;flex-wrap:wrap;gap:8px}
.ttdays{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ttday{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:600 14px var(--body);cursor:pointer}
.ttday[aria-pressed="true"]{background:var(--c-learn,var(--navy));border-color:var(--c-learn,var(--navy));color:var(--on-primary,#fff)}
.ttweek{margin-top:10px}
.ttweek .hint{font-size:13px}
.tterr{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:14px;border-left:3px solid var(--c-revise,var(--accent))}
.ttacts{margin-top:16px}
.ttrm{margin-top:12px;color:var(--ink-2)}
@media (max-width:420px){.ttsel,.tttimes{grid-template-columns:1fr}.ttrow{grid-template-columns:68px 26px minmax(0,1fr) auto;gap:8px}}
.wklist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.wkrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px}
.wkday{font:600 14px var(--body)}
.wkrow.today .wkday{color:var(--c-revise,var(--accent))}
.wkbar{position:relative;height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.wkbar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.wkbar i.pl{border:1.5px solid var(--c-learn,var(--navy));background:transparent;box-sizing:border-box}
.wkbar i.st{background:var(--c-practise,var(--good))}
.wkrow.future .wkbar i.pl{opacity:.6}
.wknum{font:500 13px var(--mono);color:var(--ink-2);white-space:nowrap}
.wkleg{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 6px;font-size:13px;color:var(--muted)}
.wkleg i{display:inline-block;width:14px;height:10px;border-radius:999px;vertical-align:middle}
.wkleg i.pl{border:1.5px solid var(--c-learn,var(--navy))}
.wkleg i.st{background:var(--c-practise,var(--good))}
.wksum{margin:6px 0 0;font-size:15px;color:var(--ink)}
.nextkickrow{gap:10px;flex-wrap:wrap}
.hourchip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font:600 13px var(--body);cursor:pointer;margin-left:auto}
.hourchip .lightdot{padding:1px 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-weight:500}
.hourpick{margin:6px 0 12px;padding:12px;border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.hourpick .hint{margin:0}
.nextmore{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.altlist,.didrow{flex:1 0 100%;display:flex;flex-direction:column;gap:8px;margin-top:4px}
.didrow .hint{margin:0}
.altrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;min-height:56px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer}
.altrow .mt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.altrow .mt b{font-size:15px}
.altrow .mt span{font-size:13px;color:var(--muted)}
.altrow .ar{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.tttemp{transition:none}}

/* 30 Oct 2026: the fee strip, in Account for a UPSC student */
#acctWrap .feecard{margin:4px 0 14px}

/* 30 Oct 2026: each topic shows its past questions */
.umarks .pyqmark{font:600 13px var(--body);color:var(--c-practise,var(--good));font-style:normal;white-space:nowrap}

/* 30 Oct 2026: a model answer in its parts: the answer open, the approach and the common mistakes folded beneath */
.mspart{margin:0 0 12px}
.msparth{margin:0 0 8px;font:600 16px var(--display)}
.msfold{border:1px solid var(--line);border-radius:12px;padding:0 14px;background:var(--surface)}
.msfold summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font:600 15px var(--body);color:var(--ink)}
.msfold[open]{padding-bottom:12px}

/* 30 Oct 2026: a paper logged with its final marks only */
.tlfinal{margin:8px 0 0}
.tlfinrow{display:flex;flex-direction:column;gap:6px;margin:10px 0 0;font-size:14px;color:var(--ink-2)}
.tlfinrow input{max-width:200px;min-height:44px;font-size:16px}

/* ================= 30 Oct 2026: the Study Hall as a calm library =================
   A wall with three windows and a shelf of books, a long table, a lamp at every seat; a lamp glows warm only for someone studying now.
   Soft motion on the glow, still under reduced motion. Colours from the theme. */
.hallscenebox{margin:-4px -4px 12px;border-radius:16px;overflow:hidden}
.hallscene{display:block;width:100%;height:auto}
.hs-wall{fill:color-mix(in srgb,var(--c-learn,var(--navy)) 7%,var(--surface))}
.hs-win{fill:color-mix(in srgb,var(--c-practise,var(--good)) 12%,var(--surface));stroke:color-mix(in srgb,var(--c-learn,var(--navy)) 18%,transparent);stroke-width:1.5}
.hs-mullion{stroke:color-mix(in srgb,var(--c-learn,var(--navy)) 18%,transparent);stroke-width:1.5}
.hs-shelf{fill:color-mix(in srgb,var(--c-learn,var(--navy)) 22%,var(--surface))}
.hs-book{fill:color-mix(in srgb,var(--c-learn,var(--navy)) 26%,var(--surface))}
.hs-book.b1{fill:color-mix(in srgb,var(--c-practise,var(--good)) 30%,var(--surface))}
.hs-book.b2{fill:color-mix(in srgb,var(--c-revise,var(--accent)) 28%,var(--surface))}
.hs-book.b3{fill:color-mix(in srgb,var(--c-learn,var(--navy)) 40%,var(--surface))}
.hs-table{fill:color-mix(in srgb,var(--c-revise,var(--accent)) 30%,var(--surface-2))}
.hs-legs{fill:color-mix(in srgb,var(--c-revise,var(--accent)) 24%,var(--surface-2))}
.hs-lampstem{stroke:color-mix(in srgb,var(--ink) 35%,transparent);stroke-width:1.5}
.hs-lamp{fill:color-mix(in srgb,var(--ink) 25%,var(--surface))}
.hs-lamp.on{fill:var(--c-revise,var(--accent))}
.hs-glow{fill:var(--c-revise,var(--accent));opacity:.18;animation:hsglow 4s ease-in-out infinite}
@keyframes hsglow{0%,100%{opacity:.14}50%{opacity:.24}}
.hs-p.on{fill:var(--c-learn,var(--navy))}
.hs-p.brk{fill:color-mix(in srgb,var(--c-learn,var(--navy)) 45%,var(--surface))}
.hs-p.idle{fill:color-mix(in srgb,var(--c-learn,var(--navy)) 28%,var(--surface))}
.hs-p.me{stroke:var(--c-revise,var(--accent));stroke-width:2}
.hs-chair{fill:none;stroke:color-mix(in srgb,var(--ink) 18%,transparent);stroke-width:2;stroke-linecap:round}
.hs-you{font:600 13px var(--body);fill:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.hs-glow{animation:none}}
.hallintent{display:flex;flex-direction:column;gap:6px;margin:12px 0 0}
.hallintent .hint{margin:0}
.hallintent input{min-height:44px;font-size:15px;width:100%}
.halltools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:12px 0 0}
.hallsound{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.hallsound select{min-height:40px;font-size:14px}
.sharedcard{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sharedcard .mt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.sharedcard .mt b{font-size:15px}
.sharedcard .mt span{font-size:13px;color:var(--muted);line-height:1.4}
.hallview{display:flex;gap:8px;margin:0 0 10px}
.seat.tappable,.person.tappable{cursor:pointer}
.seat.tappable:focus-visible,.person.tappable:focus-visible{outline:2px solid var(--c-learn,var(--navy));outline-offset:2px;border-radius:14px}
#roomPeople.listview{display:flex;flex-direction:column;gap:4px}
.hallrest{flex:1 0 100%;margin-top:8px}
.hallrest summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 14px var(--body);color:var(--c-learn,var(--navy))}
.hallrestgrid{display:flex;flex-wrap:wrap;gap:10px}
.hallrestgrid.listview{flex-direction:column;gap:4px}
.seatacts{flex:1 0 100%;margin:8px 0 0;padding:12px 14px;border-radius:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:8px}
.seatacts .hint{margin:0}
.scoutcome{margin:12px 0 0}
.scoutcome p{margin:0 0 8px;font-size:15px}
.scoutcome .hint{margin:8px 0 0;font-size:14px}
/* the focus view */
.focusview{position:fixed;inset:0;z-index:90;background:var(--bg,var(--surface));display:flex;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.focusview.hidden{display:none}
.fvin{width:100%;max-width:520px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.fvphase{margin:0;font:600 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--c-revise,var(--accent))}
.fvclock{margin:0;font:500 clamp(64px,18vw,112px)/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.fvtopic{margin:6px 0 0;font:600 20px/1.3 var(--display);color:var(--ink)}
.fvintent{margin:0;font-size:16px;color:var(--ink-2)}
.fvhall{margin:10px 0 0;font-size:14px;color:var(--muted)}
.fvacts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;justify-content:center}
body.focusing{overflow:hidden}

.seatacts,.hallrest{grid-column:1/-1}
.sharedcard .btn{white-space:nowrap;flex:0 0 auto}

/* 30 Oct 2026: Big Picture tiles open their activity; writing kept in its parts */
button.bptile{font:inherit;color:inherit;text-align:left;cursor:pointer;border:0;width:100%}
button.bptile:focus-visible{outline:2px solid var(--c-learn,var(--navy));outline-offset:2px}
.bpwlist{display:flex;flex-direction:column;gap:10px}
.bpwrow{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:baseline}
.bpwrow>b{font:600 24px var(--mono);color:var(--ink);text-align:right}
.bpwrow .mt{display:flex;flex-direction:column;gap:2px}
.bpwrow .mt span{font-size:15px;color:var(--ink)}
.bpwrow .mt em{font-style:normal;font-size:13px;color:var(--muted)}

/* 30 Oct 2026 (team review, stage 5: "full-screen long answers"): on a phone, the Mains and Prelims question sheets open to the full
   height, so a long model answer or a timed answer reads like a page, not a drawer */
@media (max-width:760px){
  #mainsSheet>.sheet,#pyqSheet>.sheet{max-height:none;height:100vh;border-radius:0;padding-top:calc(58px + env(safe-area-inset-top,0px))}
  #mainsSheet>.sheet>.sheetx,#pyqSheet>.sheet>.sheetx,#mainsSheet>.sheet>.sheetmore,#pyqSheet>.sheet>.sheetmore,#mainsSheet>.sheet>.infob.corner,#pyqSheet>.sheet>.infob.corner{margin-top:env(safe-area-inset-top,0px)}
  @supports (height:100dvh){#mainsSheet>.sheet,#pyqSheet>.sheet{height:100dvh}}
}

/* 30 Oct 2026: the hall's one line of intention looks like every other field */
.hallintent input{font:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:none;appearance:none}
.hallintent input:focus{outline:none;border-color:var(--c-learn,var(--navy));box-shadow:0 0 0 3px color-mix(in srgb,var(--c-learn,var(--navy)) 18%,transparent)}
.hallsound select{font:inherit;font-size:15px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}

/* =====================================================================================================================
   30 Oct 2026: Aroh design refinement. One layer, last in the file, so it reads as the system rather than one more patch.
   Direction: a calm study desk. Navy carries action and structure, amber marks the moment (now, next, your streak), teal
   marks practice and success. Type and space make the hierarchy; borders are quiet but visible; shadows are rare.
   Tokens: radius 8 / 12 / 16 / 20; space 4 8 12 16 20 24 32; motion 140ms / 220ms on one easing; focus = amber ring.
   ===================================================================================================================== */
body{margin:0}   /* no browser margin: the header now reaches the edges and sticks flush to the top */
:root[data-theme^="aroh-"]{
  --r-1:8px;--r-2:12px;--r-3:16px;--r-4:20px;
  --ease:cubic-bezier(.2,.7,.2,1);--t1:.14s;--t2:.22s;
  --ring-focus:0 0 0 3px color-mix(in srgb,var(--gold-bright) 60%,transparent);
  --line-strong:color-mix(in srgb,var(--ink) 16%,var(--surface));
  --link:var(--navy-2);
  --quiet:color-mix(in srgb,var(--ink) 4%,var(--surface));
}
:root[data-theme="aroh-dark"]{--link:#B3B9F2;--line-strong:color-mix(in srgb,var(--ink) 20%,var(--surface))}
:root[data-theme="aroh-light"]{--line:#E1E5EE;--muted:#646C8A}

/* ---------- the page ---------- */
body.upsc{background:var(--bg)}
body.upsc .topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);box-shadow:none}
body.upsc .topbar::after,body.upsc .topbar::before{display:none}
body.upsc .topbar-in{padding-block:8px}
body.upsc .wrap{padding-inline:16px}
@media (min-width:761px){body.upsc .wrap{padding-inline:24px}}

/* ---------- surfaces ---------- */
body.upsc .card{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);box-shadow:none}
body.upsc .card .card{border:0;border-radius:0;background:transparent;margin-top:0}
body.upsc .card>header{border-bottom:0}
body.upsc .sheet{border-radius:var(--r-4) var(--r-4) 0 0}
@media (min-width:761px){body.upsc .sheet{border-radius:var(--r-4)}}

/* ---------- type ---------- */
body.upsc h1,body.upsc h2,body.upsc h3{letter-spacing:-.012em}
body.upsc .card>header h2{font:700 18px/1.3 var(--display)}
body.upsc .eyebrow{font:700 13px/1.4 var(--display);letter-spacing:.09em;color:var(--muted)}
body.upsc .hint,body.upsc .empty{color:var(--ink-2)}
body.upsc .pill{border-color:var(--line);background:var(--quiet);color:var(--ink-2)}

/* ---------- actions: one primary, a clear secondary, links that look like links ---------- */
body.upsc .btn{border-radius:var(--r-2);min-height:44px;font-weight:600;letter-spacing:0;transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease),color var(--t1) var(--ease),transform var(--t1) var(--ease)}
body.upsc .btn.sm{min-height:40px;border-radius:var(--r-1)}
body.upsc .btn.pri{background:var(--navy);border-color:var(--navy);color:var(--on-primary,#fff)}
body.upsc .btn.pri:hover{background:color-mix(in srgb,var(--navy) 88%,#000)}
:root[data-theme="aroh-dark"] body.upsc .btn.pri{background:#4A54B0;border-color:#4A54B0}
:root[data-theme="aroh-dark"] body.upsc .btn.pri:hover{background:#5560C2}
body.upsc .btn.ghost,body.upsc .btn.sec{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
body.upsc .btn.ghost:hover,body.upsc .btn.sec:hover{background:var(--quiet);border-color:color-mix(in srgb,var(--ink) 26%,var(--surface))}
body.upsc .btn:active:not(:disabled){transform:scale(.98)}
body.upsc .btn:disabled,body.upsc .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
body.upsc .linkbtn{color:var(--link);font-weight:600;border-radius:var(--r-1);text-underline-offset:3px}
body.upsc .linkbtn:hover{text-decoration:underline;background:transparent}
body.upsc .chipbtn{border-radius:999px;border-color:var(--line-strong);background:var(--surface);color:var(--ink);transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease),color var(--t1) var(--ease)}
body.upsc .chipbtn:hover{background:var(--quiet)}
body.upsc .chipbtn[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-primary,#fff)}
:root[data-theme="aroh-dark"] body.upsc .chipbtn[aria-pressed="true"]{background:#4A54B0;border-color:#4A54B0}

/* the (i): help when wanted, never louder than the heading it explains */
body.upsc .infob{width:32px;height:32px;border:1px solid var(--line-strong);background:transparent;color:var(--muted);font:700 14px/1 var(--display);transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease),background-color var(--t1) var(--ease)}
body.upsc .infob[data-feat]{color:var(--muted)}
body.upsc .infob:hover,body.upsc .infob[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-2);background:var(--quiet)}
body.upsc .infob::after{content:"";position:absolute;inset:-6px}   /* a 44px touch area around a quiet 32px mark */

/* ---------- focus: one visible ring, everywhere, keyboard only ---------- */
body.upsc :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--r-1)}
body.upsc .btn:focus-visible{border-radius:var(--r-2)}
body.upsc .chipbtn:focus-visible,body.upsc .infob:focus-visible{border-radius:999px}

/* ---------- fields ---------- */
body.upsc input:not([type=checkbox]):not([type=radio]):not([type=range]),body.upsc select,body.upsc textarea{border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--surface);color:var(--ink);transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
body.upsc input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,body.upsc select:focus,body.upsc textarea:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--navy-2) 18%,transparent);outline:none}
body.upsc input::placeholder,body.upsc textarea::placeholder{color:color-mix(in srgb,var(--muted) 85%,transparent)}

/* ---------- feedback: saving, signed out, toast above the tab bar ---------- */
html.is-saving body.upsc::before{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:aroh-saving 1.1s linear infinite}
@keyframes aroh-saving{from{background-position:-40% 0}to{background-position:140% 0}}
.signedout{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:200;display:flex;align-items:center;gap:12px;width:min(92vw,480px);box-sizing:border-box;padding:12px 14px;border-radius:14px;background:var(--navy-deep,#161A35);color:#fff;font-size:15px;line-height:1.4;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.signedout span{flex:1 1 auto}
.signedout .btn{flex:none;background:#fff;color:var(--navy,#262D63);border-color:#fff;text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:760px){body.upsc .toast,body.upsc .undofloat{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
body.upsc .toast{border-radius:14px;font-size:15px;line-height:1.4;padding:12px 16px;max-width:min(92vw,460px)}

/* ---------- motion: short, purposeful, and still under reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.is-saving body.upsc::before{animation:none;background:var(--gold-bright);opacity:.6}
  body.upsc *{scroll-behavior:auto!important}
  body.upsc .btn:active:not(:disabled){transform:none}
}

/* ---------- Today: the greeting is a light header on the page, not another box; the next step is the first card ---------- */
body.upsc #hero{background:transparent;border:0;box-shadow:none;padding:6px 2px 0;margin:0;gap:12px;align-items:center}
body.upsc #hero .heroface{width:46px;height:46px;border-width:1.5px;margin:0}
body.upsc #hero .heroface .face,body.upsc #hero .heroface .face svg,body.upsc #hero .heroface .face img{width:42px;height:42px}
body.upsc #hero .herotext h1{font:700 19px/1.25 var(--display);margin:0}
body.upsc #hero #examLine,body.upsc #hero.compact #examLine{display:block;font:500 15px/1.4 var(--body);color:var(--ink-2);margin:2px 0 0}
body.upsc #hero #examLine .exdays{display:inline;font:500 15px/1.4 var(--body);color:var(--ink-2)}
body.upsc #hero #examLine .exdate{display:inline;font:400 15px/1.4 var(--body);color:var(--muted)}
body.upsc #hero #examLine .exdate:not(:empty)::before{content:" · "}
body.upsc #heroChips{margin:4px 0 0;gap:8px}
body.upsc #hero .herochip{min-height:36px;padding:4px 12px;font:600 14px var(--body)}
body.upsc .promiseline{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin:12px 0 0;padding:10px 14px;border-radius:var(--r-2);background:var(--navy-soft);font-size:15px;line-height:1.4}
body.upsc .promiseline.hidden{display:none}
body.upsc .promiseline .linkbtn{min-height:36px;padding:0}
body.upsc .nextcard{margin-top:16px}
body.upsc .nextcard .body{padding:22px 20px 18px}
body.upsc .nextkicker{font:700 13px/1.4 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--c-revise-ink)}
body.upsc .nextname{font:700 24px/1.22 var(--display);letter-spacing:-.015em;margin:10px 0 0;text-wrap:balance}
body.upsc .nextmeta{margin:10px 0 0;font-size:15px;color:var(--ink-2)}
body.upsc .nextmeta b{color:var(--ink);font-weight:600}
body.upsc .nextwhy{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
body.upsc .nextacts{gap:10px;margin-top:20px}
body.upsc .nextacts .btn.pri{min-height:52px;font-size:17px;border-radius:var(--r-2)}
body.upsc .nextacts .btn.ghost{min-height:48px;font-size:16px;width:100%}
body.upsc .nextmore{justify-content:center;gap:4px 20px;margin-top:8px}
body.upsc .nextmore .linkbtn{font-size:15px}
@media (min-width:761px){
  body.upsc .nextacts{flex-direction:row;align-items:center}
  body.upsc .nextacts .btn.pri{width:auto;min-width:240px;padding-inline:28px}
  body.upsc .nextacts .btn.ghost{width:auto;padding-inline:22px}
  body.upsc .nextmore{justify-content:flex-start}
}

/* ---------- one place for feedback: messages rise from the bottom, above the tab bar, and never cover the header ---------- */
body.upsc .joybar{top:auto;bottom:calc(24px + env(safe-area-inset-bottom,0px));border-left:1px solid var(--line);padding:11px 16px;font:500 15px/1.4 var(--body);box-shadow:0 10px 28px -16px rgba(8,10,24,.45)}
body.upsc .joybar .joyemo{font-size:20px}
body.upsc .joybar.in{animation:aroh-rise var(--t2) var(--ease) both}
body.upsc .joybar.out{opacity:0;transform:translate(-50%,6px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
@keyframes aroh-rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:760px){body.upsc .joybar{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){body.upsc .joybar.in{animation:none}}

/* ---------- practice: room to read, answers said in words, the next step unmistakable ---------- */
body.upsc .pqface{min-height:0;padding:18px 18px 16px;border:0;border-radius:var(--r-3);background:var(--quiet);margin:12px 0 16px}
body.upsc .pqq{font:500 17px/1.6 var(--body);letter-spacing:0;color:var(--ink);max-width:68ch}
body.upsc .msmeta{font-size:14px;color:var(--ink-2);margin-top:10px}
body.upsc .pqopts{gap:10px}
body.upsc .pqopt{align-items:center;min-height:54px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r-2);background:var(--surface);font-size:16px;line-height:1.45;flex-wrap:wrap;transition:border-color var(--t1) var(--ease),background-color var(--t1) var(--ease)}
body.upsc .pqopt:hover:not(:disabled){border-color:var(--navy-2);background:color-mix(in srgb,var(--navy-2) 5%,var(--surface))}
body.upsc .pqopt .pql{min-width:28px;color:var(--ink-2)}
body.upsc .pqopt .pqt{flex:1 1 0;min-width:0}
body.upsc .pqopt.right{border:2px solid var(--good);background:var(--good-soft);box-shadow:none;padding:11px 15px}
body.upsc .pqopt.right .pql{color:var(--good)}
body.upsc .pqopt.wrong{opacity:1;border-style:dashed;border-color:var(--ink-2);background:var(--surface)}
body.upsc .pqopt.wrong .pqt{text-decoration:none;color:var(--ink-2)}
body.upsc .pqopt:disabled:not(.right):not(.wrong){opacity:.62}
body.upsc .pqtag{flex:0 0 100%;margin:4px 0 0 38px;font:600 13px/1.3 var(--body);letter-spacing:.01em;color:var(--ink-2)}
body.upsc .pqopt.right .pqtag{color:var(--good)}
body.upsc .pqopt.right .pqtag::before{content:"✓ "}
body.upsc .pqsol{margin-top:18px;padding-top:16px}
body.upsc .pqverdict{font:700 18px/1.35 var(--display);margin:0 0 8px}
body.upsc .pqtext{font-size:16px;line-height:1.65;color:var(--ink);max-width:68ch}
body.upsc .msans{line-height:1.65;max-width:68ch}
body.upsc .msans p{margin:0 0 12px}
body.upsc .msans h4{font:700 13px/1.4 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
body.upsc .pqactions .btn.pri{min-width:180px}

/* ---------- Syllabus: the topic's name gets the whole row; what you know about it sits on one quiet line beneath ---------- */
body.upsc .unitrow{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;align-items:start;padding:14px 6px;min-height:56px;border-bottom-color:var(--line)}
body.upsc .unitrow:hover{background:var(--quiet)}
body.upsc .unitrow .un{font:500 16px/1.4 var(--body);color:var(--ink);text-wrap:pretty}
body.upsc .unitrow .umarks{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;order:3;font-size:13.5px}
body.upsc .unitrow .stchip{order:2;justify-self:start;display:inline-flex;align-items:center;gap:5px;padding:2px 10px;font-size:13px;min-height:24px}
body.upsc .unitrow:has(.umarks:empty) .umarks{display:none}
body.upsc .unitrow .revmark{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--body);font-style:normal;color:var(--c-revise-ink)}
body.upsc .unitrow .stchip:empty,body.upsc .unitrow .stchip.st-not,body.upsc .unitrow .stchip.st-none{display:none}
@supports selector(:has(a)){
  body.upsc .unitrow{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  body.upsc .unitrow .un{grid-column:1/-1}
  body.upsc .unitrow .stchip{grid-column:1;grid-row:2}
  body.upsc .unitrow .umarks{grid-column:2;grid-row:2}
  body.upsc .unitrow:not(:has(.stchip)) .umarks,body.upsc .unitrow:has(.stchip.st-not) .umarks{grid-column:1/-1}
}
body.upsc .subjfold summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:10px}
body.upsc .subjfold summary .sfhead{min-width:0}
body.upsc .subjfold summary .sfhead b{font:600 17px/1.35 var(--body)}
body.upsc .subjfold summary .sfhead i{font-style:normal;font-size:14px;color:var(--ink-2)}
body.upsc .subjfold summary .thinbar{grid-column:1/-1;grid-row:2;flex:none;width:100%;height:5px}
body.upsc .subjfold summary .sfchev{grid-column:2;grid-row:1}
/* the search bar keeps one border; while it sticks, nothing shows through above it */
body.upsc .sylsearch{border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 -14px 0 0 var(--surface)}
body.upsc .sylsearch:focus-within{border-color:var(--navy-2);box-shadow:0 -14px 0 0 var(--surface),0 0 0 3px color-mix(in srgb,var(--navy-2) 18%,transparent)}
body.upsc .sylsearch input,body.upsc .sylsearch input:focus{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0;min-height:36px;font-size:16px}
body.upsc .unitrow .stchip{padding:0;border:0;background:none!important;color:var(--ink-2);min-height:0;font:600 13.5px var(--body)}
body.upsc .unitrow .stchip.st-covered{color:var(--navy-2)}
body.upsc .unitrow .stchip.st-studying{color:var(--ink)}

/* ---------- Big Picture: read in seconds. The lead line interprets; the ring shows coverage; every total says what it counts ---------- */
body.upsc .bplead{font:600 19px/1.35 var(--display);letter-spacing:-.01em;margin:0 40px 16px 0}
body.upsc .bpring circle{stroke-linecap:butt;stroke-width:12}
body.upsc .bpring .r-tr{stroke:var(--quiet)}
body.upsc .bpringmid b{font:700 28px/1 var(--display)}
body.upsc .bpleg{gap:10px;font-size:15px;color:var(--ink-2)}
body.upsc .bpleg b{color:var(--ink);font-weight:700;margin-right:2px}
body.upsc .bpstep{border:1px solid var(--line);border-left-width:1px;border-radius:var(--r-2);padding:14px;gap:14px;transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
body.upsc .bpstep:hover{background:var(--quiet);border-color:var(--line-strong)}
body.upsc .bpstep .mi{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--feat-soft,var(--quiet))}
body.upsc .bpstep .mt b{font:600 16px/1.35 var(--body)}
body.upsc .bpstep .mt span{font-size:14px;line-height:1.4;color:var(--ink-2)}
body.upsc .bptiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
body.upsc .bptile{position:relative;padding:14px 14px 12px;border:1px solid transparent;border-radius:var(--r-2);gap:4px;transition:border-color var(--t1) var(--ease),transform var(--t1) var(--ease)}
body.upsc .bptile:hover{border-color:var(--line-strong)}
body.upsc .bptile b{font:700 26px/1.1 var(--display)}
body.upsc .bptile span:last-child{font-size:14px;line-height:1.35;color:var(--ink-2)}
body.upsc .bptile::after{content:"";position:absolute;top:16px;right:14px;width:7px;height:7px;border-right:1.5px solid var(--muted);border-top:1.5px solid var(--muted);transform:rotate(45deg)}
body.upsc h2.bph{font:700 18px/1.3 var(--display);margin:0 0 14px}

/* ---------- Study Hall: a quiet room; an empty hall is one calm line, not a grey slab ---------- */
body.upsc #roomPeople:has(> .hallfirst:only-child){background:none;border:0;padding:0;min-height:0}
body.upsc #tab-hall .hallfirst{padding:4px 0;text-align:left;color:var(--ink-2)}
body.upsc .sharedcard{border-color:var(--line);border-radius:var(--r-2);background:var(--quiet);gap:14px}
body.upsc .sharedcard .btn{min-width:0;white-space:nowrap}
body.upsc .hallintent span{font-size:15px;color:var(--ink-2)}

/* ---------- Timetable: the slot happening now is a calm band; an open tick is a visible circle in both themes ---------- */
body.upsc .ttrow[data-state="now"]{background:color-mix(in srgb,var(--c-revise,var(--accent)) 10%,var(--surface));border-radius:var(--r-2);padding-inline:8px;margin-inline:-8px;border-bottom-color:transparent}
body.upsc .tttick{border:1.5px solid var(--line-strong);color:transparent;transition:background-color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
body.upsc .tttick:hover{border-color:var(--c-practise,var(--good));color:var(--c-practise,var(--good))}
body.upsc .tttick[aria-pressed="true"]{color:var(--on-primary,#fff)}
body.upsc .ttrow .btn.sm{min-height:36px;padding:6px 14px}

/* ---------- topic sheet: groups are the only boxes; what sits inside a group is a simple list ---------- */
body.upsc .usgroup{border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
body.upsc .usgroup .memrow{border:0;border-radius:0;background:transparent;border-top:1px solid var(--line);padding:14px 4px;margin:0;min-height:60px}
body.upsc .usgroup .memrow:first-of-type{border-top:0}
body.upsc .usgroup .memrow:hover{background:var(--quiet)}
body.upsc .usgroup .memrow .mt b{font:600 16px/1.35 var(--body)}
body.upsc .usgroup .memrow .mt span{font-size:14px;color:var(--ink-2)}
body.upsc .usgroup[open]>summary{border-bottom:1px solid var(--line)}
/* the week: day names are labels, not buttons; an empty day has no sliver */
body.upsc .wkrow .wkday{display:block;padding:0;border:0;background:none;min-width:40px;font:600 15px var(--body);color:var(--ink)}
body.upsc .wkrow .wkday:hover{border:0}
body.upsc .wkrow.today .wkday{color:var(--c-revise-ink)}
body.upsc .wkbar{background:var(--quiet)}
body.upsc .wkbar i[style*="width: 0%"],body.upsc .wkbar i[style*="width:0%"]{display:none}
/* Account: each door names its rooms underneath, so nothing needs guessing */
body.upsc .acctgroup{border-radius:var(--r-2);padding:0 4px}
body.upsc .acctgroup>summary{display:grid;grid-template-columns:22px minmax(0,1fr) 12px;column-gap:12px;align-items:center;padding:12px 12px;min-height:60px}
body.upsc .acctgroup>summary svg{grid-row:1/3}
body.upsc .acctgroup>summary span{display:block;grid-column:2;grid-row:2;margin:2px 0 0;font:400 14px/1.35 var(--body);color:var(--ink-2)}
body.upsc .acctgroup>summary::after{grid-column:3;grid-row:1/3}

/* ---------- one card language: a hairline border, no floating shadows ---------- */
body.upsc{--q-shadow:none}
body.upsc .card,body.upsc .alsorow,body.upsc .revcard,body.upsc .welcomeline,body.upsc .sesscard{border:1px solid var(--line);box-shadow:none}
body.upsc .alsorow,body.upsc .revcard{border-radius:var(--r-3)}
@media (min-width:761px){
  body.upsc #hero .herodate,body.upsc #hero .standline{font-size:14px;line-height:1.45;color:var(--ink-2)}
  body.upsc .wrap{max-width:880px}
}
body.upsc .topbar-in{max-width:880px}

/* ---------- sign in and sign up: readable links, one amber action, quiet secondary buttons ---------- */
body.authpage .authlogo,body.authpage .authcard .logo img,body.authpage .authcard img.authlogo{width:96px;margin-bottom:6px}
body.authpage .authfoot a,body.authpage .legalline a,body.authpage .authcard form a{color:var(--navy-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
:root[data-theme$="-dark"] body.authpage .authfoot a,:root[data-theme$="-dark"] body.authpage .legalline a,:root[data-theme$="-dark"] body.authpage .authcard form a{color:#C3C8F5}
body.authpage .btn.pri{background:var(--gold-bright);border-color:var(--gold-bright);color:#231706;background-image:none;box-shadow:none;border-radius:12px;min-height:50px;font-weight:700}
body.authpage .btn.pri:hover{background:color-mix(in srgb,var(--gold-bright) 88%,#000)}
body.authpage .authalt .btn:not(.pri){justify-content:center;text-align:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 16%,var(--surface));color:var(--ink);border-radius:12px;font-weight:600;text-decoration:none}
body.authpage .authalt .btn:not(.pri):hover{background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
body.authpage .authalt p{font-size:15px;color:var(--ink-2)}
body.authpage .ifield .ic{color:var(--ink-2);display:grid;place-items:center;width:18px;height:18px;left:14px;font-size:15px;opacity:.7}
body.authpage .ifield .ic svg{width:16px;height:16px;display:block}
body.authpage .ifield input{padding-left:42px}
body.authpage :is(a,button,input):focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bright) 60%,transparent)}
body.authpage .ifield .ic .ic{position:static;transform:none;opacity:1;left:auto;width:16px;height:16px}

/* =====================================================================================================================
   30 Oct 2026: the Study Hall, redesigned ("your desk in a shared library"). One card: a reading room with a long table at
   the back (the people here now, at stable seats), your desk in front (the session console), then the hall's other features,
   then "Together today". Labels are interface text, never drawn into the picture. Colours are tokens; dark has its own.
   ===================================================================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root[data-theme^="aroh-"]{
  --hx-wall:color-mix(in srgb,var(--gold-soft) 34%,var(--surface));
  --hx-wall-2:color-mix(in srgb,var(--gold-soft) 18%,var(--surface));
  --hx-wood:#E7CFAE;--hx-wood-2:#D9B98E;--hx-wood-edge:#C9A273;
  --hx-chair:color-mix(in srgb,var(--navy) 14%,var(--surface));
  --hx-shade:color-mix(in srgb,var(--navy) 55%,var(--surface));
  --hx-glow:rgba(233,150,43,.42);--hx-lit:#F2B45E;
  --hx-book-1:#C8CCE6;--hx-book-2:#B9DAD9;--hx-book-3:#F0D2A6;--hx-book-4:#D9D2E8;
}
:root[data-theme="aroh-dark"]{
  --hx-wall:#1C2043;--hx-wall-2:#181C3A;
  --hx-wood:#4A3D44;--hx-wood-2:#3D3239;--hx-wood-edge:#2E262D;
  --hx-chair:#2C3260;--hx-shade:#7A82C9;
  --hx-glow:rgba(242,169,62,.34);--hx-lit:#F2A93E;
  --hx-book-1:#3A4072;--hx-book-2:#2F5156;--hx-book-3:#5A4630;--hx-book-4:#3F3961;
}

/* the card */
body.upsc .hallx{padding:16px;display:block}
.hxhead{display:flex;align-items:center;gap:10px;margin:0 0 2px}
.hxtitle{font:700 20px/1.25 var(--display);margin:0;flex:1;letter-spacing:-.012em}
.hxocc{margin:0 0 12px;color:var(--ink-2);font:500 14px/1.45 var(--body)}

/* the room */
.hxroom{position:relative;border-radius:var(--r-3);background:linear-gradient(180deg,var(--hx-wall) 0%,var(--hx-wall-2) 100%);padding:34px 10px 6px;overflow:hidden;isolation:isolate}
.hxshelf{position:absolute;left:14px;right:14px;top:10px;height:16px;border-bottom:3px solid color-mix(in srgb,var(--hx-wood-2) 70%,transparent);
  background:repeating-linear-gradient(90deg,var(--hx-book-1) 0 5px,transparent 5px 7px,var(--hx-book-2) 7px 11px,transparent 11px 13px,var(--hx-book-3) 13px 19px,transparent 19px 21px,var(--hx-book-4) 21px 25px,transparent 25px 28px);
  -webkit-mask:linear-gradient(180deg,transparent 0 22%,#000 22%);mask:linear-gradient(180deg,transparent 0 22%,#000 22%);opacity:.75;z-index:-1}
.hxback{position:relative}
.hxseats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:6px;position:relative}
/* the long table: each seat draws its own length, edge to edge, so a row of seats reads as one table */
.hxseat::after{content:"";position:absolute;left:0;right:0;top:50px;height:14px;background:linear-gradient(180deg,var(--hx-wood) 0%,var(--hx-wood-2) 100%);box-shadow:0 3px 0 var(--hx-wood-edge),0 10px 14px -10px rgba(40,30,20,.35);z-index:0}
.hxseat:nth-child(4n+1)::after{left:2px;border-radius:7px 0 0 7px}
.hxseat:nth-child(4n)::after,.hxseat:last-child::after{right:2px;border-radius:0 7px 7px 0}
.hxseat{position:relative;min-height:116px;display:flex;flex-direction:column;align-items:center}
.hxdesk{position:absolute;inset:0 0 auto 0;height:66px;pointer-events:none;z-index:2}
/* a desk lamp on the table to the right of the seat; lit only for someone studying now */
.hxlamp{position:absolute;right:12%;top:30px;width:16px;height:20px}
.hxlamp::before{content:"";position:absolute;left:3px;top:0;width:10px;height:8px;background:var(--hx-shade);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:1px}
.hxlamp::after{content:"";position:absolute;left:7px;top:8px;width:2px;height:13px;background:var(--hx-shade);border-radius:1px}
.hxseat.on .hxlamp::before{background:var(--hx-lit)}
.hxseat.on .hxdesk::after{content:"";position:absolute;right:calc(12% - 22px);top:40px;width:60px;height:26px;background:radial-gradient(closest-side,var(--hx-glow),transparent);z-index:-1}
.hxbook{position:absolute;left:18%;top:46px;width:16px;height:6px;border-radius:1.5px;background:color-mix(in srgb,var(--navy) 30%,var(--surface));transform:rotate(-7deg);opacity:.8}
.hxseat.free .hxlamp{opacity:.55}
.hxseat.free::before{content:"";position:absolute;top:22px;left:50%;width:30px;height:26px;margin-left:-15px;border-radius:9px 9px 3px 3px;border:2px solid var(--hx-chair);border-bottom:0;opacity:.7}
/* a person: the face behind the table edge, a chair back behind the face; name and state as crisp text below */
.hxperson{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;padding:0 2px 6px;background:transparent;border:0;border-radius:var(--r-2);cursor:pointer;color:var(--ink);font:inherit;text-align:center}
.hxperson::before{content:"";position:absolute;top:8px;left:50%;width:44px;height:40px;margin-left:-22px;border-radius:12px 12px 4px 4px;background:var(--hx-chair);z-index:-1}
.hxperson .hxav{margin-top:12px;line-height:0;height:36px;display:grid;place-items:center}
.hxperson .hxav .anonface{width:36px;height:36px;font-size:0}
.hxav .face,.hxav img,.hxav .anonface{box-shadow:0 0 0 2px var(--hx-wall)}
.hxname{margin-top:24px;font:700 13px/1.25 var(--body);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxst{font:500 13px/1.3 var(--body);color:var(--ink-2);display:flex;flex-direction:column;align-items:center}
.hxst .hxmin{color:var(--muted);font-weight:500}
.hxseat.brk .hxav{filter:saturate(.35);opacity:.8}
.hxperson:hover{background:color-mix(in srgb,var(--surface) 55%,transparent)}
.hxperson:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hxperson[aria-expanded="true"]{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.hxmore{position:absolute;right:2px;top:-30px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:700 13px var(--body);cursor:pointer}
.hxmore:focus-visible{outline:none;box-shadow:var(--ring-focus)}
@keyframes hxin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 31 Oct 2026: only a new arrival (and a new row) moves; the room is otherwise still between refreshes */
.hxseat.arrive .hxperson{animation:hxin .6s var(--ease) both}
@keyframes hxrow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hxseat.newrow{animation:hxrow .7s var(--ease) both;animation-delay:calc(var(--i,0) % 4 * 60ms)}
@media (prefers-reduced-motion:reduce){.hxseat.arrive .hxperson,.hxseat.newrow{animation:none}}

/* a person's details, and the rest of the hall */
.hxpanel{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.hxpaneltop{display:flex;align-items:center;gap:12px}
.hxpaneltop .mt{flex:1;min-width:0;display:flex;flex-direction:column}
.hxpaneltop .mt b{font:700 15px/1.3 var(--body)}
.hxpaneltop .mt span{font-size:13px;color:var(--ink-2)}
.hxpanel .hint{margin:8px 0 0;font-size:13px}
.hxrest{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hxrest li{display:flex;align-items:center;gap:10px;font-size:14px}
.hxrest li b{font-weight:700}
.hxrest li span:last-child{margin-left:auto;color:var(--ink-2);font-size:13px}
.hxsubs{margin:10px 2px 0;font-size:13px;color:var(--ink-2)}
.hxsubs>span:first-child{font-weight:600;color:var(--muted)}

/* your desk: the console. The wood edge at its top is the front of your own desk */
.hxconsole{position:relative;margin-top:14px;padding:14px 0 0;border-top:6px solid var(--hx-wood);border-radius:2px}
.hxconsole::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:linear-gradient(180deg,var(--hx-wood),var(--hx-wood-2));border-radius:3px}
.hxdeskrow{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.hxdeskrow .mt{flex:1;min-width:0;display:flex;flex-direction:column}
.hxdeskrow .mt b{font:700 15px/1.3 var(--body)}
.hxdeskrow .mt span{font:500 13px/1.3 var(--body);color:var(--ink-2)}
.hxyou{position:relative;display:inline-flex;width:62px;height:52px;align-items:flex-end}
.hxyou .hxav{line-height:0}
.hxyou .hxav .face,.hxyou .hxav img{box-shadow:0 0 0 2px var(--gold-bright)}
.hxlamp.big{right:0;top:12px;width:18px;height:26px;transform:scale(1.05)}
.hxyou.on .hxlamp::before{background:var(--hx-lit)}
.hxyou.on::after{content:"";position:absolute;right:-14px;top:24px;width:52px;height:30px;background:radial-gradient(closest-side,var(--hx-glow),transparent);z-index:-1}
.hxfield{margin:0 0 14px}
.hxlab{display:block;margin:0 0 6px;font:700 13px/1.3 var(--body);color:var(--ink-2)}
.hxtopic{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:28px}
.hxtopicname{font:700 16px/1.35 var(--body);color:var(--ink)}
.hxpick{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 14px;border:1px dashed var(--line-strong);border-radius:var(--r-2);background:transparent;color:var(--ink-2);font:600 14px var(--body);cursor:pointer;text-align:left}
.hxpick:hover{background:var(--quiet);color:var(--ink)}
.hxsuggest{display:block;margin:8px 0 0;padding:0;border:0;background:transparent;color:var(--link);font:500 13px/1.4 var(--body);text-align:left;cursor:pointer}
.hxsuggest b{font-weight:700}
.hxsuggest:hover b{text-decoration:underline}
.hxsearch{margin:8px 0 0;padding:10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-2)}
.hxsearch input{width:100%;min-height:44px}
.hxhits{display:grid;gap:4px;margin-top:6px}
.hxsearchacts{display:flex;gap:16px;justify-content:flex-end;margin-top:6px}
.hxintent{width:100%;min-height:44px;margin-top:10px;border-radius:var(--r-2)}
.hxlens{display:flex;gap:8px;flex-wrap:wrap}
.hxnote{margin:6px 0 0;font-size:13px;color:var(--muted)}
.hxgo{width:100%;min-height:48px!important;font-size:16px}
.hxtools{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2,var(--line))}
.hxtools .linkbtn{font-size:14px;min-height:36px;padding-left:0;padding-right:0}
.hxsound{display:flex;flex-basis:100%;align-items:center;gap:8px;margin-bottom:2px;font:600 14px var(--body);color:var(--ink-2)}
.hxsound select{min-height:36px;padding:0 28px 0 10px;font-size:14px}
/* studying, paused, on a break */
.hxsum{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;margin:0 0 6px}
.hxsumline{margin:0;flex:1;min-width:0;font-size:15px;line-height:1.4}
.hxsumline b{font-weight:700}
.hxsumnote{display:block;color:var(--ink-2);font-size:14px}
.hxsum .hxintent{margin-top:0;flex-basis:100%}
.hxclock{font:700 60px/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);margin:4px 0 10px}
.hx-working .hxclock{color:var(--good)}
.hx-break .hxclock{color:var(--gold)}
.hxbar{height:6px;border-radius:3px;background:var(--quiet);overflow:hidden;margin:0 0 14px}
.hxbar i{display:block;height:100%;border-radius:3px;background:var(--good);transition:width .9s linear}
.hx-paused .hxbar i{background:var(--muted)}
.hx-break .hxbar i{background:var(--gold-bright)}
@media (prefers-reduced-motion:reduce){.hxbar i{transition:none}}
.hxacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hxacts .hxnote{grid-column:1/-1;margin:0}
.hx-break .hxacts{grid-template-columns:1fr}

/* the hall's other features sit below the core, quieter */
body.upsc #tab-hall #hallBoardHost .card{margin-top:16px}
body.upsc #tab-hall #hallBoardHost .card>header h2{font-size:16px}

/* desktop: the room and your desk side by side, one workspace */
@media (min-width:900px){
  body.upsc .hallx{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);grid-template-rows:auto auto 1fr auto auto;column-gap:28px;grid-auto-flow:row dense;padding:20px 24px 24px}
  .hallx>.hxroom{display:flex;flex-direction:column;justify-content:center}
  .hallx>.hxhead{grid-column:1/-1}
  .hallx>.hxocc,.hallx>.hxroom,.hallx>.hxpanel,.hallx>.hxsubs{grid-column:1}
  .hallx>.hxconsole{grid-column:2;grid-row:2/span 4;margin-top:0;align-self:start}
  .hxroom{padding:40px 18px 10px}
  .hxseat{min-height:126px}
  .hallx>.hxconsole{padding:18px 20px 20px;border-top:0;border-radius:var(--r-3);background:color-mix(in srgb,var(--hx-wood) 16%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hx-wood-edge) 30%,transparent)}
  .hallx>.hxconsole::before{left:0;right:0;top:0;height:8px;border-radius:var(--r-3) var(--r-3) 0 0}
}

/* Focus view: the same card, everything else out of the way */
body.hallfocus .topbar,body.hallfocus .gnav,body.hallfocus .subnav,body.hallfocus #hero,body.hallfocus #examMini,body.hallfocus #hallHost,body.hallfocus #hallBoardHost,body.hallfocus #hxTogether,body.hallfocus .newsbar{display:none!important}
body.hallfocus #tab-hall{padding-top:12px}
body.hallfocus .hallx{border:0}
body.hallfocus .hxseat{min-height:132px}
body.hallfocus .hxperson .hxav{transform:scale(1.15)}
body.hallfocus .hxclock{font-size:88px}
@media (min-width:900px){body.hallfocus .hallx{max-width:1100px;margin:0 auto}}

/* Together today: the room's day, warmly */
body.upsc .hxtogether{margin-top:16px;background:color-mix(in srgb,var(--gold-soft) 26%,var(--surface));border-color:color-mix(in srgb,var(--gold-bright) 18%,var(--line))}
.hxtogether .body{padding:18px 18px 16px}
.hxtogtop{display:flex;align-items:flex-start;gap:12px}
.hxtogtop .mt{flex:1;min-width:0}
.hxtogh{margin:0 0 10px;font:700 13px/1.3 var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.hxbig{margin:0}
.hxbig b{display:block;font:700 40px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.hxbig span{display:block;margin-top:4px;font:500 15px/1.4 var(--body);color:var(--ink-2)}
.hxbig.quiet{font:700 22px/1.3 var(--display);color:var(--ink)}
.hxline{margin:10px 0 0;font:500 15px/1.45 var(--body);color:var(--ink)}
.hxart{flex:none;width:112px;line-height:0;margin-top:2px}
.hxart svg{width:100%;height:auto;display:block}
.hxart .a-shelf,.hxart .a-desk{fill:var(--hx-wood-2)}
.hxart .a-book.b0{fill:var(--hx-book-1)}.hxart .a-book.b1{fill:var(--hx-book-2)}.hxart .a-book.b2{fill:var(--hx-book-3)}.hxart .a-book.b3{fill:var(--hx-book-4)}
.hxart .a-stem{stroke:var(--hx-shade);stroke-width:1.6}
.hxart .a-lamp{fill:var(--hx-shade)}.hxart .a-lamp.on{fill:var(--hx-lit)}
.hxart .a-pool{fill:transparent}.hxart .a-pool.on{fill:var(--hx-glow)}
.hxfacts{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid color-mix(in srgb,var(--gold-bright) 20%,var(--line));display:grid;gap:10px}
.hxfacts li{display:grid;grid-template-columns:32px auto 1fr;align-items:center;gap:10px}
.hxfi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--good-soft);color:var(--good)}
.hxfacts b{font:700 20px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.hxfacts li>span:last-child{font-size:14px;color:var(--ink-2)}
@media (min-width:600px){.hxfacts{grid-template-columns:repeat(3,minmax(0,1fr))}.hxfacts li{grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:2px}.hxfacts li .hxfi{grid-row:1/3}.hxfacts li>span:last-child{grid-column:2}}
.hxrhythm{margin:18px 0 0}
.hxrhythm figcaption{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.hxrhythm figcaption b{font:700 15px/1.3 var(--body)}
.hxrhythm figcaption span{font-size:13px;color:var(--ink-2)}
.hxplot{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px;height:92px;align-items:stretch;padding:0 0 2px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
.hxcol{position:relative;display:flex;align-items:flex-end;padding:0;border:0;border-radius:3px 3px 0 0;background:transparent;cursor:pointer;min-width:0}
.hxcol i{display:block;width:100%;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--gold-bright) 80%,var(--surface))}
.hxcol.ahead{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 7%,transparent) 0 2px,transparent 2px 5px);height:28%;align-self:end}
.hxcol.now::after{content:"";position:absolute;left:50%;bottom:-9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--navy-2)}
.hxcol[aria-pressed="true"] i,.hxcol:hover i{background:var(--navy-2)}
.hxcol:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hxaxis{display:grid;grid-template-columns:repeat(4,1fr) 0;margin-top:10px;font-size:13px;color:var(--muted)}
.hxread{margin:8px 0 0;font-size:14px;color:var(--ink-2);min-height:20px}
.hxread b{color:var(--ink)}
.hxfoot{margin:14px 0 0;font-size:13px;color:var(--muted)}


/* =====================================================================================================================
   30 Oct 2026: Today, redesigned. Today's plan (Now, Up next) on top; the timetable with its tools in one row; tasks without a time;
   daily habits as compact rows; revision inside its slot; achievements last.
   ===================================================================================================================== */
body.upsc h2.nextkicker{font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase}
.nownow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:12px 0 2px;padding:10px 12px;border-radius:var(--r-2);background:var(--surface-2);font-size:15px;color:var(--ink-2)}
.nownow b{color:var(--ink);font-weight:700}
.nowtag,.nexttag{font:700 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.nowtag{padding:4px 8px;border-radius:999px;background:var(--c-revise,var(--gold-bright));color:#161A35}
.nexttag{margin:14px 0 4px;color:var(--c-learn,var(--navy))}
.nextslot{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.nextslot svg{flex:none;color:var(--c-learn,var(--navy))}
.tttools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.ttool{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 14px var(--body);cursor:pointer}
.ttool svg{color:var(--ink-2)}
.ttool:hover{background:var(--surface-2)}
.ttool[aria-pressed="true"]{border-color:var(--c-learn,var(--navy));background:color-mix(in srgb,var(--c-learn,var(--navy)) 8%,var(--surface))}
.ttool:focus-visible,.habrow:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.ttnamerow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.ttupnext{font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--c-learn,var(--navy)) 12%,var(--surface));color:var(--c-learn,var(--navy))}
.ttrow.linked{box-shadow:inset 3px 0 0 var(--c-learn,var(--navy));padding-left:10px}
.ttrow.lapsed .ttmark{background:transparent;border:1.5px dashed var(--line-strong)}
.ttrow.lapsed .tttx b{color:var(--ink-2)}
.ttrow.lapsed .ttsub{color:var(--muted)}
.ttrow.lapsed .tttime b{color:var(--ink-2)}
.ttnext{display:block;font:600 13px/1.2 var(--body);letter-spacing:.02em;color:var(--muted)}
.ttnest{list-style:none;margin:0 0 6px;padding:0 0 10px 112px;border-bottom:1px solid var(--line)}
@media (max-width:520px){.ttnest{padding-left:0}}
#upscRevise.nested>.card{border:0;box-shadow:none;background:transparent;margin:0;padding:0}
#upscRevise.nested>.card>.body{padding:0}
#upscRevise.nested .revlead{font-size:14px;color:var(--ink-2);margin:0 0 6px}
#upscRevise.nested .infob.corner{display:none}
#upscRevise.nested .featic{display:none}
#upscRevise.nested .revcard{margin-top:6px}
.ttsec{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ttsech{margin:0 0 8px;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ttsechrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ttcount{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.tntlist,.habrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tnt{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;border-bottom:1px solid var(--line)}
.tnt:last-child{border-bottom:0}
.tntmain{flex:1;min-width:0;display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.tntmain input{width:20px;height:20px;flex:none;accent-color:var(--good)}
.tnt.slipped .tntmain{flex-direction:column;align-items:flex-start;gap:2px;padding-left:32px}
.tntwhen{font-size:13px;color:var(--muted)}
.tnt.quiet{font-size:14px;color:var(--muted)}
.tnt .linkbtn{flex:none;min-height:40px}
.ttrevloose{margin-top:8px}
.habrow{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:6px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:500 15px var(--body);text-align:left;cursor:pointer}
.habrows li:last-child .habrow{border-bottom:0}
.habrow i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;color:transparent}
.habrow:hover i{border-color:var(--good);color:var(--good)}
.habrow[aria-pressed="true"]{color:var(--ink-2)}
.habrow[aria-pressed="true"] i{background:var(--good);border-color:var(--good);color:var(--on-primary,#fff)}
.habrow.ticking i{animation:aroh-tick .24s ease-out}
@media (prefers-reduced-motion:reduce){.habrow.ticking i{animation:none}}
body.upsc #tab-dash>.achline{opacity:.92}
/* long unbroken names (a 64-character habit, an 85-character topic) wrap inside their rows instead of widening the page */
.habrow span,.tntmain>span,.tntmain span,.nownow b,.ttnamerow b,.hxtopicname,.hxsumline,.hxpaneltop .mt b,.hxsuggest{min-width:0;overflow-wrap:anywhere}
.habrow span{flex:1}

/* =====================================================================================================================
   30 Oct 2026, after Vikram's look on his phone: the saving line calmer; room to breathe on Today; the What's new bar tidied;
   the hall's seats say the subject; a person's details say the topic and the time; the subjects studied today.
   ===================================================================================================================== */
/* the saving line: slow, soft, and only for a slow save (the delay is in app.js) */
html.is-saving body.upsc::before{height:2px;opacity:.55;background-size:30% 100%;animation:aroh-saving 2.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.is-saving body.upsc::before{animation:none;background:var(--gold-bright);opacity:.35}}
/* Today: space between the parts */
body.upsc #noticeBars:not(:empty){margin:18px 0 6px}
body.upsc #noticeBars .newsbar{margin:0 0 12px}
body.upsc #tab-dash>.card,body.upsc #tab-dash>#upscRevise{margin-top:20px}
body.upsc #tab-dash>.card:first-of-type{margin-top:16px}
body.upsc #hero{margin-bottom:6px}
/* What's new: a label, the title, then one quiet row of actions */
body.upsc .newsbar.compact{flex-direction:column;align-items:stretch;gap:8px;padding:14px 16px}
body.upsc .newsbar.compact .newsin{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
body.upsc .newsbar.compact .newsin b{font:600 15px/1.4 var(--body);margin:0}
body.upsc .newsbar.compact .newstag{font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.newsacts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px}
.newsacts .linkbtn{font-size:14px;min-height:36px;padding-left:0;padding-right:0}
.newsacts .btn{margin-left:auto}
/* the hall: a seat's subject, between the name and the state */
.hxsubj{margin-top:1px;font:600 13px/1.3 var(--body);color:var(--c-learn,var(--navy));max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxseat{min-height:132px}
@media (min-width:900px){.hxseat{min-height:140px}}
/* a person's details */
.hxon{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-2);background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.hxonlab{font:700 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hxon b{font:700 15px/1.35 var(--body);color:var(--ink);overflow-wrap:anywhere}
.hxonsub{font-size:14px;color:var(--ink-2)}
.hxstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 0}
.hxstats>div{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-2)}
.hxstats dt{font-size:13px;color:var(--muted)}
.hxstats dd{margin:2px 0 0;font:700 16px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
/* being studied now: one chip per subject with its count */
.hxsubs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.hxsubchip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--c-learn,var(--navy)) 8%,var(--surface));color:var(--ink);font-size:13px}
.hxsubchip b{font-variant-numeric:tabular-nums;color:var(--c-learn,var(--navy))}
/* together today: the subjects studied today */
.hxsubs2{margin:18px 0 0}
.hxsubh{margin:0 0 8px;font:700 15px/1.3 var(--body);color:var(--ink)}
.hxsublist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hxsublist li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:14px}
.hxsn{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hxsb{height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}
.hxsb i{display:block;height:100%;border-radius:4px;background:color-mix(in srgb,var(--gold-bright) 80%,var(--surface))}
.hxsm{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* the account note on what the hall shows */
.hallshares{margin:0 0 12px;padding:12px 14px;border-radius:var(--r-2);background:var(--surface-2);font-size:15px}
.hallshares p{margin:0}
.hallshares ul{margin:6px 0 8px;padding-left:20px}
.hallshares li{margin:2px 0}

/* =====================================================================================================================
   31 Oct 2026 (Vikram: "if 10 or 100 or 1000 students join ... will the desks expand?" / "do it aesthetically"): the hall grows a table
   at a time. Each row of four is its own lamp-lit table with air between them; the wall's shelf stays at the top, and the room deepens
   towards the back with a warm floor. Your own seat is the first, marked with a gold ring.
   ===================================================================================================================== */
.hxseats{row-gap:22px}
.hxroom{background:linear-gradient(180deg,var(--hx-wall) 0%,var(--hx-wall-2) 62%,color-mix(in srgb,var(--hx-wood) 22%,var(--hx-wall-2)) 100%)}
.hxseat:nth-child(n+5)::after{opacity:.96}
.hxseat:nth-child(n+9)::after{opacity:.92}
.hxseat:nth-child(n+13) .hxperson::before,.hxseat:nth-child(n+13).free::before{opacity:.9}
.hxperson .hxav .face,.hxperson .hxav img{transition:box-shadow var(--t2) var(--ease)}
.hxseat.me .hxav .face,.hxseat.me .hxav img{box-shadow:0 0 0 2px var(--hx-wall),0 0 0 4px var(--gold-bright)}
.hxseat.me .hxname{color:var(--gold)}
/* the periods: a quiet row of choices, wrapping on a phone */
.hxper{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.hxperb{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--gold-bright) 30%,var(--line));background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink-2);font:600 14px var(--body);cursor:pointer}
.hxperb:hover{color:var(--ink);border-color:var(--gold-bright)}
.hxperb[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.hxperb:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hxwait{color:var(--muted)}
.hxseries .hxplot{gap:2px}
.hxsaxis{display:grid;margin-top:10px;font-size:13px;color:var(--muted)}
.hxsaxis span{white-space:nowrap;overflow:visible}
.hxsaxis span:last-child{text-align:right;direction:rtl}

/* =====================================================================================================================
   31 Oct 2026 (Vikram: "make Big Picture Whole Tab better design and UX UI and functionality"): a row of shortcuts under the opening
   card; Your revision up near the top with its own Revise button; tiles that open the part of the page they count; cards with more air.
   ===================================================================================================================== */
body.upsc #anHost{display:flex;flex-direction:column;gap:16px}
body.upsc #anHost>.card{margin:0}
.bpnav{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 0}
.bpnavb{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 14px var(--body);cursor:pointer}
.bpnavb:hover{border-color:var(--line-strong);color:var(--ink)}
.bpnavb:focus-visible{outline:none;box-shadow:var(--ring-focus)}
body.upsc #anHost .bph{font:700 18px/1.3 var(--display);letter-spacing:-.01em;margin:0 0 12px}
.bprevgo{display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;min-height:46px}
.bprevsubs{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.bprevsubs li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:var(--r-2);background:var(--surface-2);font-size:14px}
.bprevsubs li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.bprevsubs li b{font-variant-numeric:tabular-nums;color:var(--c-revise-ink,var(--gold))}
body.upsc .bprevnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.upsc .bprn{padding:12px;border-radius:var(--r-2);background:var(--surface-2);text-align:center}
body.upsc .bprn b{display:block;font:700 26px/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
body.upsc .bprn span{font-size:13px;color:var(--ink-2)}
body.upsc .bprn.hot{background:color-mix(in srgb,var(--c-revise,var(--gold-bright)) 16%,var(--surface))}
body.upsc .bptile{transition:transform var(--t1) var(--ease),border-color var(--t1) var(--ease)}
body.upsc .bptile:hover{transform:translateY(-1px)}
/* 31 Oct 2026 (Vikram: "Don't make the study hall unlimitedly expand, give slide option"): one table of eight in view; more tables slide in
   beside it. The track snaps a table into place; the arrows, dots and "Table 2 of 3" sit under the room. */
.hxtables{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.hxtables::-webkit-scrollbar{display:none}
.hxtables>.hxseats{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.hxtables:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--r-2)}
@media (prefers-reduced-motion:reduce){.hxtables{scroll-behavior:auto}}
.hxslide{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 2px}
.hxarrow{width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,var(--hx-wood-edge) 45%,var(--line));background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.hxarrow:hover:not(:disabled){background:var(--surface)}
.hxarrow:disabled{opacity:.35;cursor:default}
.hxarrow:focus-visible,.hxdot:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hxdots{display:flex;align-items:center;gap:6px}
.hxdot{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:color-mix(in srgb,var(--ink) 22%,transparent);cursor:pointer;transition:width var(--t2) var(--ease),background var(--t2) var(--ease)}
.hxdot[aria-current="true"]{width:22px;background:var(--hx-lit)}
.hxdot::before{content:"";display:block;width:100%;height:100%;padding:10px;margin:-10px;box-sizing:content-box}
.hxslab{font:600 13px var(--body);color:var(--ink-2);min-width:88px;text-align:center;font-variant-numeric:tabular-nums}

/* =====================================================================================================================
   31 Oct 2026: Hall view and Focus view, on the whole screen (a student's feedback, via Vikram). One deliberate look in light and dark:
   a library at night, so every desk lamp reads. Hall view: a gallery of tiles like a video call, pages that slide, your desk at the side
   (at the bottom on a phone). Focus view: your clock alone, large and calm.
   ===================================================================================================================== */
body.hallgallery{overflow:hidden}
.hgview{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;color:#ECEEF6;
  background:radial-gradient(120% 80% at 50% 0%,#232853 0%,#14172F 60%,#0F1229 100%);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.hgview[hidden]{display:none!important}
.hghead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 10px}
.hgtitle{min-width:0}
.hgtitle h2{margin:0;font:700 19px/1.2 var(--display);color:#FFFFFF;letter-spacing:-.01em}
.hgocc{margin:3px 0 0;font:500 14px/1.4 var(--body);color:#B9BEDA}
.hgclose{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#FFFFFF;font:600 14px var(--body);cursor:pointer}
.hgclose:hover{background:rgba(255,255,255,.12)}
.hgview :focus-visible{outline:2px solid #F2B45E;outline-offset:2px;box-shadow:none}
.hgbody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;padding:0 20px 20px}
.hgmain{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
.hgstage{flex:1;min-height:0;position:relative}
.hgtrack{height:100%;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.hgtrack::-webkit-scrollbar{display:none}
.hggrid{box-sizing:border-box;flex:0 0 100%;min-width:0;height:100%;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.hgtile{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 10px 18px;border-radius:16px;
  background:linear-gradient(180deg,#252A55 0%,#1D2147 100%);border:1px solid rgba(255,255,255,.07);overflow:hidden;text-align:center;isolation:isolate}
/* the front of the desk, and the pool of lamplight when the person is studying */
.hgtile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:linear-gradient(180deg,#5A4636,#3E3027);opacity:.9}
.hglamp{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hgtile.on .hglamp{background:radial-gradient(60% 50% at 50% 38%,rgba(242,169,62,.24),transparent 70%)}
.hgav{line-height:0;margin-bottom:6px}
.hgav .face,.hgav img,.hgav .anonface{box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.hgtile.on .hgav .face,.hgtile.on .hgav img,.hgtile.on .hgav .anonface{box-shadow:0 0 0 3px rgba(242,169,62,.75),0 0 22px 2px rgba(242,169,62,.28)}
.hgtile.brk .hgav{filter:saturate(.4);opacity:.85}
.hgtile.me{border-color:rgba(242,180,94,.65);background:linear-gradient(180deg,#2A2F5C 0%,#20244B 100%)}
.hgname{font:700 15px/1.25 var(--body);color:#FFFFFF;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hgtile.me .hgname{color:#F2B45E}
.hgsubj{font:600 13px/1.3 var(--body);color:#A9B0F0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hgst{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.3 var(--body);color:#B9BEDA;white-space:nowrap}
.hgdot{width:7px;height:7px;border-radius:50%;background:#7A80A8;flex:none}
.hgtile.on .hgdot{background:#5BB5B2}
.hgtile.brk .hgdot{background:#F2A93E}
.hglone{flex-basis:100%;align-self:start;margin:4px 0 0;font:500 14px var(--body);color:#B9BEDA;text-align:center}
.hgnav{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px}
.hgnav.quiet{visibility:hidden}
.hgview .hxarrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#FFFFFF}
.hgview .hxarrow:hover:not(:disabled){background:rgba(255,255,255,.14)}
.hgview .hxdot{background:rgba(255,255,255,.28)}
.hgview .hxdot[aria-current="true"]{background:#F2B45E}
.hgview .hxslab{color:#B9BEDA}
/* your desk, at the side */
.hgside{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);align-self:start}
.hgme{display:flex;align-items:center;gap:12px}
.hgme .mt{display:flex;flex-direction:column;min-width:0}
.hgme .mt b{font:700 15px var(--body);color:#FFFFFF}
.hgme .mt span{font-size:13px;color:#B9BEDA}
.hgme .hxav .face,.hgme .hxav img{box-shadow:0 0 0 2px #F2B45E}
.hgtopic{margin:0;font:600 15px/1.4 var(--body);color:#FFFFFF;overflow-wrap:anywhere}
.hgclock{font:700 64px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#FFFFFF}
.hg-working .hgclock{color:#7FD3CF}
.hg-break .hgclock{color:#F2B45E}
.hgbar{margin:0;background:rgba(255,255,255,.1)}
.hgbar i{background:#5BB5B2}
.hg-break .hgbar i{background:#F2B45E}
.hgacts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hg-ready .hgacts,.hg-break .hgacts{grid-template-columns:1fr}
.hgnote{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:#B9BEDA}
body.upsc #hgView .btn{min-height:46px;font-size:15px}
body.upsc #hgView .btn.pri{background:#F2A93E;border-color:#F2A93E;color:#161A35}
body.upsc #hgView .btn.pri:hover{background:#F5B963}
body.upsc #hgView .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.3);color:#FFFFFF}
body.upsc #hgView .btn.ghost:hover{background:rgba(255,255,255,.08)}
.hgview:focus{outline:none}
.hgfocus .hgside .hgbar{display:block;width:100%;height:6px;flex:none}
/* Focus view: the clock alone */
.hgfocus .hgmain{display:none}
.hgfocus .hgbody{grid-template-columns:minmax(0,1fr);place-items:center}
.hgfocus .hgside{width:min(560px,100%);align-self:center;align-items:center;text-align:center;background:transparent;border:0;gap:18px}
.hgfocus .hgclock{font-size:clamp(88px,16vw,168px)}
.hgfocus .hgbar{width:100%}
.hgfocus .hgacts{width:min(420px,100%)}
@media (prefers-reduced-motion:reduce){.hgtrack{scroll-behavior:auto}}
/* a phone: the desk becomes a bar under the gallery */
@media (max-width:760px){
  .hghead{padding:10px 14px 8px}
  .hgclose span{display:none}
  .hgclose{width:40px;padding:0;justify-content:center}
  .hgbody{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:0 12px 12px}
  .hgtile{padding:10px 6px 14px;border-radius:14px}
  .hgav .face,.hgav img,.hgav .anonface{width:52px!important;height:52px!important}
  .hgname{font-size:14px}
  .hgside{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 14px}
  .hgside .hgme,.hgside .hgtopic,.hgside .hgnote{display:none}
  .hgside .hgclock{font-size:40px}
  .hgside .hgbar{order:5;flex-basis:100%}
  .hgside .hgacts{flex:1;min-width:180px}
  .hgfocus .hgside{flex-direction:column;flex-wrap:nowrap}
  .hgfocus .hgside .hgme{display:flex}
  .hgfocus .hgside .hgtopic{display:block}
  .hgfocus .hgside .hgclock{font-size:clamp(80px,26vw,120px)}
  .hgfocus .hgside .hgbar{order:0;flex-basis:auto;width:100%}
  .hgfocus .hgside .hgacts{flex:none;width:100%}
}
.hxexpand{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--hx-wood-edge) 45%,var(--line));background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--ink);font:600 13px var(--body);cursor:pointer}
.hxexpand:hover{background:var(--surface)}
.hxexpand:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.hxfsl{display:inline-flex;align-items:center;gap:6px}
/* 31 Oct 2026: the tiles take the size the room gives them; what a tile shows follows its size */
.hgtile{flex:none}
.hggrid.sz-xl .hgav .face,.hggrid.sz-xl .hgav img,.hggrid.sz-xl .hgav .anonface{width:104px!important;height:104px!important}
.hggrid.sz-xl .hgname{font-size:19px}
.hggrid.sz-xl .hgsubj,.hggrid.sz-xl .hgst{font-size:15px}
.hggrid.sz-l .hgav .face,.hggrid.sz-l .hgav img,.hggrid.sz-l .hgav .anonface{width:76px!important;height:76px!important}
.hggrid.sz-m .hgav .face,.hggrid.sz-m .hgav img,.hggrid.sz-m .hgav .anonface{width:46px!important;height:46px!important}
.hggrid.sz-m .hgav{margin-bottom:3px}
.hggrid.sz-m .hgname{font-size:14px}
.hggrid .hgtile{justify-content:center}
.hggrid.sz-m .hgtile{padding:8px 6px 12px}
.hggrid.sz-s .hgav{margin-bottom:3px}
.hggrid.sz-s .hgav .face,.hggrid.sz-s .hgav img,.hggrid.sz-s .hgav .anonface{width:38px!important;height:38px!important}
.hggrid.sz-s .hgtile{padding:6px 4px 10px;gap:1px;border-radius:12px}
.hggrid.sz-s .hgname{font-size:13px}
.hggrid.sz-s .hgsubj{display:none}
.hggrid.sz-s .hgmin{display:none}
.hggrid.sz-s .hgtile::after{height:5px}
/* 31 Oct 2026 (hall audit): on a phone every hall control is a full 44 px to the finger (the slide arrows, Hall view, the period buttons,
   the close button of the whole-screen views); a subject's name in "Together" is read in full on its own line, its bar under it */
@media (max-width:760px){
  .hxarrow,.hgview .hxarrow{width:44px;height:44px}
  .hxexpand{min-height:44px;padding:0 14px}
  .hxperb{min-height:44px}
  .hgclose{width:44px;min-height:44px}
  .hgnav{min-height:44px}
}
/* "Together": the four figures sit on one line when there is room (the fourth, "of it is yours", used to drop to a row of its own), each
   number at the top of its own column so they line up */
@media (min-width:600px){
  .hxfacts{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .hxfacts li{align-items:start}
  .hxfacts li .hxfi{align-self:center}
}
/* a tablet: a slimmer desk at the side, so the gallery keeps room for four or five columns */
@media (min-width:761px) and (max-width:1023px){
  .hgbody{grid-template-columns:minmax(0,1fr) 248px;gap:14px}
  .hgside{padding:16px;gap:12px}
  .hgclock{font-size:50px}
}
@media (max-width:600px){
  .hxsublist li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .hxsublist .hxsn{grid-column:1/-1;white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .hxsublist .hxsm{min-width:6.5em;text-align:right}   /* the bars all end at one line */
}

/* =====================================================================================================================
   Audit 2 (31 Oct 2026, design): states, keyboard and touch, in one place. Student app only (body.upsc / body.authpage);
   nothing here touches the Study Hall or the public pages.
   ===================================================================================================================== */
/* A toast faded in only through an animation, and reduced motion switches animations off, so with "Remove animations" on (Android,
   iOS, Windows) no toast was ever seen: not "Saved", not "That didn't save", not "No connection". It now simply appears. */
@media (prefers-reduced-motion:reduce){.toast.on{opacity:1;transform:translate(-50%,0)}}
/* The focus ring: the amber ring with a thin ink edge. Amber alone is 2.4:1 on white; the edge makes it read on white, Snow and dark. */
:root[data-theme^="aroh-"]{--ring-focus:0 0 0 3px var(--gold-bright),0 0 0 4.5px var(--ink)}
body.authpage :is(a,button,input):focus-visible{box-shadow:0 0 0 3px var(--gold-bright),0 0 0 4.5px var(--ink)}
/* A sheet takes focus when it opens (keyboards, screen readers). The sheet itself draws no ring; its controls do. */
.sheet[tabindex="-1"]:focus,body.upsc .sheet[tabindex="-1"]:focus-visible{outline:none;box-shadow:none}
/* The control just tapped says it is working while its save is on its way (a slow line only; quick saves never flicker) */
body.upsc .is-busy{cursor:progress}
body.upsc :is(button,.memrow).is-busy{animation:aroh-busy 1.1s .35s ease-in-out infinite}
@keyframes aroh-busy{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){body.upsc :is(button,.memrow).is-busy{opacity:.72}}
/* A Prelims PYQ: the option picked stays clear while the answer is being checked (the rest dim) */
body.upsc .pqopt.picked:disabled:not(.right):not(.wrong){opacity:1;border:2px solid var(--navy-2);padding:11px 15px;background:color-mix(in srgb,var(--navy-2) 6%,var(--surface))}
body.upsc .pqopt.picked .pqtag{color:var(--ink-2)}
/* "What's checked" looks like what it is: a fold that opens, with a 44px row */
body.upsc .pqchecks summary{min-height:44px;color:var(--link);font-weight:600;gap:8px;list-style:none;width:max-content;max-width:100%}
body.upsc .pqchecks summary::-webkit-details-marker{display:none}
body.upsc .pqchecks summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);flex:none}
body.upsc .pqchecks[open] summary::after{transform:translateY(1px) rotate(-135deg)}
/* long reading keeps a comfortable line (about 70 characters) on a wide screen: the model answer, a PYQ's solution, Quick revision */
body.upsc :is(.msans,.pqtext,#notesSheet .nsitem){max-width:70ch}
/* Mains: while the clock runs, the clock is the thing to look at */
body.upsc #msWrite .mstime:not(.hidden){font-size:30px;padding:4px 2px}
/* the session card: the topic is read in its own case, not shouted in capitals (a later layer had put the kicker back in capitals) */
body.upsc .nextkicker.sesskick{text-transform:none;letter-spacing:0;font:600 15px/1.4 var(--body);color:var(--ink-2)}
body.upsc .nextkicker.sesskick .sesstopic{color:var(--ink)}
/* Account: each door's contents read as one line ("Profile · Look & colour · Language"), not a column of words and dots */
body.upsc .acctgroup>summary>span>span{display:inline}
/* Big Picture, your weeks: a single week is a bar, not a slab across the card; this week is named, not only coloured */
body.upsc .anweeks{justify-content:flex-start}
body.upsc .anweek{max-width:64px}
/* the first screen has one main action: putting Aroh on the home screen is offered quietly, not in the amber of the main action */
body.upsc .installbar .btn.gold{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
body.upsc .installbar .btn.gold:hover{background:var(--quiet)}
/* contrast: two small lines that sat just under 4.5:1 */
body.upsc .logtest .mt span{color:var(--ink-2)}
:root[data-theme="aroh-light"] body.upsc .achline .achtag{color:color-mix(in srgb,var(--c-revise-ink,#9A631D) 75%,var(--ink))}
/* sign-in pages: every secondary button reads as a button in ink (the reset page's "Send me a new one" was amber text, 2.4:1) */
body.authpage main.login a.btn:not(.pri){justify-content:center;text-align:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 16%,var(--surface));color:var(--ink);border-radius:12px;font-weight:600;text-decoration:none}
/* touch: on phones every control is at least 44px to the finger. Small pills keep their look; an invisible margin takes the tap. */
@media (max-width:767px){
  body.upsc :is(.tttick,.ttauto,.ttool,.bpnavb,.hourchip,#hero .herochip){position:relative}
  body.upsc :is(.tttick,.ttauto,.ttool,.bpnavb,.hourchip,#hero .herochip)::after{content:"";position:absolute;inset:-5px -3px}
  body.upsc .sylsearch input{min-height:44px}
  body.upsc .sylview button{min-height:44px}
  body.authpage .peek{min-height:44px;min-width:44px}
  body.authpage .themetog.floating::after{content:"";position:absolute;inset:-10px -4px}
}

/* 31 Oct 2026 (Vikram: "the study hall second table has no books behind"): the back row gets its own shelf on the wall, the same books
   as the first; it sits behind that row's heads, like the top one (the row gap is a token so the shelf follows it on every width) */
.hxseats{--hx-rg:22px;row-gap:var(--hx-rg)}
.hxseats>.hxshelf2{list-style:none;top:calc(50% + var(--hx-rg) / 2 + 10px);left:4px;right:4px;pointer-events:none}

/* 31 Oct 2026: inside the Play Store app (html[data-play], lib.php play_js) nothing offers a plan or a price */
html[data-play="1"] .playhide { display: none !important; }

/* 31 Oct 2026: Continue with Google (google_auth.php), in Google's own white button, then a quiet "or" */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 600; }
.gbtn:hover { background: #f7f8fa; }
.gor { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; color: var(--muted, #4B5470); font-size: .9em; }
.gor::before, .gor::after { content: ""; flex: 1; height: 1px; background: var(--line, #E4E8F0); }