/* ============================================================================
   The five-tab shell in the plum skin, 9 Sept 2026 (mockup board K + L).

   Chris: "just copy this main page". So the paired app is the dark homepage
   on every tab: plum background, pink Shrikhand headings with the lemon
   shadow, dark cards with a cream border and a lavender offset shadow, at
   most ONE lemon card per screen, flat pink pill buttons, cream body text,
   hand notes in blush.

   Everything is scoped to `body.has-tabs`, which tabs.js puts on while a
   sealed pair is on screen. The public homepage, the start and the join
   screens never carry it and stay exactly as they are.

   The screen is a 480px column centred on a desktop and edge-to-edge on a
   phone; the tab bar is fixed to the viewport bottom, the gear and the pair
   pill to the top right.

   Every feature file (play.js, events-tab.js, community.js, settings.js,
   course-tab.js, deposits.js, friends.js, and app.js's journal) styles itself
   with the `.m-*`, `.k-*` and `.rv-*` classes here and nothing else.
   ========================================================================== */

:root{
  --plum:#1f0b16; --plum2:#2a1020; --blush:#ffb8d4;
  --m-tabhair:rgba(255,244,236,.18);   /* the hairline above the tab bar */
}
/* The plum page. The quiet tokens style.css uses for the paired screens are re-pointed here, so a
   class app.js still draws with var(--muted) or var(--hair) reads right on plum without a rule each. */
body.has-tabs{
  --soft:rgba(255,244,236,.62); --muted:rgba(255,244,236,.82); --hand-ink:#ffb8d4;
  --hair:rgba(255,244,236,.2); --card:#2a1020; --m-field:#2a1020; --seal-ink:#fff4ec;
  background:var(--plum);color:var(--cream);
}
body.has-tabs #home,body.has-tabs #today,body.has-tabs #day,body.has-tabs #tab-root{background:var(--plum);color:var(--cream)}
@media(prefers-color-scheme:dark){
  :root{ --m-field:#28151f; --m-tabhair:rgba(255,243,247,.2); }
  /* The plum shell is already dark by design. style.css's dark mode re-points --cream/--ink and friends
     for the light pages; the shell pins them back so every plum screen looks exactly as approved. */
  body.has-tabs{--pink:#ff2e88;--cherry:#e8083e;--cream:#fff4ec;--ink:#1a0a12;--lemon:#ffd84d;--mint:#7df0c4;--lav:#c9b8ff;
    --soft:rgba(255,244,236,.62);--muted:rgba(255,244,236,.82);--hand-ink:#ffb8d4;--hair:rgba(255,244,236,.2);--card:#2a1020;--m-field:#2a1020;--seal-ink:#fff4ec}
}

/* ---------- the screen: one column, centred, never wider than a phone ---------- */
/* The outer spacing every approved drawing is built on: board Z and the day-12 gates all set the phone to
   `padding:44px 24px 100px`, so the eyebrow starts 44px down and 24px in on every screen. The tabs used to
   sit at 30px/22px, and at 24px/18px under 420px, which is why stepping from a tab to the journal moved the
   whole page sideways and up. One value now, at every width.

   The bottom is the same 24px on every screen, and it is the air above the bar, not the bar's own room:
   `body.has-tabs` still reserves the bar's height below this. The drawings spend 96-100px there over an
   80-86px bar, so the last line always ends clear of it; reserving exactly the bar and nothing more is what
   left a final card or count line sitting against it. `.today` and the journal end on the same 24px. */
#tab-root.m-screen{display:block}
.m-screen{
  max-width:480px;margin:0 auto;padding:44px 24px 24px;
  color:var(--cream);font-family:var(--body);position:relative;z-index:1;
}

/* ---------- type ---------- */
body.has-tabs .m-eyebrow{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink)}
body.has-tabs .m-eyebrow.mute{color:var(--soft)}
body.has-tabs .m-brand{font-family:var(--display);font-size:17px;line-height:1;color:var(--cream);margin-top:6px}
body.has-tabs .m-brand em{font-style:normal;color:var(--pink)}
body.has-tabs .m-hero{font-family:var(--display);font-size:32px;line-height:1.1;color:var(--pink);text-shadow:3px 3px 0 var(--lemon);rotate:-1deg;overflow-wrap:anywhere}
body.has-tabs .m-hero.qa{color:var(--cream);text-shadow:2px 2px 0 var(--pink)}
body.has-tabs .m-hero.ink{color:var(--cream);text-shadow:none;rotate:0deg;font-size:26px;line-height:1.18}
body.has-tabs .m-hero.big{font-size:40px}
body.has-tabs .m-hero.sm{font-size:32px}
body.has-tabs .m-hero.xs{font-size:26px}
body.has-tabs .m-body{font-size:16px;line-height:1.45;font-weight:600;color:var(--cream)}
body.has-tabs .m-strong{font-size:17px;line-height:1.45;font-weight:800;color:var(--cream)}
body.has-tabs .m-hand{font-family:var(--hand);font-size:21px;line-height:1.15;color:var(--blush);rotate:-1deg}
body.has-tabs .m-hand.right{text-align:right;rotate:1deg}
body.has-tabs .m-fine{font-size:13px;line-height:1.4;font-weight:600;color:var(--soft)}
body.has-tabs .m-stat{font-size:16px;font-weight:700;color:var(--cream)}
body.has-tabs .m-stat b{color:var(--pink)}
body.has-tabs .m-big{font-family:var(--display);font-size:64px;line-height:1;color:var(--pink);text-shadow:3px 3px 0 var(--lemon)}

/* ---------- the divider ---------- */
body.has-tabs .m-divider,body.has-tabs .m-rule{height:1px;background:var(--hair);border:0;margin:0}

/* ---------- the old card, restyled to the dark card ---------- */
body.has-tabs .m-card{position:relative;border:2px solid var(--cream);border-radius:18px;background:var(--plum2);padding:20px 18px 22px;box-shadow:6px 7px 0 var(--lav)}

/* ---------- the compact tappable one-line card ---------- */
body.has-tabs .m-tap{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1.5px solid rgba(255,244,236,.45);border-radius:14px;background:var(--plum2);padding:14px 16px;
  text-decoration:none;color:var(--cream);font-family:var(--body);font-size:15px;font-weight:700;line-height:1.2;
  width:100%;text-align:left;cursor:pointer}
body.has-tabs .m-tap i{font-style:normal;font-size:19px;line-height:1;color:var(--soft);flex:none}
body.has-tabs .m-tap + .m-tap{margin-top:10px}
body.has-tabs .m-tap.mute{color:var(--soft)}

/* ---------- the old button, now the flat pink pill, and its ghost ---------- */
body.has-tabs .m-pill{display:flex;align-items:center;justify-content:center;width:100%;height:56px;
  border:1.5px solid transparent;border-radius:999px;background:var(--pink);color:#fff;
  font-family:var(--body);font-weight:800;font-size:17px;letter-spacing:.01em;line-height:1;
  text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .m-pill.ghost{background:transparent;color:var(--cream);border-color:rgba(255,244,236,.45)}
body.has-tabs .m-pill.wait,body.has-tabs .m-pill[disabled]{background:rgba(255,244,236,.14);color:var(--soft);border-color:transparent;cursor:default}
body.has-tabs .m-pill + .m-pill{margin-top:10px}
body.has-tabs .m-link{display:block;width:100%;text-align:center;margin-top:16px;background:0;border:0;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:700;color:var(--soft);
  text-decoration:underline;text-underline-offset:4px}

/* The row of small round buttons inside app.js's round card: the same .m-pill, laid inline and cut
   down to 38px, instead of three full-width bars stacked down the card. */
body.has-tabs .m-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
body.has-tabs .m-acts .m-pill{width:auto;flex:none;height:38px;padding:0 15px;font-size:13px;white-space:nowrap}
body.has-tabs .m-acts .m-pill + .m-pill{margin-top:0}

/* ---------- the old input: dark well, soft edge, pink caret ---------- */
body.has-tabs .m-input{display:block;width:100%;background:var(--plum2);border:1.5px solid rgba(255,244,236,.45);border-radius:14px;
  min-height:54px;padding:15px 16px;font-family:var(--body);font-size:16px;line-height:1.35;font-weight:600;
  color:var(--cream);caret-color:var(--pink);-webkit-appearance:none;appearance:none}
body.has-tabs textarea.m-input{min-height:120px;resize:vertical}
body.has-tabs .m-input::placeholder{color:var(--soft);opacity:1}
body.has-tabs .m-input:focus{outline:2px solid var(--pink);outline-offset:2px}
body.has-tabs .m-input + .m-input{margin-top:12px}

/* ---------- the segmented control ---------- */
body.has-tabs .m-seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,244,236,.12)}
body.has-tabs .m-seg a,body.has-tabs .m-seg button{flex:1;display:flex;align-items:center;justify-content:center;height:38px;border:0;
  border-radius:999px;background:transparent;text-decoration:none;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:800;color:var(--soft)}
