/* ============================================================
   Finance x AI 90 — application stylesheet
   Built on the sgnk design system v1.3 (tokens verbatim).
   One accent (#1a5cff). Square corners. Hairline chrome.
   No second colour for state — emphasis comes from solid/
   default/muted, never from hue.
   ============================================================ */

/* ---------------------------------------------------------------
   Type: Mosvita for display, Google Sans for text, Google Sans Code
   for mono — the sgnk pairing.

   Self-hosted, not @import'ed from fonts.googleapis.com. Two reasons.
   This is a PWA that has to work with no signal, and a CDN @import is
   the one asset the service worker never precaches — offline, every
   heading silently fell back to system-ui. And Mosvita is not on
   Google Fonts at all, so the display face could only ever arrive
   from here.

   Mosvita's OS/2 fsType is 256 — the "no subsetting" bit — so these
   are whole faces converted to woff2, never subset.
   --------------------------------------------------------------- */
@font-face{font-family:'MosvitaWide';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/MosvitaWide-700.woff2') format('woff2')}
@font-face{font-family:'MosvitaWide';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/MosvitaWide-800.woff2') format('woff2')}
@font-face{font-family:'Mosvita';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Mosvita-600.woff2') format('woff2')}
@font-face{font-family:'Mosvita';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Mosvita-700.woff2') format('woff2')}

@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/GoogleSans-400.woff2') format('woff2')}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/GoogleSans-500.woff2') format('woff2')}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/GoogleSans-600.woff2') format('woff2')}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/GoogleSans-700.woff2') format('woff2')}

@font-face{font-family:'Google Sans Code';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/GoogleSansCode-400.woff2') format('woff2')}
@font-face{font-family:'Google Sans Code';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/GoogleSansCode-500.woff2') format('woff2')}
@font-face{font-family:'Google Sans Code';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/GoogleSansCode-600.woff2') format('woff2')}

:root{
  /* Color */
  --blue:#1a5cff;
  --blue-soft:#e8efff;
  --ink:#0a0a0a;
  --ink-soft:#3a3a3a;
  --grey:#6b6b6b;
  --grey-soft:#b8b8b8;
  --grey-bg:#f5f5f5;
  --grey-line:#e5e5e5;
  --code-bg:#0a0a0a;
  --code-fg:#e8efff;
  --canvas:#ffffff;

  /* Layout */
  --max:760px;
  --rail:248px;
  --topbar-h:56px;

  /* Spacing (8px base) */
  --gap-xxs:4px; --gap-xs:8px; --gap-sm:12px; --gap-md:18px;
  --gap-lg:24px; --gap-xl:32px; --gap-xxl:48px; --gap-section:64px;

  /* Radius */
  --r-none:0; --r-sm:2px; --r-md:8px; --r-lg:12px; --r-pill:9999px;

  /* Type — Mosvita carries display, Google Sans carries text */
  --display:'MosvitaWide','Mosvita','Google Sans',system-ui,sans-serif;
  --sans:'Google Sans','Product Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Google Sans Code',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Motion */
  --t-micro:.15s ease; --t-ui:.2s ease; --t-node:.13s ease;
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);background:var(--canvas);
  font-size:16px;line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--blue);color:var(--canvas)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
svg.ic{display:inline-block;vertical-align:-.2em;flex:none}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:2000;font-weight:600}
.skip-link:focus{left:8px;top:8px}

/* ============================================================
   Shell — rail (desktop) + topbar + bottom tabs (mobile)
   ============================================================ */
.shell{display:flex;min-height:100svh}

/* svh, not vh: on a phone 100vh is the tallest the viewport ever gets, so
   with the browser chrome showing, the foot of the nav drawer sits below
   the screen and cannot be reached. */
.rail{
  width:var(--rail);flex:none;border-right:1px solid var(--grey-line);
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  background:var(--canvas);z-index:50;
}
.rail-brand{
  padding:18px 20px 14px;border-bottom:1px solid var(--grey-line);
  display:flex;flex-direction:column;gap:2px;
}
.rail-brand .wordmark{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--ink);line-height:1.1}
.rail-brand .wordmark b{color:var(--ink)}
.rail-brand .wordmark span{color:var(--blue)}
.rail-brand .tag{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.rail-scroll{overflow-y:auto;flex:1;padding:10px 0 16px}
.rail-group{padding:12px 20px 6px}
.rail-group-label{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-soft);
}
.rail a.navitem{
  display:flex;align-items:center;gap:10px;padding:9px 20px;
  color:var(--ink-soft);font-size:14px;font-weight:600;letter-spacing:.01em;
  border-left:2px solid transparent;transition:background var(--t-micro),color var(--t-micro);
}
.rail a.navitem:hover{background:var(--grey-bg);text-decoration:none;color:var(--ink)}
.rail a.navitem.active{color:var(--blue);border-left-color:var(--blue);background:var(--blue-soft)}
.rail a.navitem .ic{color:currentColor;opacity:.9}
.rail a.navitem .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--grey)}
.rail-foot{border-top:1px solid var(--grey-line);padding:12px 20px;font-family:var(--mono);font-size:11px;color:var(--grey);display:flex;flex-direction:column;gap:6px}
.rail-foot .savedot{display:inline-flex;align-items:center;gap:6px}
.rail-foot .savedot i{width:6px;height:6px;background:var(--blue);display:inline-block}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;padding:0 24px;
  border-bottom:1px solid var(--grey-line);
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
}
.topbar .burger{display:none;background:none;border:1px solid var(--grey-line);padding:7px;cursor:pointer;color:var(--ink)}
.topbar .crumb{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.topbar .spacer{flex:1}
.topbar .tb-progress{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;color:var(--grey)}
.topbar .tb-bar{width:120px;height:4px;background:var(--grey-line);position:relative;overflow:hidden}
.topbar .tb-bar i{position:absolute;inset:0 auto 0 0;background:var(--blue);transition:width .3s ease}

.kbtn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--grey-line);background:var(--canvas);color:var(--ink-soft);
  font-size:13px;font-weight:600;cursor:pointer;transition:border-color var(--t-ui),color var(--t-ui);
}
.kbtn:hover{border-color:var(--blue);color:var(--blue)}
.kbtn kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--grey-line);padding:1px 4px;color:var(--grey)}

