/* Reps: the shared stylesheet ("Notebook", signed off 2026-09-28, design/notebook/notebook.html).
 *
 * Warm monochrome paper, ink-black actions, hairline structure, washed pastels
 * only where they mean something (a mode, a status).
 *
 * Fonts: pages link them in <head> (faster than @import):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 *   Newsreader = headings (.serif), Instrument Sans = body, JetBrains Mono = numbers (.mono).
 *
 * Tokens (light on :root; dark follows the system, or [data-theme] on <html> forces one):
 *   --bg page, --surface panels, --surface-2 hover/quiet panels, --surface-3 selected
 *   --line hairlines, --line-2 stronger borders
 *   --ink body text, --ink-strong headings/numbers, --ink-2 secondary, --ink-3 captions
 *   --btn / --btn-hover / --btn-ink   the black (white in dark) primary button
 *   --red --blue --green --yellow --purple --orange   pastel pairs: text colour + *-bg
 *   --alert   the one loud red (unread dots, late timers)
 *   --you / --you-ink   your own chat bubbles; --ph-a/b/c photo placeholders
 *   --scrim   the dim behind dialogs (stays dark in dark mode)
 * Pastels are set per element with --pbg (background) and --pc (colour), e.g.
 *   style="--pbg:var(--green-bg);--pc:var(--green)"  or the .p-* helpers below.
 * Mode colours: sim blue · greenlight green · setscene purple · makehimask red · offer yellow · quiz orange.
 */

:root{
  --bg:#fbfbfa; --surface:#ffffff; --surface-2:#f7f6f3; --surface-3:#efeeea;
  --line:#eaeaea; --line-2:#dcdbd7;
  --ink:#2f3437; --ink-strong:#191b1c; --ink-2:#55595c; --ink-3:#787774;
  --btn:#111111; --btn-hover:#333333; --btn-ink:#ffffff;
  --red:#9f2f2d; --red-bg:#fdebec;
  --blue:#1f6c9f; --blue-bg:#e1f3fe;
  --green:#346538; --green-bg:#edf3ec;
  --yellow:#956400; --yellow-bg:#fbf3db;
  --purple:#6b4a8a; --purple-bg:#f1eaf7;
  --orange:#9a5418; --orange-bg:#faebdd;
  --alert:#d44c47;
  /* chat: your own bubbles, and the soft photo placeholders (sim, drills, set review) */
  --you:#e1f3fe; --you-ink:#183b55;
  --ph-a:#d9d4cc; --ph-b:#c9b9a6; --ph-c:#b7c2c0;
  /* the dim behind a dialog: dark in both themes (--ink-strong turns near-white in dark) */
  --scrim:rgba(25,27,28,.28);
  /* mode colours as their own tokens, so shared widgets (trainingcal.js) can use them with a
     fallback on pages that don't load this file yet and have their own --blue/--green */
  --mode-sim:var(--blue); --mode-sim-bg:var(--blue-bg);
  --mode-greenlight:var(--green); --mode-greenlight-bg:var(--green-bg);
  --mode-setscene:var(--purple); --mode-setscene-bg:var(--purple-bg);
  --mode-makehimask:var(--red); --mode-makehimask-bg:var(--red-bg);
  --mode-offer:var(--yellow); --mode-offer-bg:var(--yellow-bg);
  --mode-quiz:var(--orange); --mode-quiz-bg:var(--orange-bg);
  --serif:'Newsreader',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --monof:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#191919; --surface:#202020; --surface-2:#252525; --surface-3:#2c2c2c;
    --line:#2f2f2f; --line-2:#3a3a3a;
    --ink:#e6e6e3; --ink-strong:#f3f3f1; --ink-2:#b9b8b4; --ink-3:#9b9a97;
    --btn:#ebebea; --btn-hover:#d6d6d4; --btn-ink:#191919;
    --red:#f0a09a; --red-bg:#3a2322;
    --blue:#8cc6ec; --blue-bg:#1d2f3c;
    --green:#9fcb9c; --green-bg:#223023;
    --yellow:#e6c26a; --yellow-bg:#352c16;
    --purple:#c9a9e6; --purple-bg:#2e2538;
    --orange:#eba874; --orange-bg:#3a2a1c;
    --alert:#ef6b62;
  --you:#1f3342; --you-ink:#d8ebf8;
  --ph-a:#3a3733; --ph-b:#4b4239; --ph-c:#36403e;
  --scrim:rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#191919; --surface:#202020; --surface-2:#252525; --surface-3:#2c2c2c;
  --line:#2f2f2f; --line-2:#3a3a3a;
  --ink:#e6e6e3; --ink-strong:#f3f3f1; --ink-2:#b9b8b4; --ink-3:#9b9a97;
  --btn:#ebebea; --btn-hover:#d6d6d4; --btn-ink:#191919;
  --red:#f0a09a; --red-bg:#3a2322;
  --blue:#8cc6ec; --blue-bg:#1d2f3c;
  --green:#9fcb9c; --green-bg:#223023;
  --yellow:#e6c26a; --yellow-bg:#352c16;
  --purple:#c9a9e6; --purple-bg:#2e2538;
  --orange:#eba874; --orange-bg:#3a2a1c;
  --alert:#ef6b62;
  --you:#1f3342; --you-ink:#d8ebf8;
  --ph-a:#3a3733; --ph-b:#4b4239; --ph-c:#36403e;
  --scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
.serif{font-family:var(--serif)}
.mono{font-family:var(--monof);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden],.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* pastel helpers: set --pbg/--pc on anything that reads them (.pill, .chip, .mic, .av, .status) */
.p-blue{--pbg:var(--blue-bg);--pc:var(--blue)}
.p-green{--pbg:var(--green-bg);--pc:var(--green)}
.p-purple{--pbg:var(--purple-bg);--pc:var(--purple)}
.p-red{--pbg:var(--red-bg);--pc:var(--red)}
.p-yellow{--pbg:var(--yellow-bg);--pc:var(--yellow)}
.p-orange{--pbg:var(--orange-bg);--pc:var(--orange)}
.p-grey{--pbg:var(--surface-3);--pc:var(--ink-2)}
/* modes */
.m-sim{--pbg:var(--blue-bg);--pc:var(--blue)}
.m-greenlight{--pbg:var(--green-bg);--pc:var(--green)}
.m-setscene{--pbg:var(--purple-bg);--pc:var(--purple)}
.m-makehimask{--pbg:var(--red-bg);--pc:var(--red)}
.m-offer{--pbg:var(--yellow-bg);--pc:var(--yellow)}
.m-quiz{--pbg:var(--orange-bg);--pc:var(--orange)}

/* ---------- page container + top bar ---------- */
.page{max-width:1140px;margin:0 auto;padding:0 40px 72px}
.topbar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink-strong);display:flex;align-items:center;gap:10px;text-decoration:none}
.brand i{width:9px;height:9px;border-radius:2px;background:var(--ink-strong);transform:rotate(45deg);display:block}
.who{display:flex;align-items:center;gap:18px;font-size:13.5px;min-width:0}
.who > span{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who b{color:var(--ink-strong);font-weight:600}
.icon-btn{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-2);color:var(--ink-strong)}
.icon-btn svg{width:16px;height:16px}

