/* bud — the app's visual system.
   Paper and ink; frosted glass with a soft shadow and a lit edge (round 3); one white selection
   with a black pictogram; Aeonik, tight but never touching (optical.js opens the pairs that would). */

@font-face{font-family:"Aeonik Pro";src:url(../assets/fonts/aeonik-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Aeonik Pro";src:url(../assets/fonts/aeonik-500.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Aeonik Pro";src:url(../assets/fonts/aeonik-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik Fono";src:url(../assets/fonts/fono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#F2F2F2; --ink:#000; --soft:rgba(0,0,0,.5); --faint:rgba(0,0,0,.32); --hair:rgba(0,0,0,.12);
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.74); --rim:rgba(255,255,255,.95); --edge:rgba(0,0,0,.06);
  --shade:0 14px 34px -14px rgba(0,0,0,.2); --knob:#fff; --kshadow:0 6px 16px -6px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.08);
  --icon:#000; --cta:#000; --cta-ink:#F2F2F2; --sheet:rgba(250,250,250,.72);
  /* ---------- ROUND 15 · A CHOSEN THING IS BLACK (one pair, the whole app) ----------
     His words: "make sure the buttons to choose from (the emotions in the check in for exampkle)
     become black when pressed". Everywhere a man picks from a set and the choice sticks, the chosen
     one is a solid block of ink with light type. One pair of tokens, read by every such rule (the
     list is under "THE ONE RULE" below); unchosen is untouched. */
  --pick:#000; --pick-ink:#F2F2F2;
  --wash-a:rgba(190,230,110,.55); --wash-b:rgba(200,170,245,.45); --wash-c:rgba(120,220,200,.4);
  --f:"Aeonik Pro",-apple-system,system-ui,sans-serif; --f-data:"Aeonik Fono","Aeonik Pro",ui-monospace,monospace;
  --gap:24px; --r-win:30px; --r-ctl:28px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);

  /* ---------- ROUND 13 · THE ONE RAIL ----------
     Every full-width thing on the phone — the screen's own content, the sheet, the tab bar —
     starts and ends on this line. Round 12 had three (20 / 10 / 14), which is what he saw:
     "the bottom one is wider than the one above". One token, one edge. */
  --gut:20px;          /* left and right, every screen and every piece of furniture */
  --pad-win:20px;      /* a card's own padding, inside the rail */

  /* ---------- ROUND 14 · TYPE: SCALE B, BROUGHT DOWN (studio/type12) ----------
     "i feel like type sizes are too big here, how was it before? the scale b (smaller text sizes
     are better)". Scale B's system is kept whole — one ratio of 1.2, nine steps, one token per
     step, every line height on a 4 px grid, control heights an 8 px ladder from 36 — and the
     whole ladder is moved down one step, from the label at 15 px to the label at 14 px:
       round 13 (scale B):  10.5 · 12.5 · 15 · 18 · 21.5 · 26 · 31 · 37 · 45
       round 14 (now):      10   · 11.5 · 14 · 17 · 20   · 24 · 29 · 35 · 42
       before scale B:      10.5 · 11.5 · 14 · 17 · 19   · 24 · 27 · 40 · 48   (measured, studio/type12)
     So the label sits 1 px below where it was before scale B, the chip and the body sit exactly
     where they were, and the two biggest steps sit well below. Only "head" ends a shade above
     (29 against 27): the ratio puts it there, and it carries five short lines in the whole app.
     "micro" is the one step rounded up rather than down (9.7 → 10, not 9.5) because it is the
     word under each tab, and 9.5 px is below what that bar can carry.
     NOTHING IN THE APP CARRIES A RAW SIZE: every rule reads one of these tokens.
     The minimum and the maximum are in rem, so the "text size" setting in "you" still moves
     the whole interface together (js/app.js sets the root font size). The growth term is in
     px on purpose: it answers the width of the screen, not the man's preference. */
  --fs-micro:0.625rem;                                                                    /* 10 */
  --fs-data:0.71875rem;                                                                   /* 11.5 */
  --fs-chip:clamp(0.875rem, calc(0.875rem + (100vw - 393px) * 0.001691), 0.96875rem);     /* 14 → 15.5 */
  --fs-label:clamp(0.875rem, calc(0.875rem + (100vw - 393px) * 0.001691), 0.96875rem);    /* 14 → 15.5 */
  --fs-btn:clamp(1.0625rem, calc(1.0625rem + (100vw - 393px) * 0.001691), 1.15625rem);    /* 17 → 18.5 */
  --fs-body:clamp(1.0625rem, calc(1.0625rem + (100vw - 393px) * 0.001691), 1.15625rem);   /* 17 → 18.5 */
  --fs-lead:clamp(1.25rem, calc(1.25rem + (100vw - 393px) * 0.002255), 1.375rem);         /* 20 → 22 */
  --fs-title:clamp(1.5rem, calc(1.5rem + (100vw - 393px) * 0.002819), 1.65625rem);        /* 24 → 26.5 */
  --fs-head:clamp(1.8125rem, calc(1.8125rem + (100vw - 393px) * 0.003382), 2rem);         /* 29 → 32 */
  --fs-display:clamp(2.1875rem, calc(2.1875rem + (100vw - 393px) * 0.003946), 2.40625rem);/* 35 → 38.5 */
  --fs-giant:clamp(2.625rem, calc(2.625rem + (100vw - 393px) * 0.00451), 2.875rem);       /* 42 → 46 */
  --fs-breath:calc(var(--fs-giant) * 1.69);   /* the one word in the breathing screen: off the ladder on purpose */
  --lh-micro:1.2;    --lh-data:1.391;  --lh-chip:1.429; --lh-label:1.429; --lh-btn:1.412;
  --lh-body:1.412;   --lh-lead:1.4;    --lh-title:1.167; --lh-head:1.103; --lh-display:1.029; --lh-giant:.952;
  --tr-micro:.01em;  --tr-data:.004em; --tr-chip:-.004em; --tr-label:-.004em; --tr-btn:-.008em;
  --tr-body:-.008em; --tr-lead:-.012em; --tr-title:-.022em; --tr-head:-.026em; --tr-display:-.03em; --tr-giant:-.032em;
  --ctl-tag:26px; --ctl-chip:36px; --ctl-sm:44px; --ctl:52px; --ctl-act:60px; --ctl-bar:64px;
  color-scheme:light;
}
/* dark: follows the phone, unless the page is told otherwise (data-theme on the root) */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#0B0B0E; --ink:#EDEDF0; --soft:rgba(237,237,240,.52); --faint:rgba(237,237,240,.3); --hair:rgba(255,255,255,.11);
  --glass:rgba(255,255,255,.07); --glass-2:rgba(255,255,255,.12); --rim:rgba(255,255,255,.18); --edge:rgba(255,255,255,0);
  --shade:0 14px 34px -14px rgba(0,0,0,.65); --knob:rgba(255,255,255,.18); --kshadow:0 6px 18px -6px rgba(0,0,0,.6);
  --icon:#fff; --cta:#EDEDF0; --cta-ink:#0B0B0E; --sheet:rgba(28,28,34,.62);
  /* at night a black chip would vanish into a #0B0B0E ground, so "chosen" turns over with the
     theme: it stays the solid block of ink, and at night the ink is the light one. */
  --pick:#EDEDF0; --pick-ink:#0B0B0E;
  --wash-a:rgba(120,170,60,.32); --wash-b:rgba(150,100,210,.3); --wash-c:rgba(60,170,150,.26);
  color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#0B0B0E; --ink:#EDEDF0; --soft:rgba(237,237,240,.52); --faint:rgba(237,237,240,.3); --hair:rgba(255,255,255,.11);
  --glass:rgba(255,255,255,.07); --glass-2:rgba(255,255,255,.12); --rim:rgba(255,255,255,.18); --edge:rgba(255,255,255,0);
  --shade:0 14px 34px -14px rgba(0,0,0,.65); --knob:rgba(255,255,255,.18); --kshadow:0 6px 18px -6px rgba(0,0,0,.6);
  --icon:#fff; --cta:#EDEDF0; --cta-ink:#0B0B0E; --sheet:rgba(28,28,34,.62);
  /* at night a black chip would vanish into a #0B0B0E ground, so "chosen" turns over with the
     theme: it stays the solid block of ink, and at night the ink is the light one. */
  --pick:#EDEDF0; --pick-ink:#0B0B0E;
  --wash-a:rgba(120,170,60,.32); --wash-b:rgba(150,100,210,.3); --wash-c:rgba(60,170,150,.26);
  color-scheme:dark }

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--paper)}
body{font-family:var(--f);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--tr-label);overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
textarea,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
/* ---------- ROUND 15 · THE ONE RULE: A CHOSEN THING IS BLACK ----------
   Every control where a man picks from a set and the choice sticks reads the one token pair
   (--pick / --pick-ink) and nothing else. They are, in the order they appear in this file:
     .chip[aria-pressed]            the words in the check-in · what it is about · "everywhere" ·
                                    the body places (body=b3) · the herbarium's filters · a note's
                                    kinds and "did i say what mattered" · a plan's strength, "if i
                                    notice", a pairing, what is ready to send, "did it help" · the
                                    nicknames · every setting in "you" that is a choose() · every
                                    studio switch, the desktop shell among them · learn's three
                                    chips · the story's watch / read / sound · the lock's length
     .signs .sign[aria-pressed]     a sign instead of a photo (and the same on the printed pass)
     .wmap .wl[aria-pressed]        the word map (studio switch words=w2)
     .sw[aria-checked]              every switch in "you"
     .seg2 button[aria-pressed]     help's tabs · buddies' two tabs · a sign or a face · which page
                                    · a plan's three levels (.seg3)
     .bdots .flip button            front or back of the body figure
     .tk[aria-pressed] .tick        the tick boxes (what i'd tell my doctor, a session's list)
     .pg[aria-pressed]              "start from" in the plan gallery
     .note .npin[aria-pressed]      a pinned note
     .hseg button[aria-pressed]     the herbarium's head (option b)
     #find .fr[aria-selected]       the ⌘K search's row under the cursor (css/desktop.css)
   The bottom tab bar is deliberately NOT in this list: it is where you are, not what you picked,
   and the white selection with a black pictogram is the app's own mark. Say the word and it joins.
   Chosen AND focused by a keyboard would be ink on ink, so the chosen thing then also carries a
   hairline of its own light type just inside its edge — the rule for that is the last one in this
   file, because each rule above sets box-shadow:none and the later of two equals wins. */

/* ---------- type: the four standing classes, on scale B ----------
   ROUND 13 · NO RULE BELOW CARRIES A SIZE OF ITS OWN. Every one reads a --fs-/--lh-/--tr- token
   from :root, and those tokens are scale B (studio/type12). 1rem is the root font size, which
   js/app.js sets from the "text size" setting in "you" — four steps, so the whole interface grows
   together. A new rule picks a step; it never invents one. */
.t1{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--tr-label);font-weight:500}
.t2{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);font-weight:400}
.t3{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-title);font-weight:500}
.t4{font-size:var(--fs-giant);line-height:var(--lh-giant);letter-spacing:var(--tr-giant);font-weight:500}
.data{font-family:var(--f-data);font-size:var(--fs-data);line-height:var(--lh-data);letter-spacing:var(--tr-data);font-variant-numeric:tabular-nums}
.soft{color:var(--soft)} .faint{color:var(--faint)}
.you{font-style:italic}
.op{letter-spacing:inherit}

/* ---------- the ground: paper + a soft wash that follows bud's colours ---------- */
#ground{position:fixed;inset:0;z-index:0;background:var(--paper)}
#wash{position:absolute;inset:-20%;filter:blur(48px);opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(38% 30% at 50% 34%,var(--wash-a),transparent 70%),radial-gradient(36% 30% at 14% 86%,var(--wash-c),transparent 70%),radial-gradient(34% 28% at 90% 72%,var(--wash-b),transparent 70%)}
body[data-wash] #wash{opacity:1}

/* ---------- bud: a full-window transparent canvas behind everything ---------- */
#bud{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:1;pointer-events:none;background:transparent;transition:opacity .6s ease;color-scheme:light}   /* must match the creature's page, or the browser paints the iframe opaque */
body[data-tab=learn] #bud{opacity:0}
#budtouch{position:fixed;z-index:2;border-radius:50%;touch-action:none}

/* ---------- glass ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade)}
@media (prefers-reduced-transparency:reduce){ .glass{background:var(--paper)} }

/* ---------- buttons ---------- */
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;height:var(--ctl);padding:0 22px;border-radius:calc(var(--ctl) / 2);background:var(--cta);color:var(--cta-ink);font-size:var(--fs-btn);font-weight:500;letter-spacing:var(--tr-btn);transition:transform .18s cubic-bezier(.2,.9,.3,1.2)}
.cta:active{transform:scale(.97)}
.cta i,.gbtn i,.ic{display:block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;flex:none}
.gbtn{display:inline-flex;align-items:center;gap:10px;height:var(--ctl-sm);padding:0 16px;border-radius:calc(var(--ctl-sm) / 2);font-size:var(--fs-label);font-weight:500}
.circ{width:var(--ctl);height:var(--ctl);border-radius:calc(var(--ctl) / 2);display:grid;place-items:center;flex:none}
.circ i{width:22px;height:22px}
.link{font-size:var(--fs-label);font-weight:500;color:var(--soft)}