body.has-tabs .m-seg a.on,body.has-tabs .m-seg button.on{background:var(--pink);color:#fff}

/* ---------- the old list row: title, sub, right slot ---------- */
body.has-tabs .m-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 2px;
  border-top:1px solid var(--hair);text-decoration:none;color:var(--cream);width:100%;text-align:left;
  background:0;border-left:0;border-right:0;border-bottom:0;font-family:var(--body)}
body.has-tabs .m-row:last-child{border-bottom:1px solid var(--hair)}
body.has-tabs .m-row > :first-child{flex:1;min-width:0}
body.has-tabs .m-row > :last-child{flex:none}
body.has-tabs .m-row .m-rt{font-size:16px;font-weight:700;line-height:1.3;color:var(--cream)}
body.has-tabs .m-row .m-rs{margin-top:3px;font-size:13px;font-weight:600;line-height:1.3;color:var(--soft)}
body.has-tabs .m-row .m-rr{font-size:14px;font-weight:700;color:var(--soft)}
body.has-tabs .m-row .m-strong span{font-size:14px;font-weight:600;color:var(--soft);margin-left:8px}
/* the row that is ours: the lemon pill friends.js used to paint with an inline style. The text has to
   come with the background, or the cream row colour above stays and leaves white on yellow. */
body.has-tabs .m-row.lit{background:var(--lemon);border-radius:14px;padding-left:12px;padding-right:12px;color:var(--ink)}
body.has-tabs .m-row.lit b,body.has-tabs .m-row.lit .m-rt,body.has-tabs .m-row.lit .m-rs,body.has-tabs .m-row.lit .m-rr{color:var(--ink)}

/* ---------- the bulleted list ---------- */
body.has-tabs .m-list{list-style:none;margin-top:12px;padding:0}
body.has-tabs .m-list li{font-size:16px;font-weight:600;line-height:1.35;padding:7px 0 7px 20px;position:relative;color:var(--muted)}
body.has-tabs .m-list li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:50%;background:var(--pink)}
body.has-tabs .m-list.tight li{font-size:15px;padding:4px 0 4px 18px}
body.has-tabs .m-list.tight li::before{top:11px}

/* ---------- rhythm ---------- */
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}.mt16{margin-top:16px}
.mt18{margin-top:18px}.mt20{margin-top:20px}.mt22{margin-top:22px}.mt24{margin-top:24px}.mt26{margin-top:26px}.mt28{margin-top:28px}
.mt30{margin-top:30px}.mt32{margin-top:32px}

/* ============================================================================
   The card family from the main page (board K).
   ========================================================================== */
body.has-tabs .k-card{position:relative;background:var(--plum2);border:2px solid var(--cream);border-radius:18px;padding:16px 18px 18px;box-shadow:6px 7px 0 var(--lav);rotate:-.6deg;color:var(--cream)}
body.has-tabs .k-card.r{rotate:.7deg;box-shadow:6px 7px 0 var(--pink)}
body.has-tabs .k-card.quiet{box-shadow:none;rotate:0deg;background:var(--plum2)}
body.has-tabs .k-card.lemon{background:var(--lemon);border-color:var(--ink);box-shadow:6px 7px 0 var(--pink);rotate:.6deg;color:var(--ink)}
body.has-tabs .k-card.mint{background:var(--mint);border-color:var(--ink);box-shadow:5px 6px 0 var(--pink);color:var(--ink)}
body.has-tabs .k-card + .k-card{margin-top:18px}
body.has-tabs a.k-card{display:block;text-decoration:none;color:inherit}
body.has-tabs .k-title{font-family:var(--display);font-size:19px;line-height:1.15;color:var(--pink);margin-bottom:6px;overflow-wrap:anywhere}
/* the quiet default is stated FIRST on purpose: it has the same specificity as the lemon and mint
   rule below, so a card written `k-card quiet lemon` would otherwise take the cream title and read
   #fff4ec on #ffd84d, which is 1.28:1. Order is the whole guard here. */