.view{flex:1;padding:32px 24px 96px;max-width:1120px;width:100%;margin:0 auto}
.view.narrow{max-width:860px}

/* Mobile bottom tabs */
.tabbar{display:none}

/* ============================================================
   Type
   ============================================================ */
h1.page-title{font-family:var(--display);font-size:clamp(27px,3.9vw,38px);font-weight:800;
  line-height:1.08;letter-spacing:-.015em;margin:0 0 6px}
h2.sec{font-family:var(--display);font-size:23px;font-weight:700;line-height:1.18;
  letter-spacing:-.012em;margin:40px 0 14px}
h3.sub{font-size:17px;font-weight:700;line-height:1.35;margin:26px 0 10px}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow.muted{color:var(--grey)}
.sub-lead{font-size:17px;color:var(--ink-soft);margin:0 0 8px;max-width:62ch}
.meta-strip{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--grey);margin:14px 0 0}
.mono{font-family:var(--mono)}
.muted{color:var(--grey)}
.faint{color:var(--grey-soft)}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--blue);color:var(--blue);padding:2px 7px;background:transparent;white-space:nowrap;
}
.chip.muted{border-color:var(--grey-line);color:var(--grey)}
.chip.solid{background:var(--blue);border-color:var(--blue);color:#fff}
/* 9px was the smallest text in the app and it carries state — "Start here",
   "Unread", the item type, the verification result. Tracking hurts more the
   smaller the type, so it comes down as the size goes up. */
.chip.tiny{font-size:10.5px;padding:1px 6px;letter-spacing:.06em}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--grey-line);background:var(--canvas);color:var(--ink);
  padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;
  transition:border-color var(--t-ui),color var(--t-ui),background var(--t-ui);
}
.btn:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#1450e6;color:#fff}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.ghost{border-color:transparent;color:var(--grey)}
.btn.ghost:hover{border-color:var(--grey-line);color:var(--blue)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Cards / panels ---------- */
.card{border:1px solid var(--grey-line);background:var(--canvas);padding:20px}
.card + .card{margin-top:14px}
.card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.card-head h3{margin:0;font-size:17px;font-weight:700;line-height:1.3}
.card-head .spacer{flex:1}
.panel{border:1px solid var(--grey-line);background:var(--grey-bg);padding:16px 18px}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}

/* ---------- Stat tiles ---------- */
.stat{border:1px solid var(--grey-line);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.stat .k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.stat .v{font-size:30px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.stat .v small{font-size:15px;font-weight:600;color:var(--grey-soft);letter-spacing:0}
.stat .d{font-size:12.5px;color:var(--grey)}

/* ---------- Progress ---------- */
.bar{height:6px;background:var(--grey-line);position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--blue);transition:width .35s ease}
.bar.thin{height:3px}
.ring{--pct:0;width:112px;height:112px;flex:none;border-radius:var(--r-pill);
  background:conic-gradient(var(--blue) calc(var(--pct)*1%),var(--grey-line) 0);
  display:grid;place-items:center;position:relative}
.ring::after{content:'';position:absolute;inset:9px;background:var(--canvas);border-radius:var(--r-pill)}
.ring .rv{position:relative;z-index:1;text-align:center;line-height:1.05}
.ring .rv b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em}
.ring .rv span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* ============================================================
   Task lists — the core interaction
   ============================================================ */
.block{border:1px solid var(--grey-line);margin-bottom:14px}
.block-head{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--grey-line);background:var(--grey-bg);
}
.block-head .bt{font-size:14px;font-weight:700;letter-spacing:-.01em}
.block-head .bm{font-family:var(--mono);font-size:11px;color:var(--grey)}
.block-body{padding:6px 0}

.task{
  display:flex;gap:12px;padding:9px 16px;align-items:flex-start;
  border-bottom:1px solid transparent;cursor:pointer;transition:background var(--t-micro);
}
.task:hover{background:var(--grey-bg)}
/* The box is the only thing that ticks a step — the rest of the row opens the
   guide — so its hit area has to be a thumb, not a glyph. The drawn square
   stays 18px; ::before widens the target around it without moving anything. */
.task .box{
  flex:none;width:18px;height:18px;border:1.5px solid var(--grey-soft);margin-top:3px;
  display:grid;place-items:center;color:transparent;transition:all var(--t-micro);background:var(--canvas);
  position:relative;
}
/* 44 wide, and 11px of reach above and below — enough to be a real target
   without spilling into the neighbouring row's box, which sits ~43px away */
.task .box::before{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:-11px;bottom:-11px;width:44px;
}
.task .box .ic{width:14px;height:14px}
.task.done .box{background:var(--blue);border-color:var(--blue);color:#fff}
/* flex:1 1 0 so the text shrinks to fit beside the tick box. Left at auto it
   takes its content width as the basis, and once the row is allowed to wrap
   any long step drops onto its own line underneath the box. */
.task .txt{font-size:14.5px;line-height:1.55;color:var(--ink);flex:1 1 0;min-width:0}
.task.done .txt{color:var(--grey);text-decoration:line-through;text-decoration-color:var(--grey-soft)}
.task .txt .hint{display:block;font-size:12.5px;color:var(--grey);line-height:1.5;margin-top:2px;text-decoration:none}
.task .txt code{font-family:var(--mono);font-size:.9em;background:var(--grey-bg);padding:1px 5px;border:1px solid var(--grey-line)}
.task .tags{margin-left:auto;display:flex;gap:6px;flex:none;padding-left:8px}
.task a.res{color:var(--blue);font-weight:600}

.checkpoint{
  border:1px solid var(--blue);background:var(--blue-soft);padding:14px 16px;
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin-top:14px;
}
.checkpoint .box{flex:none;width:20px;height:20px;border:1.5px solid var(--blue);background:var(--canvas);display:grid;place-items:center;color:transparent;margin-top:2px}
.checkpoint.done .box{background:var(--blue);color:#fff}
.checkpoint .cl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:3px}
.checkpoint .ct{font-size:14.5px;line-height:1.55;color:var(--ink)}
.checkpoint.done{background:var(--canvas)}
.checkpoint.done .ct{color:var(--grey)}

/* ---------- Prompt block ---------- */
.prompt{border:1px solid var(--grey-line);border-left:3px solid var(--blue);margin:12px 0;background:var(--canvas)}
/* wrap: on the prompts page this row carries a title plus up to three
   buttons, and a nowrap flex row refuses to shrink below its min-content
   (measured 504px inside a 328px phone column) */
.prompt-head{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--grey-line);flex-wrap:wrap}
.prompt-head .pt{font-size:13.5px;font-weight:700;min-width:0;overflow-wrap:anywhere}
/* the meta chip carries a full day title ("Day 0 — Setup — become
   operational"); nowrap made it a 227px floor that pushed the page sideways */
