/* =========================================================================
   STUDY TRACK — design system
   -------------------------------------------------------------------------
   Analytical first: dense where it counts, tabular figures everywhere a
   number matters, and colour reserved for meaning rather than decoration.
   The track motif runs through the progress lanes and the brand mark; it
   is a texture, not a theme.
   ========================================================================= */
:root{
  /* surfaces */
  --ground:#F3F4F7; --surface:#FFFFFF; --surface-2:#F7F8FA; --surface-3:#EFF1F5;
  /* ink */
  --ink:#12161C; --ink-2:#1B2028; --ink-mid:#5A6472; --ink-soft:#8B94A3;
  /* lines */
  --rule:#E2E5EB; --rule-soft:#EDEFF3;
  /* brand */
  --accent:#E8402A; --accent-2:#FF7A4D; --accent-ink:#B02B18; --accent-wash:#FFF1ED;
  --navy:#2B6177;
  /* semantics */
  --good:#12855C; --good-wash:#E8F6F0; --loss:#C0392B; --loss-wash:#FDEEEC;
  --warn-wash:#FFF8E8;
  /* attainment ramp — data, not brand */
  --l5:#0FA3B1; --l4:#19A974; --l3:#7BC96F; --l2:#EFD469; --l1:#F0A45C; --l0:#E8756B;
  --none:#E6E9EF;
  --gold:#C08A2E; --silver:#8B97A5; --bronze:#A8703F;
  /* elevation */
  --sh-1:0 1px 2px rgba(16,22,32,.05);
  --sh-2:0 1px 2px rgba(16,22,32,.05), 0 4px 12px rgba(16,22,32,.05);
  --sh-3:0 2px 4px rgba(16,22,32,.06), 0 12px 28px rgba(16,22,32,.10);
  --sh-4:0 24px 64px rgba(9,13,20,.28);
  /* shape + motion */
  --r:14px; --r-sm:10px; --r-xs:7px;
  --ease:cubic-bezier(.2,.8,.25,1);
  --fast:.14s; --med:.22s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.021em;line-height:1.18}
a{color:var(--navy)}
.wrap{max-width:1440px;margin:0 auto;padding:0 26px}
.hide{display:none !important}
[hidden]{display:none !important}

/* numbers should line up in columns */
.kpi .v,.tdisp,.hrs,.val,td,th,.livecard .t,.pill,.hmcell .hv{font-variant-numeric:tabular-nums}

/* =========================================================================
   HEADER
   ========================================================================= */
header.top{
  position:sticky; top:0; z-index:60;
  background:var(--ink); color:#E9ECF2; padding:14px 0 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(16,22,32,.4), 0 10px 30px -20px rgba(16,22,32,.9);
}
/* a faint lane texture behind the masthead — the track, barely there */
header.top::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 132px);
}
header.top>.wrap{position:relative}
.mast{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:34px;height:34px;flex:none;border-radius:10px;display:block;
  box-shadow:0 2px 10px rgba(232,64,42,.35), inset 0 0 0 1px rgba(255,255,255,.1)}