/* ---------- section titles ---------- */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;margin:52px 0 18px;gap:16px}
.sec-title h2{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:-.025em;color:var(--ink-strong);line-height:1.2}
.sec-title .aside{font-size:13px;color:var(--ink-3)}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-strong)}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 14px;border-radius:6px;font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none;transition:background .2s,transform .12s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn svg{width:15px;height:15px}
.btn-ink{background:var(--btn);color:var(--btn-ink)}
.btn-ink:hover{background:var(--btn-hover)}
.btn-line{border:1px solid var(--line-2);color:var(--ink-strong);background:var(--surface)}
.btn-line:hover{background:var(--surface-2)}
.btn-danger{background:var(--red);color:var(--surface)}
.btn-danger:hover{filter:brightness(.95)}
.btn-lg{height:40px;padding:0 10px 0 16px;font-size:14px}
.btn kbd{font-family:var(--monof);font-size:10.5px;font-weight:500;padding:1px 5px;border-radius:4px;border:1px solid color-mix(in srgb,var(--btn-ink) 30%,transparent);color:color-mix(in srgb,var(--btn-ink) 75%,transparent)}
.link{color:var(--ink-2);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.link:hover{color:var(--ink-strong);text-decoration-color:currentColor}

/* ---------- pills, chips, status, avatars ---------- */
.pill{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:var(--pbg,var(--surface-2));color:var(--pc,var(--ink-2));white-space:nowrap;line-height:1.5}
.chip{display:block;font-size:11px;font-weight:600;line-height:1.3;padding:3px 7px;border-radius:4px;background:var(--pbg);color:var(--pc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.inline{display:inline-block}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--pbg,var(--surface-2));color:var(--pc,var(--ink-2));white-space:nowrap}
.status svg{width:12px;height:12px}
.status.check{background:var(--btn);color:var(--btn-ink)}
.status.wait{--pbg:var(--yellow-bg);--pc:var(--yellow)}
.status.live{--pbg:var(--blue-bg);--pc:var(--blue)}
.status.ok{--pbg:var(--green-bg);--pc:var(--green)}
.score{font-size:13px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--green-bg);color:var(--green);white-space:nowrap}
.av{border-radius:999px;display:grid;place-items:center;font-weight:600;flex:none;color:var(--pc,var(--ink-2));background:var(--pbg,var(--surface-3));width:36px;height:36px;font-size:13px}
.av-xs{width:20px;height:20px;font-size:10px}
.av-sm{width:30px;height:30px;font-size:11px}
.mic{width:34px;height:34px;border-radius:7px;background:var(--pbg);color:var(--pc);display:grid;place-items:center;flex:none}
.mic svg{width:18px;height:18px}