.prompt-head .chip{min-width:0;max-width:100%;white-space:normal}
.prompt-body{
  margin:0;padding:14px;background:var(--code-bg);color:var(--code-fg);
  font-family:var(--mono);font-size:12.5px;line-height:1.62;
  white-space:pre-wrap;word-break:break-word;overflow-x:auto;
}
.copybtn{margin-left:auto;border:1px solid var(--grey-line);background:var(--canvas);color:var(--grey);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;cursor:pointer;display:inline-flex;gap:5px;align-items:center}
.copybtn:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- Readout (how to read it) ---------- */
.readout{border:1px solid var(--blue);border-left-width:3px;padding:14px 16px;font-size:14.5px;line-height:1.62;color:var(--ink-soft);background:var(--canvas)}
.readout b{color:var(--ink)}
.readout .rl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:6px}

/* ============================================================
   Calendar
   ============================================================ */
/* ---------- Calendar: week groups, one markup, two layouts ----------
   Desktop lays each week's days 7-across. A phone stacks them as
   full-width rows — seven columns inside 375px is unreadable, and the
   old grid overflowed horizontally and clipped Sunday. */
.cal{margin-top:26px}

.cal-dow{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;
  padding:0 2px 8px;
}
.cal-dow span{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey-soft);text-align:center;
}

.calweek{margin-bottom:20px}
/* a <button> so it is keyboard-reachable when it folds on a phone; on
   desktop it is inert and must not look like a control */
.calweek-h{
  display:flex;align-items:center;gap:10px;padding:8px 2px 10px;width:100%;
  border:0;border-bottom:1px solid var(--grey-line);margin-bottom:10px;
  background:none;text-align:left;font:inherit;color:inherit;cursor:default;
}
.calweek-chev{display:none}
.calweek-n{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);flex:none;
}
.calweek-t{font-size:14px;font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calweek-p{font-family:var(--mono);font-size:10.5px;color:var(--grey);flex:none}
.calweek.now .calweek-n{color:var(--blue)}
.calweek.now .calweek-h{border-bottom-color:var(--blue)}

.calweek-d{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;align-items:stretch}
.calpad{display:block}

.calcell{
  display:flex;flex-direction:column;gap:5px;
  border:1px solid var(--grey-line);padding:9px;min-height:96px;
  background:var(--canvas);text-align:left;color:var(--ink);position:relative;
  transition:border-color var(--t-ui),box-shadow var(--t-node),transform var(--t-node);
}
/* Lift only where a real cursor exists. On touch, :hover latches after a tap
   and the card stays raised and blue, which reads as "selected". */
@media (hover:hover) and (pointer:fine){
  .calcell:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(26,92,255,.14);
    transform:translateY(-2px);text-decoration:none}
}
.cal-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.calcell .dn{font-family:var(--mono);font-size:10.5px;
  font-weight:600;color:var(--blue);letter-spacing:.04em;flex:none}
/* --grey, not --grey-soft: the weekday, the date and the x/y count all carry
   meaning, and #b8b8b8 on white is about 2.3:1 */
.calcell .dow{font-family:var(--mono);font-size:9.5px;
  color:var(--grey);letter-spacing:.06em;text-transform:uppercase}
.calcell .dt{font-size:12.5px;font-weight:700;line-height:1.3;color:var(--ink);
  overflow-wrap:anywhere}
.calcell .cflag{position:absolute;top:8px;right:8px;color:var(--blue);opacity:.8}
.cal-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:6px}
.calcell .cbar{flex:1;height:3px;background:var(--grey-line);position:relative;overflow:hidden}
.calcell .cbar i{position:absolute;inset:0 auto 0 0;background:var(--blue)}
.calcell .cnum{font-family:var(--mono);font-size:9.5px;color:var(--grey)}

.calcell.done{background:var(--blue-soft);border-color:var(--blue)}
.calcell.today{border-color:var(--blue);border-width:2px;padding:8px}
.calcell.rest{background:var(--grey-bg)}
.calcell.rest .dt{color:var(--grey)}
.calcell.future .dt{color:var(--ink-soft)}

/* Tablet: fewer, wider columns beat seven cramped ones */
@media (max-width:1100px){
  .calweek-d{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cal-dow{display:none}
  .calpad{display:none}
}
@media (max-width:820px){
  .calweek-d{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Phone: full-width rows. Nothing is clipped, everything is tappable. */
@media (max-width:640px){
  .cal{margin-top:20px}
  .cal-dow{display:none}
  .calpad{display:none}
  .calweek{margin-bottom:22px}
  .calweek-h{position:sticky;top:var(--topbar-h);z-index:20;
    background:var(--canvas);padding:10px 2px;margin-bottom:8px;
    min-height:44px;cursor:pointer}
  .calweek-t{font-size:13px;white-space:normal;line-height:1.3}
  .calweek-d{grid-template-columns:minmax(0,1fr);gap:8px}
  .calcell{
    min-height:0;padding:13px 14px;gap:6px;
    display:grid;grid-template-columns:1fr auto;grid-template-areas:'top top' 'title title' 'foot foot';
  }
  .calcell.today{padding:12px 13px}
  .cal-top{grid-area:top}
  .calcell .dt{grid-area:title;font-size:15px;line-height:1.35}
  .cal-foot{grid-area:foot;padding-top:2px}
  .calcell .dn{font-size:11px}
  .calcell .dow{font-size:10px}
  .calcell .cflag{top:12px;right:12px}
  .calcell .cnum{font-size:10.5px}
}

/* Folding weeks, on every layout that has to scroll for them. Laid out in
   full the 91 days run to ~10,500px on a phone and ~5,000px on a tablet;
   folded, the whole 13 weeks fit on about one screen and the current week
   is already open. Above 900px the grid is wide enough to just show it all.
   Same boundary as the collapsing rail and the bottom-sheet drawer. */
@media (max-width:900px){
  .calweek-h{cursor:pointer;min-height:44px}
  .calweek-chev{display:inline-flex;color:var(--grey);flex:none;transition:transform var(--t-ui)}
  .calweek.folded .calweek-chev{transform:rotate(-90deg)}
  .calweek.folded .calweek-d{display:none}
  .calweek.folded{margin-bottom:0}
  .calweek.folded .calweek-h{margin-bottom:0}
}

.weekstrip{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:4px}
.weekstrip .ws{height:34px;border:1px solid var(--grey-line);position:relative;overflow:hidden;cursor:pointer;display:grid;place-items:center}
.weekstrip .ws i{position:absolute;inset:auto 0 0 0;background:var(--blue-soft)}
.weekstrip .ws span{position:relative;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--grey)}
.weekstrip .ws.active{border-color:var(--blue)}
.weekstrip .ws.active span{color:var(--blue)}

/* ============================================================
   Tables / lists
   ============================================================ */
/* a wide table gets its own scroller rather than pushing the page sideways */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){ .tscroll table.t{min-width:560px} }

table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey);padding:8px 10px;border-bottom:1px solid var(--grey-line);white-space:nowrap;
}
table.t td{padding:10px;border-bottom:1px solid var(--grey-line);vertical-align:top;line-height:1.5}
table.t tr:hover td{background:var(--grey-bg)}