/* ---------- the tab bar: one white selection, draggable ---------- */
#tabs{position:fixed;z-index:30;left:var(--gut);right:var(--gut);bottom:calc(14px + var(--sab));height:var(--ctl-bar);border-radius:calc(var(--ctl-bar) / 2);display:flex;align-items:center;padding:0 5px;user-select:none;-webkit-user-select:none;touch-action:none}
#tabs .sel{position:absolute;top:5px;bottom:5px;border-radius:27px;background:var(--knob);box-shadow:var(--kshadow);will-change:left,width,transform}
#tabs .t{position:relative;flex:1;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:var(--fs-micro);font-weight:500;letter-spacing:var(--tr-micro);line-height:var(--lh-micro);color:var(--ink)}
#tabs .t i{width:24px;height:24px;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
#tabs .t.on{color:var(--icon)}

/* ---------- screens ---------- */
#screens{position:fixed;inset:0;z-index:10;pointer-events:none}
.screen{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(18px + var(--sat)) var(--gut) calc(112px + var(--sab));pointer-events:auto;
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);visibility:hidden}
.screen.on{opacity:1;transform:none;visibility:visible}
.screen[data-pass]{pointer-events:none} .screen[data-pass] .hit{pointer-events:auto}
/* bud lives under home and "you": the empty parts of those screens let the finger through to it
   (rotate, boop); only the controls catch it */
#home,#home .pane.today,#you{pointer-events:none}
#home .top,#home .foot,#home .desk-only,#home .aside,#you > *:not(.avatar-space){pointer-events:auto}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hr{height:1px;background:var(--hair)}
.win{border-radius:var(--r-win);padding:var(--pad-win)}
.win + .win{margin-top:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px}
.chip{display:inline-flex;align-items:center;height:var(--ctl-chip);padding:0 14px;border-radius:calc(var(--ctl-chip) / 2);font-size:var(--fs-chip);font-weight:500;letter-spacing:var(--tr-chip);box-shadow:inset 0 0 0 1px var(--hair);transition:background .2s,box-shadow .2s,transform .15s}
.chip:active{transform:scale(.96)}
.chip[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
.list .item{display:flex;justify-content:space-between;align-items:center;min-height:48px;border-top:1px solid var(--hair);gap:12px}
.list .item:first-child{border-top:0}

/* ---------- panes: a block of the page on the phone, a frosted window on the desktop ---------- */
.head{margin-bottom:18px}
.pane + .pane{margin-top:26px}
.ig + .pane{margin-top:14px}
.pane > .mon:first-child{margin-top:0}
.desk-only{display:none}
.aside{margin-top:16px;padding:0 4px}
.avatar-space{height:230px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.stats > div{border-radius:20px;padding:10px 12px}
.signs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:10px}
.sign{aspect-ratio:1;border-radius:16px;display:grid;place-items:center}
.sign .ic{width:26px;height:26px}
.signs .sign[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
.lastp{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:16px;align-items:center}
.mini{display:block;width:112px}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:8px}
.strip .spec{padding-bottom:0}

/* ---------- home ---------- */
#home .foot{position:absolute;left:20px;right:20px;bottom:calc(98px + var(--sab))}
#home .murmur{max-width:340px}
#home .foot{transition:opacity .35s ease}
body.ci #home .foot{opacity:0;pointer-events:none}
body.ci:not([data-desk=bench]):not([data-desk=deck]) #tabs{transform:translateY(calc(100% + 30px));transition:transform .45s cubic-bezier(.2,.9,.25,1)}   /* round 11: was max-width 899; the bench and the deck keep their navigation */
#tabs{transition:transform .45s cubic-bezier(.2,.9,.25,1)}

/* ---------- the check-in sheet: low, wide, glass ---------- */
#sheet{position:fixed;z-index:40;left:var(--gut);right:var(--gut);bottom:calc(10px + var(--sab));border-radius:34px;padding:var(--pad-win) var(--pad-win) 18px;transform:translateY(calc(100% + 40px));transition:transform .55s cubic-bezier(.2,.9,.25,1);visibility:hidden}
#sheet.open{transform:none;visibility:visible}
#sheet .q{min-height:30px}
#sheet .nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px}
/* one rail plus scale B leaves the nav row tighter: the words never break, the dots give way first */
#sheet .nav .link,#sheet .nav .cta{white-space:nowrap;flex:none}
#sheet .nav .dots{flex:0 1 auto;min-width:0;overflow:hidden}
/* ROUND 14 · "make sure the small grey dots for progress (for the check in etc) are always same
   size grey circles now they look off." They were: 6 px circles that stretched to an 18 px pill on
   the step you were on, which is what made the row look irregular. Now every dot is the same circle
   and the same distance from the next, and where you are is said by the tone alone — the step you
   are on is ink, the steps behind it are the mid grey, the ones ahead the hairline grey. */
#sheet .dots{display:flex;gap:6px;align-items:center}
#sheet .dots i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--hair);transition:background .3s}
#sheet .dots i.on{background:var(--ink)} #sheet .dots i.done{background:var(--faint)}
#sheet .words{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow:auto;padding:2px}
#sheet textarea{width:100%;min-height:96px;border:0;border-radius:18px;padding:14px 16px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);resize:none;font-size:var(--fs-body);line-height:var(--lh-body);font-style:italic}
#sheet textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
#sheet .reading p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body)}
#sheet .reading p + p{margin-top:8px}
#sheet .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:18px;display:grid;place-items:center}
#sheet .x i{width:16px;height:16px}

/* ---------- the body (round 5): the designer's figures; a chosen zone takes bud's colour ---------- */
.bodymap{display:flex;gap:18px;justify-content:center;margin-top:8px}
.bodymap figure{flex:0 1 118px;max-width:118px;margin:0}
.bodymap svg{width:100%;height:auto;max-height:28vh;display:block;margin:0 auto;touch-action:manipulation;overflow:visible}
.bodymap .sil > *{fill:var(--hair);stroke:none}
.bodymap .zone > *{fill:rgba(0,0,0,0);stroke:var(--hair);stroke-width:1;cursor:pointer;transition:fill .25s ease;pointer-events:all}
.bodymap .zone[data-lv="1"] > *{fill:var(--lit);fill-opacity:.55}
.bodymap .zone[data-lv="2"] > *{fill:var(--lit);fill-opacity:.78}
.bodymap .zone[data-lv="3"] > *{fill:var(--lit);fill-opacity:1}
.bodymap figcaption{text-align:center;margin-top:4px}
.bodywords{text-align:center;margin-top:6px;min-height:16px}
/* ---------- the word map (round 5, words option 2): feelings at their own pleasantness × energy ---------- */
.wmap{position:relative;height:256px;margin:2px 0 0;border-radius:18px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.wmap.small{height:150px;margin-top:2px}
.wmap svg{position:absolute;inset:0;width:100%;height:100%}
.wmap svg line{stroke:var(--hair);stroke-width:1;vector-effect:non-scaling-stroke}
.wmap .trail{fill:none;stroke:var(--soft);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.wmap .ax{position:absolute;transform:translateY(-50%);padding:0 8px;font-size:var(--fs-micro)}
.wmap .ax[style*="left:50%"]{transform:translateX(-50%);padding:6px 0}
.wmap .me,.wmap .was{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--glass-2),0 0 0 5px var(--hair)}
.wmap .was{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:none}
.wmap .wl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:var(--fs-data);font-weight:500;letter-spacing:var(--tr-data);padding:4px 9px;border-radius:13px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--hair)}
.wmap .wl[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
.wmap .wl.far{font-size:var(--fs-micro);font-weight:400;background:none;box-shadow:none;padding:0;color:var(--faint)}
.wmap .wl.on{background:none;box-shadow:none;padding:0;font-size:var(--fs-data)}
/* ---------- the reading (round 5): five ways to arrange the same beats ---------- */
.rd p{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body)}
.rd p + p{margin-top:6px}
.rd .nm{margin:6px 0 8px;text-wrap:balance}
.rd .t1{font-size:var(--fs-label);font-weight:400}
.rd .end{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.rd .end p{margin:0}
.r1 .t3.nm{font-size:var(--fs-title)}
.r2{padding:4px 0}
.r2 p{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead)}
.r2 p,.r2 .gbtn{opacity:0;animation:rdin .8s cubic-bezier(.2,.8,.2,1) forwards}
.r2 p + p{margin-top:10px}
@keyframes rdin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.r3{border-radius:18px;padding:14px 16px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair)}
.r3 .lab3{display:flex;justify-content:space-between}
.r3 .t3.nm{font-size:var(--fs-title);margin:8px 0 2px}
.r3 dl{display:grid;grid-template-columns:84px minmax(0,1fr);gap:3px 10px;margin:10px 0 10px;padding:8px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.r3 dt{color:var(--soft)}
.r4 .nm{font-size:var(--fs-body);margin:10px 0 4px}
.r5 .t3.nm{font-size:var(--fs-lead);margin:4px 0 10px}
.r5 .moves{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.r5 .mv{display:grid;grid-template-columns:74px minmax(0,1fr) 74px;gap:8px;align-items:center}
.r5 .mv .data:last-child{text-align:right}
.r5 .trk{position:relative;height:8px;border-radius:4px;background:var(--hair)}
.r5 .trk i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}
.r5 .trk i.a{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--soft)}
.r5 .trk i.b{background:var(--ink)}
.r5 .trk b{position:absolute;top:2px;bottom:2px;border-radius:2px;background:var(--soft)}
@media (prefers-reduced-motion:reduce){ .r2 p,.r2 .gbtn{animation:none;opacity:1} }

/* ---------- slider 2: the white fill is the handle, round knob, pictogram ---------- */
.bs{user-select:none;-webkit-user-select:none;touch-action:none}
.bs .poles{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--tr-label);line-height:var(--lh-label);margin-bottom:10px}
.bs .poles span{transition:opacity .25s}
.bs .tr{position:relative;height:56px;border-radius:28px;cursor:grab}
.bs .tr:active{cursor:grabbing}
.bs .fill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:23px;background:var(--knob);opacity:.72}
.bs .knob{position:absolute;top:5px;bottom:5px;width:46px;margin-left:-46px;border-radius:23px;background:var(--knob);box-shadow:var(--kshadow);display:grid;place-items:center;will-change:transform,left}
.bs .knob i{grid-area:1/1;width:22px;height:22px;background:var(--icon);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;transition:opacity .16s}
.bs .knob b{grid-area:1/1;width:6px;height:6px;border-radius:3px;background:var(--icon);transition:opacity .16s}

/* ---------- herbarium: two per row. Every bud is shown at ONE scale (a big day still looks big),
   its centre on the row's middle line; the cell ends just under the bloom so the label sits right
   beneath it, and in a row both labels share the line under the taller bud. ---------- */
.herb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;margin-top:4px;overflow-x:clip}
.mon{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hair);padding-top:10px;margin-top:14px}
.mon + .herb{margin-top:0}
.spec{display:flex;flex-direction:column;align-items:center;padding:0 0 14px;border-radius:24px;transition:transform .2s}
.spec:active{transform:scale(.97)}
.hang{position:relative;width:100%;flex:none}
.hang img{position:absolute;left:50%;top:0;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-select:none}
.spec .lab{text-align:center;margin-top:auto;padding-top:4px}
.spec .lab b{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--tr-label)}
.spec .lab .data{display:block;margin-top:2px}
.empty{text-align:center;padding:60px 20px}

/* ---------- learn ---------- */
.ig{position:relative;border-radius:var(--r-win);overflow:hidden;background:#0B0B0E;color:#EDEDF0;aspect-ratio:4/5}
.ig canvas,#stagecard canvas{position:absolute;inset:0;width:100%;height:100%}
.ig .cap{position:absolute;left:18px;right:18px;top:16px}
.ig .src{position:absolute;left:18px;right:18px;bottom:14px;color:rgba(237,237,240,.5)}

/* ---------- letters ---------- */
.letter{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;border-radius:24px;padding:10px 14px 10px 10px}
.letter .th{width:64px;height:64px;border-radius:16px;background:var(--glass-2);display:grid;place-items:center;overflow:hidden}
.letter .th img{width:100%;height:100%;object-fit:contain}
.letter .th img{transform:scale(1.32)}
.rules .r{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;padding:7px 0}
.rules .r + .r{border-top:1px solid var(--hair)}
.rules .k{width:38px;height:38px;border-radius:19px;background:var(--knob);box-shadow:var(--kshadow);display:grid;place-items:center;color:var(--icon)}
.rules .k .ic{width:19px;height:19px}
.rules .t1{font-weight:400}
.sample{display:inline-block;font-family:var(--f-data);font-size:var(--fs-micro);padding:2px 7px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--hair);color:var(--soft)}

/* ---------- toast ---------- */
/* ROUND 13 · THE SMALL WHITE THING AT THE TOP. The toast is parked above the screen, but "top"
   carries the safe-area inset and the park did not: on any phone with a notch (--sat is 47-59 px)
   an empty 24 px glass pill sat on screen, on every screen, for ever. The park now subtracts its
   own offset, so the parked bottom edge is 40 px above the glass whatever --sat is, and the pill
   is hidden outright until it has something to say. */