/* ---------- panels ---------- */
.panel{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.panel-quiet{border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.panel-pad{padding:22px 24px}
.empty{border:1px dashed var(--line-2);border-radius:12px;padding:28px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ---------- checklist rows (the Today list) ---------- */
.tasks{list-style:none;border-top:1px solid var(--line)}
.task{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--line)}
.box{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;align-self:start;margin-top:2px}
.task.next .box{border-color:var(--ink-strong)}
.t-lbl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:2px}
.t-title{font-weight:600;font-size:15.5px;color:var(--ink-strong);line-height:1.35}
.task.next .t-title{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.015em}
.t-meta{font-size:13px;color:var(--ink-2);margin-top:2px}
.t-meta b{font-weight:600;color:var(--ink-strong)}
.slip{display:inline-block;font-size:12px;padding:0 6px;border-radius:4px;background:var(--red-bg);color:var(--red);font-weight:500}
.t-acts{display:flex;align-items:center;gap:12px}
.later{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.task.done .box{background:var(--ink-strong);border-color:var(--ink-strong);color:var(--bg)}
.task.done .box svg{width:12px;height:12px;stroke-width:3}
.task.done .t-title{color:var(--ink-3);font-weight:500;text-decoration:line-through;text-decoration-color:var(--line-2)}
.task.done .t-meta{color:var(--ink-3)}
.setby{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--ink-3)}
.setby svg{width:15px;height:15px}

/* ---------- streak ---------- */
.streakp{padding:30px 24px 22px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:var(--surface-2)}
.s-top{display:flex;align-items:center;gap:12px}
.s-ic{width:40px;height:40px;border-radius:8px;background:var(--yellow-bg);color:var(--yellow);display:grid;place-items:center;flex:none}
.s-ic svg{width:22px;height:22px}
.s-n{font-family:var(--serif);font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ink-strong)}
.s-n span{font-size:17px;letter-spacing:-.01em;color:var(--ink-2)}
.s-kept{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--green)}
.s-kept svg{width:14px;height:14px;stroke-width:2.6}
.pips{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:4px}
.pip{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3);font-weight:600;font-family:var(--monof)}
.pip i{display:block;width:100%;height:24px;border-radius:4px;border:1px solid var(--line-2);background:var(--surface)}
.pip.on i{background:var(--ink-strong);border-color:var(--ink-strong)}
.pip.now{color:var(--ink-strong)}
.pip.now i{box-shadow:0 0 0 2px var(--surface-2),0 0 0 3.5px var(--ink-strong)}
.s-note{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.streak{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:999px;background:var(--yellow-bg);color:var(--yellow);font-weight:600;white-space:nowrap}
.streak svg{width:14px;height:14px}

/* ---------- habits: coach's note + tile grid ---------- */
.coach{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:baseline;padding:20px 24px;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.c-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-strong)}
.coach p{font-family:var(--serif);font-size:20px;line-height:1.45;letter-spacing:-.01em;color:var(--ink-strong);max-width:70ch}
.habits{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.habit{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.habit:nth-child(4n){border-right:0}
.habit:nth-last-child(-n+4):nth-child(4n+1),.habit:nth-last-child(-n+4):nth-child(4n+1) ~ .habit{border-bottom:0}
.h-top{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:13px;font-weight:500}
.h-top svg{width:17px;height:17px;color:var(--ink-3)}
.h-bot{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hp{font-size:30px;font-weight:500;color:var(--ink-strong);line-height:1}
.hp small{font-size:17px;color:var(--ink-3);margin-left:1px}
.hp.none{color:var(--ink-3)}
.mv{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;padding:2px 8px 2px 6px;border-radius:999px;white-space:nowrap}
.mv svg{width:13px;height:13px;stroke-width:2.4}
.mv.up{background:var(--green-bg);color:var(--green)}
.mv.down{background:var(--red-bg);color:var(--red)}
.mv.flat{background:var(--surface-2);color:var(--ink-3)}
.mv.count{padding:2px 0;color:var(--ink-3);font-weight:500}

/* ---------- small controls: month/day nav, segmented toggle, select, filter chips ---------- */
.monthnav{display:flex;align-items:center;gap:2px}
.monthnav button{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--ink-2)}
.monthnav button:hover{background:var(--surface-2)}
.monthnav button[disabled]{opacity:.3;cursor:default}
.monthnav span{font-family:var(--serif);font-size:19px;font-weight:500;min-width:150px;text-align:center;color:var(--ink-strong);letter-spacing:-.01em}
.daynav span{font-size:16px;min-width:108px}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;padding:2px}
.seg button{font-size:12.5px;padding:3px 11px;border-radius:5px;color:var(--ink-2);font-weight:500}
.seg button.on{background:var(--surface-2);color:var(--ink-strong)}
.select{display:flex;align-items:center;gap:8px;height:34px;border:1px solid var(--line-2);border-radius:6px;padding:0 8px 0 12px;background:var(--surface);font-size:13px}
.select span{color:var(--ink-3)}
.select select{border:0;background:none;outline:none;font-weight:500;color:var(--ink-strong)}
.fchips{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.fc{height:30px;padding:0 12px;border-radius:6px;border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:8px;background:var(--surface)}
.fc span{font-size:11.5px;color:var(--ink-3)}
.fc:hover{background:var(--surface-2)}
.fc.on{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.fc.on span{color:color-mix(in srgb,var(--btn-ink) 70%,transparent)}

/* ---------- tables ---------- */
/* Grid table (Manage > Drill reviews): .table > .tr.th + .tr rows; set the columns per page with
   .tr{grid-template-columns:...}. The default below is the reviews table from the mockup. */
.table{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.tr{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(120px,1.2fr) 118px 48px 62px 80px 50px 104px minmax(150px,1.2fr) 20px;gap:14px;align-items:center;padding:0 18px;min-height:54px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink)}
.table > .tr:last-child,.table .rows > .tr:last-child{border-bottom:0}
.tr.th{min-height:38px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);background:var(--surface-2)}
.tr:not(.th){cursor:pointer}
.tr:not(.th):hover{background:var(--surface-2)}
.tr > span{display:flex;align-items:center;min-width:0}
.tr > span.num{justify-content:flex-end}
.tr .num{text-align:right}
.tr .rb{padding-left:14px}
.tr .who2{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink-strong)}
.tr .who2 .av{width:26px;height:26px;font-size:10.5px}
.tr .dim,.dim{color:var(--ink-3)}
.gap-hi{color:var(--red);font-weight:500}
.tr .chev{width:15px;height:15px;color:var(--ink-3)}
/* Plain HTML table in the same style */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);background:var(--surface-2);padding:10px 18px;border-bottom:1px solid var(--line)}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--ink)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.open{cursor:pointer}
.tbl tr.open:hover td{background:var(--surface-2)}