.listrow{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--grey-line)}
.listrow:last-child{border-bottom:0}
.listrow .lt{font-size:15px;font-weight:600;line-height:1.35}
.listrow .ld{font-size:13.5px;color:var(--grey);line-height:1.5;margin-top:2px}

/* ---------- Inputs ---------- */
input[type=text],input[type=url],input[type=date],input[type=number],input[type=search],select,textarea{
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--canvas);
  border:1px solid var(--grey-line);padding:9px 11px;width:100%;
}
textarea{line-height:1.6;resize:vertical;min-height:96px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
label.fl{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.field{margin-bottom:16px}
.searchwrap{position:relative;display:flex;align-items:center}
.searchwrap .ic{position:absolute;left:11px;color:var(--grey-soft);pointer-events:none}
.searchwrap input{padding-left:36px}
/* the first-run date picker, sized by CSS so the phone rules can raise it
   to 16px — an inline font-size here would outrank them and make Safari
   zoom the page the moment she taps it */
#homestart{width:auto;padding:6px 10px;font-size:13px}

.filters{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.filters button{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--grey-line);background:var(--canvas);color:var(--grey);
  padding:5px 10px;cursor:pointer;transition:all var(--t-micro);
}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- Resource card ---------- */
.rescard{border:1px solid var(--grey-line);padding:16px;display:flex;flex-direction:column;gap:8px;transition:box-shadow var(--t-node),transform var(--t-node),border-color var(--t-ui)}
@media (hover:hover) and (pointer:fine){
  .rescard:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(26,92,255,.14);transform:translateY(-2px)}
}
.rescard .rh{display:flex;align-items:flex-start;gap:10px}
.rescard .rt{font-size:15px;font-weight:700;line-height:1.3}
.rescard .rd{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.rescard .rf{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;min-width:0}
/* the ellipsis only works if the item is allowed to be narrower than its
   own text — without min-width:0 a nowrap flex child sets the card's floor */
.rescard .rurl{font-family:var(--mono);font-size:11px;color:var(--grey);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}

/* ---------- Empty / toast / modal ---------- */
.empty{border:1px dashed var(--grey-line);padding:40px 20px;text-align:center;color:var(--grey);font-size:14px}
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:11px 18px;font-size:13.5px;font-weight:600;
  z-index:3000;opacity:0;pointer-events:none;transition:opacity var(--t-ui),transform var(--t-ui);
  display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);
}
/* clear the tab bar and the home indicator, or the confirmation lands on top
   of the navigation it is confirming */