body.has-tabs .k-card.quiet .k-title{color:var(--cream)}
body.has-tabs .k-card.lemon .k-title,body.has-tabs .k-card.mint .k-title{color:var(--ink)}
body.has-tabs .k-num{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
body.has-tabs .k-card.lemon .k-num,body.has-tabs .k-card.mint .k-num{color:var(--cherry)}
body.has-tabs .k-txt{font-size:15px;line-height:1.42;font-weight:600;color:var(--cream);margin-top:6px;overflow-wrap:anywhere;white-space:pre-wrap}
body.has-tabs .k-card.lemon .k-txt,body.has-tabs .k-card.mint .k-txt{color:var(--ink)}
body.has-tabs .k-tease{font-size:14px;line-height:1.35;font-weight:600;color:var(--soft);margin-top:4px}
body.has-tabs .k-card.lemon .k-tease,body.has-tabs .k-card.mint .k-tease{color:#6b3550}
body.has-tabs .k-card .m-hand{color:var(--blush)}
body.has-tabs .k-card.lemon .m-hand{color:#6b3550}
body.has-tabs .k-sticker{position:absolute;top:-13px;right:-8px;background:var(--pink);border:2px solid var(--plum);border-radius:999px;
  font-size:11px;font-weight:800;padding:.32em .75em;rotate:8deg;color:#fff;z-index:2;white-space:nowrap}
body.has-tabs .k-sticker.lemon{background:var(--lemon);color:var(--ink)}
body.has-tabs .k-sticker.lav{background:var(--lav);color:var(--ink)}
body.has-tabs .k-sticker.bl{top:auto;bottom:-13px;right:12px;rotate:-4deg}
body.has-tabs .k-sticker.bl.done{background:var(--ink);color:var(--mint);border-color:var(--mint)}
body.has-tabs .k-lock{position:absolute;top:-22px;right:18px;width:56px;height:56px;border-radius:50%;background:var(--pink);border:3px solid var(--blush);display:grid;place-items:center;font-size:24px;z-index:2}

/* the answer box and inputs: the same look for a real <textarea>, <input> or <select> */
body.has-tabs .k-input{position:relative;display:block;width:100%;background:var(--plum2);border:1.5px solid rgba(255,244,236,.45);border-radius:16px;min-height:56px;padding:15px 16px;
  font-family:var(--body);font-size:16px;line-height:1.35;font-weight:600;color:var(--cream);caret-color:var(--pink);
  -webkit-appearance:none;appearance:none;resize:vertical}
body.has-tabs .k-input + .k-input{margin-top:14px}
body.has-tabs .k-input.tall{min-height:118px}
body.has-tabs .k-input::placeholder{color:var(--soft);opacity:1}
body.has-tabs .k-input:focus{outline:2px solid var(--pink);outline-offset:2px;border-color:var(--pink)}
/* A field she is not allowed to send from should not look like one she is: the same box, quieted, with its
   edge dropped back to the hairline the rest of the screen divides with. `-webkit-text-fill-color` because
   iOS Safari otherwise paints a disabled field its own grey and ignores `color` entirely. */
body.has-tabs .k-input:disabled{color:var(--soft);-webkit-text-fill-color:var(--soft);opacity:1;
  border-color:var(--hair);background:transparent;cursor:not-allowed}
body.has-tabs select.k-input{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff4ec' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
body.has-tabs .k-card.lemon .k-input{background:#fff;border-color:var(--ink);color:var(--ink)}

/* buttons: the flat pink pill from the main page */
body.has-tabs .k-btn{display:block;width:100%;font-family:var(--body);font-weight:800;font-size:18px;background:var(--pink);color:#fff;border:0;
  border-radius:999px;padding:.85em 1.4em;cursor:pointer;text-align:center;text-decoration:none;line-height:1.1;-webkit-appearance:none;appearance:none}
body.has-tabs .k-btn .k-mail{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.has-tabs .k-btn.ghost{background:0;color:var(--cream);border:1.5px solid rgba(255,244,236,.45)}
body.has-tabs .k-btn.lemon{background:var(--lemon);color:var(--ink)}
body.has-tabs .k-btn.sm{display:inline-block;width:auto;font-size:14px;padding:.65em 1.2em}
body.has-tabs .k-btn.sm.ink{background:var(--ink);color:#fff}
body.has-tabs .k-btn.sm.ghost.dk{color:var(--ink);border-color:rgba(26,10,18,.4)}
body.has-tabs .k-btn[disabled]{opacity:.55;cursor:default}
body.has-tabs .k-btn:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
body.has-tabs .k-btn:not(.sm) + .k-btn:not(.sm){margin-top:10px}
body.has-tabs .k-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
body.has-tabs .k-link{display:block;width:100%;text-align:center;margin-top:16px;font-family:var(--hand);font-size:21px;line-height:1.15;color:var(--blush);rotate:-1deg;
  background:0;border:0;padding:0;cursor:pointer;text-decoration:none}
/* Chris, 2026-09-13: every "back to" control is this handwritten link, and some of them (the content
   pages, a failed load, the payment landing) draw before a pair is known, i.e. without body.has-tabs.
   The same rule, scoped to the two containers those screens draw into, so the face is right there too
   and nothing leaks onto the public homepage. */
#todayContent .k-link,#tab-root .k-link{display:block;width:100%;text-align:center;margin-top:16px;font-family:var(--hand);font-size:21px;line-height:1.15;color:var(--blush);rotate:-1deg;
  background:0;border:0;padding:0;cursor:pointer;text-decoration:none}
body.has-tabs .k-card.lemon .k-link{color:#6b3550}
/* The id in the rule above out-ranks a bare `.mt30`, so the spacing a screen asks for was lost. The reveal's
   "← back to journal" is the one `.k-link.mt30`, and W5 puts it 30px under the follow-up card. */
#todayContent .k-link.mt30{margin-top:30px}

/* the score strip */
body.has-tabs .k-stats{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--cream);border-radius:14px;background:var(--plum2);overflow:hidden}
body.has-tabs .k-stats div{padding:12px 14px;font-size:15px;font-weight:800;color:var(--cream);display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
body.has-tabs .k-stats div + div{border-left:2px solid var(--cream)}
body.has-tabs .k-stats b{font-family:var(--display);font-size:24px;font-weight:400;color:var(--pink);text-shadow:2px 2px 0 var(--lemon)}

/* the pill badge */
body.has-tabs .k-pill{display:inline-block;font-weight:800;background:var(--cream);color:var(--ink);padding:.45em 1.2em;border-radius:999px;rotate:1deg;box-shadow:3px 4px 0 var(--pink);font-size:14px}

/* section titles */
body.has-tabs .k-sec{margin-top:34px}
body.has-tabs .k-h{font-family:var(--display);font-size:24px;color:var(--pink);text-shadow:2px 3px 0 var(--lemon);rotate:-1deg;line-height:1.1}
body.has-tabs .k-why{font-family:var(--hand);font-size:20px;line-height:1.15;color:var(--blush);margin:2px 0 14px;rotate:-.5deg}

/* rows inside a card (a <div>, an <a> or a <button>) */
body.has-tabs .k-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,244,236,.2);
  width:100%;text-align:left;background:0;border-left:0;border-right:0;border-bottom:0;font-family:var(--body);color:var(--cream);text-decoration:none;border-radius:0}
body.has-tabs button.k-row,body.has-tabs a.k-row{cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .k-row:first-of-type{border-top:0;padding-top:4px}
body.has-tabs .k-row > :first-child{min-width:0}
body.has-tabs .k-row b{font-size:15px;font-weight:800;color:var(--cream);overflow-wrap:anywhere}
body.has-tabs .k-card.lemon .k-row b{color:var(--ink)}
body.has-tabs .k-card.lemon .k-row{border-top-color:rgba(26,10,18,.25);color:var(--ink)}
body.has-tabs .k-sub{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--soft);overflow-wrap:anywhere}
body.has-tabs .k-card.lemon .k-sub{color:#6b3550}
body.has-tabs .k-act{font-family:var(--hand);font-size:20px;line-height:1;color:var(--pink);white-space:nowrap;background:0;border:0;padding:0;cursor:pointer;flex:none}
body.has-tabs .k-card.lemon .k-act{color:var(--cherry)}
body.has-tabs a.k-act{text-decoration:none}
body.has-tabs .k-val{font-size:13px;font-weight:800;color:var(--soft);flex:none}
/* J3.5 (t3): the pair's public address, inside the pair's own row in settings. The two words after it are
   .k-act, the board's own action, so the only new thing here is the line that holds them. It wraps rather
   than pushing the card wide, because an address can be 32 characters long. */
body.has-tabs .k-addr{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:10px}
body.has-tabs .k-addr span{font-size:13px;font-weight:800;color:var(--soft);overflow-wrap:anywhere;min-width:0}
body.has-tabs .k-card.lemon .k-addr span{color:#6b3550}
body.has-tabs .k-tog{width:50px;height:29px;border-radius:999px;background:0;border:1.5px solid rgba(255,244,236,.5);position:relative;flex:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .k-tog::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--cream)}
body.has-tabs .k-tog.on{background:var(--pink);border-color:var(--pink)}
body.has-tabs .k-tog.on::after{left:24px;background:#fff}

/* radio dots on the poll */
body.has-tabs .k-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--cream);flex:none;position:relative}
body.has-tabs .k-radio.on{border-color:var(--pink)}
body.has-tabs .k-radio.on::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--pink)}
body.has-tabs .k-row.opt{justify-content:flex-start;gap:14px}

/* reactions: a row of round emoji, mine in lavender, hers in a small lavender disc */
body.has-tabs .k-react{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
body.has-tabs .k-react span,body.has-tabs .k-react button{display:inline-grid;place-items:center;width:46px;height:46px;border:1.5px solid rgba(255,244,236,.45);border-radius:50%;background:var(--plum);font-size:22px;color:var(--cream);padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .k-react .on{background:var(--pink);border-color:var(--pink);rotate:-8deg}
body.has-tabs .k-react .mine{background:var(--lav);border-color:var(--lav)}
body.has-tabs .k-react .plus{font-family:var(--body);font-weight:800;font-size:24px;color:var(--cream);border-style:dashed}
body.has-tabs .k-card.lemon .k-react span,body.has-tabs .k-card.lemon .k-react button{background:#fff;border-color:var(--ink)}
/* on the lemon card the chips go white, so anything that inherited the cream row colour would be
   white on white; and the lavender "mine" disc keeps its ink edge. The third rule is the general guard
   for every control a feature file drops inside a lemon card. */
body.has-tabs .k-card.lemon .k-react .plus{color:var(--ink)}
body.has-tabs .k-card.lemon .k-react .mine{background:var(--lav);border-color:var(--ink)}
body.has-tabs .k-card.lemon :is(.k-x,.k-cats button,.k-opts li){color:var(--ink)}
body.has-tabs .k-got{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lav);font-size:18px;margin-right:8px;vertical-align:middle}

/* the day cards grid */
body.has-tabs .k-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;margin-top:20px}
body.has-tabs .k-grid .k-card{padding:12px 12px 14px;border-radius:16px}
body.has-tabs .k-grid .k-card:nth-child(odd){rotate:-1.2deg}
body.has-tabs .k-grid .k-card:nth-child(even){rotate:1deg}
body.has-tabs .k-grid .k-card .k-title{font-size:15px;color:var(--cream);margin:4px 0 4px}
body.has-tabs .k-grid .k-card.mint .k-title,body.has-tabs .k-grid .k-card.lemon .k-title{color:var(--ink)}
body.has-tabs .k-grid .k-card.locked{box-shadow:none;border-color:rgba(255,244,236,.35)}
body.has-tabs .k-grid .k-card.locked .k-title,body.has-tabs .k-grid .k-card.locked .k-num{opacity:.5}

/* the small caps tag */
body.has-tabs .k-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;background:var(--lav);color:var(--ink)}
body.has-tabs .k-tag.pink{background:var(--pink);color:#fff}
body.has-tabs .k-tag.mute{background:0;border:1.5px solid var(--soft);color:var(--soft)}

/* the feature list on the events landing */
body.has-tabs .k-list{list-style:none;margin-top:18px;padding:0}
body.has-tabs .k-list li{position:relative;padding:8px 0 8px 36px;font-size:16px;font-weight:700;color:var(--cream);line-height:1.35}
body.has-tabs .k-list li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;background:var(--pink);box-shadow:2px 2px 0 var(--lemon)}
body.has-tabs .k-list li::after{content:"\2713";position:absolute;left:4px;top:8px;color:#fff;font-size:13px;font-weight:900}

/* stickers floating on a screen */
body.has-tabs .k-stk{position:absolute;font-size:30px;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35));pointer-events:none;z-index:6}

/* ============================================================================
   The reveal (board L): no cards. Her name and her words with my reaction
   under them, a rule, my name and my words with her reaction under them.
   ========================================================================== */
body.has-tabs .rv-name{font:800 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--pink);margin:0;overflow-wrap:anywhere}
body.has-tabs .rv-name.first{margin-top:34px}
body.has-tabs .rv-name.lav{color:var(--lav)}
body.has-tabs .rv-txt{font:600 17px/1.42 var(--body);color:var(--cream);margin:8px 0 0;overflow-wrap:anywhere;white-space:pre-wrap}
body.has-tabs .rv-row{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
body.has-tabs .rv-row span,body.has-tabs .rv-row button[data-react],body.has-tabs .rv-row button[data-react-more]{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:21px;position:relative;
  background:0;border:0;padding:0;color:var(--cream);cursor:pointer;-webkit-appearance:none;appearance:none;flex:none}
/* The picked circle is a `button[data-react]`, and the reset above (0,3,2) out-ranks a bare `.mine` (0,3,1):
   the second selector is what lets my pick keep its lavender, the same circle as her `.em` in W5. */
body.has-tabs .rv-row .mine,body.has-tabs .rv-row button.mine[data-react]{background:var(--lav);color:var(--ink)}
/* W5's attribution row: her pick on my answer in the same lavender circle as mine, and the name beside it in
   the hand, level rather than tilted. The 4px makes the gap W5's 12px on this row only. */
body.has-tabs .rv-row .em{background:var(--lav);color:var(--ink);cursor:default}
body.has-tabs .rv-row .m-hand{margin:0 0 0 4px;rotate:0deg}
body.has-tabs .rv-row .plus{border:1.5px dashed rgba(255,244,236,.5);color:var(--cream);font:800 22px/1 var(--body)}
body.has-tabs .rv-row .mine .rv-badge{position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font:800 9px/17px var(--body);font-style:normal;text-align:center;border:1.5px solid var(--cream);text-transform:uppercase}
body.has-tabs .rv-row .k-input{flex:0 0 100%;margin-top:10px}
body.has-tabs .rv-got{font:800 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-top:12px}
body.has-tabs .rv-got em{font-style:normal;font-size:18px;letter-spacing:0;vertical-align:-2px;margin-left:6px}
/* Right-aligned, as board Z W5 draws it (`k-acts right mt22`): a flex row pushed to the end, so the pill sits
   in no line box and the row is exactly as tall as the pill. The pill itself is W5's `k-btn sm ico`. */
body.has-tabs .rv-sharewrap{display:flex;justify-content:flex-end;margin-top:22px}
/* The reveal's one share control. J2.3 made it the small pink pill (`k-btn sm ico`), which brings its
   own size, gap and icon; the name is what the promised vocabulary below and verify/journeys.ts's "one
   share for the whole reveal" look it up by. W5 draws it at its own height (14px type, .65em padding,
   35px), so this one pill steps out of the 44px floor further down; no other small pill does. */
body.has-tabs .rv-share-btn{width:auto}
body.has-tabs .k-btn.sm.ico.rv-share-btn{min-height:0}
body.has-tabs .rv-rule{border:0;border-top:1.5px solid rgba(255,244,236,.2);margin:26px 0;height:0;background:0}

/* ============================================================================
   The bottom bar: five icons, no words (board push-0927), dark like the page.
   Fixed to the viewport, safe-area aware; on a desktop the icons sit inside
   the same 480px column the screen uses, while the bar itself spans the width.
   ========================================================================== */
.m-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:flex-start;justify-content:space-around;
  height:calc(83px + env(safe-area-inset-bottom));
  padding:12px max(6px,calc((100% - 480px) / 2)) env(safe-area-inset-bottom);
  border-top:1px solid var(--m-tabhair);background:var(--plum);
}
.m-tabs a{display:flex;align-items:center;justify-content:center;height:44px;
  width:64px;color:rgba(255,244,236,.62);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-tabs svg{width:28px;height:28px;display:block}
.m-tabs a.on{color:var(--pink)}
@media(max-width:360px){ .m-tabs a{width:56px} }

/* The bar floats over the page, so every screen keeps a bar's worth of room under it. */
body.has-tabs{padding-bottom:calc(83px + env(safe-area-inset-bottom))}

/* ============================================================================
   The pair you are looking at, top right of every tabbed page: "C+W". Board Z
   (t4) took the gear off every screen, so this pill is the only control in the
   corner, and tapping it is the way into settings, where the pairs are listed.
   Fixed to the viewport corner, so it never lands on top of a centred column.
   ========================================================================== */
/* This is the settings-page offset: 52px further in (42px of close cross plus a 10px gap), so the
   pill sits beside the cross rather than under it. Every other screen has no cross, and `.solo`
   below hands the pill the corner itself. On a phone that corner is 16px in from the edge; on a
   desktop the screen is a 480px column, so the pill follows the column in rather than floating out
   beside it: 50% of the viewport is the column's centre, 240px back is its right edge. `max` keeps
   the phone value on anything under 512px. */
.m-pair{
  position:fixed;z-index:41;
  top:calc(26px + env(safe-area-inset-top));
  right:max(calc(68px + env(safe-area-inset-right)), calc(50% - 240px + 68px));
  height:34px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;border:0;
  background:var(--pink);color:#fff;font-family:var(--body);font-size:13px;font-weight:800;letter-spacing:.04em;line-height:1;
  cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;
}
.m-pair:focus-visible{outline:2px solid var(--lemon);outline-offset:2px}

/* ============================================================================
   The screens app.js still draws with style.css classes (the journal, the
   today screen, the course day view, history, the paywall, the poster), made
   readable on plum: cream text, plum2 cards, pink pills, blush hand notes.
   The tokens re-pointed at the top of this file do most of it; these are the
   rules that hard-code --ink, --cherry or white.
   ========================================================================== */
body.has-tabs .eyebrow,body.has-tabs .day-kicker,body.has-tabs .history-day{color:var(--pink)}
body.has-tabs .eyebrow.mute{color:var(--soft)}
body.has-tabs .brandline{color:var(--cream);font-size:17px}
body.has-tabs .hero-q,body.has-tabs .day-title,body.has-tabs .history-q,body.has-tabs .price,body.has-tabs .offer-list a,
body.has-tabs .content-page h3,body.has-tabs .pname,body.has-tabs .stat,body.has-tabs .said p,body.has-tabs .lesson h2{color:var(--cream)}
body.has-tabs .day-title{text-shadow:2px 3px 0 var(--cherry)}
body.has-tabs .stat b,body.has-tabs .price-line,body.has-tabs .poster-stats dd,body.has-tabs .said .who,body.has-tabs .history-row.open .history-status{color:var(--pink)}
body.has-tabs .lede,body.has-tabs .apple-line,body.has-tabs .history-status,body.has-tabs .content-page p,body.has-tabs .lesson p,body.has-tabs .offer-list li{color:var(--muted)}
body.has-tabs .hand,body.has-tabs .deep{color:var(--blush)}
body.has-tabs .tlink,body.has-tabs .text-button{color:var(--soft)}
body.has-tabs .catchup .tlink.left{color:var(--pink)}
body.has-tabs .form-error,body.has-tabs .today .form-error{color:var(--blush)!important}

/* cards: the dark card with the cream edge */
body.has-tabs .flow-card,body.has-tabs .home .flow-card,body.has-tabs .wait-card,body.has-tabs .setup-card,body.has-tabs .signin-card,
body.has-tabs .tcard,body.has-tabs .locked-card.said,body.has-tabs .catchup,body.has-tabs .lesson,body.has-tabs .cmp,body.has-tabs .day-intro,body.has-tabs .q{
  background:var(--plum2);color:var(--cream);border-color:var(--cream)}
body.has-tabs .flow-card,body.has-tabs .home .flow-card{border:2px solid var(--cream);border-radius:18px;box-shadow:6px 7px 0 var(--lav)}
body.has-tabs .home .flow-card h2,body.has-tabs .home .flow-card p{color:var(--cream)}
body.has-tabs .home .flow-card p{color:var(--muted)}
body.has-tabs .home .section-note{color:var(--soft)!important}
/* The landing under the plum shell (signed out on a phone that remembers a pair): the same teaser Chris
   approved in the app's old dark mode - dark cards, cream text, the lemon dare card - drawn here with fixed
   colours so it reads right whatever the phone's own light/dark setting is. */
body.has-tabs .home .brand em,body.has-tabs .home .logo em{color:var(--pink)}
body.has-tabs .home .rules{background:#321d27;border-color:var(--cream);color:var(--cream);box-shadow:6px 7px 0 var(--lav)}
body.has-tabs .home .rules p{color:var(--cream)}
body.has-tabs .home .rules-title{color:#ff4f7b}
body.has-tabs .home .rules.dare-card{background:var(--lemon);border-color:var(--ink);color:var(--ink);box-shadow:6px 7px 0 var(--pink)}
body.has-tabs .home .rules.dare-card p,body.has-tabs .home .rules.dare-card .rules-title{color:var(--ink)}
body.has-tabs .home .teaser-title{color:#ff4f7b}
body.has-tabs .home .pillar-name{color:var(--cream)}
body.has-tabs .home .pillar-num{text-shadow:2px 3px 0 var(--cream)}
body.has-tabs .home .pillar-why{color:#eacbd7}
body.has-tabs .home .card{background:#321d27;border-color:var(--cream);color:var(--cream);box-shadow:5px 6px 0 var(--cream)}
body.has-tabs .home .card:hover{box-shadow:8px 10px 0 var(--cream)}
body.has-tabs .home .card.locked:hover{box-shadow:5px 6px 0 var(--cream)}
body.has-tabs .home .card h3{color:var(--cream)}
body.has-tabs .home .card .dnum{color:#ff4f7b}
body.has-tabs .home .card .tease{color:#eacbd7}
/* the badge keeps its own background: style.css:84 puts .spicy on var(--lemon) and names no text
   colour, so without this it inherits the cream the card rule two lines up sets and reads #fff4ec
   on #ffd84d, 1.28:1. tabs.css:39 pins --ink back to #1a0a12 under has-tabs in dark, so the one
   value covers both schemes. */
body.has-tabs .home .card .spicy{color:var(--ink)}
body.has-tabs .home .card.locked::after{background:#321d27;border-color:var(--cream);color:var(--cream)}
body.has-tabs .home .foot{color:#d9a9c0}
body.has-tabs .home .foot a{color:var(--pink)}

/* ---------- the same teaser on the landing a stranger sees ----------
   The block above only paints while tabs.js has put `has-tabs` on the body, and tabs.js:420 withholds
   it on a start screen, so the very screen the "pale, not dark" complaint is about never got it.
   index.html:19 already carries data-mode="challenge", so the landing needs no new class.
   These rules may not borrow --cream, --ink, --lemon or --lav: style.css:429 re-points all four in dark
   mode and only body.has-tabs pins them back, so a landing rule that used them would paint dark cream
   text on the plum card and light ink text on the lemon card for any phone set to dark. The landing
   declares its own tokens instead and the shared ones are left exactly as they are, --pink included. */
.home[data-mode="challenge"]{--landing-paper:#fff4ec;--landing-ink:#1a0a12;--landing-card:#321d27;--landing-lemon:#ffd84d;--landing-lav:#c9b8ff;--landing-rose:#ff4f7b;--landing-blush:#eacbd7;--landing-hand:#d9a9c0}
.home[data-mode="challenge"] .rules{background:var(--landing-card);border-color:var(--landing-paper);color:var(--landing-paper);box-shadow:6px 7px 0 var(--landing-lav)}
.home[data-mode="challenge"] .rules p{color:var(--landing-paper);font-size:15px;line-height:1.42;font-weight:600}
.home[data-mode="challenge"] .rules-title{color:var(--landing-rose)}
.home[data-mode="challenge"] .rules.dare-card{background:var(--landing-lemon);border-color:var(--landing-ink);color:var(--landing-ink);box-shadow:6px 7px 0 var(--pink)}
.home[data-mode="challenge"] .rules.dare-card p,.home[data-mode="challenge"] .rules.dare-card .rules-title{color:var(--landing-ink)}
.home[data-mode="challenge"] .teaser-title{color:var(--landing-rose)}
.home[data-mode="challenge"] .pillar-name{color:var(--landing-paper)}
.home[data-mode="challenge"] .pillar-num{text-shadow:2px 3px 0 var(--landing-paper)}
.home[data-mode="challenge"] .pillar-why{color:var(--landing-blush)}
.home[data-mode="challenge"] .card{background:var(--landing-card);border-color:var(--landing-paper);color:var(--landing-paper);box-shadow:5px 6px 0 var(--landing-paper)}
.home[data-mode="challenge"] .card:hover{box-shadow:8px 10px 0 var(--landing-paper)}
.home[data-mode="challenge"] .card.locked:hover{box-shadow:5px 6px 0 var(--landing-paper)}
.home[data-mode="challenge"] .card h3{color:var(--landing-paper)}
.home[data-mode="challenge"] .card .dnum{color:var(--landing-rose)}
.home[data-mode="challenge"] .card .tease{color:var(--landing-blush)}
.home[data-mode="challenge"] .card .spicy{color:var(--landing-ink)}
.home[data-mode="challenge"] .card.locked::after{background:var(--landing-card);border-color:var(--landing-paper);color:var(--landing-paper)}
.home[data-mode="challenge"] .foot{color:var(--landing-hand)}
/* The page under the cards. The block above alone leaves cream paper behind dark cards, and every
   line that lives BETWEEN the cards - the pillar names, the hero copy, the sign-in line - is written
   in a colour chosen for cream. The landing therefore takes the dark paper too, which is what a phone
   already set to dark mode has shown all along (style.css:429-435), and states the copy colours the
   dark block states, so the light phone and the dark phone read the same. `:not(.has-tabs)` keeps the
   plum shell exactly as it is, and `:not([hidden])` is load-bearing: app.js:1680 hides the landing and
   leaves data-mode="challenge" on it for ever, so without it #top10, #games and #day would inherit the
   dark paper while their own text is still written for cream paper.
   The wordmark is NOT on this list. PLAN-board-z.md:226 says "the wordmark and --pink are untouched
   either way", so `.brand` and `.logo` keep --cherry; only the small text that genuinely needs the lift
   off the dark paper, `.issue` and `.cta-secondary`, takes the rose.
   --pink, the wordmark's "for" and the highlighted "really" are untouched. */
body:not(.has-tabs):has(.home[data-mode="challenge"]:not([hidden])){background:#1f1118;color:#fff3f7}
.home[data-mode="challenge"] .dare,.home[data-mode="challenge"] .cta-detail,.home[data-mode="challenge"] .auth-bar,.home[data-mode="challenge"] .tag{color:var(--landing-blush)}
.home[data-mode="challenge"] .issue,.home[data-mode="challenge"] .cta-secondary,.home[data-mode="challenge"] .text-button{color:var(--landing-rose)}
/* `.text-button` is index.html:36 and the sign-in button app.js:333 writes into the auth bar at
   index.html:60: the landing's only way back in. style.css:210 leaves it on --cherry, which is
   #e8083e on the #1f1118 paper above, 3.94:1. The rose is 5.78:1. */
@supports not (selector(:has(*))){
  /* An engine with no :has() never runs the paper rule, so the page keeps whatever paper style.css
     gives it - and every rule above would then paint #fff4ec pillar names on the #fff4ec paper of a
     cream page. Re-pointing the four text tokens puts the landing back on the colours style.css
     already gives that page; no selector above has to be repeated, and the lemon dare card and
     --pink are untouched.
     The light media query is load-bearing, not decoration. style.css:429 hands a dark phone the
     #1f1118 paper whether or not :has() exists, so re-pointing these tokens unconditionally would
     paint #1a0a12 text on #1f1118 there. Only the cream page wants the dark text; the dark page
     keeps the light tokens declared above. */
  @media(prefers-color-scheme:light){
    .home[data-mode="challenge"]{--landing-paper:#1a0a12;--landing-card:#fff;--landing-rose:#e8083e;--landing-blush:#7a3a56;--landing-hand:#7a3a56}
  }
}
body.has-tabs .tcard,body.has-tabs .locked-card.said,body.has-tabs .catchup{border:2px solid var(--cream);border-radius:18px}
body.has-tabs .locked-card{background:var(--plum2)}
body.has-tabs .scoring.locked-card{background:var(--ink)}
body.has-tabs .q{box-shadow:4px 5px 0 var(--cherry);border-color:var(--pink)}
body.has-tabs .day-intro{border-color:var(--lemon);color:#ffd6e6}
body.has-tabs .lesson{border-color:var(--pink);box-shadow:6px 7px 0 var(--cherry)}
body.has-tabs .lesson p{color:#ffd6e6}
body.has-tabs .lesson h2{color:var(--lemon)}
body.has-tabs .cmp{color:#ffe9f2;border-color:var(--pink)}
body.has-tabs .choice{background:var(--plum2);color:#ffe9f2;border-color:var(--pink);box-shadow:3px 4px 0 var(--cherry)}
body.has-tabs .choice.on{background:var(--lemon);color:var(--ink)}
body.has-tabs .answerbox textarea{background:var(--plum2);color:#ffe9f2;border-color:var(--pink);box-shadow:4px 5px 0 var(--cherry)}
body.has-tabs .answerbox label,body.has-tabs .name-form label,body.has-tabs .pact label{color:var(--cream)}
body.has-tabs .dot{border-color:var(--pink);background:var(--plum2)}
body.has-tabs .dot.on{background:var(--lemon)}
body.has-tabs .day{background:var(--plum);min-height:100dvh}
body.has-tabs .day .back{background:var(--cream)}
body.has-tabs .invite-box{border-color:var(--hair);background:transparent}
body.has-tabs .invite-box code{color:var(--muted)}

/* fields on the paired screens: the dark well */
body.has-tabs .today textarea,body.has-tabs .form-row input,body.has-tabs .email-form input,body.has-tabs .round-card select,body.has-tabs .round-card input,body.has-tabs .said select{
  background:var(--plum2);color:var(--cream);border-color:rgba(255,244,236,.45);box-shadow:none;caret-color:var(--pink)}
body.has-tabs .home .form-row input{border:1.5px solid rgba(255,244,236,.45);border-radius:14px;padding:12px 14px}
body.has-tabs .today textarea::placeholder,body.has-tabs .form-row input::placeholder{color:var(--soft)}
body.has-tabs .today textarea:focus{border-color:var(--pink)}
/* the paywall and the offer card read on plum like every other card */
body.has-tabs .paywall,body.has-tabs .offer-card.paywall{background:var(--plum2);border-color:var(--cream);color:var(--cream)}
body.has-tabs .paywall .hero-q,body.has-tabs .paywall .price-line{color:var(--pink)}
body.has-tabs .paywall .hand{color:var(--blush)}
/* Gate j3.1 (approved 2026-09-12): the two feature links inside the card read in the card's own grey, not the
   browser's blue. They stay links, so a dotted underline marks them. */
body.has-tabs .paywall .k-tease a{color:inherit;text-decoration:underline dotted;text-underline-offset:2px}
body.has-tabs .addr-input{color:var(--cream);border-bottom-color:var(--cream)}
body.has-tabs .addr-input:focus{border-color:var(--pink)}

/* the pink pill and the flat course buttons */
body.has-tabs .pill{background:var(--pink);color:#fff}
body.has-tabs .copybtn{border-color:transparent;box-shadow:none}
body.has-tabs .day .copybtn,body.has-tabs .day .donebtn,body.has-tabs .day .micbtn,body.has-tabs .day .back,body.has-tabs .tool-button{border-color:var(--cream);box-shadow:4px 5px 0 var(--lav)}
body.has-tabs .tool-button{background:var(--plum2);color:var(--cream)}

/* reactions and the share sheet */
body.has-tabs .rx{opacity:.44}
body.has-tabs .rx.mine,body.has-tabs .rx.theirs{opacity:1}
body.has-tabs .rx.mine{background:rgba(255,46,136,.24)}
body.has-tabs .rx-who,body.has-tabs .rx-share{color:#d9a9c0}
body.has-tabs .rx-share{border-color:rgba(255,232,242,.28)}
body.has-tabs .rx i{background:var(--lemon);color:var(--ink)}
body.has-tabs .mood i{background:var(--pink)}
body.has-tabs .sheet{background:var(--plum2);color:var(--cream);box-shadow:0 -12px 44px rgba(0,0,0,.5)}
body.has-tabs .sheet-grip{background:var(--hair)}
body.has-tabs .srow{color:var(--cream)}
body.has-tabs .srow .snote{color:var(--pink)}
body.has-tabs .round-notice{border-color:var(--hair)}
body.has-tabs .seal{box-shadow:inset 0 0 0 3px rgba(255,244,236,.45)}
body.has-tabs .reveal-head{color:var(--cream)}
body.has-tabs .reveal-head .hero-q{color:var(--pink)}

/* ---------- board N: the journal's three sub-tabs, chips, the dated feed, the deposit card ---------- */
body.has-tabs .m-sub{display:flex;gap:6px;margin-top:22px;border-bottom:1px solid rgba(255,244,236,.18)}
body.has-tabs .m-sub a{font-size:14px;font-weight:800;color:var(--soft);padding:8px 10px 10px;border-bottom:2.5px solid transparent;margin-bottom:-1px;text-decoration:none}
body.has-tabs .m-sub a.on{color:var(--pink);border-bottom-color:var(--pink)}
body.has-tabs .m-chips{display:flex;gap:8px;margin-top:18px}
body.has-tabs .m-chip{font-size:12px;font-weight:800;padding:.4em 1em;border-radius:999px;border:1.5px solid rgba(255,244,236,.45);color:var(--soft);background:none;font-family:inherit;cursor:pointer}
body.has-tabs .m-chip.on{background:var(--cream);border-color:var(--cream);color:var(--ink)}
body.has-tabs .m-feed{list-style:none;margin-top:16px;padding:0}
body.has-tabs .m-feed li{padding:13px 0;border-top:1px solid rgba(255,244,236,.14)}
body.has-tabs .m-feed li:first-child{border-top:0}
body.has-tabs .m-feed a{display:block;color:inherit;text-decoration:none}
body.has-tabs .m-when{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--pink)}
body.has-tabs .m-when.mute{color:var(--soft)}
body.has-tabs .m-when i{font-style:normal;font-weight:800;letter-spacing:0;text-transform:none;color:var(--lav);margin-left:8px}
body.has-tabs .m-what{font-size:15px;line-height:1.4;font-weight:600;color:var(--cream);margin-top:4px;white-space:pre-line}
body.has-tabs .m-what.q{font-family:var(--hand);font-size:19px;color:var(--blush);rotate:-.5deg;white-space:normal}
/* Journal -> everything reuses `.q` only for the handwritten type above; the numbered-card look of the
   shared `.q` component (border, shadow, background, the numbered badge) belongs to the real question
   cards, never to a row of this feed. Scoped to `.m-feed` alone, so those cards are untouched. */
body.has-tabs .m-feed .q{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
body.has-tabs .m-feed .q::before{content:none}
body.has-tabs .k-inpill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--pink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;vertical-align:middle;margin-left:10px}
body.has-tabs .k-card.lemon .k-inpill{background:var(--ink);color:var(--lemon)}
body.has-tabs .m-dep{position:relative;padding:18px 44px 18px 18px;cursor:pointer}
body.has-tabs .m-dep-t{font-size:16px;font-weight:800;color:var(--cream)}
body.has-tabs .m-dep-h{font-size:14px;line-height:1.4;color:var(--soft);margin-top:4px}
body.has-tabs .m-dep-go{position:absolute;right:16px;top:50%;translate:0 -50%;font-size:22px;font-weight:800;color:var(--pink)}
body.has-tabs .m-x{position:absolute;right:8px;top:6px;width:40px;height:40px;border:0;background:none;color:var(--soft);font-size:30px;font-weight:600;line-height:40px;text-align:center;cursor:pointer;font-family:inherit;padding:0}
body.has-tabs .k-input.m-box{min-height:118px;padding:16px 18px;font-size:17px;font-weight:600;line-height:1.4}
body.has-tabs .m-hand.center{text-align:center}

/* ============================================================================
   Board Z, 11 Sept 2026: the kit wave 1 paints with.

   Nothing draws these yet. Every class here is copied from the <style> block of
   mockups/plan-2026-09-11-z.html and scoped to `body.has-tabs` like the rest of
   the skin, so the screen that first paints one lands already dressed. The one
   drawn class deliberately left out is `k-out`: the board draws it and uses it
   on nothing, and the share control is a `.k-btn.sm.ico` instead.
   ========================================================================== */

/* The standard body paragraph under a display title: the same size and weight on
   every page, which is what Chris asked for on 11 Sept. `.tight` is the one-line
   variant that must not wrap, e.g. a value sitting beside its label. */
body.has-tabs .m-std{font-size:16px;line-height:1.45;font-weight:600;color:var(--cream)}
body.has-tabs .m-std.tight{font-size:15px;white-space:nowrap}

/* The dare row, built once and reused by every list of things you can pick:
   an emoji in a disc, the title and its note, and the action pinned right. */
body.has-tabs .k-dare{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,244,236,.14)}
body.has-tabs .k-dare .e{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--plum2);border:1.5px solid rgba(255,244,236,.25);font-size:20px;line-height:1}
body.has-tabs .k-dare > span:nth-child(2){flex:1;min-width:0}
body.has-tabs .k-dare b{display:block;font-size:15px;font-weight:800;color:var(--cream);overflow-wrap:anywhere}
body.has-tabs .k-dare small{display:block;font-size:13px;line-height:1.35;font-weight:600;color:var(--soft);margin-top:2px;overflow-wrap:anywhere}
body.has-tabs .k-dare small.lock{color:var(--lemon)}
body.has-tabs .k-dare .k-act{margin-left:auto}
/* The two actions under a running follow-up ("she did it ✓" / "let it go"), and nothing else on any screen.
   Gate j2.3 panel 6 draws them as `.k-act.hand` on a sheet whose `.k-act` is a 44px inline-flex box, j2.4
   spells the same box out on `.k-dare .k-act`, and board Z's base `.k-act` carries it too: the face is the
   20px handwriting, the tap target is 44px. The shared `.k-act` stays as it is, because j3.5 draws settings
   rows at text height and j2.1 the same, so only the row that follows a `.k-dare` takes the box. */
body.has-tabs .k-dare + .k-acts .k-act{min-height:44px;display:inline-flex;align-items:center}
/* an action that is there but not the thing to do next */
body.has-tabs .k-act.mute{color:var(--soft)}

/* The category chips over a list, and the dark set for the one lemon card. */
body.has-tabs .k-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
body.has-tabs .k-cats span,body.has-tabs .k-cats button{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;
  border:1.5px solid rgba(255,244,236,.3);border-radius:999px;background:0;font-family:var(--body);font-size:14px;font-weight:800;
  color:var(--cream);cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .k-cats .on{border-color:var(--pink);color:var(--pink)}
body.has-tabs .k-cats.dk span,body.has-tabs .k-cats.dk button{border-color:rgba(26,10,18,.35);color:var(--ink)}
body.has-tabs .k-cats.dk .on{background:var(--ink);border-color:var(--ink);color:var(--lemon)}
/* On the lemon card the guard `.k-card.lemon :is(.k-x,.k-cats button,.k-opts li)` (0,4,2) out-ranks the
   rule above (0,4,1) and painted the picked label ink on ink. W5: lemon on ink. */
body.has-tabs .k-card.lemon .k-cats.dk .on{color:var(--lemon)}
/* W5's day bubbles on the lemon card: the number alone in each, the picked one ink with lemon text. */
body.has-tabs .k-days{display:inline-flex;gap:6px}
body.has-tabs .k-days span,body.has-tabs .k-days button{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;
  border:1.5px solid rgba(26,10,18,.4);border-radius:999px;background:0;font:800 14px/1 var(--body);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .k-days .on{background:var(--ink);color:var(--lemon);border-color:var(--ink)}
/* W5's "shuffle 🎲" is a bare .k-act: plain body text in ink, not the hand face every other .k-act takes. */
body.has-tabs .k-card.lemon .k-act[data-fu-shuffle]{font:inherit;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}

/* the actions row pushed to the right edge of its card */
body.has-tabs .k-acts.right{justify-content:flex-end}

/* the small pill with an icon in front of its label (share, copy, send) */
body.has-tabs .k-btn.sm.ico{display:inline-flex;align-items:center;gap:8px;line-height:1}
body.has-tabs .k-btn.sm.ico svg{width:17px;height:17px;display:block;flex:none}

/* One line of the invented "Sunday Shoes" song: sung already, up next, still to come. */
body.has-tabs .k-lyric{font-size:16px;line-height:1.45;font-weight:700;color:var(--cream);padding:10px 0;
  border-top:1px solid rgba(255,244,236,.14);overflow-wrap:anywhere}
body.has-tabs .k-lyric.done{color:var(--mint)}
body.has-tabs .k-lyric.next{color:var(--soft);font-weight:600}
/* A song line and the ad-lib under it are ONE pair, so the inner line must not draw the divider again: the rule
   above puts a rule and 10px of air above every `.k-lyric`, which through the middle of a pair split it in two
   and left the same gap inside a pair as between pairs. The border now only ever falls between pairs. */
body.has-tabs .k-lyric .k-lyric{border-top:0;padding:4px 0 0}

/* The paste box: four lines to start, then it grows with whatever is pasted into it. Scoped to this one field
   by id, because `.k-input.tall` is shared with the deposit, the community post and the daily answer, and
   none of those asked to change.
   120px is four lines exactly at this font — 4 x (16px x 1.35) + 30px padding + 3px border, under the global
   border-box. `overflow-y:hidden` keeps a scrollbar from appearing while lyric.js is growing the box to fit,
   and `resize:none` because the box already sizes itself; a drag handle would fight the script. */
body.has-tabs textarea.k-input#lyricPaste{min-height:120px;overflow-y:hidden;resize:none}

/* the row of boxes a sign-in code is typed into */
body.has-tabs .k-code{display:flex;gap:8px;margin-top:12px}
body.has-tabs .k-code span{flex:1;min-width:0;height:56px;display:grid;place-items:center;border:1.5px solid rgba(255,244,236,.45);
  border-radius:14px;background:var(--plum2);font-size:24px;font-weight:800;color:var(--cream)}
body.has-tabs .k-code span.on{border-color:var(--pink)}

/* the pair's own address, with its copy action beside it */
body.has-tabs .k-addr{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;margin:-2px 0 8px;font-size:13px;font-weight:700;color:var(--soft);white-space:nowrap}
body.has-tabs .k-addr > :first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.has-tabs .k-addr .k-act{min-height:0;flex:none;font-family:var(--hand);font-size:18px;color:var(--pink)}

/* a field showing a real value rather than its placeholder */
body.has-tabs .k-input.lit{color:var(--cream)}

/* the quiet eyebrow number: a step you are not on */
body.has-tabs .k-num.soft{color:var(--soft)}

/* the reactions row at the smaller size a row of them needs */
body.has-tabs .k-react.sm span,body.has-tabs .k-react.sm button{width:36px;height:36px;font-size:18px}

/* The switch. This one is in both sheets: the admin desk sets the same settings. */
body.has-tabs .k-sw{display:inline-block;position:relative;width:44px;height:26px;flex:none;border-radius:999px;background:rgba(255,244,236,.22);
  border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
body.has-tabs .k-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--cream)}
body.has-tabs .k-sw.on{background:var(--pink)}
body.has-tabs .k-sw.on i{left:21px}
body.has-tabs .k-sw:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* A switch somebody may read and may not move (the admin games desk shows staff every switch, disabled).
   It keeps its shape and its state; only the invitation to press it goes. Both sheets carry it, for the
   same reason the switch itself is in both. */
body.has-tabs .k-sw[disabled]{opacity:.55;cursor:default}

/* The cross that closes a full-screen page, where the gear sits on a tabbed one:
   same circle, same corner, so it follows the 480px column in on a desktop. */
.m-close{
  position:fixed;z-index:41;
  top:calc(22px + env(safe-area-inset-top));
  right:max(calc(16px + env(safe-area-inset-right)), calc(50% - 240px + 16px));
  width:42px;height:42px;padding:0;display:grid;place-items:center;
  color:var(--cream);background:var(--plum);border:1.5px solid rgba(255,244,236,.4);border-radius:50%;
  cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
}
.m-close svg{width:22px;height:22px;display:block}
.m-close:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* the pair pill on a screen with no gear beside it: it takes the gear's corner */
.m-pair.solo{right:max(calc(16px + env(safe-area-inset-right)), calc(50% - 240px + 16px))}

/* ---------- the one dismissible note, used by every screen from here on ----------
   `.k-card.quiet.m-dep.top`: a flat card at the top of a screen with a bold title,
   a hand-written line under it and a close button. The close target is 40px square,
   so it can actually be hit with a thumb; the board's own 24px one could not. */
body.has-tabs .k-card.quiet.m-dep.top{margin-top:18px;padding:16px 60px 16px 18px}
body.has-tabs .k-card.quiet.m-dep.top .m-dep-t{font-size:16px;font-weight:800;line-height:1.3;color:var(--cream)}
body.has-tabs .k-card.quiet.m-dep.top .m-dep-h{font-family:var(--hand);font-size:20px;line-height:1.15;color:var(--blush);margin-top:5px;rotate:-.5deg}
body.has-tabs .m-dep.top .m-x{top:8px;right:8px;width:40px;height:40px;line-height:40px;font-size:30px;font-weight:600;color:var(--cream)}
body.has-tabs .m-dep.top .m-dep-go{top:auto;bottom:15px;right:18px;translate:none}

/* ============================================================================
   J2.3, 12 Sept 2026: one small pink pill, used by the seal, the envelope, the
   share and the way back; and the × that closes a card made a real target.
   ========================================================================== */

/* A pill you tap with a thumb is 44px tall. `.k-btn.sm` above keeps its own type
   and padding, so no small button changes size or wording; this only floors the
   height and centres the label in it, which is what makes an icon pill and a
   plain pill sit at the same height beside each other. */
body.has-tabs .k-btn.sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* one control that ends a screen, centred in its row: the reveal's back pill */
body.has-tabs .k-acts.center{justify-content:center}

/* Chris, 09-11 10:50: "add space under share these answers above dare/challenge/bet".
   The follow-up card carries `mt18`, and adjacent margins collapse to the larger. */
body.has-tabs .rv-sharewrap{margin-bottom:34px}

/* The quiet label over a reaction row, saying whose reaction it is. It is the
   twin of `.rv-got`, which already names her under my answer. */
body.has-tabs .rv-lab{font:800 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin:14px 0 0}

/* `--soft` is 62%-opacity cream: on a lemon or mint card the × all but vanishes. */
body.has-tabs .k-card.lemon .m-x,body.has-tabs .k-card.mint .m-x{color:var(--ink)}

/* The × is 40px now, so the short card it sits on leaves room for it and moves its
   → out from under it — the tall note card (`.m-dep.top`) already did both. */
body.has-tabs .m-dep:not(.top){padding-right:56px}
body.has-tabs .m-dep:not(.top) .m-dep-go{top:auto;bottom:14px;translate:none}

/* Play used to carry its own 24px here, because the screen reserved exactly the bar and nothing more and its
   last row sat against it. `.m-screen` now ends with that same 24px on every tab, so the one-screen rule is
   gone and Play keeps the spacing the shared container gives it. */

/* Board push-0927 #3, the Learn score: the big "N / 13", one dot per lesson (done ink, the next one pink),
   and the small underlined way back. #7, Events: the city chip. */
.t-big{font-family:var(--display);font-size:54px;line-height:1;margin-top:10px;color:var(--ink)}
.t-big small{font-size:26px}
.t-dots{display:grid;grid-template-columns:repeat(13,1fr);gap:4px;margin-top:14px}
.t-dots span{aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);background:transparent}
.t-dots span.done{background:var(--ink)}
.t-dots span.next{background:var(--pink);border-color:var(--pink)}
.t-link{display:block;text-align:center;font-size:14px;font-weight:800;color:var(--soft);margin-top:16px;text-decoration:underline;text-underline-offset:3px}
.t-city{display:inline-block;margin-top:14px;font-size:14px;font-weight:800;padding:.4em .9em;border-radius:999px;border:1.5px solid rgba(26,10,18,.35)}

/* Board push-0927 #1, Play: games as tiles (emoji over the name), three to a row; the course games as a
   sideways strip of squares numbered by lesson; one plain line for the price. */
body.has-tabs .p-line{font-size:14px;font-weight:800;color:var(--cream);margin-top:6px}
body.has-tabs .p-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
body.has-tabs .p-head .p-line{color:var(--soft);font-size:13px;margin:0;white-space:nowrap}
body.has-tabs .p-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
body.has-tabs .p-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:92px;padding:12px 6px;border:1.5px solid rgba(255,244,236,.35);border-radius:16px;background:var(--plum2);
  color:var(--cream);font:inherit;cursor:pointer;text-align:center}
body.has-tabs .p-tile .e{font-size:28px;line-height:1}
body.has-tabs .p-tile b{font-size:min(13px,3.3vw);font-weight:800;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.has-tabs .p-tile .p-lock{position:absolute;top:7px;right:8px;font-style:normal;font-size:12px}
body.has-tabs .p-tile.more{border-style:dashed;color:var(--lemon);font-size:15px;font-weight:800}
body.has-tabs .p-tile.mute,body.has-tabs .p-tile[disabled]{opacity:.55;cursor:default}
body.has-tabs .p-tile:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
body.has-tabs .p-strip{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 50px) / 6);gap:10px;margin-top:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
body.has-tabs .p-strip::-webkit-scrollbar{display:none}
body.has-tabs .p-strip .p-tile{min-height:0;aspect-ratio:1;padding:4px;gap:2px;scroll-snap-align:start}
body.has-tabs .p-strip .p-tile .e{font-size:24px}
body.has-tabs .p-strip .p-tile b{font-size:13px;color:var(--soft)}
body.has-tabs .t-link.p-more{text-align:left;background:0;border:0;padding:0;margin-top:10px;text-decoration:none;cursor:pointer}

/* Board push-0927 #2, Learn: the other twelve lessons in two columns, a number in a circle and the short name. */
body.has-tabs .l-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
body.has-tabs .l-tile{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border:1.5px solid rgba(255,244,236,.35);border-radius:14px;background:var(--plum2)}
body.has-tabs .l-tile .n{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,244,236,.6);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--soft)}
body.has-tabs .l-tile[data-state="done"] .n{background:var(--pink);border-color:var(--pink);color:#fff}
body.has-tabs .l-tile b{font-size:14px;font-weight:800;line-height:1.2;color:var(--cream);min-width:0;overflow-wrap:anywhere}
body.has-tabs button.t-link{background:0;border:0;padding:0;width:100%;cursor:pointer;font-family:inherit}

/* Board push-0927 #4, Deposits: the picked chip is filled pink; the field on the lemon card is a dashed box. */
body.has-tabs .k-cats.fill .on{background:var(--pink);border-color:var(--pink);color:#fff}
body.has-tabs .k-card.lemon .k-input.dash{background:transparent;border:1.5px dashed rgba(26,10,18,.35);color:var(--ink)}
body.has-tabs .k-card.lemon .k-input.dash::placeholder{color:#6b3550}
body.has-tabs .m-fine.center{text-align:center}

/* Board push-0927 #5, Your story: the day's number over its weekday, the words, one status emoji. */
body.has-tabs .m-feed .h-row,body.has-tabs .m-feed a.h-row{display:flex;align-items:center;gap:14px}
body.has-tabs .h-day{flex:none;width:44px;text-align:center}
body.has-tabs .h-day b{display:block;font-family:var(--display);font-size:26px;line-height:1;color:var(--pink);text-shadow:2px 2px 0 var(--lemon)}
body.has-tabs .h-day small{display:block;margin-top:4px;font-size:13px;font-weight:700;color:var(--soft)}
body.has-tabs .h-q{flex:1;min-width:0;font-size:16px;font-weight:800;line-height:1.3;color:var(--cream);overflow-wrap:anywhere;white-space:pre-line}
body.has-tabs .h-q small{display:block;margin-top:4px}
body.has-tabs .h-s{flex:none;font-size:22px;line-height:1}

/* Board push-0927 #6, Community: the poll's topics as bars (filled only once it closes), the rank beside
   "friends", and the founders as two faces and one line. */
body.has-tabs .c-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  min-height:50px;margin-top:10px;padding:0 14px;overflow:hidden;border:1.5px solid rgba(255,244,236,.35);border-radius:14px;
  background:0;color:var(--cream);font:inherit;text-align:left;cursor:pointer}
body.has-tabs .c-opt b{position:relative;font-size:15px;font-weight:800}
body.has-tabs .c-opt .k-val{position:relative;font-size:15px;color:var(--cream)}
body.has-tabs .c-opt .c-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(255,46,136,.3)}
body.has-tabs .c-opt.on{border-color:var(--pink);background:rgba(255,46,136,.14)}
body.has-tabs .c-opt[disabled]{cursor:default;opacity:1;color:var(--cream)}
body.has-tabs .c-rank{background:0;border:0;padding:0;min-height:44px;font:inherit;font-size:13px;font-weight:800;color:var(--lemon);white-space:nowrap;cursor:pointer}
body.has-tabs [data-friends-section] .t-link{text-align:left;margin-top:8px}
body.has-tabs .c-founders{display:flex;align-items:center;gap:14px}
body.has-tabs .c-faces{display:flex}
body.has-tabs .c-faces i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lav);font-style:normal;font-size:22px}
body.has-tabs .c-faces i + i{background:var(--mint);margin-left:-10px}
body.has-tabs .c-founders b{font-size:15px;font-weight:800;color:var(--cream)}

/* Board push-0927 #8, Settings: an emoji before every value, one small plain word on the right, and the
   danger links small in a row at the end. */
body.has-tabs .s-l{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
body.has-tabs .s-l i{flex:none;width:22px;font-style:normal;font-size:18px;text-align:center}
body.has-tabs .s-l b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
body.has-tabs .s-act{flex:none;background:0;border:0;padding:0;min-height:44px;font:inherit;font-size:14px;font-weight:800;color:var(--soft);cursor:pointer}
body.has-tabs .s-act.lead{color:var(--soft);font-size:14px}
body.has-tabs [data-pairs] .k-row{min-height:56px}
body.has-tabs .s-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px}
body.has-tabs .s-links a,body.has-tabs .s-links button{display:inline-flex;align-items:center;background:0;border:0;padding:0;min-height:44px;font:inherit;font-size:14px;font-weight:800;
  color:var(--pink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* The lesson's short name fits the lemon card on one line at 390px. */
body.has-tabs .k-card.lemon[data-lesson] .k-title{font-size:17px}
body.has-tabs .nw{white-space:nowrap}
/* No word alone on the last line of a game tile, a lesson tile, a story row or a Vibe Check question. Balance
   evens the lines out; where it still would leave one word, play.js and course-tab.js hold a tile's last two
   words together. A game tile takes three lines rather than cut a long name ("We Listen and We Don't Judge"). */
body.has-tabs :is(.p-tile b,.l-tile b,.h-q,.vc-q){text-wrap:balance}