/* ===========================================================================
   theme.css — Benjamin's own tokens, plus the components both pages share.

   The palette is his supplied Tailwind/shadcn theme: neutral greyscale, Geist,
   0.5rem radius. Three semantic colours are added because the tool has to say
   good / middling / bad at a glance and greyscale cannot.

   Both pages load this. A verdict must not look different depending on whose
   screen it is on.
   =========================================================================== */

:root{
  --bg:#FCFCFC;
  --surface:#FFFFFF;
  --sunk:#F6F6F6;
  --ink:#0A0A0A;
  --body:#2E2E2E;
  --muted:#6E6E6E;
  --faint:#9C9C9C;
  --line:#E6E6E6;
  --line-soft:#F0F0F0;

  --good:#2F7D4F;  --good-bg:#EDF6F0;  --good-line:#C3DFCF;
  --warn:#8F6300;  --warn-bg:#FBF3E1;  --warn-line:#E5D4A6;
  --bad:#AE372E;   --bad-bg:#FAECEA;   --bad-line:#E7C3BE;
  --live:#2B4A75;  --live-bg:#EBF1F8;  --live-line:#C4D3E8;

  --good-fill:#7D9068;
  --warn-fill:#C99F5E;
  --bad-fill:#B06F5C;

  --radius:.5rem;
  --sans:Geist, ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0B; --surface:#141414; --sunk:#101010;
    --ink:#F5F5F5; --body:#D0D0D0; --muted:#949494; --faint:#6C6C6C;
    --line:#262626; --line-soft:#1B1B1B;
    --good:#7CC698; --good-bg:#111E16; --good-line:#26482F;
    --warn:#DCAD4E; --warn-bg:#1F1A0B; --warn-line:#4A3A19;
    --bad:#E08A80;  --bad-bg:#1F1211;  --bad-line:#4C2926;
    --live:#8FB2DE; --live-bg:#0F1722; --live-line:#25384F;
    --good-fill:#93A87C; --warn-fill:#D6AF74; --bad-fill:#C4816D;
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0B; --surface:#141414; --sunk:#101010;
  --ink:#F5F5F5; --body:#D0D0D0; --muted:#949494; --faint:#6C6C6C;
  --line:#262626; --line-soft:#1B1B1B;
  --good:#7CC698; --good-bg:#111E16; --good-line:#26482F;
  --warn:#DCAD4E; --warn-bg:#1F1A0B; --warn-line:#4A3A19;
  --bad:#E08A80;  --bad-bg:#1F1211;  --bad-line:#4C2926;
  --live:#8FB2DE; --live-bg:#0F1722; --live-line:#25384F;
    --good-fill:#93A87C; --warn-fill:#D6AF74; --bad-fill:#C4816D;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--body);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:28px 20px 96px}
.wrap.wide{max-width:920px}

h1{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px;text-wrap:balance}
h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin:34px 0 12px}
h3{font-size:16px;font-weight:600;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
p{margin:0 0 12px}
a{color:var(--live)}
.lede{color:var(--muted);font-size:15px;margin:0 0 4px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ shell */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.topbar .brand{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.topbar .who{font-size:13px;color:var(--muted)}
.themebtn{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:5px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);color:var(--muted);
}
.themebtn:hover{color:var(--ink);border-color:var(--faint)}
.themebtn:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.crumb{margin:0 0 14px;font-size:13.5px}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--ink)}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 12px;
}
.card.sunk{background:var(--sunk)}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.card-h h3{margin:0}