@media (max-width:640px){
  .toast{bottom:calc(78px + env(safe-area-inset-bottom));max-width:calc(100vw - 28px)}
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.modal-back{position:fixed;inset:0;background:rgba(10,10,10,.42);z-index:2500;display:none;align-items:flex-start;justify-content:center;padding:80px 16px 16px}
.modal-back.open{display:flex}
.modal{background:var(--canvas);border:1px solid var(--grey-line);width:100%;max-width:640px;max-height:calc(100svh - 120px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(10,10,10,.2)}
.modal-head{padding:12px 14px;border-bottom:1px solid var(--grey-line);display:flex;align-items:center;gap:10px}
.modal-body{overflow-y:auto;padding:6px 0}
.cmd-item{display:flex;gap:10px;align-items:center;padding:10px 16px;cursor:pointer;font-size:14px}
.cmd-item:hover,.cmd-item.sel{background:var(--blue-soft);color:var(--blue)}
.cmd-item .ck{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--grey);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Day view specifics ---------- */
.daynav{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.daynav .dnav{border:1px solid var(--grey-line);background:var(--canvas);padding:7px 9px;cursor:pointer;color:var(--ink-soft);display:inline-flex}
.daynav .dnav:hover{border-color:var(--blue);color:var(--blue)}
.dayhead{border-bottom:1px solid var(--grey-line);padding-bottom:18px;margin-bottom:22px}
.outputs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.outputs code{font-family:var(--mono);font-size:11.5px;background:var(--grey-bg);border:1px solid var(--grey-line);padding:3px 7px;color:var(--ink-soft)}

.notebox{margin-top:26px;border:1px solid var(--grey-line);padding:16px}
.notebox .nh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.savedhint{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-soft)}

/* ---------- Week accordion ---------- */
.wk{border:1px solid var(--grey-line);margin-bottom:12px}
.wk-head{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:var(--canvas);width:100%;border:0;text-align:left;font-family:inherit}
.wk-head:hover{background:var(--grey-bg)}
.wk-head .wt{font-size:15.5px;font-weight:700}
.wk-head .wn{font-family:var(--mono);font-size:11px;color:var(--grey);letter-spacing:.1em}
.wk-body{border-top:1px solid var(--grey-line);display:none}
.wk.open .wk-body{display:block}
.wk-day{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--grey-line);cursor:pointer}
.wk-day:last-child{border-bottom:0}
.wk-day:hover{background:var(--grey-bg);text-decoration:none}
.wk-day .wd-n{font-family:var(--mono);font-size:11px;color:var(--grey);width:54px;flex:none}
.wk-day .wd-t{font-size:14px;font-weight:600;color:var(--ink)}
.wk-day .wd-b{width:64px;flex:none;margin-left:auto}

/* ---------- Print ---------- */
@media print{
  .rail,.topbar,.tabbar,.toast,.modal-back,.btnrow,.copybtn{display:none !important}
  .view{padding:0;max-width:none}
  .task,.card,.block{break-inside:avoid}
  a{color:var(--ink);text-decoration:none}
  .prompt-body{background:#fff;color:#000;border:1px solid #ccc}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .rail{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(10,10,10,.14)}
  body.navopen .rail{transform:translateX(0)}
  body.navopen::after{content:'';position:fixed;inset:0;background:rgba(10,10,10,.35);z-index:45}
  .topbar .burger{display:inline-flex}
  .grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* ---- typing ----
     Safari zooms the whole page whenever a focused field is under 16px, and
     it does not zoom back out. She writes a journal entry, a note and a
     verification row most days, so this fired constantly. 16px is the fix;
     there is no other way to opt out that does not also disable pinch-zoom. */
  input[type=text],input[type=url],input[type=date],input[type=number],
  input[type=search],select,textarea,#cmdinput{font-size:16px}
  .field input,.field select,.field textarea{padding:10px 12px}

  /* ---- tap targets ----
     Measured at 375px: burger 36x36, search 38x36, day arrows 38x34,
     copy 63x22, start-date 140x30. All below the 44px thumb target. */
  .topbar .burger,.kbtn{min-width:44px;min-height:44px}
  .daynav .dnav{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0}
  .copybtn{min-height:40px;padding:8px 12px}
  .rail a.navitem{min-height:44px}
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  /* filter chips come in rows of six or more — 44px each would be a wall,
     and 36 clears the 24px floor comfortably */
  .filters button{min-height:36px}
  input[type=text],input[type=url],input[type=number],input[type=search],select{min-height:44px}
  /* the resource title is the card's only link; 18px of text is not a target */
  .rescard .rt{display:inline-block;padding:5px 0}
  /* the small monospace links (source domain, "full library page", "Day 12")
     are standalone actions, not prose — 16px of text is not a thumb target */
  a.mono{display:inline-block;padding:8px 0}
  .drawer-close{width:44px;height:44px}
  input[type=date],#homestart{min-height:44px}
  #homestart{font-size:16px;width:100%}

  /* viewport-fit=cover puts the layout under the cutout; in landscape the
     side insets are what keep text off the notch and the rounded corners */
  .view{padding:20px calc(14px + env(safe-area-inset-right))
        calc(110px + env(safe-area-inset-bottom))
        calc(14px + env(safe-area-inset-left))}
  h1.page-title{font-size:25px;letter-spacing:-.01em}
  h2.sec{font-size:19px;margin:30px 0 12px}
  /* minmax(0,...) not 1fr: a bare 1fr track cannot shrink below the
     min-content of its widest child, so one long URL widens the page */
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:minmax(0,1fr)}
  .topbar{gap:8px;padding:0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left))}
  .topbar .crumb{display:none}
  /* the keyboard hint is meaningless without a keyboard */
  .kbtn kbd{display:none}
  .kbtn{height:44px;padding:0 12px}
  .kbtn span{position:absolute;left:-9999px}     /* icon-only search */
  .topbar .tb-progress{gap:6px}
  .topbar .tb-progress .tb-bar{width:44px}
  .topbar .burger{padding:8px}
  .card{padding:16px}
  .task{padding:13px 12px}
  .task .txt{font-size:14px}
  /* these chips mark the 185 steps that are a VERIFY, a SHIP or a QUIZ —
     hiding them on the one device she reads the plan on lost the signal
     entirely, so wrap them under the text instead */
  .task{flex-wrap:wrap}
  .task .tags{margin-left:0;padding-left:30px;flex-basis:100%;margin-top:4px}
  .ring{width:96px;height:96px}
  .stat .v{font-size:24px}

  .weekstrip{grid-template-columns:repeat(7,minmax(0,1fr))}

  /* bottom tabs */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px) saturate(1.4);
    -webkit-backdrop-filter:blur(12px) saturate(1.4);
    border-top:1px solid var(--grey-line);padding:6px 4px env(safe-area-inset-bottom);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;
    color:var(--grey);font-family:var(--mono);font-size:10.5px;
    font-weight:600;letter-spacing:.04em;text-transform:uppercase;min-height:44px;justify-content:center;
  }
  .tabbar a.active{color:var(--blue)}
  .tabbar a:hover{text-decoration:none}
  .modal-back{padding:60px 10px 10px}
}

/* ============================================================
   Task detail drawer
   ============================================================ */
.drawer-back{
  position:fixed;inset:0;background:rgba(10,10,10,.32);z-index:1400;
  opacity:0;pointer-events:none;transition:opacity var(--t-ui);
}
.drawer-back.open{opacity:1;pointer-events:auto}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:1500;
  width:clamp(520px, 48vw, 900px);max-width:100vw;
  background:var(--canvas);border-left:1px solid var(--grey-line);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(10,10,10,.10);
}
.drawer-grab{display:none}
.drawer.open{transform:translateX(0)}
.drawer-head{
  flex:none;padding:16px 26px;border-bottom:1px solid var(--grey-line);
  display:flex;align-items:flex-start;gap:10px;background:var(--canvas);
}
.drawer-head .dmeta{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:3px}
.drawer-head .dtitle{font-size:16.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.drawer-close{border:1px solid var(--grey-line);background:var(--canvas);color:var(--grey);
  padding:6px;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px}
.drawer-close:hover{border-color:var(--blue);color:var(--blue)}
.drawer-body{flex:1;overflow-y:auto;padding:22px 26px 32px;-webkit-overflow-scrolling:touch}
.drawer-body > .dsec{max-width:66ch}
.drawer-body .flow,.drawer-body .prompt{max-width:none}
.drawer-foot{
  flex:none;border-top:1px solid var(--grey-line);padding:10px 20px;
  display:flex;align-items:center;gap:8px;background:var(--canvas);
}

.dsec{margin-bottom:22px}
.dsec:last-child{margin-bottom:0}
.dsec-h{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  display:flex;align-items:center;gap:7px;margin-bottom:9px;
}
.dsec-h.muted{color:var(--grey)}
.dsec p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-soft)}
.dsec p b,.dsec li b{color:var(--ink)}