#toast{position:fixed;z-index:60;left:50%;top:calc(14px + var(--sat));transform:translate(-50%,calc(-100% - 54px - var(--sat)));transition:transform .45s cubic-bezier(.2,.9,.25,1),visibility 0s linear .45s;visibility:hidden;border-radius:22px;padding:12px 18px;font-size:var(--fs-label);line-height:var(--lh-label);font-weight:500}
#toast.on{transform:translate(-50%,0);visibility:visible;transition:transform .45s cubic-bezier(.2,.9,.25,1),visibility 0s}

/* ---------- round 11: every width from 600 up (the tablet, a phone on its side, the three desktop shells) lives in css/desktop.css.
   The round-3 floating windows that stood here are gone; the stage card is not used any more. ---------- */
#stagecard{display:none !important}
#dkshell,#tip{display:none}   /* the desktop shell's own pieces (js/desk.js); css/desktop.css shows them from 600 up */
@media (prefers-reduced-motion:reduce){ .screen,#sheet,#toast{transition:none} }

/* =========================================================
   ROUND 6 PICKS, BUILT (11 nov 2026)
   kept instruments: segment strips, dot readings, switches. no stamp, no corner marks, no callouts.
   ========================================================= */

/* ---------- the opening: a few blurred tiles with bud's mark, clearing into the home ---------- */
#veil{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none;animation:veil-off 1s steps(1) forwards}
#veil i{display:block;-webkit-backdrop-filter:blur(34px) saturate(140%);backdrop-filter:blur(34px) saturate(140%);background:color-mix(in srgb,var(--paper) 62%,transparent);box-shadow:inset 0 0 0 .5px var(--hair);animation:veil-tile .56s cubic-bezier(.4,0,.2,1) both}
#veil i:nth-child(1){animation-delay:.16s} #veil i:nth-child(2){animation-delay:.23s} #veil i:nth-child(3){animation-delay:.3s} #veil i:nth-child(4){animation-delay:.37s}
#veil b{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;background:var(--ink);-webkit-mask:url(../assets/icons/bud.svg) center/contain no-repeat;mask:url(../assets/icons/bud.svg) center/contain no-repeat;animation:veil-mark .8s cubic-bezier(.4,0,.2,1) both}
@keyframes veil-tile{from{opacity:1}to{opacity:0}}
@keyframes veil-mark{0%,45%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.3)}}
@keyframes veil-off{to{visibility:hidden}}
.noveil #veil{display:none}
.veilhold #veil,.veilhold #veil *{animation-play-state:paused !important;animation-delay:-.12s !important}   /* a test hook: the opening, held still */
@media (prefers-reduced-motion:reduce){ #veil{display:none} }

/* ---------- segment strips: progress without numbers ---------- */
.sgs{display:flex;gap:3px}
.sgs i{display:block;flex:1;height:6px;border-radius:3px;background:var(--hair)}
.sgs i.on{background:var(--ink)}
.stn{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:7px}
.stn span.on{color:var(--ink)}
.stn span:nth-child(3){text-align:center} .stn span:last-child{text-align:right}

/* ---------- switches and choosers ---------- */
.sw{position:relative;width:50px;height:30px;border-radius:15px;box-shadow:inset 0 0 0 1px var(--hair);flex:none;transition:background .2s}
.sw:after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:12px;background:var(--knob);box-shadow:var(--kshadow);transition:transform .25s cubic-bezier(.2,.9,.3,1.15)}
.sw[aria-checked=true]{background:var(--pick);box-shadow:none}
.sw[aria-checked=true]:after{transform:translateX(20px);background:var(--pick-ink);box-shadow:none}
.sw[disabled]{opacity:.38;cursor:default}
.seg2{display:inline-flex;padding:4px;border-radius:24px;gap:2px}
.seg2 button{height:var(--ctl-sm);padding:0 18px;border-radius:calc(var(--ctl-sm) / 2);font-size:var(--fs-label);font-weight:500;color:var(--soft);transition:background .2s}
/* ROUND 15, his words: "for these top switches you can leave it as it was (my plans right now
   good to know ... this sort of ebiko white slider dont have to be black here) so for where you
   are these sort of light sliders back pls." So the rule has one named exception, and it is a
   rule of its own: A SWITCH THAT SAYS WHERE YOU ARE IS THE WHITE KNOB; a control that sets
   something you chose is black. help's three tabs, buddies' two, a sign or a face, which page,
   a plan's three strengths and the herbarium's buds | notes are all the first kind. */
.seg2 button[aria-pressed=true]{background:var(--knob);box-shadow:var(--kshadow);color:var(--icon)}
.chip[disabled]{opacity:.42;cursor:default}

/* ---------- the spectrum: the eight answers as one read-out, in bud's colours ---------- */
.spx{display:flex;flex-direction:column;gap:5px;margin:12px 0}
.spx .rw{display:flex;align-items:center;gap:9px}
.spx .rw > .ic{width:14px;height:14px}
.spx .sg{flex:1;display:flex;gap:3px}
.spx .sg i{display:block;flex:1;height:7px;border-radius:2.5px;background:var(--hair)}

/* ---------- the reading (round 6): the label, the spectrum, the sentences; press + a round "again" ---------- */
.r3 .found{margin-top:6px}
.r3 .spx{margin:8px 0 10px;padding:9px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.r3 .end3{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--hair)}
.r3 .end3 p{flex:1;margin:0;font-size:var(--fs-btn);line-height:var(--lh-btn);font-weight:500}
.r3 .end3 .circ{width:46px;height:46px;border-radius:23px}
.r3 .end3 .circ[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
/* ROUND 13 · THE READING FITS ITSELF. The room the reading got was a hand-counted number of pixels
   (100dvh minus 372, minus 80 or 44 for the block under it). Scale B and the biggest text step make
   every one of those blocks taller, and the reading then ran into the line below it. The sheet is a
   flex column now: everything under the reading keeps its own height, and the reading takes what is
   left, whatever the text size is. */
#sheet[data-step=reading]{display:flex;flex-direction:column;max-height:calc(100dvh - 24px - var(--sab))}
#sheet[data-step=reading] > *{flex:none}
#sheet[data-step=reading] .rd{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#sheet[data-step=reading] .rd::-webkit-scrollbar{display:none}
#sheet .nav.top2{margin-top:14px}
#sheet .acts{margin-top:12px;gap:8px}
#sheet .acts .cta{flex:1;height:var(--ctl-act);border-radius:calc(var(--ctl-act) / 2)}
#sheet .acts .circ{width:var(--ctl-act);height:var(--ctl-act);border-radius:calc(var(--ctl-act) / 2)}

/* ---------- the body, as dots (js/bodydots.js) ---------- */
#bodystage{position:fixed;z-index:12;left:0;top:0;width:100%;height:0;display:none;color:var(--ink)}
#bodystage.on{display:block}
.bdots canvas{position:absolute;left:0;top:0;touch-action:none;cursor:grab}
.bdots canvas:active{cursor:grabbing}
.bdots .ann{position:absolute;inset:0;pointer-events:none}
.bdots .ann svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bdots .lead{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:.8}
.bdots .lead.far{stroke-dasharray:2 3;stroke-opacity:.35}
.bdots .pt{fill:var(--paper);stroke:var(--ink);stroke-width:.9}
.bdots .lab{position:absolute;transform:translateY(-50%);display:flex;align-items:center;font-family:var(--f-data);font-size:var(--fs-data);line-height:var(--lh-data);white-space:nowrap}
.bdots .lab.far{color:var(--soft)}
.bars{display:inline-flex;gap:2px;margin-left:7px;vertical-align:-1px}
.bars i{display:block;width:3px;height:11px;border-radius:1.5px;background:var(--hair)}
.bars i.on{background:var(--ink)}
.bdots .flip{position:absolute;left:50%;transform:translateX(-50%);display:flex;padding:4px;border-radius:22px;gap:2px}
.bdots .flip button{height:var(--ctl-chip);padding:0 16px;border-radius:calc(var(--ctl-chip) / 2);font-size:var(--fs-chip);font-weight:500;color:var(--soft)}
.bdots .flip button[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
/* the parts as buttons for a screen reader: the canvas cannot be tabbed. It used to be squeezed into a
   1 px box, which stacked every word on one pixel; it stands off to the side now, one part per line. */
.bdots .sr{position:absolute;left:-10000px;top:0;width:240px;height:auto;overflow:hidden;white-space:nowrap}
.bdots .sr button{display:block;text-align:left}
.bsel{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.bsum{display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0}
.bsum span{display:inline-flex;align-items:center}

/* ---------- herbarium: the contact sheet (a calendar of specimens), the sheet, and a bud's own page ---------- */
.hhead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.vsw{display:flex;gap:10px;align-items:center}
.vsw .circ{width:44px;height:44px;border-radius:22px}
.vsw .circ i{width:20px;height:20px}
.vsw .circ[aria-pressed=true]{background:var(--knob);box-shadow:var(--kshadow);color:var(--icon)}
.vsw .circ:not([aria-pressed=true]){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--hair);color:var(--soft)}
/* ROUND 14 · the quieter of the two: smaller, hairline only, no fill and no state — it changes the
   view, it is not a place you are in. The notes circle beside it stays the stronger one. */
.vsw .vq{width:34px;height:34px;border-radius:17px;display:grid;place-items:center;flex:none;color:var(--faint);
  box-shadow:inset 0 0 0 1px var(--hair);transition:color .2s,box-shadow .2s,transform .15s}
.vsw .vq i{display:block;width:17px;height:17px;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.vsw .vq:active{transform:scale(.92)}
@media (hover:hover){ .vsw .vq:hover{color:var(--soft);box-shadow:inset 0 0 0 1px var(--soft)} }
/* ---------- ROUND 15 · THE HERBARIUM'S HEAD, THREE WAYS (js/app.js, VIEW.herbarium) ----------
   The round-14 pair above is no longer drawn; its rules are left where they are so one line in
   app.js brings it back (see Bud/WHAT-WAS-REMOVED.md). One control shape serves all three ways:
   .hb — a pill of one height, one radius, one type size, with an icon AND a word. Two of them are
   always the same size as each other, whatever the words are. */
.hb{display:inline-flex;align-items:center;gap:8px;height:var(--ctl-sm);padding:0 16px;flex:none;
  border-radius:calc(var(--ctl-sm) / 2);font-size:var(--fs-label);line-height:var(--lh-label);font-weight:500;
  letter-spacing:var(--tr-label);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair);
  transition:box-shadow .2s,transform .15s,background .2s}
.hb i{display:block;width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.hb span{white-space:nowrap}
.hb:active{transform:scale(.97)}
@media (hover:hover){ .hb:hover{box-shadow:inset 0 0 0 1px var(--soft)} }
/* a · two ends. The rail above the title holds one at each end, and nothing in between. */
.hh-a{display:block}
.hh-a .hrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;margin-bottom:16px}
.hh-a .hrow .hb:only-child{margin-right:auto}
/* b · the pair of words is the title. The half you are in is black (see "THE ONE RULE"). */
.hh-b{display:block}
.hseg{display:inline-flex;padding:4px;border-radius:calc((var(--ctl-sm) + 8px) / 2);gap:4px;box-shadow:inset 0 0 0 1px var(--hair)}
.hseg button{height:var(--ctl-sm);padding:0 20px;border-radius:calc(var(--ctl-sm) / 2);font-size:var(--fs-lead);line-height:var(--lh-lead);
  letter-spacing:var(--tr-lead);font-weight:500;color:var(--faint);transition:background .2s,color .2s}
.hseg button[aria-pressed=true]{background:var(--knob);box-shadow:var(--kshadow);color:var(--icon)}   /* where you are, not what you picked */
.hh-b .hrow2{display:flex;justify-content:flex-end;margin-top:12px}
/* c · the shelf. One control, at the right of the title; the notes begin further down the scroll. */
.hh-c{align-items:center}
.hsec{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--hair)}
.monrow{display:flex;align-items:center;gap:14px}
.yr{display:flex;gap:3px;flex:1}
.yr button{flex:1;height:24px;display:grid;align-items:center;padding:0}
.yr i{display:block;height:4px;border-radius:2px;background:var(--hair)}
.yr .has i{background:var(--faint)} .yr .on i{background:var(--pick)}   /* round 15: the month you are in is chosen, from the one pair */
.cal{margin-top:16px}
.cal .wk{display:grid;grid-template-columns:22px repeat(7,minmax(0,1fr));align-items:center}
.cal .wk.hd{margin-bottom:8px}
.cal .wk.hd span + span{text-align:center}
.cal .wk.rw{height:58px;border-top:1px solid var(--hair)}
.cal .dy{position:relative;height:58px;display:grid;place-items:center;border-radius:16px;min-width:0}
.cal button.dy:active{transform:scale(.94)}
/* ROUND 18 · THE SELECTED DAY, AND THE MARKS THAT SIT ON IT. His words: "the small icon top right
   and the rounded rectangle on buds in the herbarium is not well designed yet they collide."
   They did: the cell's outline runs through the corner the marks were pinned into. Three looks,
   studio switch "chosen day" (VAR.calsel):
     ring  the selection follows the BUD, not the cell — a soft ring just outside the pressed bud,
           so there is no corner for a mark to sit on. Shipped.
     box   the old inset outline, with the marks moved in off the corner and given their own air.
     soft  no line at all: the chosen day's cell is a filled, faint plate. */
body[data-calsel=box] .cal .dy.sel{box-shadow:inset 0 0 0 1.5px var(--ink)}
body[data-calsel=box] .cal .dy .sesm,body[data-calsel=box] .cal .dy .notm{top:6px;right:6px}
body[data-calsel=soft] .cal .dy.sel{background:var(--faint)}
.cal .dy.sel .thumb{box-shadow:0 0 0 1.5px var(--ink);border-radius:50%}
body[data-calsel=box] .cal .dy.sel .thumb,body[data-calsel=soft] .cal .dy.sel .thumb{box-shadow:none;border-radius:0}
.cal .dy .today{display:block;width:9px;height:9px;border-radius:5px;background:var(--ink)}
.cal .dy .more{position:absolute;right:3px;top:3px;font-size:var(--fs-micro)}
.thumb{position:relative;overflow:hidden;flex:none;display:block}
/* the calendar's own bud: as wide as the day it sits in, never wider, so it is centred in it */
.cal .dy .thumb.cday{width:100%;max-width:54px;height:auto;aspect-ratio:1}
.thumb img{position:absolute;left:50%;top:50%;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-select:none}
.daycard{display:flex;gap:14px;align-items:center;border-radius:28px;padding:14px 16px;width:100%;text-align:left;margin-top:14px}
.daycard .nm{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--tr-lead);font-weight:500;margin-top:5px}
.daycard .ln{margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.dotsrow{display:flex;gap:9px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.dotsrow::-webkit-scrollbar{display:none}
.dotsrow button{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
canvas.dm{display:block;flex:none}
.mdots{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:7px 0;justify-items:center;margin:10px 0 6px}
.mdots i{display:block;width:13px;height:13px;border-radius:7px;background:var(--faint);transform:scale(.3)}
.mdots i.f{background:var(--hair)}
.mdots i.e{transform:none}
.mdots i.t{transform:none;background:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.det .hero{width:min(74vw,330px);margin:0 auto 4px}
.det .hero.live{height:300px}
.det .nm{font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:500;margin-top:10px;text-wrap:balance}
.det dl{display:grid;grid-template-columns:84px minmax(0,1fr);gap:4px 10px;margin:14px 0 0;padding:10px 0;border-top:1px solid var(--hair)}
.det dt{color:var(--soft)}
.det dd{display:flex;flex-wrap:wrap;gap:4px 12px}
.det dd span{display:inline-flex;align-items:center}
.det .spx{padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 0 14px}
.det .rdl p{font-weight:400;margin-top:6px;max-width:36ch}
.det .acts2{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.confirm{margin-top:22px;border-radius:22px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--hair)}
.confirm .row{margin-top:12px;gap:8px}
.gbtn.ink{background:var(--cta);color:var(--cta-ink)}
.gbtn.line{box-shadow:inset 0 0 0 1px var(--hair)}

/* ---------- buddies: the post. each letter shows where it is ---------- */
.lcard{display:block;width:100%;text-align:left;border-radius:28px;padding:16px 18px}
.lcard:active{transform:scale(.985)}
.lcard .hd{display:flex;gap:12px;align-items:flex-start}
.lcard .sub{font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--tr-btn);margin-top:8px}
.lcard .ln{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--fs-chip)}
.lcard .ln .ic{width:16px;height:16px}
/* ROUND 13 · THE BUD IN A ROUND WINDOW. It was off centre because "height:124%" resolved against
   a row the image itself had sized, so the box came out 84 x 104 and "contain" then centred the
   square picture inside the TALLER box — eight pixels low in a 68 px circle. It is placed by its
   own middle now, the way .thumb does it, so every bud in a circle sits dead centre. */
.rwin{position:relative;width:68px;height:68px;border-radius:34px;overflow:hidden;flex:none;background:var(--knob);box-shadow:var(--kshadow)}
.rwin img{position:absolute;left:50%;top:50%;width:124%;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;user-select:none;-webkit-user-select:none}
.rwin.big{width:132px;height:132px;border-radius:66px}

/* ---------- help, by need: three shelves and a longer piece on therapy ---------- */
.shelf{border-radius:28px;padding:16px 14px 6px 18px}
.shelf + .shelf{margin-top:8px}
.shelf.ink{background:var(--cta);color:var(--cta-ink)}
.shelf .shd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-right:4px;margin-bottom:10px}
.shelf .hrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--hair)}
.shelf.ink .hrow{border-top-color:color-mix(in srgb,var(--cta-ink) 18%,transparent)}
.shelf.ink .soft{color:color-mix(in srgb,var(--cta-ink) 58%,transparent)}
.shelf .num{font-family:var(--f-data);font-size:var(--fs-data);white-space:nowrap;font-variant-numeric:tabular-nums}
.shelf .call{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;flex:none;background:var(--knob);box-shadow:var(--kshadow);color:var(--icon)}
.shelf.ink .call{background:var(--cta-ink);color:var(--cta);box-shadow:none}
.therapy{margin-top:26px}
.therapy .thq{padding:14px 0;border-top:1px solid var(--hair)}
.therapy .urgent{margin-top:14px;padding:10px 0;border-top:1px solid var(--hair);color:var(--ink)}
.therapy .urgent a{text-decoration:underline;text-underline-offset:3px}
.therapy .hrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--hair)}
.therapy .t3 + .hrow{margin-top:12px}
.therapy .num{font-family:var(--f-data);font-size:var(--fs-data);white-space:nowrap}
.therapy .call{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;flex:none;background:var(--knob);box-shadow:var(--kshadow);color:var(--icon)}
.therapy + .therapy{margin-top:12px}
.therapy .thq p{max-width:38ch}