.kv{display:grid;grid-template-columns:112px 1fr;gap:7px 14px;font-size:14.5px}
.kv dt{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.kv dd{margin:0;color:var(--body)}
.unk{color:var(--faint);font-style:italic}

/* ------------------------------------------------------------------ pills */
.pill{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;
  border:1px solid var(--line);color:var(--muted);background:var(--bg);white-space:nowrap;
}
.pill.good{color:var(--good);background:var(--good-bg);border-color:var(--good-line)}
.pill.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.pill.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.pill.live{color:var(--live);background:var(--live-bg);border-color:var(--live-line)}

/* ------------------------------------------------------------- the verdict */
.verdict{border-radius:var(--radius);padding:15px 17px;border:1px solid var(--line);background:var(--surface);margin:0 0 12px}
.verdict .vk{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:5px}
.verdict .vt{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 5px;letter-spacing:-.01em}
.verdict .vb{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0}
.verdict.good{background:var(--good-bg);border-color:var(--good-line)} .verdict.good .vt{color:var(--good)}
.verdict.warn{background:var(--warn-bg);border-color:var(--warn-line)} .verdict.warn .vt{color:var(--warn)}
.verdict.bad{background:var(--bad-bg);border-color:var(--bad-line)}    .verdict.bad .vt{color:var(--bad)}
.verdict.unknown{background:var(--sunk);border-style:dashed}           .verdict.unknown .vt{color:var(--body)}

/* --------------------------------------------------------------- weigh-ins */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{
  border:1px solid var(--line);border-radius:6px;background:var(--bg);
  min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);
}
.day .dl{font-size:9.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin-bottom:2px}
.day.on{background:var(--surface);border-color:var(--line)}
.day.off{color:var(--faint)}
.day input{
  width:100%;border:0;background:transparent;text-align:center;
  font:500 16px var(--mono);color:var(--ink);padding:0;-moz-appearance:textfield;
}
.day input:focus{outline:2px solid var(--live);outline-offset:1px;border-radius:3px}
.day input::-webkit-outer-spin-button,.day input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rel{margin:10px 0 0;font-size:13.5px;font-family:var(--mono);letter-spacing:.01em}
.rel.none,.rel.thin{color:var(--bad)}
.rel.ok{color:var(--warn)}
.rel.good{color:var(--good)}

/* ------------------------------------------------------------------ table */
.weeks{width:100%;border-collapse:collapse;font-size:14px}
.weeks th{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);text-align:left;
  padding:0 10px 8px 0;border-bottom:1px solid var(--line);
}
.weeks td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.weeks tr:last-child td{border-bottom:0}
.weeks .n{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:13px}
.weeks a{text-decoration:none;color:var(--ink);font-weight:600}
.weeks a:hover{text-decoration:underline}
.dots{display:flex;gap:3px}
.dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);background:var(--bg)}
.dot.y{background:var(--good);border-color:var(--good)}
.dot.n{background:var(--bad);border-color:var(--bad)}
.tscroll{overflow-x:auto}

/* ----------------------------------------------------------------- inputs */
label.f{display:block;margin:0 0 12px}
label.f span{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
/* 16px is not a taste decision. Safari on iOS zooms the whole page whenever a
   focused input's text is under 16px, which throws the layout sideways the
   moment a client taps a field. Every input here is therefore 16px minimum.
   The fix is the font size, NOT disabling pinch-zoom in the viewport tag —
   that breaks zoom for anyone who needs it. */
input[type=text],input[type=number],input[type=date],input[type=time],
input[type=email],input[type=password],input[type=tel],input[type=search],
input:not([type]),textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--sans);
}
textarea{resize:vertical;min-height:74px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--live);outline-offset:0;border-color:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

.btn{
  font:600 14.5px var(--sans);padding:10px 16px;border-radius:6px;cursor:pointer;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);
}
.btn:hover{opacity:.88}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);opacity:1}
.btn.sm{font-size:13px;padding:7px 12px}
.btn:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.saved{font-size:13px;color:var(--good);font-family:var(--mono)}