ol.dsteps{margin:0;padding:0;list-style:none;counter-reset:s}
ol.dsteps li{
  counter-increment:s;position:relative;padding:0 0 12px 30px;
  font-size:14.5px;line-height:1.6;color:var(--ink);
}
ol.dsteps li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:20px;height:20px;border:1px solid var(--blue);color:var(--blue);
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  display:grid;place-items:center;
}
ol.dsteps li:last-child{padding-bottom:0}

ul.dpit{margin:0;padding:0;list-style:none}
ul.dpit li{
  position:relative;padding:0 0 10px 22px;font-size:14px;line-height:1.58;color:var(--ink-soft);
}
ul.dpit li::before{content:'';position:absolute;left:4px;top:9px;width:6px;height:6px;background:var(--grey-soft)}
ul.dpit li:last-child{padding-bottom:0}

.ddone{border:1px solid var(--blue);border-left-width:3px;padding:12px 14px;font-size:14.5px;line-height:1.58;color:var(--ink)}
.ddone .dl{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:5px}

.dlink{
  display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-bottom:1px solid var(--grey-line);
  font-size:14px;color:var(--ink);
}
.dlink .ic{margin-top:2px}
.dlink:last-child{border-bottom:0}
.dlink:hover{text-decoration:none;color:var(--blue)}
.dlink .dl-t{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlink .dl-d{display:block;font-weight:400;font-size:12.5px;color:var(--grey);white-space:normal}

.dalso{border:1px solid var(--grey-line);margin-bottom:10px}
.dalso summary{
  padding:10px 13px;cursor:pointer;font-size:13.5px;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:8px;color:var(--ink-soft);
}
.dalso summary::-webkit-details-marker{display:none}
.dalso summary:hover{color:var(--blue)}
.dalso[open] summary{border-bottom:1px solid var(--grey-line)}
.dalso .dalso-b{padding:14px 13px}

.dsrc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-soft);margin-top:18px;display:block}

/* the task row gets an affordance */
.task .open-detail{
  margin-left:auto;flex:none;color:var(--grey-soft);opacity:0;transition:opacity var(--t-micro);
  display:inline-flex;align-items:center;padding-left:8px;
}
.task:hover .open-detail,.task:focus-within .open-detail{opacity:1}
.task.active-detail{background:var(--blue-soft)}

/* ---------- flow diagrams ---------- */
.flow{border:1px solid var(--grey-line);padding:16px;margin:12px 0}
.flow-t{font-size:14px;font-weight:700;margin-bottom:12px}
.flow-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-bottom:12px}
.flow-row:last-of-type{margin-bottom:0}
.flow-lab{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  align-self:center;flex:none;min-width:46px;
}
.fnode{
  border:1px solid var(--blue);border-radius:var(--r-md);padding:8px 10px;
  font-family:var(--mono);font-size:11px;line-height:1.42;
  color:var(--ink);background:var(--canvas);flex:1 1 auto;min-width:96px;
  box-shadow:0 1px 3px rgba(26,92,255,.12);white-space:pre-line;
}
.fnode.plain{border-color:var(--grey-line);box-shadow:0 1px 3px rgba(10,10,10,.06)}
.farrow{align-self:center;color:var(--blue);flex:none;opacity:.75}
.flow-read{margin-top:14px}

/* ---------- bottom sheet: any phone or tablet ---------- */
@media (max-width:900px){
  .drawer{
    left:0;right:0;top:auto;bottom:0;width:100%;
    height:88vh;max-height:88vh;
    border-left:0;border-top:1px solid var(--grey-line);
    border-radius:var(--r-md) var(--r-md) 0 0;
    transform:translateY(100%);
    box-shadow:0 -8px 40px rgba(10,10,10,.18);
  }
  .drawer.open{transform:translateY(0)}
  .drawer-back.open{background:rgba(10,10,10,.45)}
  .drawer-grab{
    display:block;flex:none;padding:9px 0 3px;text-align:center;cursor:grab;touch-action:none;
  }
  .drawer-grab i{display:inline-block;width:38px;height:4px;border-radius:var(--r-pill);background:var(--grey-line)}
  .drawer-head{padding:4px 18px 14px}
  .drawer-body{padding:16px 18px 28px}
  .drawer-body > .dsec{max-width:none}
  .drawer-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  body.drawer-open{overflow:hidden}
}
@supports (height: 88svh){
  @media (max-width:900px){ .drawer{height:88svh;max-height:88svh} }
}

@media (max-width:640px){
  .drawer-body{padding:16px 14px 24px}
  .task .open-detail{opacity:1}
  .flow-row{gap:6px}
  .fnode{flex:1 1 100%}
  .farrow{transform:rotate(90deg);margin:0 auto}
  .flow-lab{flex:1 1 100%}
}

/* ============================================================
   Library — the Finance x AI reading + watching hub
   ============================================================ */
.libcard{
  display:flex;flex-direction:column;border:1px solid var(--grey-line);background:var(--canvas);
  overflow:hidden;transition:box-shadow var(--t-node),transform var(--t-node),border-color var(--t-ui);
  color:var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .libcard:hover{border-color:var(--blue);box-shadow:0 8px 20px rgba(26,92,255,.14);transform:translateY(-2px);text-decoration:none}
}
.libcard.is-done{background:var(--grey-bg)}
.libcard.is-done .libcard-t{color:var(--grey)}
.libthumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-bottom:1px solid var(--grey-line);background:var(--grey-bg)}
.libcard-b{padding:15px 16px 13px;display:flex;flex-direction:column;flex:1}
.libcard-t{font-size:15.5px;font-weight:700;line-height:1.32;letter-spacing:-.01em}
.libcard-m{font-family:var(--mono);font-size:10.5px;color:var(--grey);margin-top:5px}
.libcard-s{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:9px}
.libcard-f{display:flex;align-items:center;margin-top:auto;padding-top:12px}