/* ---------- left menu (Manage) ---------- */
.mg{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.menu{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--surface);padding:18px 12px 14px}
.m-brand{display:flex;align-items:baseline;gap:10px;padding:0 8px 18px}
.m-brand .brand{font-size:22px}
.m-brand span{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.m-groups{display:flex;flex-direction:column;gap:18px;overflow:auto}
.m-h{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);padding:0 8px 6px}
.m-item{display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:6px;color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:500;width:100%;text-align:left}
.m-item svg{width:16px;height:16px;color:var(--ink-3)}
.m-item:hover{background:var(--surface-2);color:var(--ink-strong)}
.m-item.on{background:var(--surface-3);color:var(--ink-strong)}
.m-item.on svg{color:var(--ink-strong)}
.m-count{margin-left:auto;font-size:11px;font-weight:500;min-width:20px;height:18px;padding:0 5px;border-radius:999px;background:var(--btn);color:var(--btn-ink);display:grid;place-items:center}
.m-new{margin-left:auto;font-style:normal;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:999px;background:var(--blue-bg);color:var(--blue)}
.m-theme{margin-top:auto;margin-bottom:8px;appearance:none;border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.m-theme + .m-foot{margin-top:0}
.m-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.m-danger{color:var(--ink-3);font-size:13px}
.m-danger:hover{color:var(--red);background:var(--red-bg)}
.m-danger:hover svg{color:var(--red)}
.m-me{display:flex;align-items:center;gap:10px;padding:8px 8px 0}
.m-me b{display:block;font-size:13px;font-weight:600;color:var(--ink-strong);line-height:1.3}
.m-me .pill{margin-top:2px}
.m-note{font-size:11.5px;color:var(--ink-3);padding:0 8px;line-height:1.45}
.m-back{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:12.5px;font-weight:600;color:var(--ink-strong);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.m-back svg{width:14px;height:14px}

/* Manage page body */
.mp{padding:36px 44px 56px;max-width:1240px}
.mp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.mp-head h1{font-family:var(--serif);font-weight:500;font-size:40px;letter-spacing:-.03em;line-height:1.1;color:var(--ink-strong)}
.mp-sum{margin-top:6px;font-size:14px;color:var(--ink-2)}
.mp-sum b{font-weight:600;color:var(--ink-strong)}
.mp-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mp-foot{margin-top:14px;font-size:12.5px;color:var(--ink-3);max-width:80ch}

/* Manage > Today lists: people column + the list editor */
.tl{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.people{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.person{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.person:last-child{border-bottom:0}
.person:hover,.person.on{background:var(--surface-2)}
.person.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink-strong)}
.person .av{width:34px;height:34px;font-size:12px}
.person b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-strong);line-height:1.3}
.person small{font-size:12px;color:var(--ink-3)}
.person.off{opacity:.6}
.pstate{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:4px;white-space:nowrap}
.pstate svg{width:13px;height:13px;stroke-width:2.6}
.pstate.done{color:var(--green)}
.pstate.part{color:var(--ink-2)}
.pstate.none{color:var(--yellow)}
.tl-list{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:22px 24px 18px}
.tl-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tl-head .av{width:40px;height:40px;font-size:13px}
.tl-head h2{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.02em;color:var(--ink-strong);line-height:1.2}
.tl-head p{font-size:12.5px;color:var(--ink-3)}
.tl-suggest{margin-left:auto}
.items{list-style:none}
.item{display:grid;grid-template-columns:16px 22px minmax(0,1fr) 150px 28px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.item .grip{width:14px;height:14px;color:var(--ink-3);cursor:grab}
.item .ord{font-size:12px;color:var(--ink-3);text-align:center}
.i-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.i-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;color:var(--ink-strong)}
.i-title .chip{display:inline-block}
.i-note{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);font-size:12.5px;color:var(--ink-3);max-width:460px}
.i-note input{border:0;background:none;outline:none;width:100%;font-size:12.5px;color:var(--ink-strong)}
.i-note input::placeholder{color:var(--ink-3)}
.i-note svg{width:13px;height:13px;flex:none}
.i-state{font-size:12.5px;display:flex;align-items:center;gap:6px;color:var(--ink-3)}
.i-state .ring{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2)}
.i-state.done{color:var(--green);font-weight:600}
.i-state.done .ring{background:var(--green);border-color:var(--green);display:grid;place-items:center;color:var(--surface)}
.i-state.done .ring svg{width:9px;height:9px;stroke-width:3.2}
.rm{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3)}
.rm:hover{background:var(--red-bg);color:var(--red)}
.rm svg{width:14px;height:14px}
.add-rep{margin-top:12px;width:100%;height:44px;border:1px dashed var(--line-2);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink-2);font-weight:600;font-size:13px}
.add-rep:hover{background:var(--surface-2);color:var(--ink-strong)}
.add-rep svg{width:15px;height:15px}
.tl-foot{margin-top:14px;font-size:12px;color:var(--ink-3)}