.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  font:500 13.5px var(--sans);padding:7px 13px;border-radius:6px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);color:var(--body);
}
.seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg button:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.seg.lights button.on[data-v=g]{background:var(--good-fill);border-color:var(--good-fill);color:#fff}
.seg.lights button.on[data-v=a]{background:var(--warn-fill);border-color:var(--warn-fill);color:#241d12}
.seg.lights button.on[data-v=r]{background:var(--bad-fill);border-color:var(--bad-fill);color:#fff}

/* The Big Three and "did you do last week's focus" are the same kind of answer
   as the lights -- a signal, not a preference -- and the live tool colours all
   three the same way (app/index.html:88, 104). v2 filled these two black, so a
   week where everything was missed looked identical to one where everything was
   hit until you read the words. Benjamin: "the colour isn't actually visible in
   the client view the way it was in our original check-in tool... that's
   something that gives them information on how they're performing." */
.seg.yn button.on[data-v=y]{background:var(--good-fill);border-color:var(--good-fill);color:#fff}
.seg.yn button.on[data-v=n]{background:var(--bad-fill);border-color:var(--bad-fill);color:#fff}
.seg.done button.on[data-v=yes]{background:var(--good-fill);border-color:var(--good-fill);color:#fff}
.seg.done button.on[data-v=partly]{background:var(--warn-fill);border-color:var(--warn-fill);color:#241d12}
.seg.done button.on[data-v=no]{background:var(--bad-fill);border-color:var(--bad-fill);color:#fff}

/* ------------------------------------------------------------------ misc */
.hide{display:none !important}
.note{font-size:13.5px;color:var(--muted);line-height:1.55}
.hint{font-size:13px;color:var(--faint);margin:6px 0 0}
.sep{height:1px;background:var(--line);margin:22px 0}
.out{
  font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre-wrap;
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;color:var(--body);cursor:pointer;overflow-x:auto;
}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:0 0 5px;font-size:14.5px;line-height:1.5}

/* --- the standing profile ----------------------------------------------
   .lbl, .prof and .edited were being used by the coach view before they were
   ever defined, so the profile block rendered with no hierarchy at all. Same
   device as everywhere else in the tool: the label is small, uppercase and
   letter-spaced so the content beside it reads as the content. */
.prof{margin-top:2px}
.lbl{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin:18px 0 7px;
}
.prof .bullets li{margin-bottom:7px}
.edited{
  font-size:12.5px;color:var(--faint);line-height:1.5;
  margin:14px 0 0;padding-top:11px;border-top:1px solid var(--line);
}

@media (max-width:560px){
  .wrap{padding:20px 14px 72px}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dt{padding-top:8px}
  .row2{grid-template-columns:1fr}
  .days{gap:4px}
  .day{min-height:46px;font-size:12px}
}

/* ===========================================================================
   The information devices, ported from the live tool — STRUCTURE ONLY.

   Benjamin, on the first attempt at this: "it feels like you've actually just
   taken elements like colors and things like that straight out of the other
   check-in form and stuck them into this one… I want the neutral version, so
   that we're not doing any design thinking for the sake of aesthetics."

   So: the hierarchy is carried by SIZE and POSITION, not by colour. Nothing
   here has a tinted panel, a gradient or a display weight. Colour appears in
   exactly one place — the strips — because there colour IS the data.
   =========================================================================== */

/* --- the two-box hero: actual AND target, with a verdict ----------------- */
.twobox{display:flex;gap:10px;margin:0 0 10px}
.box{
  flex:1;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 14px;min-width:0;
}
.box .cap{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:8px;
}
.box .fig{
  font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.box .fig small{
  font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
.box .vd{
  margin-top:8px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* The only signal colour on the hero, and only on the word itself. */
.box .vd.hit{color:var(--good)}
.box .vd.miss{color:var(--bad)}

.subline{
  font-size:13px;color:var(--muted);margin:8px 0 0;
  font-variant-numeric:tabular-nums;
}

/* Plain notes. No coloured fill — a rule on the left is enough to separate
   them from body copy, and it does not shout. */
.flag,.wiwarn{
  border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:0 6px 6px 0;padding:11px 14px;font-size:13.5px;
  color:var(--body);margin:12px 0 0;line-height:1.5;background:var(--surface);
}
.flag{border-left-color:var(--bad)}

/* --- the strips: the whole phase in one glance -------------------------- */
.strips{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.strip{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.strip:last-child{margin-bottom:0}
.strip .sl{width:70px;flex:none;font-size:12.5px;color:var(--muted)}
.strip .cells{display:flex;gap:3px;flex:1;min-width:0}
.strip .cells .c{
  flex:1;height:13px;border-radius:3px;background:var(--line);min-width:0;
}
.strip .cells .c.g{background:var(--good-fill)}
.strip .cells .c.a{background:var(--warn-fill)}
.strip .cells .c.r{background:var(--bad-fill)}
.strip .cells .c.now{outline:1.5px solid var(--faint);outline-offset:1px}
.striphdr{display:flex;gap:8px;margin-bottom:8px}
.striphdr .sl{width:70px;flex:none}
.striphdr .cells{display:flex;gap:3px;flex:1;min-width:0}
.striphdr .cells span{
  flex:1;text-align:center;font-size:10px;color:var(--faint);
  font-family:var(--mono);min-width:0;
}
/* Target is the outcome; the six under the rule are its inputs. */
.strip-target{padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.strip-target .sl{color:var(--ink);font-weight:600}

/* --- the chart ----------------------------------------------------------- */
.chartwrap{position:relative}
.chartip{
  position:absolute;transform:translate(-50%,-100%);pointer-events:none;
  background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:11px;
  padding:6px 9px;border-radius:5px;white-space:nowrap;z-index:5;
}
.chartwrap .hit:hover{fill:var(--ink);fill-opacity:.06}
.chartkey{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;
  font-size:12px;color:var(--muted);
}
.chartkey .k{width:14px;height:2.5px;border-radius:2px;background:var(--ink);margin-left:10px}
.chartkey .k:first-child{margin-left:0}
.chartkey .k-day{opacity:.3}
.chartkey .k-tgt{background:transparent;height:0;border-top:2px dashed var(--faint)}

/* --- "what is this page for?" — the helper the old tool had -------------- */
.howto{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 16px;background:var(--surface)}
.howto-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;background:transparent;border:0;cursor:pointer;
  font:500 14px var(--sans);color:var(--muted);text-align:left;
}
.howto-toggle:hover{color:var(--ink)}
.howto-toggle:focus-visible{outline:2px solid var(--live);outline-offset:-2px;border-radius:var(--radius)}
.howto-chev{transition:transform .18s ease;color:var(--faint)}
.howto.open .howto-chev{transform:rotate(90deg)}
.howto-body{display:none;padding:0 15px 15px;font-size:14.5px;line-height:1.6;color:var(--body)}
.howto.open .howto-body{display:block}
.howto-body p{margin:0 0 9px}
.howto-body p:last-child{margin-bottom:0}
.howto-body .lead{color:var(--ink);font-weight:600}

@media (max-width:560px){
  .twobox{gap:8px}
  .box{padding:14px 11px}
  .box .fig{font-size:22px}
  .box .fig small{font-size:11.5px}
  .strip .sl,.striphdr .sl{width:56px;font-size:11.5px}
}

/* --- flags: the runs worth noticing, ported from renderReport() ---------- */
.flags{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:6px 16px}
.fl{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.5}
.fl:last-child{border-bottom:0}
.fl-i{width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:8px}
.fl-x .fl-i,.fl-m .fl-i{background:var(--bad-fill)}
.fl-r .fl-i{background:var(--bad-fill)}
.fl-ok .fl-i{background:var(--good-fill)}
/* The client's own explanation, carried under the flag it belongs to. His
   treatment, from .rlnote in the live tool: indented to the flag's text column,
   italic, muted, and pulled up tight so it reads as a sub-line of the flag
   above rather than as another flag. */
.fl-note{
  font-size:14px;line-height:1.5;color:var(--muted);font-style:italic;
  margin:-4px 0 0 16px;padding:0 0 11px;border-bottom:1px solid var(--line-soft);
}
.fl-note:last-child{border-bottom:0;padding-bottom:2px}
/* the flag directly above its own note loses its rule, so the pair reads as one */
.fl:has(+ .fl-note){border-bottom:0;padding-bottom:4px}
/* --- the today box: the one thing this page is for on most days --------- */
/* Prominent through SIZE and SPACE, not through a heavy outline. A 2px black
   border made it shout against a page that is otherwise all hairlines, which
   read as incohesive rather than as important. */
.todaybox{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px 22px;margin:0 0 14px;background:var(--surface);
}
.todaybox .tl{
  font-size:17px;font-weight:600;color:var(--ink);margin:0 0 3px;letter-spacing:-.01em;
}
.todaybox .ts{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.todayrow{display:flex;gap:8px}
.todayrow input{
  flex:1;min-width:0;font-size:20px;font-weight:500;padding:14px 16px;
  font-variant-numeric:tabular-nums;border:1px solid var(--line);background:var(--bg);
}
.todayrow input::placeholder{font-weight:400;color:var(--faint)}
.todayrow button{flex:none;padding:14px 24px;font-size:15px}
.todaydone{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:15px;color:var(--body);
}
.todaydone b{font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.todaydone .re{font-size:13.5px;color:var(--muted);cursor:pointer;text-decoration:underline}

/* --- the top bar on a phone ---------------------------------------------
   375px is the real target: every client uses this on their phone. The bar
   was wrapping onto three lines and eating a third of the first screen. */
@media (max-width:560px){
  .topbar{padding:10px 14px;gap:8px}
  .topbar .brand{font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
  .topbar .who{display:none}            /* they know who they are */
  .themebtn{padding:5px 8px;font-size:9.5px;letter-spacing:.05em;white-space:nowrap}
  .todaybox{padding:16px 14px 18px}
  .todayrow input{font-size:17px;padding:12px 12px}
  .todayrow button{padding:12px 16px;font-size:14px}
  .day{min-height:44px}
  .weeknav .wk{font-size:17px}
}

/* The three Big Three rows must wrap the same way as each other. A long target
   line ("8,000 a day, 10k on non-training days") was pushing only that row's
   buttons onto a second line, so the three read as different components. */
@media (max-width:560px){
  /* Stay left/right even on a phone. The buttons shrink; the label wraps. */
  .b3row .seg button,.lightrow .seg button{padding:7px 9px;font-size:12.5px}
  .b3row .t,.lightrow .ln{font-size:13.5px}
  .b3row .t b{font-size:14.5px}
}

/* The phase theme, sitting above the week's box on the coach side so the week
   is written in service of something rather than in isolation. */
.phasebar{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:start;
  padding:12px 14px;margin:0 0 16px;border:1px solid var(--line);
  border-radius:6px;background:var(--sunk);
}
.phasebar .pl{
  grid-column:1;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
}
.phasebar .pv{grid-column:1;font-size:14.5px;line-height:1.45;color:var(--body)}
.phasebar .pp{grid-column:1;font-size:13px;color:var(--muted)}
.phasebar button{grid-column:2;grid-row:1 / span 3;align-self:center}

.banner{padding:12px 15px;border-radius:var(--radius);margin:0 0 14px;font-size:14.5px;line-height:1.5}
.banner.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}
.banner.bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);cursor:pointer}

/* Previewing someone else's screen. Everything that WRITES is inert and looks
   it; everything that NAVIGATES still works, because looking around is the
   entire point of being here. */
body.previewing .card input,
body.previewing .card textarea,
body.previewing .card .seg button,
body.previewing .card .btn,
body.previewing .todaybox input,
body.previewing .todaybox .btn,
body.previewing .days input{
  pointer-events:none;opacity:.55;
}
body.previewing .card .btn,
body.previewing .todaybox .btn{filter:grayscale(1)}

/* The dog in the top bar. Sized to the cap height of the wordmark beside it so
   it reads as one lockup rather than an icon with text next to it. */
.topbar .brand{display:inline-flex;align-items:center;gap:9px}
.topbar .brand img{
  width:22px;height:22px;border-radius:5px;display:block;flex:none;
}
@media (max-width:560px){
  .topbar .brand img{width:19px;height:19px;border-radius:4px}
}