.ytwrap{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--grey-line);background:var(--code-bg)}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.numcell{border:1px solid var(--grey-line);border-left:3px solid var(--blue);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.numcell b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.numcell span{font-size:13px;color:var(--ink-soft);line-height:1.4}
.numcell i{font-family:var(--mono);font-size:10.5px;color:var(--grey);font-style:normal;line-height:1.45}

.hl{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--grey-line)}
.hl:last-child{border-bottom:0}
.hl-n{
  flex:none;width:22px;height:22px;border:1px solid var(--blue);color:var(--blue);
  font-family:var(--mono);font-size:11px;font-weight:600;
  display:grid;place-items:center;margin-top:2px;
}
.hl-t{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:4px}
.hl-d{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

.recallcard{min-height:280px;display:flex;flex-direction:column}
.recallcard .rq{font-size:21px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.recallcard .ra{font-size:15px;line-height:1.62;color:var(--ink-soft);margin-top:16px;border-top:1px solid var(--grey-line);padding-top:16px}
.recallcard .rhint{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-soft);margin-top:16px}

@media (max-width:640px){
  .libcard-t{font-size:15px}
  .numcell b{font-size:21px}
  .recallcard .rq{font-size:18px}
}

/* ============================================================
   PWA chrome — reading progress, back to top, update bar
   ============================================================ */
.readbar{
  position:fixed;top:0;left:0;height:3px;width:0;background:var(--blue);
  z-index:1600;transition:width .08s linear;pointer-events:none;
}

.to-top{
  position:fixed;right:20px;bottom:24px;width:44px;height:44px;
  border:0;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  cursor:pointer;display:grid;place-items:center;z-index:900;
  box-shadow:0 6px 20px rgba(10,10,10,.18);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity var(--t-ui),transform var(--t-ui);
}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--blue)}

.updatebar{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);
  background:var(--canvas);border:1px solid var(--blue);
  padding:10px 12px 10px 16px;display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;z-index:2600;
  box-shadow:0 8px 30px rgba(10,10,10,.16);
  opacity:0;transition:opacity var(--t-ui),transform var(--t-ui);
  max-width:calc(100vw - 32px);
}
.updatebar.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:640px){
  /* clear the tab bar, and the home indicator underneath it */
  .to-top{right:14px;bottom:calc(78px + env(safe-area-inset-bottom));width:48px;height:48px}
  .updatebar{bottom:calc(78px + env(safe-area-inset-bottom));left:14px;right:14px;
    transform:translateY(16px);max-width:none}
  .updatebar.show{transform:translateY(0)}
}
@media print{ .readbar,.to-top,.updatebar{display:none !important} }

/* ============================================================
   The Path — staged career flow
   ============================================================ */
.pathstage{display:flex;gap:16px;margin-top:26px}
.pathstage-rail{flex:none;display:flex;flex-direction:column;align-items:center;width:34px}
.pathstage-n{
  width:34px;height:34px;border:1px solid var(--grey-line);background:var(--canvas);
  display:grid;place-items:center;font-family:var(--mono);
  font-size:14px;font-weight:600;color:var(--grey);flex:none;
}
.pathstage.active .pathstage-n{border-color:var(--blue);color:var(--blue);border-width:2px}
.pathstage-line{flex:1;width:1px;background:var(--grey-line);margin-top:6px;min-height:30px}
.pathstage-body{flex:1;min-width:0;padding-bottom:6px}
.pathstage.active .pathstage-body > .card{border-color:var(--blue)}
@media (max-width:640px){
  .pathstage{gap:10px}
  .pathstage-rail{width:26px}
  .pathstage-n{width:26px;height:26px;font-size:12px}
}

/* ============================================================
   Inline study blocks on day pages
   ============================================================ */
.study{border:1px solid var(--grey-line);padding:18px;margin-bottom:16px;background:var(--canvas)}
.study.is-done{background:var(--grey-bg)}
.study-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.study-t{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.study-p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin:10px 0 0}
.study-p b{color:var(--ink)}
.study .ytwrap{margin:12px 0}
.pdfwrap{border:1px solid var(--grey-line);margin-top:14px}
.pdfwrap summary{padding:11px 14px;cursor:pointer;font-size:13.5px;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px;color:var(--blue)}
.pdfwrap summary::-webkit-details-marker{display:none}
.pdfwrap[open] summary{border-bottom:1px solid var(--grey-line)}
.pdfwrap iframe{width:100%;height:70vh;border:0;display:block;background:var(--grey-bg)}
@media (max-width:640px){.study{padding:14px}.pdfwrap iframe{height:60vh}}

/* ============================================================
   The restructure — Today, the block screen, the shelf, the notes

   Nothing here introduces a new interaction primitive or a second colour.
   Blocks reuse .task and .card, the pips are squares on a row, and depth
   is expressed by what is on screen rather than by decoration.
   ============================================================ */

/* --- the week strip: this week only, never the 90-day total --- */
.wkstrip{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  padding:0 2px 8px;
}
.wkstrip .dot{color:var(--grey-soft)}
.wkstrip .spacer{flex:1}
.bar.thin{height:3px}

/* --- the one card that is the whole day --- */
.todaycard{margin-top:18px}
.todaycard.is-done{border-color:var(--blue);background:var(--blue-soft)}

/* row-gap stays tight: these wrap to two lines on a phone and a 14px row gap
   left the last block stranded in white space */
.pips{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:0;margin:16px 0 20px}
.pips.tight{column-gap:12px;row-gap:0;margin:12px 0 18px}
.pip{
  display:flex;align-items:center;gap:7px;min-height:44px;
  color:var(--grey);text-decoration:none;
}
.pip:hover{text-decoration:none}
.pipbox{
  width:11px;height:11px;flex:none;border:1.5px solid var(--grey-line);background:var(--canvas);
}
.pip.done .pipbox{background:var(--blue);border-color:var(--blue)}
.pip.now .pipbox{border-color:var(--blue);border-width:2px}
.pip.now .pipl{color:var(--blue)}
.pipl{font-size:13px;font-weight:600;color:var(--ink-soft)}
.pip.done .pipl{color:var(--grey)}
.pipm{font-family:var(--mono);font-size:10.5px;color:var(--grey-soft)}