/* ---------- you: the keeper's pass, then the settings as things you can see ---------- */
.pass{--ink:#000;--soft:rgba(0,0,0,.5);--faint:rgba(0,0,0,.32);--hair:rgba(0,0,0,.12);--knob:#fff;--icon:#000;--cta:#000;--cta-ink:#fff;--kshadow:0 6px 16px -6px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.08);
  background:#fff;color:#000;border-radius:24px;padding:16px 16px 14px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 16px 34px -18px rgba(0,0,0,.28)}
:root[data-theme=dark] .pass{background:#ECECEF}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .pass{background:#ECECEF} }
.pass .phd{display:flex;align-items:center;gap:8px;color:rgba(0,0,0,.55)}
.pass .phd img{height:15px}
.pass .who{display:flex;gap:16px;align-items:center;margin-top:14px}
.pass .ring{width:92px;height:92px;border-radius:46px;border:3px solid #000;display:grid;place-items:center;flex:none}
.pass .ring .ic{width:50px;height:50px}
.pass .nm{text-align:left;min-width:0}
.pass .nm .data{display:block;color:rgba(0,0,0,.5)}
.pass .nm .big{display:block;font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:500;margin-top:6px;overflow-wrap:anywhere}
.pass .kv{display:grid;grid-template-columns:62px minmax(0,1fr);gap:0 10px;font-size:var(--fs-chip);line-height:var(--lh-chip);margin-top:14px}
.pass .kv > *{padding:9px 0;border-top:1px solid rgba(0,0,0,.1)}
.pass .kv .k{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--tr-micro);color:rgba(0,0,0,.5);padding-top:11px}
.pass .kv .data{display:block;margin-top:6px;color:rgba(0,0,0,.5)}
.pass .sgs{margin-top:5px}
.pass .usual{display:flex;gap:5px;align-items:flex-end;height:30px}
.pass .usual i{display:block;width:9px;border-radius:2.5px;background:#000}
.pass .pft{border-top:1.5px dotted rgba(0,0,0,.28);margin:6px -16px 0;padding:12px 16px 0;color:rgba(0,0,0,.55)}
.pass .picker{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,.1)}
.pass .signs{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:10px}
.pass .sign{border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pass .signs .sign[aria-pressed=true]{background:#000;color:#fff;box-shadow:none}
.pass .nicks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pass .nickin{display:flex;gap:8px;margin-top:10px}
.pass .nickin input{flex:1;min-width:0;height:var(--ctl-sm);border:0;border-radius:calc(var(--ctl-sm) / 2);padding:0 16px;background:rgba(0,0,0,.05);font-size:var(--fs-label);outline:none}
.pass .nickin input:focus{box-shadow:inset 0 0 0 1.5px #000}
.set .srow{display:flex;align-items:center;gap:12px;min-height:58px;border-top:1px solid var(--hair);padding:8px 0;flex-wrap:wrap}
.set .srow:first-child{border-top:0}
.set .srow > .ic{width:20px;height:20px}
.set .srow .tx{flex:1;min-width:0}
.set .srow .tx .data{margin-top:3px}
.set .choose{display:flex;gap:4px;flex-wrap:wrap}
.set .choose .chip{height:var(--ctl-chip);font-size:var(--fs-data)}
.set .srow.wide .choose{flex:1 1 100%;padding-left:32px}
/* ROUND 14 · the hour the daily reminder arrives: one step at a time, so any hour is reachable
   without a row of twenty-four chips */
.set .srow.wide .hrp{flex:1 1 100%;padding-left:32px;display:flex;align-items:center;gap:10px}
.hrp .circ.sm{width:var(--ctl-chip);height:var(--ctl-chip);border-radius:calc(var(--ctl-chip) / 2)}
.hrp .circ.sm i{width:16px;height:16px}
.hrp .circ.sm[disabled]{opacity:.35}
.hrp .hrv{font-family:var(--f-data);min-width:5ch;text-align:center;font-variant-numeric:tabular-nums}
.set button.srow{width:100%;text-align:left}
.set .srow .go{width:16px;height:16px;opacity:.6}
.pass + .pane{margin-top:26px}

/* ---------- letters that would touch, opened (checked with studio/comps/inkcheck.js) ---------- */
.oq{margin-right:.09em}
.lcard .sub{letter-spacing:.014em}
.chip[data-var]{letter-spacing:.035em}
.daycard .nm{letter-spacing:-.008em}
.therapy .prow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 14px;align-items:center}
.therapy .prow .pt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;grid-column:1}
.therapy .prow .pt .t1{min-width:0}
.therapy .prow .pd{grid-column:1}
.therapy .prow .call{grid-column:2;grid-row:1 / span 2}

/* learn: the live infographics. on the phone a list above the reads; on a wide screen a grid on the left */
.vizlist{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.vizc{min-width:0}
#stagecard{overflow:auto;-webkit-overflow-scrolling:touch}
.vizgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gap);align-items:start;padding:2px}
.vizgrid .vizc{max-width:520px;width:100%;justify-self:center}

/* =========================================================
   ROUND 8 (12 nov 2026): breathe with bud · help in three parts · my plan · one of yours ·
   the chips · send a bud · the pass made his
   ========================================================= */

/* ---------- breathe with bud: bud big in the middle, one word low on the screen, a breath of colour ---------- */
#bwash{position:absolute;inset:0;pointer-events:none}
#bwash i{position:absolute;inset:0;display:block;opacity:0}
#bwash .in{background:radial-gradient(74% 56% at 50% 42%,rgba(112,224,132,.24),transparent 78%),rgba(150,226,120,.085)}
#bwash .out{background:radial-gradient(74% 56% at 50% 42%,rgba(250,124,84,.22),transparent 78%),rgba(248,128,92,.08)}
:root[data-theme="dark"] #bwash .in{background:radial-gradient(74% 56% at 50% 42%,rgba(96,214,120,.2),transparent 78%),rgba(120,220,110,.07)}
:root[data-theme="dark"] #bwash .out{background:radial-gradient(74% 56% at 50% 42%,rgba(246,116,76,.2),transparent 78%),rgba(246,120,84,.07)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #bwash .in{background:radial-gradient(74% 56% at 50% 42%,rgba(96,214,120,.2),transparent 78%),rgba(120,220,110,.07)}
  :root:not([data-theme="light"]) #bwash .out{background:radial-gradient(74% 56% at 50% 42%,rgba(246,116,76,.2),transparent 78%),rgba(246,120,84,.07)} }
#breath{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .5s ease}
#breath[hidden]{display:none}
body.breathing #breath{opacity:1}
#breath .bx{position:absolute;right:var(--gut);top:calc(18px + var(--sat));pointer-events:auto}
#breath .bl{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(54px + var(--sab));display:flex;flex-direction:column;align-items:center;text-align:center}
#breath .bk{min-height:16px}
#breath .bw{height:78px;margin-top:8px;font-size:var(--fs-breath);line-height:78px;letter-spacing:-.03em;font-weight:500}
#breath .bw.bwin{animation:bw-in .9s cubic-bezier(.2,.8,.2,1) both}
#breath.end .bw{font-size:var(--fs-title);letter-spacing:var(--tr-title)}
@keyframes bw-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bsg{display:flex;gap:4px;width:156px;margin-top:20px}
.bsg i{display:block;flex:1;height:6px;border-radius:3px;background:var(--hair);overflow:hidden;transition:background .9s ease}
.bsg i b{display:block;height:100%;border-radius:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.bsg i.done{background:var(--soft)}
.bsg i.done b,#breath.still .bsg i b{display:none}
#screens,#toast{transition:opacity .45s ease}
#tabs{transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .4s ease}
body.breathing #screens,body.breathing #tabs,body.breathing #stagecard,body.breathing #toast,body.breathing #resume,body.breathing #bodystage{opacity:0 !important;pointer-events:none !important}
body.breathing #screens *{pointer-events:none !important}
body.breathing #wash{opacity:.35}
body.breathing #sheet{transform:translateY(calc(100% + 40px))}
@media (prefers-reduced-motion:reduce){ #bwash{display:none} #breath{transition:none} #breath .bw.bwin{animation:none} }

/* ---------- a check-in that waits: the pill that brings him back ---------- */
/* ROUND 13: the pill is a pair now — one half brings a half-answered check-in back, the × is the
   only way it goes. A draft is never thrown away by closing the sheet. */
#resume{position:fixed;z-index:35;left:50%;transform:translateX(-50%);bottom:calc(92px + var(--sab));height:var(--ctl-sm);padding:0 6px 0 20px;border-radius:calc(var(--ctl-sm) / 2);display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-label);line-height:var(--lh-label);font-weight:500;white-space:nowrap;transition:opacity .4s ease}
#resume[hidden]{display:none}
#resume .rgo{display:inline-flex;align-items:center;gap:10px;height:100%;font:inherit}
#resume .rx{width:32px;height:32px;border-radius:16px;display:grid;place-items:center;color:var(--soft);margin-left:4px}
#resume .rx:hover,#resume .rx:focus-visible{color:var(--ink)}
#resume .rx i{width:14px;height:14px}
#resume i{display:block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}

/* ---------- help: three parts under one switch ---------- */
.seg3{display:flex}
.seg3 button{flex:1 1 auto;padding:0 10px;white-space:nowrap}
.urgent2{margin-top:14px}
.urgent2 a,a.ul{text-decoration:underline;text-underline-offset:3px}
.head + .therapy{margin-top:0}

/* ---------- my plan: what helps me, and the two pages behind it ---------- */
.circ.sm{width:44px;height:44px;border-radius:22px}
.circ.sm i{width:18px;height:18px}
.circ.ink{background:var(--cta);color:var(--cta-ink)}
/* ROUND 13 · more than one black pill is allowed now ("cta and other buttons can be black and there
   can be multiple black pill buttons and circle black buttons"). A second pill keeps its weight but
   reads as the quieter of the two: the same black, the icon on the right, no arrow. */
.cta.second{justify-content:center;gap:10px;padding:0 20px}
.cta.second i{width:18px;height:18px}
.circ.line{box-shadow:inset 0 0 0 1px var(--hair);color:var(--soft)}
.myp .hls{margin-top:14px}
.hl{display:flex;align-items:center;gap:10px;min-height:56px;border-top:1px solid var(--hair);padding:6px 0}
.hl .tx{flex:1;min-width:0;text-align:left;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);padding:6px 0;overflow-wrap:anywhere}
.hl.add{padding-top:12px}
.hls .six{border-top:1px solid var(--hair);padding-top:12px}
.hin{flex:1;min-width:0;height:44px;border:0;border-radius:22px;padding:0 16px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);font-size:var(--fs-btn);outline:none}
.hin:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.hin::placeholder,.pin::placeholder,.sendc input::placeholder{color:var(--faint);opacity:1}
.plc{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin-top:12px}
.plc .tx{flex:1;min-width:0;display:block}
.plc .tx > span{display:block}
.plc .t1{font-weight:400;margin-top:7px}
.plc > .ic{width:18px;height:18px}
.pt4{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:500;margin-top:22px}
.pls{display:flex;flex-direction:column;gap:8px;margin-top:12px}   /* round 16: the beats never sit flush against the card above them */
.pls .win + .win{margin-top:0}
.pl{display:flex;gap:12px;padding:15px 16px 16px;border-radius:26px}
.pl .n{width:18px;padding-top:2px;flex:none}
.pl .bd{flex:1;min-width:0}
.pl .ans{font-size:var(--fs-btn);line-height:var(--lh-btn);margin-top:5px;overflow-wrap:anywhere}
.pl .ans0{margin-top:7px}
.pl .more{display:block;margin-top:12px}
.pin{display:block;width:100%;border:0;border-radius:15px;padding:11px 13px;margin-top:8px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);font-size:var(--fs-btn);line-height:var(--lh-btn);resize:none;outline:none;overflow:hidden}
.pin:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pin.tel{font-family:var(--f-data);font-size:var(--fs-data);height:var(--ctl-sm)}
.pwho + .pwho{margin-top:6px;padding-top:6px;border-top:1px solid var(--hair)}
.prow2{display:flex;align-items:center;gap:10px;margin-top:8px}
.prow2 .ans,.prow2 .t1{flex:1;min-width:0;margin-top:0}
.prow2 .t1{font-weight:400}
.prow2 .num{font-family:var(--f-data);font-size:var(--fs-data);white-space:nowrap;font-variant-numeric:tabular-nums}
.prow2 .call{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;flex:none;background:var(--cta);color:var(--cta-ink)}

/* ---------- what i’d tell my doctor: one paper page, and what he ticks onto it ---------- */
.paperc{--ink:#000;--soft:rgba(0,0,0,.52);--faint:rgba(0,0,0,.34);--hair:rgba(0,0,0,.12);background:#fff;color:#000;border-radius:24px;padding:18px 18px 14px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 16px 34px -18px rgba(0,0,0,.28)}
:root[data-theme=dark] .paperc{background:#ECECEF}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .paperc{background:#ECECEF} }
.paperc .dhd{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:rgba(0,0,0,.56)}
.paperc .dt{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-title);font-weight:500;margin-top:12px}
.paperc p{font-size:var(--fs-label);line-height:var(--lh-label);margin-top:10px;max-width:32ch}
.paperc .kv{display:grid;grid-template-columns:82px minmax(0,1fr);gap:0 10px;font-size:var(--fs-label);line-height:var(--lh-label);margin-top:12px}
.paperc .kv > *{padding:9px 0;border-top:1px solid rgba(0,0,0,.1)}
.paperc .kv .k{font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--tr-micro);color:rgba(0,0,0,.52);padding-top:12px}
.paperc .cts{display:flex;flex-wrap:wrap;gap:3px 16px}
.paperc .ct{white-space:nowrap}
.paperc .ct i{font-style:normal;font-family:var(--f-data);font-size:var(--fs-micro);color:rgba(0,0,0,.5);margin-left:5px}
.paperc .ln{display:block}
.paperc .ln + .ln{margin-top:6px}
.paperc .none{font-family:var(--f-data);font-size:var(--fs-data);color:rgba(0,0,0,.45)}
.paperc .pft{border-top:1.5px dotted rgba(0,0,0,.28);margin:6px -18px 0;padding:12px 18px 0;color:rgba(0,0,0,.58)}
.paperc .sample{color:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.dpick{margin-top:12px}
.tk{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px 0;border-top:1px solid var(--hair)}
.dpick > .tk:first-of-type{margin-top:12px}
.tick{display:block;width:22px;height:22px;border-radius:11px;box-shadow:inset 0 0 0 1.5px var(--faint);flex:none;transition:background .2s}
.tk[aria-pressed=true] .tick{background:var(--pick);box-shadow:none}
.tk .tx{flex:1;min-width:0;display:block;font-size:var(--fs-label);line-height:var(--lh-label);padding-top:1px}
.tk .tx > span{display:block}
.tk .tx .you{font-size:var(--fs-label);margin-top:3px}
#printpage{display:none}
@media print{
  @page{margin:16mm}
  html,body{height:auto !important;overflow:visible !important;background:#fff !important}
  body > *:not(#printpage){display:none !important}
  #printpage{display:block !important;color:#000}
  #printpage .paperc{background:#fff !important;box-shadow:none;border:1px solid rgba(0,0,0,.22);border-radius:18px;max-width:150mm;padding:22px 24px 18px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #printpage .paperc .pft{margin:6px -24px 0;padding:12px 24px 0}
  #printpage .noprint{display:none !important}
}

/* ---------- one of yours: his own list after the reading, and the line it leaves on the home screen ---------- */
.ones{margin-top:12px}
.onesrow{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:8px 20px 4px;scrollbar-width:none}
.onesrow::-webkit-scrollbar{display:none}
.onesrow .chip{flex:none;white-space:nowrap;font-size:var(--fs-label);letter-spacing:0}
.ones .link{display:inline-flex;align-items:center;gap:8px;height:32px}
.ones .link i{display:block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
#sheet[data-step=reading] .rd.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent);mask-image:linear-gradient(#000 calc(100% - 34px),transparent)}
#sheet[data-ones=in] .rd .ones{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
#home .one1{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;min-width:0}
#home .one1 .data{flex:none}
#home .one1 .you{flex:1;min-width:0;font-size:var(--fs-btn);line-height:var(--lh-btn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- the note step: what it is about ---------- */
#sheet .about{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}

/* ---------- send a bud ---------- */
.det.send .hero{width:min(62vw,290px)}
.sendc{margin-top:6px}
.sendc input{display:block;width:100%;border:0;background:transparent;margin-top:6px;outline:none}
.srow2{display:flex;align-items:center;gap:12px;padding:8px 0}
.srow2 .tx{flex:1;min-width:0;display:block}
.srow2 .tx > span{display:block}
.srow2 .data{margin-top:3px}

/* ---------- the pass, made his: a line, bud's name, more signs, a tone from bud's own colours ---------- */
.pass{--pbg:#fff}
:root[data-theme=dark] .pass{--pbg:#ECECEF}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .pass{--pbg:#ECECEF} }
.pass[data-tone]:not([data-tone=paper]){background:color-mix(in srgb,var(--tc) 27%,var(--pbg))}
.pass[data-tone]:not([data-tone=paper]) .phd,.pass[data-tone]:not([data-tone=paper]) .pft,.pass[data-tone]:not([data-tone=paper]) .data,.pass[data-tone]:not([data-tone=paper]) .kv .k{color:rgba(0,0,0,.62)}
.pass[data-tone]:not([data-tone=paper]) .kv > *{border-top-color:rgba(0,0,0,.14)}
.pass[data-tone]:not([data-tone=paper]) .sgs i:not(.on){background:rgba(0,0,0,.14)}
.pass .nmw{flex:1;min-width:0}
.pass .pl1{display:block;max-width:100%;text-align:left;margin-top:9px;font-size:var(--fs-label);line-height:var(--lh-label);overflow-wrap:anywhere}
.pass .pl1 .data{color:rgba(0,0,0,.5)}
.pass .budrow{display:flex;align-items:center;gap:12px}
.pass .pbw{width:52px;height:52px;border-radius:26px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.pass .bn{text-align:left;min-width:0}
.pass .bn .bnm{display:block;font-size:var(--fs-btn);line-height:var(--lh-btn);font-weight:500;letter-spacing:var(--tr-btn);overflow-wrap:anywhere}
.pass .bn .data{margin-top:4px}
.pass .tones{display:flex;gap:8px;align-items:center}
.pass .tn{width:26px;height:26px;border-radius:13px;flex:none;background:color-mix(in srgb,var(--tc,#fff) 34%,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.pass .tn[aria-pressed=true]{box-shadow:inset 0 0 0 2.5px #000}
.pass .pbuds{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding:2px;scrollbar-width:none}
.pass .pbuds::-webkit-scrollbar{display:none}
.pass .pbuds button{width:50px;height:50px;border-radius:25px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.pass .pbuds button[aria-pressed=true]{box-shadow:0 0 0 2.5px #000}

}

/* =========================================================
   ROUND 9 (the round-8 picks): learn as an index · the guess · men's stories · home after a heavy week
   ========================================================= */
/* ---------- learn: three chips, then a numbered list of stills ---------- */
.lchips{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.lidx{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;align-items:center;gap:14px;width:100%;padding:8px 14px 8px 8px;border-radius:24px;text-align:left;transition:transform .18s cubic-bezier(.2,.9,.3,1.2)}
.lrow:active{transform:scale(.985)}
.lth{display:block;width:72px;height:72px;border-radius:18px;flex:none;background:#FAFAFA var(--d) center/cover no-repeat}
.ltx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ltx .t1{text-wrap:balance}
.lrow > .ic{width:16px;height:16px}
.lby{margin-top:22px;gap:8px}
.pane .lby{margin-top:18px}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .lth{background-color:#151518;background-image:var(--n)} }
:root[data-theme=dark] .lth{background-color:#151518;background-image:var(--n)}
/* ---------- ROUND 14 · the windows with stories, on top of learn ----------
   A row of glass windows that scrolls sideways inside the one rail — never past it, so the screen
   itself never scrolls sideways. One window per story, its picture big: the row and the numbered
   list under it open the same thing. */
.lwins{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:2px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lwins::-webkit-scrollbar{display:none}
.lwin{flex:none;width:178px;scroll-snap-align:start;border-radius:var(--r-win);padding:8px 8px 14px;text-align:left;
  display:flex;flex-direction:column;gap:10px;transition:transform .18s cubic-bezier(.2,.9,.3,1.2)}
.lwin:active{transform:scale(.97)}
.lwp{display:block;width:100%;aspect-ratio:1;border-radius:22px;background:#FAFAFA var(--d) center/cover no-repeat}
.lwt{display:flex;flex-direction:column;gap:3px;padding:0 6px}
.lwt .t1{text-wrap:balance}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .lwp{background-color:#151518;background-image:var(--n)} }
:root[data-theme=dark] .lwp{background-color:#151518;background-image:var(--n)}
/* a row mounts its card out of sight, only to open the card's own full-screen story */
.vizghost{position:fixed;left:-9999px;top:0;width:361px;height:1px;overflow:hidden;visibility:hidden;pointer-events:none}

/* ---------- the guess: a layer over the engine's story sheet, with the same strip on top ---------- */
#guess{position:fixed;inset:0;z-index:2147483600;background:var(--paper);color:var(--ink);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .26s ease}
#guess.in{opacity:1}
#guess [hidden]{display:none !important}
.gwrap{max-width:720px;min-height:100%;margin:0 auto;padding:max(8px,var(--sat)) 0 max(16px,var(--sab));display:flex;flex-direction:column}
.gbar{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px 0 20px;flex:none}
.gsegs{flex:1;display:flex;align-items:center;gap:5px}
.gsegs i{flex:1;height:3px;border-radius:2px;background:var(--hair)}
.gsegs i:first-child{background:var(--ink)}
.gsegs b{flex:none;width:9px;height:9px;margin:0 6.5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hair)}
.gx{position:relative;width:36px;height:36px;border-radius:50%;background:var(--knob);box-shadow:var(--kshadow);flex:none}
.gx i{position:absolute;left:50%;top:50%;width:15px;height:1.6px;margin:-.8px 0 0 -7.5px;background:var(--icon)}
.gx i:nth-child(1){transform:rotate(45deg)} .gx i:nth-child(2){transform:rotate(-45deg)}
.gtop{padding:10px 20px 0}
.gask{font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:500;margin-top:10px;text-wrap:balance}
.gq{margin-top:12px;max-width:30ch;text-wrap:pretty}
.gfield{margin:26px 20px 0;padding:6px 0 10px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize;border-radius:12px}
.greal{margin:14px 20px 0}
.grow{display:flex;align-items:baseline;gap:10px;min-height:38px;margin-bottom:8px}
.grow b{margin-left:auto;font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:500;font-variant-numeric:tabular-nums}
.grow .ghint{margin-left:auto}
.grow b:empty{display:none}
.gdots{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--rows),auto);grid-auto-columns:minmax(0,1fr);gap:5px;max-width:520px}
.gdots i{display:block;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);transition:background .12s,box-shadow .12s}
.gdots.mine i.on{background:var(--knob);box-shadow:var(--kshadow)}
.gdots.real i.on{background:var(--ink);box-shadow:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]) .gdots.mine i.on{background:rgba(237,237,240,.5);box-shadow:none} }
:root[data-theme=dark] .gdots.mine i.on{background:rgba(237,237,240,.5);box-shadow:none}
.greal,.gsay,.gfoot{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
#guess.shown .greal,#guess.shown .gsay,#guess.shown .gfoot{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
#guess.shown .gsay{transition-delay:.18s,.18s,0s} #guess.shown .gfoot{transition-delay:.3s,.3s,0s}
.gsay{padding:22px 20px 0}
.gsay .t1{font-weight:400;margin-top:8px;font-size:var(--fs-btn);line-height:var(--lh-btn);max-width:34ch}
.gsay .data{margin-top:10px}
.gfoot{margin-top:auto;padding:22px 20px 8px}
.gfoot .cta{width:100%;max-width:520px;height:56px;border-radius:28px}
@media (min-width:600px){ .gfield,.greal{max-width:520px} }
@media (prefers-reduced-motion:reduce){ #guess,.greal,.gsay,.gfoot{transition:none} }

/* ---------- men's stories: the shelf, and one story over the whole screen ---------- */
.sempty{text-align:left;padding:28px 4px 20px}
.sempty .t1{font-weight:400;margin-top:10px;max-width:34ch;line-height:1.3}
.sshelf{display:flex;flex-direction:column;gap:10px}
.scard{display:block;width:100%;padding:8px 8px 16px;border-radius:28px;text-align:left}
.scard .swho{display:block;margin:12px 10px 0}
.scard .sq{display:block;margin:6px 10px 0;font-size:var(--fs-body);line-height:var(--lh-body)}
/* the frame of a film without a picture: soft colour, no face. flat, like the glass */
.sfr,.sframe{position:relative;display:block;border-radius:22px;overflow:hidden;background-color:var(--glass-2);background-size:cover;background-position:center;
  background-image:radial-gradient(60% 70% at 28% 30%,rgba(72,214,190,.42),transparent 70%),radial-gradient(55% 65% at 78% 72%,rgba(92,170,240,.4),transparent 70%),radial-gradient(40% 50% at 70% 18%,rgba(255,194,79,.2),transparent 70%)}
.sfr{height:150px}
.sfr.voice{background-image:none}
.sfr .vdots{position:absolute;left:14px;right:14px;top:22px;bottom:22px}
.splay{position:absolute;left:50%;top:50%;margin:-26px 0 0 -26px;background:#fff;color:#000;box-shadow:0 6px 16px -6px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.08)}
.circ .pl{width:16px;height:16px;margin-left:3px;background:currentColor;-webkit-mask:none;mask:none;clip-path:polygon(12% 4%,96% 50%,12% 96%)}
[data-play="1"] .circ .pl{margin-left:0;clip-path:polygon(14% 6%,40% 6%,40% 94%,14% 94%,14% 6%,60% 6%,86% 6%,86% 94%,60% 94%,60% 6%)}
.slen{position:absolute;right:12px;bottom:10px;padding:3px 8px;border-radius:10px;background:rgba(0,0,0,.72);color:#fff}
#story{position:fixed;inset:0;z-index:56;background:var(--paper);color:var(--ink);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:scale(.985);transition:opacity .26s ease,transform .32s cubic-bezier(.2,.9,.25,1)}
#story.in{opacity:1;transform:none}
.swrap{max-width:560px;min-height:100%;margin:0 auto;padding:calc(18px + var(--sat)) var(--gut) calc(22px + var(--sab));display:flex;flex-direction:column}
.stop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.sframe{height:min(360px,44vh);margin:0 -4px;border-radius:26px;flex:none}
.sframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scap{position:absolute;left:14px;right:14px;bottom:18px;padding:9px 12px 10px;border-radius:14px;background:rgba(0,0,0,.72);color:#fff;font-size:var(--fs-label);line-height:var(--lh-label)}
.scap:empty{display:none}
.sprog{position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:2px;background:rgba(0,0,0,.14)}
.sprog i{display:block;height:100%;width:0;border-radius:2px;background:#000}
.schips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.sbeats{margin-top:14px}
.sb{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid var(--hair);color:var(--soft);transition:color .3s}
.sb:last-child{border-bottom:1px solid var(--hair)}
.sb .t1{font-weight:400;line-height:1.3}
.sb.now,#story.read .sb{color:var(--ink)}
#story.read .sb{grid-template-columns:1fr;gap:6px;padding:16px 0}
#story.read .sb .t1{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body)}
.sfoot{margin-top:auto;padding-top:22px}
/* a voice without a picture: the voice as dots, the words as he says them */
.svoice{position:relative;margin:0 -4px;border-radius:30px;padding:16px 18px 16px;flex:none}
.svoice .vdots{height:150px;margin:18px 0 14px}
.vdots{display:flex;align-items:center;justify-content:space-between;gap:2px}
.vc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;color:var(--faint);transition:color .25s}
.vc i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor}
.vc.on{color:var(--ink)}
.sfr .vc i{width:4px;height:4px} .sfr .vc{gap:3px}
.svf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.swords{margin-top:22px;min-height:150px}
.swd{margin-top:10px;font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-title)}
.swd span{color:var(--faint);transition:color .3s}
.swd span.on{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ #story{transition:none} }

/* ---------- home, once, after five heavy days: a quiet line, his plan and 142 one tap away ---------- */
#home .hvy{display:block;width:100%;max-width:360px;text-align:left}
#home .hvy .t2{display:block;text-wrap:pretty}
#home .hvy .data{display:block;margin-top:8px}
#home .hvb{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap}
#home .hb{display:inline-flex;align-items:center;gap:10px;min-height:44px}
#home .hb:active .circ{transform:scale(.95)}
#home .hb .circ{transition:transform .15s}

/* ================= round 10 ================= */
/* ---------- home: the round night/day button, top left, opposite the person ---------- */
.today .top{align-items:center}
.tdate{flex:1;min-width:0;text-align:center}
/* ---------- the pass: no tones, the sign without its ring ---------- */
.pass .ring{width:68px;height:68px;border:0;border-radius:0}
.pass .ring .ic{width:62px;height:62px}
.pass .sign{box-shadow:none}

/* ---------- help · my plans: the tab ---------- */
.plc.first{margin-top:0}
.plus{position:relative;display:block;width:20px;height:20px;flex:none}
.plus:before,.plus:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:1px;background:currentColor}
.plus:after{transform:rotate(90deg)}
.circ.sm .plus:before,.circ.sm .plus:after{width:14px;margin-left:-7px}
.plans{margin-top:12px}
.pcard{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border-radius:var(--r-win);padding:12px 18px 12px 12px;transition:transform .18s cubic-bezier(.2,.9,.3,1.2)}
.pcard:active{transform:scale(.985)}
.pcard .pb,.phead .pb,.pg .pb{display:block;flex:none}
.pcard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.pcard .tx .t1{font-weight:400}
.pcard > .ic{width:18px;height:18px;flex:none}
.plans[data-lay=cards]{display:flex;flex-direction:column;gap:8px}
.plans[data-lay=list]{padding:6px 16px 6px 12px}
.plans[data-lay=list] .pcard{padding:8px 0;border-radius:0;gap:12px;border-top:1px solid var(--hair);min-height:62px}
.plans[data-lay=list] .pcard:first-child{border-top:0}
.plans[data-lay=list] .pcard .tx{gap:4px}
.plans[data-lay=list] .pcard .tx .t1{font-weight:500}
.plans[data-lay=list] .pcard > .ic{width:16px;height:16px}
.plans[data-lay=deck]{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px -20px -22px;padding:4px 20px 36px;scroll-padding:0 20px;scrollbar-width:none}
.plans[data-lay=deck]::-webkit-scrollbar{display:none}
.plans[data-lay=deck] .pcard{flex:none;width:164px;flex-direction:column;align-items:flex-start;gap:14px;padding:16px 16px 18px;scroll-snap-align:start}
.plans[data-lay=deck] .pcard .pb{align-self:center}
.plans[data-lay=deck] .pcard .tx{flex:none;width:100%}
.padd{display:flex;align-items:center;gap:14px;margin-top:14px;min-height:52px;text-align:left}
.padd:active .circ{transform:scale(.95)}
.padd .circ{transition:transform .15s}
.sescard{margin-top:18px}
.sescard .plc{margin-top:0}
.head + .sescard{margin-top:0;margin-bottom:18px}

/* ---------- one plan ---------- */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.phead .ptx{flex:1;min-width:0}
.phead .pt4{overflow-wrap:anywhere}
.pself{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-title);margin:2px 2px 18px;text-wrap:balance}
.plv{margin-bottom:12px}
.ifl{display:block;font-style:normal;margin-bottom:3px}
.pl .ans + .ans{margin-top:10px}
.pl .swap{display:block;font-size:var(--fs-data);font-style:normal;margin-top:4px;text-decoration:underline;text-underline-offset:3px}
.psay{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.psay .gbtn{margin-top:12px}
.pacts{margin-top:18px;gap:8px}
.plc.off{cursor:default}
.proof{margin-top:8px}
.proof .prow,.sesrow{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none}
.proof .prow::-webkit-scrollbar,.sesrow::-webkit-scrollbar{display:none}
.proof .prow{margin-top:12px}
.proof .prow button,.sesrow button{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
/* change it */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{height:auto;min-height:34px;padding:7px 13px;text-align:left;line-height:1.2;white-space:normal}
.pl.ed .bd > .data{margin-top:4px}
.pl.ed .bd > .data + .pln{margin-top:10px}
.pln .hl{min-height:50px;padding:4px 0}
.pln .hl .tx{font-size:var(--fs-btn)}
.pln .lvl{display:inline-block;margin-left:9px;font-style:normal;padding:1px 7px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--hair);vertical-align:1px}
.ptray{padding:4px 0 16px}
.ptray .data{margin:12px 0 7px}
.ptray .hin{width:100%}
.ptray .gbtn{margin-top:14px}
.pst{margin-top:14px}
.pst > .data:first-child{margin-bottom:8px}
.pl.ed .hl.add{border-top:0;margin-top:12px;padding:0;min-height:0}
.pwho2{margin-top:12px}
.pask .pq{padding:12px 0;border-top:1px solid var(--hair)}
.pask .data + .pq{margin-top:14px}
.pask .ans{font-size:var(--fs-btn);line-height:var(--lh-btn)}
.pask .chips{margin-top:8px}
.pask + .pself{margin-top:18px}
.pask + .plv{margin-top:12px}
/* the gallery behind the circle plus */
.pgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 14px;border-radius:24px;text-align:center;min-height:120px;transition:transform .15s}
.pg:active{transform:scale(.97)}
.pg .pb{display:grid;place-items:center;width:60px;height:60px}
.pg .t1{font-size:var(--fs-chip);text-wrap:balance}
.pg[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- go through it once: the breathing screen's frame, one beat per screen ---------- */
#dry{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .5s ease}
#dry[hidden]{display:none}
body.drying #dry{opacity:1}
#dry .bx{position:absolute;right:var(--gut);top:calc(18px + var(--sat));pointer-events:auto}
#dry .dl{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(28px + var(--sab));max-width:520px;margin:0 auto;pointer-events:auto}
#dry .dsg{width:auto;margin:0 0 16px}
#dry .dsg i.done{background:var(--ink)}
#dry .dk{min-height:16px}
#dry .dn{font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:500;margin-top:6px}
#dry .dn.bwin{animation:bw-in .6s cubic-bezier(.2,.8,.2,1) both}
#dry .dls{margin-top:14px;min-height:176px}
#dry .dln{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);padding:9px 0;border-top:1px solid var(--hair)}
#dry .dls > .data{padding-top:12px;border-top:1px solid var(--hair);font-size:var(--fs-data)}
#dry .dnav{margin-top:16px;gap:8px}
#dry .dgo{flex:1}
#dry .dback[disabled]{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){ #dry{transition:none} #dry .dn.bwin{animation:none} }

/* ---------- ROUND 15 · I'M IN IT. The dry run's frame, three cards and an end. ---------- */
#now{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .5s ease}
#now[hidden]{display:none}
body.nowing #now{opacity:1}
#now .bx{position:absolute;right:var(--gut);top:calc(18px + var(--sat));pointer-events:auto}
#now .nl{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(24px + var(--sab));max-width:520px;margin:0 auto;pointer-events:auto}
#now .nsg{width:auto;margin:0 0 14px}
#now .nsg i.done{background:var(--ink)}
#now .nk{min-height:16px}
#now .ngate{margin:0 0 14px;padding:11px 14px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair)}
#now .ngate[hidden]{display:none}
#now .ngate .t1{margin-top:3px}
#now .ngate .gthen{margin-top:6px}
#now .ngate .gthen b{font-weight:500;color:var(--ink)}
#now .nn{font-size:var(--fs-head);line-height:var(--lh-head);letter-spacing:var(--tr-head);font-weight:500;margin-top:6px;max-width:22ch}
#now .nls{margin-top:16px;min-height:150px;display:flex;flex-direction:column;gap:8px}
#now .nrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 15px;border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--hair);background:var(--card);transition:background .18s,box-shadow .18s}
#now .nrow .tx{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
#now .nrow .ic{width:20px;height:20px;flex:none}
#now .nrow.flat{box-shadow:none;background:none;padding-left:0;padding-right:0;border-top:1px solid var(--hair);border-radius:0}
#now .nrow.pickable[aria-pressed=true]{background:var(--pick);box-shadow:none}
#now .nrow.pickable[aria-pressed=true] .t3,#now .nrow.pickable[aria-pressed=true] .data{color:var(--pick-ink)}
#now .nrow.pickable[aria-pressed=true] .data{opacity:.72}
#now .nrow .t3{letter-spacing:.005em}   /* the duty numbers: 0800 400 777 and 05 76 77 have touching sevens at this size */
#now .nwho .call{flex:none;width:var(--ctl-sm);height:var(--ctl-sm)}
#now .nrow2{display:flex;flex-direction:column;gap:8px;margin-top:2px}
#now .nsay{padding:10px 0}
#now .naskr{margin-top:14px}
#now .naskr .chips{margin-top:8px}
#now .nact{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
#now .nact .cta{width:100%}
#now .nact .cta[disabled]{opacity:.4;cursor:default}
#now .nact .link{align-self:center}
#now .nout{display:block;width:100%;margin-top:14px;text-align:center;font-size:var(--fs-data);line-height:var(--lh-data);color:var(--soft);padding:8px 0}
#now .nout[hidden]{display:none}
/* the minute: one thin ring that fills once. Nothing happens when it is full. */
#now .nring{height:4px;border-radius:2px;background:var(--hair);overflow:hidden;margin:4px 0 2px}
#now .nring i{display:block;height:100%;width:calc(var(--f,0) * 100%);background:var(--ink);opacity:.55;border-radius:2px}
@media (prefers-reduced-motion:reduce){ #now{transition:none} }

.inid{width:100%;margin-bottom:14px}
/* the way in, on home: there only when it is likely to be wanted */
.nowdoor{padding:15px 17px}
.nowdoor .chips{gap:7px}

/* a sign counted out of his own buds, offered and not yet taken */
.chip.sug{box-shadow:none;border:1px dashed var(--faint);background:none}

/* ---------- ROUND 16 · ONE HEAD. title · switch · one line, at the same distances everywhere. ---------- */
.shead .t4{margin:0}
.shead .hback{margin-bottom:14px}
/* round 16: you is two halves behind one switch, so neither is a long scroll */
.yset{display:flex;flex-direction:column;gap:12px}
.yset .pane{margin-top:0}
/* round 16 · a longer note, on a screen of its own */
#bignote{position:fixed;inset:0;z-index:55;background:var(--paper);opacity:0;transition:opacity .32s ease;overflow:auto;-webkit-overflow-scrolling:touch}
#bignote[hidden]{display:none}
body.bignoting #bignote{opacity:1}
#bignote .bnl{max-width:560px;margin:0 auto;padding:calc(18px + var(--sat)) var(--gut) calc(24px + var(--sab));display:flex;flex-direction:column;min-height:100%}
#bignote .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#bignote .bnx{gap:8px}
#bignote .bnt{margin-top:22px}
#bignote .bnp{margin-top:10px}
#bignote .bna{flex:1;min-height:220px;margin-top:14px;width:100%;background:none;border:0;outline:none;resize:none;
  font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body)}
#bignote .bnw{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--hair)}
#bignote .bnw input{flex:1;min-width:0;background:none;border:0;outline:none}
#bignote .bng{width:100%;margin-top:14px}
@media (prefers-reduced-motion:reduce){ #bignote{transition:none} }

.ciwho{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 0;border-top:1px solid var(--hair)}
.ciwho input{flex:1;min-width:0;background:none;border:0;outline:none}
/* round 16 · one line under the reading, counted from his own buds */
.rpat{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:6px}
.rpat .t1{font-weight:400}
.ytop{display:flex;align-items:center;justify-content:space-between}
.ygrp{font-size:var(--fs-data);line-height:var(--lh-data);letter-spacing:var(--tr-data);color:var(--soft);margin:0 0 10px}
.shead .hrow.srow2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}   /* round 16: "a tad bit too much space beneath them" */
.shead .hrow.srow2 > .seg2{flex:0 1 auto;min-width:0}
.shead .hsub{margin-top:10px;font-weight:400;max-width:34ch}
.shead .hfil{margin-top:14px}
.shead .top{margin:0}
/* learn's three small black chips are gone: the switch is the same white knob as everywhere else */
.lidx{margin-top:4px}
/* an empty herbarium still shows its month; the invitation is smaller and sits under it */
.empty.sm{padding:18px 0 4px;text-align:center}

/* round 15 · the herbarium's head b: one rail, the pair of words and the view swap on it */
.hh-b .hrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hb.ic1{width:calc(var(--ctl-sm) + 8px);height:calc(var(--ctl-sm) + 8px);padding:0;justify-content:center;border-radius:50%}
.hb.ic1 span{display:none}

/* ---------- the reading: one quiet button to his plan ---------- */
#sheet .pb1{margin-top:10px}
#sheet .pb1 + .ones{margin-top:2px}

/* ---------- after a session: the chip, the longer note, the mark ---------- */
#sheet .sesp{margin:-2px 0 10px}
#sheet[data-step=note][data-ses="1"] textarea{min-height:164px}
.sesm{display:inline-block;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.7px currentColor;flex:none}
.cal .dy .sesm{position:absolute;left:4px;top:4px;color:var(--ink)}
.spec{position:relative}
.spec > .sesm{position:absolute;right:8px;top:8px}
.hfil{display:flex;gap:6px;margin-top:14px}
.hfil .chip{gap:7px}
/* my sessions */
.sesrow{margin:0 -20px 14px;padding:2px 20px}
.slist > .t3 + *{margin-top:10px}
.slist .none{padding:4px 0}
.slist > .t3 + .tk,.slist > .t3 + .trow,.slist > .t3 + .und{border-top:0}
.tk .tx .data{margin-top:4px}
.trow{display:flex;align-items:center;gap:10px;border-top:1px solid var(--hair)}
.trow .tk{border-top:0;flex:1;min-width:0}
.sto{padding:2px 0 14px}
.sto .data{margin-bottom:8px}
.sdate{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.win > .sdate:first-child{margin-top:0;padding-top:0;border-top:0}
.sdate .hin{flex:0 1 178px;font-family:var(--f-data);font-size:var(--fs-data)}
.und{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--hair)}
.und .data{flex:none;width:38px}
.und .you{font-size:var(--fs-btn);line-height:var(--lh-btn)}
.abt{display:flex;flex-wrap:wrap;gap:10px 24px}
.abt > span{display:flex;flex-direction:column;gap:3px}
.sechd{margin:26px 4px 12px}
.snote .shd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px}
.snote .shd > span{display:flex;flex-direction:column;gap:5px;min-width:0}
.snote .sb{flex:none}
.srt{padding:12px 0;border-top:1px solid var(--hair)}
.srt .st{font-size:var(--fs-btn);line-height:var(--lh-btn)}
.kchip{display:inline-flex;align-items:center;height:var(--ctl-tag);padding:0 10px;margin-top:7px;border-radius:calc(var(--ctl-tag) / 2);font-family:var(--f-data);font-size:var(--fs-micro);letter-spacing:var(--tr-micro);box-shadow:inset 0 0 0 1px var(--hair);color:var(--soft);transition:transform .15s}
button.kchip:active{transform:scale(.95)}
button.kchip[aria-expanded=true]{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.kset{margin-top:10px}
.ssaid{padding-top:12px;border-top:1px solid var(--hair)}
.ssaid .chips{margin-top:8px}
.sesd{margin-top:14px}
.sesd > .data .sesm{margin-right:7px}

/* ---------- ROUND 13 · THE NOTES SIDE OF THE HERBARIUM ----------
   The calendar is untouched; this is the other half of the switch top right. A note's tags sit in the
   margin (his d1 pick), so the line he wrote keeps the whole column to itself. */
.cal .dy .notm{position:absolute;right:4px;top:4px;color:var(--ink)}
.notm{display:inline-block;width:9px;height:7px;flex:none;border-radius:1.5px;box-shadow:inset 0 0 0 1.4px currentColor}
.spec > .notm{position:absolute;left:8px;top:8px}
.notes{margin-top:4px}
.nsearch{display:flex;gap:10px;align-items:center}
.nsf{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:var(--ctl);padding:0 18px;border-radius:calc(var(--ctl) / 2)}
.nsf .ic{width:18px;height:18px;background:var(--soft);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;flex:none}
.nsf:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink),var(--shade)}
.nsearch input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:var(--fs-label);line-height:var(--lh-label)}
.note{margin-top:12px}
.note.pin{box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade),inset 3px 0 0 0 var(--ink)}
.note .nhd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.note .nacts{display:flex;align-items:center;gap:8px}
.note .npin{width:var(--ctl-chip);height:var(--ctl-chip);border-radius:calc(var(--ctl-chip) / 2);display:grid;place-items:center;color:var(--faint);transition:color .2s,background .2s}
.note .npin b{display:block;width:14px;height:4px;border-radius:2px;box-shadow:inset 0 0 0 1.4px currentColor;transition:background .2s,width .2s}
.note .npin[aria-pressed=true] b{background:currentColor;width:18px}
.note .npin[aria-pressed=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
.note .nb{display:block;border-radius:50%;overflow:hidden;flex:none}
.note .nbody{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 12px;margin-top:10px}
.note .ntags{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding-top:2px}
.note .ntags .kchip{margin-top:0}
.note .ntx{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);overflow-wrap:anywhere}
.note .nfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.note .nwho{flex:1;min-width:160px;display:flex;align-items:center;gap:8px}
.note .nwho input{flex:1;min-width:0;height:var(--ctl-sm);border:0;border-radius:calc(var(--ctl-sm) / 2);padding:0 14px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);outline:none;font-size:var(--fs-label);line-height:var(--lh-label)}
.note .nwho input:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip.ro,.kchip.ro{cursor:default}
.note.nnew textarea{width:100%;min-height:120px;margin-top:10px;border:0;border-radius:18px;padding:14px 16px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);resize:none;font-size:var(--fs-body);line-height:var(--lh-body)}
.note.nnew textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.note.nnew .nnav{justify-content:space-between;margin-top:12px}
@media (min-width:600px){ .note .nbody{grid-template-columns:110px minmax(0,1fr)} }

/* a picture that cannot draw: its own still, full bleed, with the head and the source under it */
.vizstill{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);display:grid;place-items:center;padding:var(--gut)}
.vizstill .vsw2{position:relative;width:100%;max-width:560px;max-height:100%;overflow-y:auto;border-radius:var(--r-win);background:var(--paper);box-shadow:var(--shade)}
.vizstill img{display:block;width:100%;height:auto;border-radius:var(--r-win) var(--r-win) 0 0}
.vizstill .vst{padding:var(--pad-win)}
.vizstill .vsx{position:absolute;right:12px;top:12px;z-index:1}

/* the one quiet line on the reading: a longer note, after the check-in */
.nmore{margin-top:10px}
.nmore.open textarea{width:100%;min-height:92px;margin-top:8px;border:0;border-radius:18px;padding:12px 14px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair);resize:none;font-size:var(--fs-body);line-height:var(--lh-body);font-style:italic}
.nmore.open textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.sesd .srt:first-of-type{margin-top:10px}
.sesd .link{display:inline-flex;align-items:center;gap:8px}
.sesd .link .ic{width:16px;height:16px}
/* the page for the next session */
.paperc .tkl{display:flex;gap:9px;align-items:flex-start}
.paperc .box{display:block;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 0 0 1.3px #000;flex:none;margin-top:3px}
.paperc .box.on{background:#000}
.paperc .pbl{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:6px}
.paperc .pbi{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(0,0,0,.56)}
.paperc .ln i{font-style:normal;font-family:var(--f-data);font-size:var(--fs-micro);color:rgba(0,0,0,.5);margin-left:4px}
/* the starters' sources at the foot of a plan; the pairing of a ban with something to do */
.psrc{margin-top:18px;padding:12px 4px 0;border-top:1px solid var(--hair)}
.psrc > div + div{margin-top:5px}
.pdis{margin-top:10px}
.ppair{padding:0 0 12px}
.ppair > .data{margin-bottom:7px}
.pthen{display:block;margin-top:5px;font-size:var(--fs-label);line-height:var(--lh-label);color:var(--soft)}
.pthen .data{display:block;margin-bottom:2px}
/* the desktop keeps its one measure between windows (a proper desktop pass of round 10 is still to come) */
.plc > .ic{transition:transform .25s ease}
.plc[aria-expanded=true] > .ic{transform:rotate(90deg)}

/* =========================================================
   ROUND 11 (13 nov 2026): the user's picks from the board
   ========================================================= */
/* my plans: a black pill on top opens the gallery (the circle plus stays at the foot) */
.paddtop{width:100%;margin:0 0 14px}
.cta .plus{background:none;-webkit-mask:none;mask:none}

/* =========================================================
   ROUND 12 (13 nov 2026): the six things he ticked, and his face
   ========================================================= */

/* ---------- THE LOCK ----------
   While the diary is closed, nothing of it is on screen: bud (the iframe, behind), the date and the
   keypad. The screens, the tab bar and everything that was open are taken away, not hidden under. */
body[data-locked] #screens,body[data-locked] #tabs,body[data-locked] #resume,body[data-locked] #stagecard,
body[data-locked] #bodystage,body[data-locked] #sheet,body[data-locked] #breath,body[data-locked] #dry,body[data-locked] #now,body[data-locked] #bignote{display:none !important}
#lock{position:fixed;inset:0;z-index:55;display:none;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:calc(18px + var(--sat)) var(--gut) calc(22px + var(--sab));pointer-events:none}
body[data-locked] #lock{display:flex}
#lock .lkw{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:auto}
#lock .lkw.no{animation:lkno .5s ease}
@keyframes lkno{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}
#lock .lkhd{text-align:center;color:var(--soft)}
#lock .lksay{min-height:15px;text-align:center}
#lock .lkfoot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4px;text-align:center}
#lock .lkfoot .gbtn{padding:0 18px}
/* the dots: how many digits, and how many are in */
.lkd{display:flex;gap:12px;justify-content:center;align-items:center;height:22px}
.lkd i{width:10px;height:10px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--faint);transition:background .18s ease,transform .18s ease}
.lkd i.on{background:var(--ink);box-shadow:none;transform:scale(1.1)}
/* look 1 · pad: a plain keypad */
.lkpad{display:grid;grid-template-columns:repeat(3,64px);gap:12px;justify-content:center;margin-top:4px}
.lkk{height:var(--ctl-bar);border-radius:calc(var(--ctl-bar) / 2);display:grid;place-items:center;font-size:var(--fs-title);font-weight:400;letter-spacing:var(--tr-title);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.2)}
.lkk:active{transform:scale(.94)}
.lkk.sm{box-shadow:none}
.lkk.gap{visibility:hidden}
.lkk .ic{width:22px;height:22px}
.lks .lkk9 .lkpad{grid-template-columns:repeat(3,52px);gap:10px;justify-content:flex-start}
.lks .lkk9 .lkk{height:var(--ctl);border-radius:calc(var(--ctl) / 2);font-size:var(--fs-body)}
.lks .lkd{justify-content:flex-start;margin:16px 0 4px}
.lks .lkwarn{margin-top:18px;max-width:34ch;padding-top:12px;border-top:1px solid var(--hair)}
/* look 2 · bud: the keypad is bud's own petals, the dots in the middle of the flower */
.lkbud{position:relative;width:300px;height:300px;margin:0 auto}
.lkbud .lkp{position:absolute;width:74px;height:58px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade);display:grid;place-items:center;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.2)}
.lkbud .lkp span{display:block;font-size:var(--fs-body);font-weight:400;letter-spacing:var(--tr-body)}
.lkbud .lkp:active{filter:brightness(.97)}
.lkbud .lkmid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.lkrow{display:flex;gap:10px;justify-content:center;align-items:center}
.lkrow .lkk{width:var(--ctl);height:var(--ctl);border-radius:calc(var(--ctl) / 2)}
/* look 3 · line: one line, the digits as dots */
.lkline{position:relative;width:min(300px,78vw);display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.lkline .lkin{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;text-align:center;letter-spacing:var(--tr-title);font-size:var(--fs-title)}
.lkline .lkrule{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);opacity:.45}
.lkrowline{width:min(300px,78vw);justify-content:flex-end;margin-top:2px}
.lkd.line{gap:18px;height:26px;position:relative;z-index:1}
.lkd.line i{width:11px;height:11px;border-radius:6px}

/* ---------- THE WEEK, ON SUNDAY ---------- */
.wkb{padding:0}
.wkb.onhome{margin-top:18px;padding-top:14px;border-top:1px solid var(--hair)}
.wk7{display:flex;justify-content:space-between;gap:4px;margin-top:12px}
.wk1{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.wk1 .wgap{display:block;width:10px;height:10px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--hair);margin:auto 0}
.wk1 > button{display:block;line-height:0}
.wkc{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.wkc > span{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 30%}
.wkl{margin-top:12px;max-width:34ch}
.wkp{padding-top:0}

/* ---------- FINDING A THERAPIST ---------- */
.find .fnq{padding:12px 0;border-top:1px solid var(--hair)}
.find .fnq .fnl{display:block;margin-bottom:5px;color:var(--soft)}
.find .fnq p{max-width:38ch}
.find .fnq a{display:block;margin-top:6px}
.find .fnl8{margin-top:10px}
.find .fnd{display:grid;grid-template-columns:86px minmax(0,1fr);gap:2px 10px;padding:9px 0;border-top:1px solid var(--hair)}
.find .fnd > .data:first-child{grid-row:span 2;padding-top:2px}
.find .fnd a{text-decoration:underline;text-underline-offset:2px}

/* ---------- BRING MY DIARY OVER · TELL HIM WHAT YOU THINK ---------- */
.brg .brl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin-top:14px;align-items:baseline}
.brg .brl > .t1{text-align:right}
.brg .brn{margin-top:12px;max-width:34ch}
.brg .brb{width:100%;text-align:left;border-radius:22px;padding:12px 16px;border-top:0;min-height:0}
.brg .brb .data{max-width:36ch}
.fbm{margin-top:14px;padding:14px 16px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--hair);
  font-family:var(--f-data);font-size:var(--fs-data);line-height:1.5;white-space:pre-wrap}
.fbk .top.head{margin-bottom:14px}

/* ---------- HIS OWN FACE ----------
   On the pass and in the person circle, never with a ring around it (the generator's own rule). */
.fsvg{width:100%;height:100%;display:block;color:currentColor}
.circ.hasface{padding:11px}
.circ.hasface .fsvg{width:100%;height:100%}
.pass .ring.face{border:0;width:92px;height:92px;padding:0}
.facepick{margin-top:12px}
/* the generator writes its own style sheet into the head when it mounts, so these have to out-weigh it */
.facepick .f9-root{height:auto;min-height:0;background:transparent;padding:0;overflow:visible}
.facepick .f9-root .f9-top,.facepick .f9-root .f9-h,.facepick .f9-root .f9-sub{display:none}
.facepick .f9-root .f9-face{width:104px;height:104px;margin:0 auto}
.facepick .f9-root .f9-cta{margin-top:10px}
.facepick .f9-root .f9-win{padding:2px 14px}
.facepick .f9-root .f9-foot{padding-top:10px}

/* ---------- CALMER MOTION ----------
   It follows the phone by default; data-calm is the same thing switched on by hand. Everything that
   already asks matchMedia('(prefers-reduced-motion: reduce)') is answered in js/app.js. */
:root[data-calm] *,:root[data-calm] *::before,:root[data-calm] *::after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
:root[data-calm] #veil{display:none}
:root[data-calm] #bwash{display:none}
/* the face picker's own sheet (js/faces.js writes it) is in px: inside the app it follows the text size */
.facepick .f9-root{font-size:var(--fs-label)}
.facepick .f9-root .f9-data{font-size:var(--fs-data)}
.facepick .f9-root .f9-sb{font-size:var(--fs-label)}
/* at the biggest text size the herbarium's head would push its view switch past the edge: it wraps
   instead (at the normal size the two still sit on one line, so the phone layout is as it was) */
.hhead{flex-wrap:wrap}
.hhead .vsw{flex:none;margin-left:auto}
/* the therapist card's four sections: the card's own title is the t3, the sections sit a step under it */
.find .fnh{margin-top:22px;margin-bottom:2px}
.find .fnh:first-of-type{margin-top:20px}
.find .fnn{margin-top:10px;max-width:38ch}
.find .fnn + .fnn{margin-top:6px}

/* ---------- ROUND 14 · YOUR DATA: the privacy page, inside "you" ----------
   One plain scrolling page in the app's own type. No links out, no boxes: it is read, not used. */
.priv .pvt{margin-top:18px}
.priv .pvs{margin-top:8px;max-width:34ch}
.priv .pvp{margin-top:26px}
.priv .pvp h2{font-weight:500}
.priv .pvp p{margin-top:8px;max-width:38ch}
.priv .pvp p + p{margin-top:10px}
.priv .pvf{margin-top:28px;padding-top:14px;border-top:1px solid var(--hair);max-width:38ch}

/* ---------- ROUND 14 · LETTERS, WITH THE GUARDRAILS ON (studio/r14/LETTERS.md) ----------
   The stop and the hold show a man his own words back with what the check noticed underlined. One
   mark, one colour: both halves of a pair are drawn the same, or he sees a sentence underlined and
   no reason for it. Nothing here is red: this is not a telling-off. */
.mk{box-shadow:inset 0 -2px 0 0 var(--ink)}
/* a row outside a shelf (the stop screen's "my plan", the rhythm's "finding a therapist") */
.priv .hrow,.pane > .hrow,.win > .hrow,.pane > button.hrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--hair)}
.pane > button.hrow > .ic,.win > button.hrow > .ic{width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.gbtn.wrow{align-items:flex-start;height:auto;padding:14px 16px}
.gbtn.wrow > span{flex:1;min-width:0;text-align:left}
.gbtn.wrow > i{margin-top:2px}
.flagr{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--hair)}
.flagr > .ic{width:16px;height:16px;flex:none;margin-top:3px;background:var(--soft);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.flagr > div{flex:1;min-width:0}
/* the four numbers on the stop screen, at a size a shaking hand can hit */
.shelf .hrow.bignum{padding:14px 0}
.shelf.ink .hrow.bignum .call.ink{width:44px;height:44px;border-radius:22px;display:grid;place-items:center;background:var(--cta);color:var(--cta-ink);flex:none}
.shelf.ink .hrow.bignum .call.ink i{width:20px;height:20px}
/* the gate screen: the seven things, as a key column */
.gfacts{margin-top:14px}
.gfacts .gf{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;padding:10px 0;border-top:1px solid var(--hair)}
.gfacts .gf:first-of-type{border-top:0}
.gtick{margin-top:16px;gap:12px;align-items:flex-start;cursor:pointer}
.gtick input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--ink)}
.cta.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}

/* ---------- ROUND 15 · CHOSEN AND FOCUSED BY A KEYBOARD ----------
   Last in the file on purpose: every rule under "THE ONE RULE" sets box-shadow:none at the same
   specificity, and at equal specificity the later rule wins. The outline alone is ink on ink here
   (a black ring around a black pill), so the chosen thing carries a hairline of its own light type
   just inside its edge as well. */
[aria-pressed="true"]:focus-visible,[aria-checked="true"]:focus-visible,[aria-selected="true"]:focus-visible{
  box-shadow:inset 0 0 0 2px var(--pick-ink)}
.sw[aria-checked="true"]:focus-visible{box-shadow:inset 0 0 0 2px var(--pick-ink)}