/* ---------- dialog ---------- */
/* <div class="scrim" hidden><div class="dialog" role="dialog" aria-modal="true"><h3/><p/><div class="d-acts">buttons</div></div></div> */
.scrim{position:fixed;inset:0;z-index:200;background:var(--scrim);display:grid;place-items:center;padding:16px}
.dialog{width:420px;max-width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:24px 24px 18px;box-shadow:0 20px 50px -20px rgba(20,18,15,.35)}
.dialog h3{font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.02em;color:var(--ink-strong);line-height:1.25}
.dialog p{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.dialog input,.dialog textarea,.dialog select{width:100%;margin-top:12px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);padding:7px 10px;font-size:13.5px;color:var(--ink-strong);outline:none}
.dialog input:focus,.dialog textarea:focus,.dialog select:focus{border-color:var(--ink-3)}
.d-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}

/* ---------- progress (public/progress.js; design/progress/) ---------- */
/* Every class is pg- prefixed so it can't collide with page CSS (Manage has its own .hb, .mix). */
.pg-none{font-size:12.5px;color:var(--ink-3)}
.pg-sub-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:26px 0 10px}
.pg-sub-h h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-strong)}
.pg-sub-h span{font-size:12.5px;color:var(--ink-3)}
.pg-rng{display:inline-flex;align-items:center;gap:12px}
.pg-rng-lbl{font-size:12.5px;color:var(--ink-3)}
.pg-rng .seg{background:var(--surface)}
.pg-rng .seg button{white-space:nowrap}
.pg-rng .seg button:hover{color:var(--ink-strong)}
.pg-rng .seg button.on{background:var(--surface-3)}
.pg-mgr-only{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-left:8px}
.pg-mgr-only svg{width:12px;height:12px}
/* moves: .mv from the habits block; the sm variant sits in tight rows */
.mv.pg-sm svg{width:12px;height:12px;stroke-width:2.6}
/* charts */
.pg-ch{position:relative;width:100%}
.pg-ch svg{display:block;overflow:visible}
.pg-ch .gl{stroke:var(--line);stroke-width:1}
.pg-ch .gl0{stroke:var(--line-2);stroke-width:1}
.pg-ch .ax{font:10.5px var(--monof);fill:var(--ink-3)}
.pg-ch .xh{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3}
.pg-ch.none{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3);background:var(--surface-2);border-radius:6px}
.pg-ch.none.flat{background:none;justify-content:flex-start}
.pg-lg{display:inline-flex;align-items:center;gap:14px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.pg-lg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pg-lg svg{width:22px;height:8px;overflow:visible}
.pg-tip{position:fixed;z-index:300;pointer-events:none;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:8px 11px 9px;font-size:12px;color:var(--ink);box-shadow:0 10px 30px -14px rgba(20,18,15,.35);min-width:140px}
.pg-tip .th{font-size:11px;font-weight:600;color:var(--ink-3);margin-bottom:4px;white-space:nowrap}
.pg-tip .tr1{display:flex;align-items:center;gap:8px;white-space:nowrap;line-height:1.7}
.pg-tip .tr1 i{width:10px;height:3px;border-radius:2px;flex:none}
.pg-tip .tr1 i.dash{background:repeating-linear-gradient(90deg,var(--ink-strong) 0 3px,transparent 3px 5px) !important}
.pg-tip .tr1 b{margin-left:auto;padding-left:14px;font-family:var(--monof);font-weight:500;color:var(--ink-strong)}
/* this week vs last week */
.pg-wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.pg-wk-c{padding:18px 20px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-wk-c:last-child{border-right:0}
.pg-wk-l{font-size:12.5px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-wk-l svg{width:15px;height:15px;color:var(--ink-3)}
.pg-wk-n{font-family:var(--monof);font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:28px;font-weight:500;color:var(--ink-strong);line-height:1.1}
.pg-wk-n small{font-size:15px;color:var(--ink-3);margin-left:2px}
.pg-wk-n.none{color:var(--ink-3)}
.pg-wk-s{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3);white-space:nowrap}
/* targets: full rows */
.pg-tg-row{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr) 150px 116px;gap:24px;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.pg-tg-row.acts{grid-template-columns:minmax(170px,230px) minmax(0,1fr) 150px 116px 64px}
.pg-tg-row:last-child{border-bottom:0}
.pg-tg-row.empty{grid-template-columns:1fr}
.pg-tg-name{display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}
.pg-tg-name small{font-size:12px;color:var(--ink-3)}
.pg-tg-bar{position:relative;height:22px;margin-top:12px}
.pg-tg-bar .tr0{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:4px;background:var(--surface-3)}
.pg-tg-bar .fill{position:absolute;left:0;top:9px;height:4px;border-radius:4px;background:var(--ink-strong)}
.pg-tg-bar .goal{position:absolute;top:2px;width:2px;height:18px;border-radius:2px;background:var(--ink-strong);transform:translateX(-1px)}
.pg-tg-bar .goal span{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font:500 10.5px var(--monof);color:var(--ink-2);white-space:nowrap}
.pg-tg-row.done .fill,.pg-tg-row.done .goal{background:var(--green)}
.pg-tg-now{font-size:13px;color:var(--ink-2);line-height:1.4}
.pg-tg-now b{font-family:var(--monof);font-weight:500;font-size:15px;color:var(--ink-strong);letter-spacing:-.02em}
.pg-tg-due{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.pg-tg-acts{display:flex;gap:2px;justify-content:flex-end}
.pg-tg-acts .icon-btn.rm:hover{background:var(--red-bg);color:var(--red)}
/* targets: the slim row under the Today list */
.pg-tmini{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line-2)}
.pg-tmini-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.pg-tmini-h small{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.pg-tmini-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px}
.pg-tgm{display:flex;flex-direction:column;gap:5px;min-width:0}
.pg-tgm-t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
.pg-tgm-t b{font-weight:600;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-tgm-t span{font-family:var(--monof);font-size:12.5px;color:var(--ink-2);white-space:nowrap;letter-spacing:-.02em}
.pg-tgm-t span em{font-style:normal;color:var(--ink-3)}
.pg-tgm-bar{position:relative;height:12px}
.pg-tgm-bar .tr0{position:absolute;left:0;right:0;top:4px;height:4px;border-radius:4px;background:var(--surface-3)}
.pg-tgm-bar .fill{position:absolute;left:0;top:4px;height:4px;border-radius:4px;background:var(--ink-strong)}
.pg-tgm-bar .goal{position:absolute;top:0;width:2px;height:12px;border-radius:2px;background:var(--ink-strong);transform:translateX(-1px)}
.pg-tgm small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-tgm.done .fill,.pg-tgm.done .goal{background:var(--green)}
/* the Playbook baseline: six counters with a pip per rep (dashboard, /playbook, Manage) */
.pg-bl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 22px}
.pg-bl-i{display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-bl-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.pg-bl-t b{font-weight:600;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-bl-t span{display:inline-flex;align-items:center;gap:4px;font-family:var(--monof);font-size:12.5px;color:var(--ink-2);white-space:nowrap;letter-spacing:-.02em}
.pg-bl-t span svg{width:13px;height:13px;stroke-width:2.6;color:var(--green)}
.pg-bl-p{display:flex;gap:3px}
.pg-bl-p i{flex:1;height:5px;border-radius:3px;background:var(--surface-3)}
.pg-bl-p i.on{background:var(--ink-strong)}
.pg-bl-i.done .pg-bl-p i.on{background:var(--green)}
.pg-bl-i small{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* drills: small multiples, own (solid, drill colour) vs manager (dashed) */
.pg-dr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-dr-c{padding:18px 18px 12px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px;text-align:left;min-width:0;position:relative;transition:background .2s}
.pg-dr-c:last-child{border-right:0}
.pg-dr-c:hover,.pg-dr-c.on{background:var(--surface-2)}
.pg-dr-c.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink-strong)}
.pg-dr-h{display:flex;align-items:center;gap:10px}
.pg-dr-h .mic{width:30px;height:30px}.pg-dr-h .mic svg{width:16px;height:16px}
.pg-dr-h h3{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.02em;color:var(--ink-strong);line-height:1.15}
.pg-dr-n{display:flex;gap:16px;align-items:flex-end}
.pg-dr-n div{display:flex;flex-direction:column;gap:1px;min-width:0}
.pg-dr-n small{font-size:11px;color:var(--ink-3);font-weight:500;white-space:nowrap}
.pg-dr-n b{font-family:var(--monof);font-variant-numeric:tabular-nums;font-size:21px;font-weight:500;color:var(--ink-strong);letter-spacing:-.03em;line-height:1.15}
.pg-dr-n b.gap{color:var(--ink-2)}
.pg-dr-n b.gap.hi{color:var(--red)}
.pg-dr-hint{font-size:12px;color:var(--ink-3);padding:10px 18px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;justify-content:space-between;gap:16px}
.pg-dd{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);margin-top:14px}
.pg-dd-l{padding:20px 24px 16px;border-right:1px solid var(--line);min-width:0}
.pg-dd-r{padding:20px 24px 16px;min-width:0}
.pg-dd h4{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-strong);margin-bottom:4px}
.pg-dd .sub{font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.pg-part{display:grid;grid-template-columns:96px minmax(0,1fr) 118px 64px;gap:16px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.pg-part .pn{font-weight:600;color:var(--ink-strong);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-part .pv{font-size:12px;color:var(--ink-3);white-space:nowrap}
.pg-part .pv b{font-family:var(--monof);font-weight:500;color:var(--ink-strong);font-size:13px}
.pg-part .mv{justify-self:end}
.pg-db{position:relative;height:20px}
.pg-db .base{position:absolute;left:0;right:0;top:9.5px;height:1px;background:var(--line-2)}
.pg-db .tick{position:absolute;top:6px;width:1px;height:8px;background:var(--line-2)}
.pg-db .link2{position:absolute;top:8.5px;height:3px;background:var(--line-2);border-radius:2px}
.pg-db .dot{position:absolute;top:4px;width:12px;height:12px;border-radius:50%;transform:translateX(-6px);box-shadow:0 0 0 2px var(--surface)}
.pg-db .dot.own{background:var(--mc)}
.pg-db .dot.mgd{background:var(--surface);border:2px solid var(--ink-strong)}
.pg-scale-h{display:grid;grid-template-columns:96px minmax(0,1fr) 118px 64px;gap:16px;font:10.5px var(--monof);color:var(--ink-3);padding-bottom:4px}
.pg-scale-h div{display:flex;justify-content:space-between}
.pg-st-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 70px;gap:14px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.pg-st-row .sl{font-size:13px;color:var(--ink-2);line-height:1.35}
.pg-st-row .sl b{display:block;font-family:var(--monof);font-weight:500;font-size:18px;color:var(--ink-strong);letter-spacing:-.03em}
.pg-st-row .sl b small{font-family:var(--sans);font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:0;margin-left:4px}
.pg-st-row .mv{justify-self:end}
.pg-st-row.warn .sl b{color:var(--red)}
/* self vs manager gap (managers only) */
.pg-gt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pg-gt-c{padding:16px 18px 12px;border-right:1px solid var(--line);min-width:0}
.pg-gt-c:last-child{border-right:0}
.pg-gt-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.pg-gt-h span{font-size:13px;font-weight:600;color:var(--ink-strong)}
.pg-gt-h b{font-family:var(--monof);font-weight:500;font-size:15px;color:var(--ink-2)}
.pg-gt-h b.hi{color:var(--red)}
/* know the account */
.pg-qz{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.pg-qt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-qt-c{padding:16px 18px 10px;border-right:1px solid var(--line);min-width:0}
.pg-qt-c:last-child{border-right:0}
.pg-qt-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pg-qt-h span{font-size:13px;font-weight:600;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-qt-n{font-family:var(--monof);font-size:24px;font-weight:500;color:var(--ink-strong);letter-spacing:-.03em;line-height:1.2;margin:4px 0 6px}
.pg-qt-n small{font-family:var(--sans);font-size:12px;color:var(--ink-3);font-weight:500;letter-spacing:0;margin-left:6px}
.pg-qt-n.none{color:var(--ink-3)}
.pg-mix{padding:14px 20px 16px;border-top:1px solid var(--line)}
.pg-mix-t{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-bottom:8px}
.pg-mix-bar{display:flex;gap:2px;height:10px}
.pg-mix-bar i{display:block;height:100%;border-radius:3px}
.pg-mix-lg{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.pg-mix-lg span{display:inline-flex;align-items:center;gap:6px}
.pg-mix-lg i{width:10px;height:10px;border-radius:3px}
.pg-mix-lg b{font-family:var(--monof);font-weight:500;color:var(--ink-strong)}
.pg-cm-h{padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.pg-cm-h h3{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.02em;color:var(--ink-strong);line-height:1.2}
.pg-cm-h p{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.pg-cq{padding:13px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.pg-cq:last-child{border-bottom:0}
.pg-cq q{quotes:none;font-size:13.5px;color:var(--ink-strong);font-weight:500;line-height:1.4}
.pg-cq-m{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3)}
.pg-cq-m .chip{display:inline-block}
.pg-hist{display:flex;gap:3px;margin-left:auto}
.pg-hist i{width:13px;height:13px;border-radius:3px;display:grid;place-items:center}
.pg-hist i svg{width:9px;height:9px;stroke-width:3.2}
.pg-hist i.k{background:var(--green-bg);color:var(--green)}
.pg-hist i.n{background:var(--yellow-bg);color:var(--yellow)}
.pg-hist i.x{background:var(--red-bg);color:var(--red)}
/* sim habits + sales */
.pg-hb{display:grid;grid-template-columns:1fr 1fr}
.pg-hb-r{display:grid;grid-template-columns:minmax(0,1fr) 110px 46px 104px;gap:14px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);min-width:0}
.pg-hb-r:nth-child(odd){border-right:1px solid var(--line)}
.pg-hb-r:nth-last-child(-n+2):nth-child(odd),.pg-hb-r:nth-last-child(-n+2):nth-child(odd) ~ .pg-hb-r{border-bottom:0}
.pg-hb-n{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink-strong);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-hb-n svg{width:16px;height:16px;color:var(--ink-3)}
.pg-hb-v{font-family:var(--monof);font-size:15px;font-weight:500;color:var(--ink-strong);text-align:right;letter-spacing:-.02em}
.pg-hb-r .mv{justify-self:start}
.pg-hb-r.low .pg-hb-v{color:var(--red)}
.pg-hb-r.none .pg-hb-v{color:var(--ink-3)}
.pg-sl3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
.pg-sl3 .pg-qt-c{padding:16px 20px 10px}
/* consistency */
.pg-cs{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.pg-cs-l{padding:18px 22px 14px;border-right:1px solid var(--line);min-width:0}
.pg-cs-l .pg-qt-h{margin-bottom:6px}
.pg-cs .streakp{padding:26px 24px 20px;gap:12px}
.pg-bigpips{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px}
.pg-bigpips .pip i{height:64px;border-radius:6px}
.s-kept.off{color:var(--yellow)}
/* dashboard: numbers inside the mode cards */
.pg-fprog{margin:4px 0 6px;padding:10px 0 2px;border-top:1px solid var(--line)}
.pg-fnums{display:flex;gap:14px;font-size:12px;color:var(--ink-3);margin-bottom:4px;flex-wrap:wrap}
.pg-fnums b{font-family:var(--monof);font-weight:500;font-size:14px;color:var(--ink-strong);letter-spacing:-.02em;margin-left:3px}
.pg-fnums b.none{color:var(--ink-3)}
.pg-fprog > .pg-none{display:block;padding:2px 0 4px}
.pg-ost{grid-column:2 / -1;display:flex;align-items:center;gap:12px;margin-top:-4px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2);flex-wrap:wrap;min-width:0}
.pg-ost b{font-family:var(--monof);font-weight:500;color:var(--ink-strong);font-size:14px;letter-spacing:-.02em}
.pg-ost .sep{width:1px;height:14px;background:var(--line-2)}
.pg-ost .spk{width:120px;flex:none}
.pg-oq{font-size:12.5px;color:var(--ink-3);line-height:1.45;flex:1;min-width:0}
.pg-oq q{quotes:none;color:var(--ink-strong);font-weight:500}
@media (max-width:1300px){
  .pg-hb-r{grid-template-columns:minmax(0,1fr) 84px 42px 96px;gap:10px;padding:11px 16px}
  .pg-dd{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
}
@media (max-width:1180px){
  .pg-wk-c{padding:14px 14px 12px}
  .pg-wk-n{font-size:24px}
  .pg-tg-row,.pg-tg-row.acts{grid-template-columns:170px minmax(0,1fr) 124px;gap:16px}
  .pg-tg-row.acts{grid-template-columns:170px minmax(0,1fr) 124px 64px}
  .pg-tg-row .pg-tg-due{display:none}
  .pg-dr-c{padding:16px 14px 10px}
  .pg-dr-n{gap:10px}
  .pg-qz{grid-template-columns:1fr}
  .pg-hb{grid-template-columns:1fr}
  .pg-hb-r:nth-child(odd){border-right:0}
  .pg-hb-r:nth-last-child(2){border-bottom:1px solid var(--line)}
  .pg-cs{grid-template-columns:minmax(0,1fr) 260px}
  .pg-tmini-g{gap:16px 18px}
  .pg-bl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .pg-wk{grid-template-columns:1fr 1fr}
  .pg-wk-c{border-bottom:1px solid var(--line)}
  .pg-dr,.pg-gt{grid-template-columns:1fr 1fr}
  .pg-dd,.pg-cs{grid-template-columns:1fr}
  .pg-dd-l,.pg-cs-l{border-right:0;border-bottom:1px solid var(--line)}
  .pg-qt,.pg-sl3,.pg-tmini-g{grid-template-columns:1fr}
  .pg-bl{grid-template-columns:1fr 1fr}
  .pg-tg-row,.pg-tg-row.acts{grid-template-columns:1fr}
  .pg-sub-h{flex-direction:column;gap:2px}
}

/* ---------- typing / loading dots ---------- */
/* <span class="dots"><i></i><i></i><i></i></span> (sim, quiz; the drills restyle them) */
.dots{display:flex;gap:3px}
.dots i{width:5px;height:5px;border-radius:99px;background:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .dots i{animation:blink 1.2s infinite}
  .dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
  @keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv{animation:rise .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d,0) * 80ms)}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .pip.on i{animation:pip .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(300ms + var(--n,0) * 80ms)}
  @keyframes pip{from{transform:scaleY(.3);opacity:.3}to{transform:none;opacity:1}}
}

/* ---------- responsive ---------- */
@media (max-width:1300px){
  .tr{grid-template-columns:minmax(110px,1.2fr) minmax(110px,1.1fr) 96px 44px 54px 70px 48px 84px minmax(136px,1.2fr) 20px;gap:10px;padding:0 14px;font-size:13px}
  .mp{padding:30px 28px 48px}
}
@media (max-width:1180px){
  .page{padding:0 28px 56px}
  .mg{grid-template-columns:220px minmax(0,1fr)}
  .tl{grid-template-columns:250px minmax(0,1fr)}
  .item{grid-template-columns:16px 18px minmax(0,1fr) 120px 28px}
  .table{overflow-x:auto}
  .tr{min-width:980px}
}
@media (max-width:760px){
  .page{padding:0 16px 48px}
  .topbar{height:60px}
  .brand{font-size:23px}
  .who{gap:12px;font-size:13px}
  .sec-title{margin:40px 0 14px;flex-wrap:wrap}
  .sec-title h2{font-size:24px}
  .task{grid-template-columns:22px minmax(0,1fr);gap:8px 12px}
  .task .t-acts{grid-column:2}
  .coach{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .coach p{font-size:18px}
  .habits{grid-template-columns:repeat(2,1fr)}
  .habit{border-bottom:1px solid var(--line) !important;border-right:1px solid var(--line)}
  .habit:nth-child(2n){border-right:0}
  .habit:nth-last-child(-n+2):nth-child(2n+1),.habit:nth-last-child(-n+2):nth-child(2n+1) ~ .habit{border-bottom:0 !important}
  .hp{font-size:26px}
  .mg{grid-template-columns:1fr}
  .menu{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .mp{padding:24px 16px 40px}
  .mp-head h1{font-size:32px}
  .tl{grid-template-columns:1fr}
}