.btn.wide{width:100%;justify-content:center;min-height:48px;font-size:15px}

.escapes{display:flex;flex-direction:column;align-items:center;gap:2px;margin:14px 0 6px}
.escapes a{font-size:14px;color:var(--grey);padding:10px 4px;text-align:center;line-height:1.4}

/* --- the block screen --- */
.blocktop{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;border-bottom:1px solid var(--grey-line);margin-bottom:6px;
}
.blocktop .spacer{flex:1}
/* Google Sans Code sets wider than the system mono it replaced, so the
   secondary day label needs an explicit size or it competes with the title */
.blocktop .mono{font-size:12px;letter-spacing:.02em}
.backlink{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--grey);
  font-weight:600;min-height:44px;flex:none;
}
.blockhead{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0 16px;border-bottom:1px solid var(--grey-line);margin-bottom:18px;
}
.blockhead > svg{color:var(--blue);flex:none;margin-top:3px}
.blockfoot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:28px;padding-top:18px;border-top:1px solid var(--grey-line);
}
.blockfoot .spacer{flex:1}
.tasklist{border:1px solid var(--grey-line)}
.tasklist .task:not(:last-child){border-bottom-color:var(--grey-line)}

/* --- words met here, named once, before the work --- */
.newwords{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:12px 14px;background:var(--grey-bg);margin-bottom:16px;
}
.newwords .nl{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
}
.termchip{
  font-size:13px;font-weight:600;color:var(--blue);
  border-bottom:1px dotted var(--blue);padding:4px 0;
}
.termchip:hover{text-decoration:none;border-bottom-style:solid}

/* --- the shelf --- */
.lookrow{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 2px;border-bottom:1px solid var(--grey-line);color:var(--ink);
}
.lookrow:hover{text-decoration:none;background:var(--grey-bg)}
.lookrow .chip{flex:none;margin-top:2px}
.lookt{font-size:15px;font-weight:700;line-height:1.35}
.lookd{font-size:13.5px;color:var(--grey);line-height:1.5;margin-top:2px}

.lead-p{font-size:19px;line-height:1.6;color:var(--ink);margin:14px 0 22px}

.locked{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px dashed var(--grey-line);padding:16px;color:var(--grey);font-size:14px;
}
.locked span{display:flex;align-items:center;gap:8px;flex:1;min-width:0}

.daychips{display:flex;flex-wrap:wrap;gap:8px}
.daychip{
  font-family:var(--mono);font-size:11px;font-weight:600;
  border:1px solid var(--grey-line);padding:8px 10px;color:var(--grey);
}
.daychip:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}

/* --- notes --- */
.noterow{border:1px solid var(--grey-line);padding:14px;margin-bottom:10px}
.noterow.open{border-left:3px solid var(--blue)}
.notequote{
  font-size:13.5px;color:var(--grey);border-left:2px solid var(--grey-line);
  padding-left:10px;margin:8px 0;line-height:1.5;
}
.notebody{font-size:15px;line-height:1.6;margin-top:6px}
.noteanswer{
  font-size:14.5px;line-height:1.6;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--grey-line);color:var(--ink-soft);
}

@media (max-width:640px){
  .pips{gap:10px}
  .pipl{font-size:14px}
  .blockhead{gap:10px}
  .blockfoot .btn{flex:1;justify-content:center}
}

/* ============================================================
   The passcode gate
   ============================================================ */
.gate-back{
  position:fixed;inset:0;z-index:5000;background:var(--canvas);
  display:grid;place-items:center;padding:24px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
body.gated{overflow:hidden}
.gate-card{width:100%;max-width:380px;text-align:left}
.gate-mark{
  width:44px;height:44px;border:1px solid var(--blue);color:var(--blue);
  display:grid;place-items:center;margin-bottom:20px;
}
.gate-card h1{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.012em;margin:0 0 8px}
.gate-sub{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 22px}
.gate-l{
  display:block;font-family:var(--mono);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);margin-bottom:7px;
}
#gatecode{
  width:100%;font-family:var(--mono);
  font-size:22px;letter-spacing:.5em;text-align:center;padding:14px 12px;
  border:1px solid var(--grey-line);background:var(--canvas);color:var(--ink);
}
#gatecode:focus{outline:none;border-color:var(--blue)}
#gatego{width:100%;justify-content:center;margin-top:14px;min-height:48px}
.gate-err{
  font-size:13.5px;color:var(--blue);margin-top:14px;min-height:20px;line-height:1.5;
}
.gate-foot{
  font-size:12.5px;color:var(--grey);margin-top:26px;
  padding-top:16px;border-top:1px solid var(--grey-line);
}

/* the save indicator tells her which of the three states she is in */
.savedot i{background:var(--grey-soft)}
body[data-sync=ok] .savedot i{background:var(--blue)}
body[data-sync=syncing] .savedot i{background:var(--blue);opacity:.5}
body[data-sync=offline] .savedot i,
body[data-sync=error] .savedot i{background:var(--ink)}

/* ============================================================
   Touch ergonomics — keyed to the pointer, not the width.

   A tablet is 768-1024px wide and entirely thumb-driven, so anything sized
   off the phone breakpoint alone left every control on an iPad at mouse
   dimensions. Last in the file on purpose: these share their specificity
   with the base component rules, so they only win by coming after them.
   ============================================================ */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .filters button{min-height:36px}
  .copybtn{min-height:40px;padding:8px 12px}
  .topbar .burger,.kbtn{min-width:44px;min-height:44px}
  .daynav .dnav{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0}
  .drawer-close{width:44px;height:44px}
  .rail a.navitem{min-height:44px}
  .rescard .rt{display:inline-block;padding:5px 0}
  a.mono{display:inline-block;padding:8px 0}
  input[type=text],input[type=url],input[type=number],input[type=search],select{min-height:44px}
  /* iPhone Safari is the one that zooms the page on a sub-16px field, but
     several Android tablets do it too, and 16px suits a thumb regardless */
  input[type=text],input[type=url],input[type=date],input[type=number],
  input[type=search],select,textarea,#cmdinput,#homestart{font-size:16px}
  #homestart{min-height:44px}
  /* nothing to hover with, so the "this row opens a guide" mark stays on */
  .task .open-detail{opacity:1}
}