.brandtext{min-width:0}
.brandtext h1{font-size:19px;color:#fff;letter-spacing:-.032em}
.brandtext p{margin:2px 0 0;color:#8792A4;font-size:12px}
.crewchip{align-self:center;font-size:11.5px;font-weight:600;color:#C9D2E0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);
  padding:4px 10px;border-radius:999px;white-space:nowrap}

.mastright{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* who is on the track right now */
.nowbar{display:none;align-items:center;gap:10px;padding:5px 12px 5px 11px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:999px}
.nowbar.on{display:flex}
.nowlabel{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  color:#C9D2E0;white-space:nowrap}
.nowdot{width:7px;height:7px;border-radius:50%;background:var(--l4);flex:none;
  animation:ping 2s var(--ease) infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(25,169,116,.55)}
  70%{box-shadow:0 0 0 7px rgba(25,169,116,0)}
  100%{box-shadow:0 0 0 0 rgba(25,169,116,0)}
}
.nowavs{display:flex;align-items:center}
.nowav{display:block;margin-left:-7px;cursor:pointer;border-radius:50%;
  transition:transform var(--fast) var(--ease);position:relative}
.nowav:first-child{margin-left:0}
.nowav .av{border-color:var(--ink);box-shadow:0 0 0 1.5px rgba(255,255,255,.22)}
.nowav.self .av{box-shadow:0 0 0 2px var(--l4)}
.nowav:hover{transform:translateY(-2px) scale(1.08);z-index:2}
.nowmore{margin-left:6px;font-size:11px;font-weight:700;color:#A9B4C4}

.meblock{display:flex;align-items:center;gap:11px;cursor:pointer;padding:5px 9px 5px 5px;
  margin:-5px -9px -5px -5px;border-radius:999px;transition:background var(--fast) var(--ease)}
.meblock:hover{background:rgba(255,255,255,.07)}
.meblock .nm{font-size:13px;font-weight:650;color:#fff;line-height:1.2}
.meblock .sm{font-size:11.5px;color:#8792A4}

nav.tabs{display:flex;gap:3px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{
  appearance:none;border:0;background:transparent;color:#93A0B2;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:600;padding:10px 15px 12px;
  border-radius:var(--r-xs) var(--r-xs) 0 0;position:relative;white-space:nowrap;
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
nav.tabs button::after{
  content:"";position:absolute;left:15px;right:15px;bottom:0;height:2.5px;border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform var(--med) var(--ease);
}
nav.tabs button:hover{color:#DCE3EE;background:rgba(255,255,255,.05)}
nav.tabs button[aria-selected="true"]{color:#fff}
nav.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
nav.tabs button:focus-visible{outline:2px solid var(--accent-2);outline-offset:-3px}

main{padding:26px 0 80px}
.panel{display:none}
.panel.on{display:block;animation:fade .26s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* =========================================================================
   CARDS + LAYOUT
   ========================================================================= */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh-1);transition:box-shadow var(--med) var(--ease)}
.card:hover{box-shadow:var(--sh-2)}
.card>header{padding:16px 20px 14px;border-bottom:1px solid var(--rule-soft);display:flex;
  justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.card>header h2{font-size:15px}
.card>header .sub{font-size:12.5px;color:var(--ink-soft);font-weight:400;max-width:74ch;margin-top:2px}
.card .body{padding:20px}
.grid{display:grid;gap:16px}
/* Grid and flex children default to min-width:auto, so anything with a wide
   child (a scrolling chart, a wide table) refuses to shrink and pushes the
   whole page sideways. This is the fix for that entire class of bug. */
.grid>*{min-width:0}
.tblwrap,.scrollx{min-width:0}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.gHome{grid-template-columns:340px 1fr}
.mb16{margin-bottom:16px}

.kpi{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:box-shadow var(--med) var(--ease),transform var(--med) var(--ease)}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:0;
  transition:opacity var(--med) var(--ease)}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.kpi:hover::before{opacity:1}
.kpi .v{font-size:30px;font-weight:720;letter-spacing:-.042em;line-height:1.02}
.kpi .k{font-size:11.5px;color:var(--ink-soft);margin-top:6px;font-weight:500}
.kpi .d{font-size:12px;margin-top:9px;color:var(--ink-mid);border-top:1px solid var(--rule-soft);padding-top:9px}

/* =========================================================================
   FORM CONTROLS
   ========================================================================= */
label.fl{display:block;font-size:11.5px;color:var(--ink-mid);margin-bottom:5px;font-weight:600}
select,input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:9px 12px;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
select{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
input[type=color]{width:40px;height:38px;padding:3px;border:1px solid var(--rule);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
textarea{resize:vertical;min-height:64px;line-height:1.55}
select:hover,input:hover:not(:focus),textarea:hover:not(:focus){border-color:#C3C9D4}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--ink-mid);
  box-shadow:0 0 0 3.5px rgba(90,100,114,.14)}
::placeholder{color:#A7AFBC}

button.btn{
  appearance:none;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:9px 17px;border-radius:var(--r-sm);white-space:nowrap;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),transform .07s var(--ease),color var(--fast) var(--ease);
}
button.btn:hover{background:var(--ink-2);box-shadow:var(--sh-2)}
button.btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
button.btn.ghost{background:var(--surface);color:var(--ink-mid);border-color:var(--rule);font-weight:600}
button.btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:#C3C9D4;box-shadow:var(--sh-1)}
button.btn.sm{padding:7px 12px;font-size:12.5px}
button.btn.go{background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border-color:var(--accent);font-size:15px;padding:12px 28px;
  box-shadow:0 2px 10px rgba(232,64,42,.28)}
button.btn.go:hover{box-shadow:0 4px 18px rgba(232,64,42,.4)}
button.btn.stop{background:var(--ink);border-color:var(--ink);font-size:15px;padding:12px 28px}
button.btn.stop:hover{background:#000}
button.btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
button.btn:focus-visible,.chip:focus-visible{outline:none;box-shadow:0 0 0 3.5px rgba(232,64,42,.32)}

.chip{appearance:none;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-mid);
  padding:6px 13px;border-radius:999px;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
    color var(--fast) var(--ease)}
.chip:hover{background:var(--surface-2);border-color:#C3C9D4;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"]:hover{background:var(--ink-2)}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* =========================================================================
   TABLES
   ========================================================================= */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th,td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--rule-soft);white-space:nowrap}
th:first-child,td:first-child,th.l,td.l{text-align:left}
thead th{position:sticky;top:0;z-index:2;font-size:11px;font-weight:700;color:var(--ink-mid);
  background:var(--surface-2);text-transform:uppercase;letter-spacing:.055em;
  box-shadow:inset 0 -1px 0 var(--rule)}
tbody tr{transition:background var(--fast) var(--ease)}
tbody tr:hover{background:var(--surface-2)}
tr.me{background:var(--accent-wash)}
tr.me:hover{background:#FFE7DF}
tr.me td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.tblwrap{max-height:540px;overflow:auto;border-top:1px solid var(--rule-soft);
  border-radius:0 0 var(--r) var(--r)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:var(--ink)}

/* =========================================================================
   AVATARS + PEOPLE
   ========================================================================= */
.av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--surface-3);
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;
  border:2px solid var(--surface);flex:none}
.av.lg{width:40px;height:40px;font-size:14px}
.av.xl{width:76px;height:76px;font-size:26px;border-width:3px}
.av.sm{width:26px;height:26px;font-size:10.5px;border-width:2px}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .nm{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person{cursor:pointer;border-radius:var(--r-sm);
  transition:background var(--fast) var(--ease),box-shadow var(--med) var(--ease),
    transform var(--med) var(--ease)}
.who.person{padding:4px 8px;margin:-4px -8px}
.who.person:hover{background:rgba(232,64,42,.07)}
.who.person:hover .nm{color:var(--accent-ink)}
.pod.person:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.wholink{font-size:11.5px;color:var(--ink-soft);cursor:pointer;font-weight:600;
  border-bottom:1px dotted var(--rule);transition:color var(--fast) var(--ease),
    border-color var(--fast) var(--ease)}
.wholink:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* =========================================================================
   PODIUM
   ========================================================================= */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end}
.pod{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface-2);
  padding:18px 14px;text-align:center;position:relative;overflow:hidden;
  transition:box-shadow var(--med) var(--ease),transform var(--med) var(--ease)}
.pod .rank{position:absolute;top:10px;left:12px;font-size:11px;font-weight:800;color:var(--ink-soft)}
.pod .hrs{font-size:27px;font-weight:720;letter-spacing:-.045em;margin-top:10px}
.pod .nm2{font-size:13.5px;font-weight:650;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .sub2{font-size:11.5px;color:var(--ink-soft)}
.pod .av{margin:0 auto}
.pod.p1{background:linear-gradient(180deg,#FFF6E9,#FFFFFF);border-color:#EBD9B4;
  padding-top:26px;padding-bottom:26px;box-shadow:var(--sh-2)}
.pod.p1::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#E3B657,#C08A2E)}
.pod.p2{background:linear-gradient(180deg,#F5F7F9,#FFFFFF)}
.pod.p3{background:linear-gradient(180deg,#FAF3ED,#FFFFFF)}

/* =========================================================================
   LIVE STRIP
   ========================================================================= */
.livestrip{display:flex;gap:11px;flex-wrap:wrap}
.livecard{display:flex;align-items:center;gap:11px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--surface-2);padding:11px 15px 11px 12px;min-width:222px;
  transition:box-shadow var(--med) var(--ease)}
.livecard:hover{box-shadow:var(--sh-2)}
.livecard.self{border-color:#BEE3D3;background:var(--good-wash)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;
  animation:pulse 1.9s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.livecard .t{font-size:17px;font-weight:720;letter-spacing:-.035em;line-height:1.1}
.livecard .s{font-size:11.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:180px}

/* =========================================================================
   PROGRESS LANES — the track motif, doing real work
   ========================================================================= */
.rail{display:flex;flex-direction:column;gap:10px}
.rowbar{display:grid;grid-template-columns:180px 1fr 100px;gap:12px;align-items:center;font-size:12.5px}
.rowbar .track{background:var(--surface-3);border-radius:999px;height:22px;position:relative;
  overflow:hidden;border:1px solid var(--rule-soft)}
/* the lane line down the middle of an empty track */
.rowbar .track::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1px;
  transform:translateY(-.5px);
  background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 13px);opacity:.75}
.rowbar .fill{height:100%;border-radius:999px;position:relative;z-index:1;
  transition:width .5s var(--ease)}
.rowbar .val{text-align:right;font-weight:700}

/* =========================================================================
   TIMER
   ========================================================================= */
.timer{text-align:center;padding:6px 0 2px}
.tdisp{font-size:58px;font-weight:720;letter-spacing:-.055em;line-height:1;color:var(--ink)}
.tdisp.run{color:var(--good)}
.tsub{font-size:12.5px;color:var(--ink-soft);margin-top:9px;min-height:19px}
.tbtns{display:flex;gap:10px;justify-content:center;margin-top:17px;flex-wrap:wrap}

/* =========================================================================
   ENTRIES
   ========================================================================= */
.entry{padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:13px}
.entry:last-child{border-bottom:0}
.entry .top{display:grid;grid-template-columns:1fr 78px auto;gap:10px;align-items:baseline}
.entry .acts{display:flex;gap:1px;justify-content:flex-end}
.entry .enote{margin-top:6px;font-size:12.5px;color:var(--ink-mid);background:var(--surface-2);
  border-left:2px solid var(--rule);padding:8px 12px;border-radius:0 var(--r-xs) var(--r-xs) 0;
  white-space:pre-wrap}
.x{appearance:none;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;
  font-size:16px;line-height:1;padding:4px 7px;border-radius:var(--r-xs);
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease)}
.x:hover{color:var(--loss);background:var(--loss-wash)}
/* the pencil is a fix, not a removal — it must not read as the delete button */
.x.pencil{font-size:14px}
.x.pencil:hover{color:var(--navy);background:var(--surface-3)}
.empty{color:var(--ink-soft);font-size:13px;padding:22px;text-align:center;
  border:1px dashed var(--rule);border-radius:var(--r);background:var(--surface-2)}

/* =========================================================================
   CALENDAR HEATMAP
   ========================================================================= */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;max-width:660px}
.calhd{font-size:11px;color:var(--ink-soft);text-align:center;padding-bottom:3px;font-weight:600}
.hmcell{aspect-ratio:1.2;border-radius:var(--r-xs);background:var(--none);cursor:pointer;
  position:relative;border:1px solid rgba(16,22,32,.06);padding:5px 7px;overflow:hidden;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.hmcell:hover{transform:scale(1.07);box-shadow:var(--sh-2);z-index:2}
.hmcell .dn{font-size:10.5px;color:rgba(16,22,32,.5);line-height:1;font-weight:600}
.hmcell .hv{position:absolute;left:7px;bottom:6px;font-size:12.5px;font-weight:750;
  color:rgba(16,22,32,.82);line-height:1}
.hmcell.today{box-shadow:0 0 0 2px var(--ink)}
.hmcell.future{background:var(--surface-2);border-style:dashed}
.legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:12px;
  color:var(--ink-mid);margin-top:14px}
.sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* =========================================================================
   NOTES + SECTIONS
   ========================================================================= */
.note{font-size:12.5px;color:var(--ink-mid);background:var(--warn-wash);border:1px solid #F0E0BC;
  border-left:3px solid #D9A441;padding:12px 15px;border-radius:var(--r-xs)}
.note.bad{background:var(--loss-wash);border-color:#F2CBC6;border-left-color:var(--loss)}
.note.ok{background:var(--good-wash);border-color:#C3E4D6;border-left-color:var(--good)}
h3.sec{font-size:11.5px;color:var(--ink-soft);font-weight:700;margin:0 0 10px;
  text-transform:uppercase;letter-spacing:.06em}
.daygroup{font-size:11.5px;font-weight:650;color:var(--ink-mid);background:var(--surface-2);
  padding:7px 18px;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.itemrow{display:grid;grid-template-columns:14px 1fr auto;gap:11px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--rule-soft);transition:background var(--fast) var(--ease)}
.itemrow:last-child{border-bottom:0}
.swatch{width:12px;height:12px;border-radius:4px;flex:none}
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--rule);color:var(--ink-soft);font-size:12px}

/* =========================================================================
   AUTH + ONBOARDING
   ========================================================================= */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:26px;
  background:
    radial-gradient(1000px 560px at 18% -10%, rgba(255,122,77,.20), transparent 60%),
    radial-gradient(820px 520px at 92% 110%, rgba(43,97,119,.34), transparent 58%),
    var(--ink);
  position:relative;overflow:hidden}
/* faint concentric lanes behind the card */
.authwrap::before{
  content:"";position:absolute;width:1100px;height:1100px;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.06;
  background:repeating-radial-gradient(circle,transparent 0 62px,#fff 62px 63px);
}
.authbox{width:100%;max-width:440px;background:var(--surface);border-radius:18px;
  padding:34px 32px;box-shadow:var(--sh-4);position:relative}
.authbrand{display:flex;align-items:center;gap:10px;margin-bottom:20px;
  font-size:13px;font-weight:700;color:var(--ink-mid)}
.authbrand .logo{width:28px;height:28px;border-radius:9px}
.authbox h1{font-size:26px;margin-bottom:6px;letter-spacing:-.032em}
.authbox p.lede{color:var(--ink-mid);font-size:13.5px;margin:0 0 24px}
.field{margin-bottom:15px}
.msg{font-size:12.5px;padding:11px 14px;border-radius:var(--r-sm);margin-bottom:15px;line-height:1.5}
.msg.err{background:var(--loss-wash);color:#8E2C20;border:1px solid #F2CBC6}
.msg.ok{background:var(--good-wash);color:#0D6647;border:1px solid #C3E4D6}
.switch{margin-top:18px;font-size:13px;color:var(--ink-mid);text-align:center}
.switch button{background:none;border:0;color:var(--accent-ink);font:inherit;font-weight:700;
  cursor:pointer;padding:0}
.switch button:hover{text-decoration:underline}
.steps{display:flex;gap:6px;margin-bottom:22px}
.steps i{height:4px;flex:1;background:var(--rule);border-radius:999px;font-style:normal;
  transition:background var(--med) var(--ease)}
.steps i.on{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.obwrap{max-width:780px;margin:0 auto;padding:32px 26px 70px}

/* =========================================================================
   MODALS + OVERLAYS
   ========================================================================= */
.ov{position:fixed;inset:0;background:rgba(10,14,20,.52);display:none;z-index:80;
  align-items:center;justify-content:center;padding:22px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ov.on{display:flex;animation:ovin .16s var(--ease)}
@keyframes ovin{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:16px;max-width:540px;width:100%;max-height:88vh;
  overflow:auto;box-shadow:var(--sh-4);animation:mdin .22s var(--ease)}
@keyframes mdin{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal>header{padding:18px 22px 16px;border-bottom:1px solid var(--rule-soft);display:flex;
  justify-content:space-between;align-items:flex-start;gap:14px;position:sticky;top:0;
  background:var(--surface);z-index:3;border-radius:16px 16px 0 0}
.modal .body{padding:20px 22px 24px}

/* profile view */
.profilemodal{max-width:880px}
.pfhead{display:flex;align-items:center;gap:17px;min-width:0}
.pfid{min-width:0}
.pfid h2{font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pfmeta{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
.pilltag{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--accent-wash);color:var(--accent-ink);border:1px solid #F7C9BC;
  padding:3px 9px;border-radius:999px}
.pflog{border:1px solid var(--rule-soft);border-radius:var(--r);overflow:hidden;
  max-height:46vh;overflow-y:auto}
.pflog .daygroup{position:sticky;top:0;z-index:1}
.pflog .daygroup:first-child{border-top:0}

/* =========================================================================
   TOOLTIP / TOAST / SPINNER
   ========================================================================= */
.tt{position:fixed;pointer-events:none;z-index:99;background:var(--ink);color:#fff;
  padding:10px 13px;border-radius:var(--r-xs);font-size:12px;line-height:1.45;opacity:0;
  transition:opacity .1s;max-width:280px;box-shadow:var(--sh-3)}
.tt.on{opacity:1}
.tt b{display:block;margin-bottom:3px}
.tt em{font-style:normal;color:#9AA6B6}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);
  color:#fff;padding:12px 20px;border-radius:999px;font-size:13px;font-weight:600;z-index:120;
  opacity:0;pointer-events:none;transition:opacity var(--med),transform var(--med);
  box-shadow:var(--sh-3)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-5px)}
.spin{width:34px;height:34px;border:3px solid var(--rule);border-top-color:var(--accent);
  border-radius:50%;animation:sp .8s linear infinite;margin:56px auto}
@keyframes sp{to{transform:rotate(360deg)}}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2,.gHome{grid-template-columns:1fr}
  .wrap{padding:0 18px}
}
@media (max-width:760px){
  .mast{gap:12px}
  .brandtext p{display:none}
}
@media (max-width:620px){
  .g4{grid-template-columns:1fr}
  .rowbar{grid-template-columns:112px 1fr 80px}
  .tdisp{font-size:46px}
  .podium{grid-template-columns:1fr}
  .authbox{padding:26px 22px}
  .pfid h2{font-size:19px}
  .meblock .nm,.meblock .sm{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* =========================================================================
   RUNNING-SESSION PILL
   Follows you around the app while a timer is going, so you never lose the
   thread of it. Hidden on Today, where the real timer is already on screen.
   ========================================================================= */
.nowpill{
  position:fixed; right:22px; bottom:22px; z-index:110;
  display:flex; align-items:stretch; gap:0;
  background:var(--ink); color:#fff; border-radius:999px;
  box-shadow:0 6px 18px rgba(9,13,20,.28), 0 18px 44px rgba(9,13,20,.28);
  border:1px solid rgba(255,255,255,.10);
  animation:pillin .3s var(--ease);
  max-width:min(440px, calc(100vw - 44px));
}
@keyframes pillin{
  from{opacity:0;transform:translateY(14px) scale(.96)}
  to{opacity:1;transform:none}
}
.nowpill.paused{background:#26303B}

.np-main{
  appearance:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:10px 6px 10px 15px;min-width:0;
  border-radius:999px 0 0 999px;transition:background var(--fast) var(--ease);
}
.np-main:hover{background:rgba(255,255,255,.07)}
.np-dot{width:8px;height:8px;border-radius:50%;background:var(--l4);flex:none;
  animation:pulse 1.9s var(--ease) infinite}
.nowpill.paused .np-dot{background:#8B94A3;animation:none}
.np-time{font-size:15px;font-weight:720;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  flex:none}
.np-label{font-size:12px;color:#9AA6B6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0}

.np-sep{width:1px;background:rgba(255,255,255,.12);margin:9px 4px}

.np-btn{
  appearance:none;border:0;background:transparent;color:#C9D2E0;font:inherit;font-size:12.5px;
  font-weight:650;cursor:pointer;padding:10px 13px;white-space:nowrap;
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.np-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.np-fin{border-radius:0 999px 999px 0;padding-right:17px;color:#FFB9A4}
.np-fin:hover{background:var(--accent);color:#fff}
.np-btn:focus-visible,.np-main:focus-visible{outline:none;
  box-shadow:inset 0 0 0 2px var(--accent-2)}

/* the toast sits bottom-centre; on narrow screens keep them off each other */
@media (max-width:620px){
  .nowpill{right:12px;left:12px;bottom:14px;max-width:none}
  .np-label{display:none}
  .toast{bottom:78px}
}

/* =========================================================================
   THE CHAIN / HEATMAP LAYOUT
   Was an inline 660px column, which forced the whole page to scroll sideways
   on anything narrower than a laptop.
   ========================================================================= */
.chainwrap{display:grid;grid-template-columns:minmax(0,660px) 1fr;gap:28px;align-items:start}
.h2hpick select{width:auto;min-width:150px}
.h2hpick .vs{color:var(--ink-soft);font-size:12.5px}
.scrollx{overflow-x:auto}

/* =========================================================================
   TOUCH DEVICES
   Hover effects that move things are unpleasant when they latch on tap.
   ========================================================================= */
@media (hover:none){
  .card:hover,.kpi:hover,.livecard:hover{box-shadow:var(--sh-1);transform:none}
  .kpi:hover::before{opacity:0}
  .hmcell:hover{transform:none;box-shadow:none}
  .pod.person:hover,.nowav:hover{transform:none}
  .who.person:hover{background:transparent}
  .who.person:active{background:rgba(232,64,42,.10)}
  .btn:hover{box-shadow:none}
}

/* =========================================================================
   PHONES AND SMALL TABLETS
   ========================================================================= */
@media (max-width:860px){
  /* iOS zooms the page when you focus anything under 16px. Everything the
     thumb lands in gets bumped; the labels above them stay small. */
  /* !important because several of these carry an inline font-size from the
     markup that generates them, and anything under 16px makes iOS zoom the
     whole page the moment you tap into it. */
  select,input[type=text],input[type=email],input[type=password],
  input[type=number],input[type=date],textarea{font-size:16px !important;padding:11px 13px}
  select{padding-right:36px}
  button.btn{padding:11px 18px;min-height:44px}
  button.btn.sm{padding:9px 13px;min-height:38px}
  .chip{padding:9px 15px;min-height:38px}
  .x{padding:8px 10px;font-size:18px}
}

@media (max-width:760px){
  .chainwrap{grid-template-columns:1fr;gap:22px}
  .cal{max-width:none}
  /* the live count comes back, just without the word */
  .nowbar{display:none}
  .nowbar.on{display:flex;padding:4px 10px 4px 9px;gap:7px}
  .nowword{display:none}
  .nowlabel b{font-size:12px;font-weight:700;color:#fff}
}

@media (max-width:640px){
  .wrap{padding:0 14px}
  main{padding:18px 0 96px}          /* room for the session pill */
  .card .body{padding:16px}
  .card>header{padding:14px 16px 12px}
  .grid{gap:12px}
  .mb16{margin-bottom:12px}

  /* ---- header: one row for the brand and the controls, one for the tabs ---- */
  header.top{padding:10px 0 0}
  .mast{flex-wrap:nowrap;gap:10px}
  .brand{gap:9px;flex:1 1 auto;min-width:0}
  .logo{width:30px;height:30px;border-radius:9px}
  /* never let the wordmark wrap when the live bubble grows; truncate instead */
  .brandtext{overflow:hidden}
  .brandtext h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brandtext p,.crewchip{display:none}
  #signout{padding:9px 12px;font-size:12.5px}
  .mastright{gap:8px;flex:0 0 auto;flex-wrap:nowrap}
  .meblock{padding:3px;margin:0;gap:0}
  .av.lg{width:34px;height:34px;font-size:12.5px}
  nav.tabs{margin-top:10px;gap:0}
  nav.tabs button{padding:9px 12px 11px;font-size:13px;flex:1 0 auto}
  nav.tabs button::after{left:10px;right:10px}

  /* ---- any inline multi-column form grid collapses to one column ---- */
  .card .body .grid[style*="grid-template-columns"],
  .modal .body .grid[style*="grid-template-columns"],
  .obwrap .grid[style*="grid-template-columns"]{grid-template-columns:1fr !important}
  /* except the weekday goals, which stay a grid — just a squarer one */
  #ob-wk,#s-wk{grid-template-columns:repeat(4,1fr) !important}
  #ob-wk input,#s-wk input{font-size:15px;padding:9px 4px}

  /* ---- progress lanes: label above, bar and figure below ---- */
  .rowbar{display:flex !important;flex-wrap:wrap;align-items:center;gap:5px 10px}
  .rowbar>*:first-child{flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .rowbar .track{flex:1 1 auto;min-width:80px}
  .rowbar .val{flex:0 0 auto;margin-left:auto}

  /* ---- leaderboard: keep the columns that decide anything ---- */
  #lbtbl th:nth-child(4),#lbtbl td:nth-child(4),
  #lbtbl th:nth-child(5),#lbtbl td:nth-child(5),
  #lbtbl th:nth-child(6),#lbtbl td:nth-child(6){display:none}
  th,td{padding:10px 8px}
  .tblwrap{max-height:none}

  /* ---- podium stays three across, just smaller ---- */
  .podium{grid-template-columns:repeat(3,1fr);gap:8px}
  .pod{padding:12px 6px}
  .pod.p1{padding:16px 6px}
  .pod .av.xl{width:44px;height:44px;font-size:16px;border-width:2px}
  .pod .av.lg{width:38px;height:38px;font-size:13px}
  .pod .hrs{font-size:19px;margin-top:7px}
  .pod .nm2{font-size:11.5px}
  .pod .sub2{display:none}
  .pod .rank{top:6px;left:7px;font-size:10px}

  /* ---- the wide charts scroll rather than shrink to nothing ---- */
  .scrollx svg{min-width:520px}

  /* ---- head to head ---- */
  .h2hpick{width:100%}
  .h2hpick select{flex:1 1 40%;min-width:0;width:auto}

  /* ---- live strip: full width cards ---- */
  .livecard{min-width:0;width:100%}
  .livecard .s{max-width:none}

  /* ---- areas modal rows: name on its own line, numbers under it ---- */
  #ma-list .itemrow{display:flex !important;flex-wrap:wrap;align-items:center;gap:8px}
  #ma-list .itemrow>.swatch{order:1}
  #ma-list .itemrow>[data-aname]{order:2;flex:1 1 auto;min-width:0}
  #ma-list .itemrow>[data-atgt],#ma-list .itemrow>[data-apct]{order:4;flex:1 1 0;min-width:0}
  #ma-list .itemrow>.x{order:3;margin-left:auto}

  /* ---- other generated rows ---- */
  .itemrow[style*="grid-template-columns"]{grid-template-columns:auto 1fr auto !important;
    gap:9px !important}
  .entry .top{grid-template-columns:1fr 62px auto}
  .entry .acts{gap:0}

  /* ---- modals use the full sheet ---- */
  .ov{padding:0;align-items:flex-end}
  .modal{max-width:none;border-radius:16px 16px 0 0;max-height:92dvh}
  .modal>header{border-radius:16px 16px 0 0;padding:16px 16px 14px}
  .modal .body{padding:16px 16px 22px}
  .profilemodal{max-width:none}
  .pflog{max-height:none}
  #pk-list{max-height:none}

  /* ---- timer ---- */
  .tdisp{font-size:52px}
  .tbtns{gap:8px}
  .tbtns .btn{flex:1 1 44%}
  .btn.go,.btn.stop{font-size:15px;padding:13px 18px}

  /* ---- heatmap cells stay tappable ---- */
  .hmcell{aspect-ratio:1;padding:4px 5px}
  .hmcell .hv{font-size:11.5px;left:5px;bottom:4px}
  .hmcell .dn{font-size:10px}

  /* ---- onboarding ---- */
  .obwrap{padding:22px 14px 60px}

  /* ---- the session pill, clear of the home indicator ---- */
  .nowpill{right:10px;left:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* very narrow phones */
@media (max-width:380px){
  .brandtext h1{font-size:15px}
  nav.tabs button{padding:9px 9px 11px;font-size:12.5px}
  .tdisp{font-size:44px}
  .pod .nm2{font-size:11px}
}

/* mobile browser chrome makes 100vh taller than the visible page */
@supports (height:100dvh){
  .authwrap{min-height:100dvh}
  .modal{max-height:88dvh}
}

/* the profile modal's own actions */
.pfacts{display:flex;align-items:center;gap:8px;flex:none}

@media (max-width:640px){
  /* Sign out lives in your profile on phones — tap your avatar. That buys the
     wordmark back the space the live bubble needs. */
  #signout{display:none}
}

/* ---------- study reminders ---------- */
#s-remgrid{display:grid;grid-template-columns:auto 140px 1fr;gap:16px;align-items:end}
#s-remdays{display:flex;gap:6px;flex-wrap:wrap}
#s-remdays .chip{padding:6px 11px;font-size:12px}
@media (max-width:760px){
  #s-remgrid{grid-template-columns:1fr;gap:14px}
}

/* ---------- the in-app nudge ----------
   The one reminder channel no policy can switch off, because it is not a
   notification at all — it is the page telling you where you stand. */
#nudgebar{display:flex;align-items:center;gap:13px;margin:0 0 16px;padding:12px 15px;
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--ink-soft);
  border-radius:var(--r);box-shadow:var(--sh-1)}
#nudgebar.due{border-left-color:var(--accent);background:var(--accent-wash);border-color:#F6D3C8}
#nudgebar .nb-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-soft);flex:none}
#nudgebar.due .nb-dot{background:var(--accent);animation:nbpulse 2.4s var(--ease) infinite}
#nudgebar .nb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
#nudgebar .nb-text strong{font-size:13.5px;color:var(--ink)}
#nudgebar .nb-text span{font-size:12.5px;color:var(--ink-mid)}
@keyframes nbpulse{0%,100%{opacity:1}50%{opacity:.35}}

#s-calblock{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.s-calhead{font-weight:600;font-size:13.5px;margin-bottom:4px}
.s-calrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.s-calrow input{flex:1;min-width:210px;font-size:12px;font-family:var(--mono,ui-monospace,monospace);
  color:var(--ink-mid);background:var(--surface-2)}

@media (max-width:640px){
  #nudgebar{flex-wrap:wrap;gap:10px}
  #nudgebar .nb-text{flex-basis:100%;order:-1}
}
@media (prefers-reduced-motion:reduce){
  #nudgebar.due .nb-dot{animation:none}
}

/* ---------- a nudge from one of the crew ----------
   Louder than the self-nudge bar on purpose: somebody actually went and
   pressed a button about you. It never auto-dismisses. */
#pokebar{display:flex;align-items:center;gap:13px;margin:0 0 12px;padding:12px 15px;
  background:var(--accent-wash);border:1px solid #F6D3C8;border-left:3px solid var(--accent);
  border-radius:var(--r);box-shadow:var(--sh-1)}
#pokebar .pb-icon{font-size:19px;line-height:1;flex:none}
#pokebar .pb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
#pokebar .pb-text strong{font-size:13.5px;color:var(--ink)}
#pokebar .pb-text span{font-size:12.5px;color:var(--ink-mid)}

@media (max-width:640px){
  #pokebar{flex-wrap:wrap;gap:10px}
  #pokebar .pb-text{flex-basis:100%;order:-1}
}

/* ---- leaderboard filters ---------------------------------------------- */
#lbfilters{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:12px;align-items:end;margin-bottom:14px}
#lbfilters select{width:100%}
.lbnote{margin:-4px 0 14px;padding:9px 11px;border-radius:3px;
  background:var(--surface-2);border:1px solid var(--rule-soft);
  font-size:12px;line-height:1.5;color:var(--ink-mid)}
.lbnote b{color:var(--ink);font-weight:600}
@media (max-width:620px){#lbfilters{grid-template-columns:1fr}}

/* ---- chat ------------------------------------------------------------- */
/* The hours beside a name come from the rollup this client already holds, so
   the whole badge costs nothing to show. Tiers use the app's existing ramp
   rather than a new set of colours to learn. */
.tabdot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:6px;vertical-align:middle}

.chatwrap{display:flex;flex-direction:column;min-height:0}
.chatolder{padding:10px 16px 0;text-align:center}
/* Deliberately not smooth: this element is jumped to the bottom on open and on
   every new message, and animating that means scrolling through fifty messages
   each time — and an animation that gets interrupted by the next repaint never
   arrives at all. The one place smooth belongs is the "new messages" button,
   which asks for it explicitly. */
.chatlog{padding:8px 16px 4px;overflow-y:auto;height:min(58vh,560px);
  display:flex;flex-direction:column;gap:2px}
.chatnew{position:relative;height:0;text-align:center}
.chatnew .btn{position:relative;top:-14px;box-shadow:var(--sh-2)}

.msg{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:6px 0;align-items:start}
.msg + .msg.cont{padding-top:0}
.msg.cont .av,.msg.cont .msghead{visibility:hidden;height:0;overflow:hidden;margin:0}
/* not .body — the card rule .card .body is a descendant selector and would
   put twenty pixels of padding round every message */
.msgbody{min-width:0}
.msghead{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:1px}
.msgwho{font-weight:650;font-size:13px;cursor:pointer}
.msgwho:hover{text-decoration:underline}
.msgtime{font-size:11px;color:var(--ink-soft)}
.msgtext{font-size:13.5px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.msg.mine .msgtext{color:var(--ink)}
.msgdel{border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:12px;
  opacity:0;transition:opacity var(--fast)}
.msg:hover .msgdel{opacity:1}
.msgdel:hover{color:var(--loss)}

/* the hours pill: nothing at all on zero, so a quiet morning looks clean */
.hrpill{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:1px 6px;
  border-radius:999px;color:#fff;white-space:nowrap}
.t1{background:var(--l3)} .t2{background:var(--l4)} .t3{background:var(--l5)}
.t4{background:var(--gold);box-shadow:0 0 0 2px var(--warn-wash)}
.msg .av.t4ring{box-shadow:0 0 0 2px var(--gold)}

.chatbox{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;
  border-top:1px solid var(--rule-soft)}
.chatbox textarea{flex:1;resize:none;min-height:40px;max-height:140px;line-height:1.45}
.chatsend{display:flex;align-items:center;gap:10px}
.chatcount{font-size:11px;color:var(--ink-soft);min-width:34px;text-align:right}
.chatcount.near{color:var(--accent-ink);font-weight:600}
.chatnote{padding:0 16px 12px;font-size:12px;color:var(--loss)}
.chatkey{font-size:11.5px;color:var(--ink-soft)}
.chatempty{text-align:center;color:var(--ink-soft);font-size:13px;padding:28px 10px}
@media (max-width:620px){.chatlog{height:min(52vh,420px)}}

/* ---- admin announcements ----------------------------------------------
   The room is light and chatty; this is dark, squared off and edged in gold,
   so it reads as a notice pinned to the wall rather than somebody talking.
   Strong but calm on purpose: nothing here animates, because it has to hold
   its authority on the fortieth read as well as the first.
   ------------------------------------------------------------------------ */
.ann{
  --ann-gold:#E9C26A;
  margin:14px 0;
  padding:14px 17px 15px;
  border:1px solid rgba(233,194,106,.45);
  border-left:4px solid var(--ann-gold);
  border-radius:var(--r-sm);
  background:linear-gradient(180deg,#1C2330 0%,#141A24 100%);
  box-shadow:var(--sh-2);
}
.ann-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ann-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;line-height:1;
  text-transform:uppercase;letter-spacing:.17em;
  color:var(--ann-gold);
}
.ann-badge .fi{font-size:9.5px;font-style:normal;letter-spacing:0}
.ann-time{margin-left:auto;font-size:11px;color:#8792A3;font-variant-numeric:tabular-nums}
.ann-text{
  font-size:14.5px;line-height:1.6;color:#F2F5FA;font-weight:500;
  white-space:pre-wrap;word-break:break-word;
}
.ann-text .mention{background:rgba(233,194,106,.16);color:var(--ann-gold)}
/* "this is you" keeps its emphasis but not the app's red, which on this slab
   fights the gold rather than reading as a highlight */
.ann-text .mention.me{background:var(--ann-gold);color:#141A24}
.ann-del{
  border:0;background:none;color:#8792A3;cursor:pointer;font-size:12px;
  opacity:0;transition:opacity var(--fast);padding:0;
}
.ann:hover .ann-del,.ann-del:focus-visible{opacity:1}
.ann-del:hover{color:#FF8D78}
@media (max-width:620px){
  .ann{padding:13px 14px 12px;margin:12px 0}
  .ann-text{font-size:14px}
}

/* ---- subject picker rows ---------------------------------------------- */
/* The whole row is the target. Most of this is used on a phone, where a small
   button on the end of a three-line row is a fiddly thing to hit. */
.pkrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--rule-soft);border-radius:var(--r-xs);
  margin-bottom:6px;cursor:pointer;background:var(--surface);
  transition:border-color var(--fast),background var(--fast)}
.pkrow:hover{border-color:var(--ink-mid);background:var(--surface-2)}
.pkrow:focus-visible{outline:2px solid var(--ink-mid);outline-offset:2px}
.pkrow .pktick{font-size:12px;font-weight:650;color:var(--ink-mid);white-space:nowrap}
.pkrow.picked{cursor:default;background:var(--good-wash);border-color:transparent}
.pkrow.picked:hover{border-color:transparent;background:var(--good-wash)}
.pkrow.picked .pktick{color:var(--good)}
.pkrow.picked strong{color:var(--ink-mid)}
.pkfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-soft)}

/* ---- sign in / create account ----------------------------------------- */
.authseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:16px;
  background:var(--surface-3);border-radius:var(--r-sm)}
.authseg button{border:0;background:none;padding:9px 10px;border-radius:var(--r-xs);
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-mid);cursor:pointer;
  transition:background var(--fast),color var(--fast),box-shadow var(--fast)}
.authseg button:hover{color:var(--ink)}
.authseg button[aria-selected="true"]{background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-1)}

/* ---- class-time warning -----------------------------------------------
   Deliberately the loudest thing on Today, and deliberately temporary. The
   hazard tape, the shaking signs and the shouting are the point: this is a
   notice you are meant to read once rather than live with, which is why it
   takes itself off the page at 3:15pm and stays off.
   ------------------------------------------------------------------------ */
.classwarn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:18px;
  padding:22px 24px;
  border:3px solid #7E1109; border-radius:var(--r);
  background:linear-gradient(135deg,#C81C15 0%,#E8402A 55%,#FF5F3F 100%);
  color:#fff;
  box-shadow:0 14px 34px -14px rgba(176,43,24,.8), inset 0 1px 0 rgba(255,255,255,.22);
}
/* hazard tape, top and bottom */
.classwarn::before,.classwarn::after{
  content:""; position:absolute; left:0; right:0; height:8px;
  background:repeating-linear-gradient(135deg,#FFD23F 0 13px,#1A1A1A 13px 26px);
}
.classwarn::before{top:0}
.classwarn::after{bottom:0}
.cw-sign{
  flex:0 0 auto; font-size:46px; line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
  animation:cwshake 1.1s var(--ease) infinite;
}
.cw-sign-r{animation-delay:.55s}
.cw-text{flex:1 1 auto; text-align:center; padding:6px 0}
.cw-head{
  font-size:clamp(19px,3.2vw,32px); font-weight:800; line-height:1.12;
  letter-spacing:-.021em; text-shadow:0 2px 0 rgba(0,0,0,.2);
}
.cw-shout{
  margin-top:3px;
  font-size:clamp(23px,4.4vw,44px); font-weight:800; line-height:1.05;
  text-transform:uppercase; letter-spacing:.01em;
  color:#FFE28A; text-shadow:0 3px 0 rgba(0,0,0,.28);
}
.cw-fine{
  margin-top:9px; font-size:11.5px; font-weight:650;
  text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.85);
}
@keyframes cwshake{
  0%,100%{transform:rotate(-9deg) scale(1)}
  50%    {transform:rotate(9deg)  scale(1.09)}
}
@media (max-width:640px){
  .classwarn{gap:11px;padding:20px 14px}
  .cw-sign{font-size:30px}
  .cw-sign-r{display:none}
  .cw-fine{letter-spacing:.04em}
}

/* ---- countdown -------------------------------------------------------- */
.countdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.cdcard{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--sh-1)}
.cdnum{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.cdunit{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.06em;margin-top:3px}
.cdwhat{font-size:13.5px;font-weight:650;color:var(--ink)}
.cdwhen{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.cdcard.near{border-color:var(--accent);background:var(--accent-wash)}
.cdcard.near .cdnum{color:var(--accent-ink)}
.cdcard.today .cdnum{font-size:22px}

/* ---- private mode ----------------------------------------------------- */
.privrow{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--rule-soft);cursor:pointer}
.privrow:last-of-type{border-bottom:0}
.privrow input{width:auto;margin:2px 0 0}
.privname{font-size:13.5px;font-weight:650;color:var(--ink)}
.privwhy{font-size:12px;line-height:1.55;color:var(--ink-mid);margin-top:3px}
.solonote{text-align:center;padding:34px 20px;color:var(--ink-soft);font-size:13px}
.solonote strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:6px}
/* with other people hidden, the Peloton page has nothing left to say */
#p-crew.solo > .card:not(.solocard), #p-crew.solo > .grid{display:none}
#p-home.solo #live-card{display:none}
/* the address under a name in the console */
.adm-mail{display:block;font-size:10.5px;font-weight:400;color:var(--a-ink-soft,#7A8290);
  letter-spacing:0;margin-top:1px}

/* ---- pictures and mentions in chat ------------------------------------ */
.chatbox{align-items:flex-end}
.chatfield{position:relative;flex:1;min-width:0}
.chatfield textarea{width:100%}
.chatattach{border:1px solid var(--rule);background:var(--surface);color:var(--ink-mid);
  border-radius:var(--r-xs);width:38px;height:38px;display:grid;place-items:center;
  cursor:pointer;flex:none;transition:border-color var(--fast),color var(--fast)}
.chatattach:hover{border-color:var(--ink-mid);color:var(--ink)}
.chatattach[disabled]{opacity:.45;cursor:default}

.chatpreview{display:flex;align-items:center;gap:12px;margin:0 16px;padding:10px 12px;
  border:1px solid var(--rule-soft);border-radius:var(--r-xs);background:var(--surface-2)}
.chatpreview img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-xs);flex:none}
.chatpreview .cp-meta{font-size:12px;color:var(--ink-mid);min-width:0;flex:1}
.chatpreview .cp-name{font-weight:600;color:var(--ink);word-break:break-all}

.msgimg{margin-top:5px;max-width:min(320px,100%);border-radius:var(--r-xs);
  border:1px solid var(--rule-soft);display:block;cursor:zoom-in;background:var(--surface-2)}
.msgimg.pending{filter:grayscale(1) opacity(.5)}

.mention{background:var(--accent-wash);color:var(--accent-ink);font-weight:650;
  border-radius:3px;padding:0 3px}
.mention.me{background:var(--accent);color:#fff}

.mentionbox{position:absolute;bottom:calc(100% + 6px);left:0;right:0;z-index:40;
  max-height:210px;overflow:auto;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-xs);box-shadow:var(--sh-3);padding:4px}
.mentionbox button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
  padding:7px 9px;border-radius:var(--r-xs);cursor:pointer;font:inherit;font-size:13px;
  color:var(--ink);text-align:left}
.mentionbox button:hover,.mentionbox button[aria-selected="true"]{background:var(--surface-3)}
.mentionbox .mh{font-size:11px;color:var(--ink-soft);padding:6px 9px 3px}

/* the full-size view when a picture is tapped */
.imgview{position:fixed;inset:0;z-index:120;background:rgba(9,13,20,.88);display:grid;
  place-items:center;padding:24px}
.imgview img{max-width:100%;max-height:100%;border-radius:var(--r-xs);box-shadow:var(--sh-4)}
.imgview .x{position:absolute;top:16px;right:20px;font-size:30px;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer}