/* Self-hosted Caveat + Kalam (latin + latin-ext woff2). Generated from Google
   Fonts then localized so the shipped frontend stays SAME-ORIGIN (no CDN). */
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url('assets/fonts/caveat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:url('assets/fonts/caveat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url('assets/fonts/caveat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url('assets/fonts/caveat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:url('assets/fonts/kalam-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:url('assets/fonts/kalam-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url('assets/fonts/kalam-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url('assets/fonts/kalam-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url('assets/fonts/kalam-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url('assets/fonts/kalam-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   PlanOS — "Ink & Paper" theme (Ken 2026-06-18, redesign focus)
   Adopted from the ink work order, but built ON the real codebase: it RE-MAPS
   the existing design tokens + restyles the existing class names, so every JS
   binding (gunshot Done, the SVG connector, the layout editor, the FERRO
   creature) and every guard test keeps working — no DOM renames. Gated on
   `body.ink`. Handwriting for TITLES only; body/UI keeps a legible stack so it
   honors the binding "Readability FIRST" rule. Fonts self-host before ship.
   ========================================================================= */

/* ---- the four inks + paper, mapped onto the app's existing tokens ---- */
body.ink{
  --bg:#2a1c11;                 /* walnut desk (behind everything) */
  --surface:#f6f0e1;            /* cream paper sheet */
  --surface2:#efe7d3;
  --line:#cfc4aa;               /* faint ruled line / frame */
  --line2:#b6aa8c;
  --txt:#2c2a23;                /* ink black — 12.6:1 on paper */
  --muted:#5d564a;              /* ink soft */
  --faint:#766a54;              /* DARKENED pencil (was too low-contrast) */
  --accent:#244a85;             /* fountain-pen blue = live/actionable */
  --accent2:#3a5d9c;
  --accent-ink:#f6f0e1;
  --accent-soft:rgba(36,74,133,.10);
  --cyan-soft:rgba(36,74,133,.07);
  --done:#4f6e3b;               /* ink green = done */
  --prog:#244a85; --review:#3a5d9c; --todo:#766a54; --backlog:#9a917e; --cancel:#9a917e;
  --block:#b53b2d; --warn:#b53b2d; --warn-soft:rgba(181,59,45,.12);   /* red = strike/error */
  --sh:0 1px 0 rgba(0,0,0,.10),0 10px 26px rgba(60,40,15,.18);
  --sh-lg:0 22px 50px rgba(0,0,0,.40);
  --r:14px; --r-sm:12px; --r-xs:9px;
  /* CALM default (Ken 2026-06-18 subtraction pass + Readability-FIRST): body/UI = legible rounded
     sans; Caveat (--ink-display) still owns TITLES. Cozy mode swaps body back to Kalam (see §15). */
  --ff:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --ink-display:"Caveat",ui-rounded,-apple-system,cursive;
  color:var(--txt);
}

/* the walnut desk lives on <html> so it paints BEHIND everything, including the ambient
   ferro (#ferroBg, now z-index:6 — in front of widgets, Ken 2026-06-20). Keep the desk on
   <html>, never an opaque bg on <body>. */
html:has(body.ink){
  background:#2a1c11;
  background-image:
    /* BLACK HEADER → WALNUT, ONE seamless background (Ken 2026-07-09 "should all be black and transition
       into the normal background below that … past 'make hard things…' … very smooth, as if one bg"):
       solid near-black from y=0 (behind the topbar too) down past the slogan, then a long soft fade into
       the walnut. Top layer so it darkens the grain beneath it. */
    linear-gradient(180deg, #08090b 0, #08090b 21rem, rgba(9,10,12,.5) 28rem, rgba(11,12,14,0) 39rem),
    repeating-linear-gradient(91deg, rgba(0,0,0,.20) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(89deg, rgba(255,214,158,.045) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 46px),
    linear-gradient(95deg,#3c2918 0%,#281a10 38%,#34230f 64%,#241710 100%);
}

/* ---- the DESK stays bare walnut: no fill, no dots on the screen itself ---- */
body.ink .screen, body.ink .board, body.ink .focusboard{
  background:transparent; box-shadow:none;
}
/* ---- the PAPER sheets = the content cards (cream FILL + RULED notebook lines) ---- */
/* .985 alpha so the ambient ferro behind ghosts through like a shadow under the
   page rather than vanishing. */
/* NOTE: .lgoal (launcher composer) is deliberately EXCLUDED — the launcher is the one
   SACRED dark screen (see the LAUNCHER block at the bottom). */
body.ink .qh-playlist, body.ink .qh-hero, body.ink .col,
body.ink .card, body.ink .sitg-card, body.ink .focuscard,
body.ink .spot, body.ink .focushead, body.ink .authcard{
  background-color:#f6f0e1!important;   /* OPAQUE cream (Ken 2026-06-21 "background making text too hard to read") — was rgba(...,.985); the slight transparency let the z:-1 creature/rain show through onto the text */
  /* RULED NOTEBOOK PAPER (Ken 2026-06-18 "I want the background to be this sort of paper"): faint warm
     horizontal rules, like a real lined page — replaces the dot-grid. The salmon vertical MARGIN line
     was REMOVED (Ken 2026-06-19 "Get rid of vertical line on background paper keep horizon though") —
     only the horizontal "horizon" rules remain. */
  background-image:
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(140,118,82,.20) 33px 34px);
  background-position:0 20px;
  background-repeat:repeat;
  border:none!important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 16px 40px rgba(40,26,16,.42);
  border-radius:18px;
}
/* HERO = PLAIN CREAM (Ken 2026-06-30 "remove the grid background from this"): the dot grid behind the
   working hero is gone — clean cream paper, easier to read. The playlist keeps its ruled rows. */
body.ink .tkt-grid:not(.solo) .qh-hero{ background-image:none!important; }
/* card titles sit ON cream paper → dark ink. (The bare-desk wizard prompts get
   light pencil explicitly in the WIZARD block below — different selectors.) */
/* the step-3 board's GOAL TITLE sits on the bare walnut desk (above the two cards), so it
   needs light pencil — dark ink was invisible on the desk (Ken 2026-06-18 "cant see [it]"). */
body.ink .qh-htitle, body.ink .tkt-ptitle{ color:#f3ead4; text-shadow:0 2px 12px rgba(0,0,0,.45); margin-bottom:0.875rem; }
/* PLAN TITLE IN RED (Ken 2026-07-11 "I want this title red like other parts of our app"): the board's
   project title uses the app's ink red (--bad — the strike/cross-off red), not the pencil cream. */
body.ink .tkt-ptitle{ color:var(--bad,#b53b2d); }
/* NORTH STAR summary sits on the DARK desk (not on paper), so the ink --muted brown read as dull and hard
   to see — it's BRIGHT WHITE (Ken 2026-07-10 "make the summary bright white not dull white its hard to see"). */
body.ink .north-star{ color:#ffffff; text-shadow:0 1px 8px rgba(0,0,0,.5); }
body.ink .north-star .ns-edit{ color:#ffffff; }
/* "⤓ API scripts — build a plan from code" sits on the BARE DESK (dark walnut), but it was using the ink
   --muted brown (a text-ON-CREAM colour) at .6 opacity ⇒ effectively invisible, worst on the iPhone where
   it lands right above the black footer (Ken 2026-07-10 "on iphone i cant see this text for downloading
   api scripts"). Light-on-desk, full opacity — same fix class as the North Star. Readability FIRST. */
body.ink .lscripts-btn{ color:#e0d6c2; opacity:1; text-shadow:0 1px 6px rgba(0,0,0,.55); }
body.ink .lscripts-btn:hover{ color:#ffffff; }

/* ---- handwriting for TITLES only (legible body stays sans) ---- */
body.ink{font-family:var(--ff)}
body.ink .qh-htitle, body.ink .tkt-ptitle, body.ink .cs-title, body.ink .td-bigt,
body.ink .ink-title, body.ink h1, body.ink h2, body.ink .brand .word{
  font-family:var(--ink-display); font-weight:700; letter-spacing:0.025rem;
}
body.ink .qh-htitle, body.ink .tkt-ptitle{font-size:2.2em}

/* ---- the hand-drawn wobble frame (SVG filter on a ::before border layer, text stays crisp) ---- */
body.ink .tkt-cur, body.ink .qh-row, body.ink .uprow,
body.ink .card, body.ink .sitg-card{
  position:relative; background:transparent; border-color:transparent;
}
body.ink .tkt-cur::before, body.ink .qh-row::before, body.ink .uprow::before,
body.ink .card::before, body.ink .sitg-card::before{
  content:""; position:absolute; inset:-0.125rem; border:2px solid var(--txt);
  border-radius:16px; filter:url(#inkRough1); pointer-events:none; z-index:0;
}
body.ink .qh-row::before, body.ink .uprow::before{border-color:var(--line);border-width:1.6px;filter:url(#inkRough2)}
/* HERO: no black sketch frame (Ken 2026-07-01 "want this black border gone") — the hero reads as a
   clean cream card; playlist rows keep their light pencil frames. Wobble machinery stays for them. */
body.ink .tkt-cur::before{ display:none; }
body.ink .tkt-cur>*, body.ink .qh-row>*, body.ink .uprow>*{position:relative;z-index:1}
/* the active step + active lane frame in the lane's pencil hue (falls back to ink-blue) */
body.ink .cur-sel::before, body.ink .qh-row.sel::before{border-color:var(--lane-hue,var(--accent))!important}

/* ---- buttons: ink text, not solid fills (airy paper feel) ---- */
body.ink button, body.ink .breakdown, body.ink .cs-done{
  background:transparent!important; color:var(--txt); font-weight:700;
  border:none; box-shadow:none;
}
body.ink .breakdown, body.ink .cs-done{color:var(--accent)}
body.ink .cs-done:not(.is-undo){color:var(--done)}            /* ✓ Done in green */
/* FEEDBACK TAB — a DELIBERATE red CTA, not an airy ink button. The `body.ink button` rule above
   (background:transparent!important + color:var(--txt)) wiped its red fill AND white text, so the
   left-gutter feedback tab went INVISIBLE on the walnut desk (looked removed). Restore it — red fill
   + white text, ID + !important to beat the broad button reset (Ken 2026-06-22 "red feedback button
   ... re-add it. the code is probably there" — it was; just theme-clobbered). */
body.ink #fbBtn{ background:var(--block)!important; color:#fff!important; box-shadow:2px 4px 18px rgba(0,0,0,.35); }
/* "+" new-from-template button (Ken 2026-06-22) — same broad-button-reset trap as #fbBtn: re-assert a
   solid accent fill so the "add" affordance is visible next to "My plans" on the dark desk. */
body.ink #tplAdd{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }
/* MULTIPLE-CHOICE option BUTTONS (Ken 2026-07-05) — SAME broad-button-reset trap: the airy reset above
   wiped their solid fill so the intake options rendered as near-invisible dark text on the walnut desk.
   Re-assert the filled accent pill (+ cream text + lift shadow) with !important so they read as obvious,
   tappable buttons that draw the eye. */
body.ink .cc-opt, body.ink .iq-opt{ background:var(--accent)!important; color:var(--accent-ink)!important;
  border:none!important; box-shadow:0 0.3125rem 0.75rem color-mix(in srgb,var(--accent) 42%,transparent), inset 0 1px 0 rgba(255,255,255,.18)!important; }
body.ink .cc-opt:hover, body.ink .iq-opt:hover{ filter:brightness(1.1)!important; }
/* ACTIVE-PLAN peek tab (Ken 2026-07-07) — same broad-button-reset trap: keep its accent pill */
body.ink .plan-peek{ background:var(--accent)!important; color:var(--accent-ink)!important; border:none!important; }
/* "Other thoughts" chip = a DASHED ghost, NOT an accent pill (Ken 2026-07-07): higher specificity than the
   .iq-opt accent rule above so it stays transparent/dashed in the ink theme. */
body.ink .iq-own, body.ink .cc-own{ background:transparent!important; color:var(--muted)!important; border:1.5px dashed var(--line)!important; box-shadow:none!important; }
body.ink .iq-own:hover, body.ink .cc-own:hover{ border-color:var(--accent)!important; color:var(--txt)!important; }
/* ...but the intake's "Other" sits on the BARE DESK, where that cream --muted is a 2.3:1 ghost (caught by
   the contrast gate, and visible in Ken's own screenshot 2026-07-10). Light pencil on the desk. */
body.ink #wizBody .iq-own{ color:#d9ccae!important; border-color:#6b5a44!important; }
body.ink #wizBody .iq-own:hover{ color:#fff!important; border-color:var(--accent)!important; }
/* DANGER buttons (WO-A2 delete account) — same broad-button-reset trap: keep the red edge + red text
   so "Delete account"/"Delete forever" never dissolve into airy ink buttons. */
body.ink .danger-btn{ background:transparent!important; color:var(--block)!important; border:1px solid var(--block)!important; }
body.ink .danger-btn:hover{ background:var(--block)!important; color:#fff!important; }
/* HERO TICKET WORKBENCH — Concept A (work order 2026-06-30). These are DELIBERATE filled/bordered CTAs
   that must beat the airy `body.ink button{background:transparent!important;border:none}` reset above
   (same trap as #fbBtn/#tplAdd). */
/* Match the target mock (Ken 2026-06-30 "look exactly like this"): BOTH actions are bordered cream
   buttons with dark ink text — beats the airy reset + line-214 accent/line-215 green text rules. */
body.ink .cs-actions>.cs-done:not(.is-undo){ background:var(--done)!important; color:#f6f0e1!important; border:1px solid transparent!important; }  /* Mark done = filled ink-green primary */
/* "Make it easier" = a FILLED LOGO-BLUE primary (Ken 2026-07-10 "Make the 'Make it easier' button blue
   like our logo") — --accent IS the wordmark's fountain-pen blue. It now carries the same weight as the
   green Mark done beside it (was a bordered cream ghost). */
body.ink .cs-actions>.hero-break{ background:var(--accent)!important; color:#f6f0e1!important; border:1px solid transparent!important; }
body.ink .cs-actions>.hero-break:hover{ background:color-mix(in srgb,var(--accent) 88%,#000)!important; }
body.ink .gd-break{ background:var(--accent)!important; color:#f6f0e1!important; border:1px solid transparent!important; }   /* the goal-hero's copy of the button, same blue */
body.ink .cs-actions>.ai-verb{ background:transparent!important; color:var(--accent)!important; border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line))!important; }   /* AI verb = accent ghost IN the row (Ken 2026-07-01 "moved here") */
body.ink .ha-enter{ background:var(--txt)!important; color:var(--surface)!important; }                       /* Enter = espresso ink on cream (empty) */
body.ink .ha-enter.ready{ background:var(--done)!important; color:#fff!important; }                          /* …green once the box has content */
body.ink .foot-chip, body.ink .foot-ver, body.ink .foot-status .stsel{ border:none!important; }             /* footer = plain icon+text, no chip borders */
body.ink .ha-toggle{ border:1px dashed var(--line)!important; color:var(--muted); }                          /* collapsed assist row = DASHED hairline (button reset strips it) */
body.ink .ha-toggle:hover, body.ink .hero-assist.open .ha-toggle{ border-color:var(--accent)!important; color:var(--txt); }
body.ink .hctx-crumb{ font-family:var(--ink-display); font-size:1.0625rem; font-weight:700; color:var(--ink-amber); }  /* handwritten ochre breadcrumb */
body.ink .ha-label{ color:var(--txt); }   /* dark section label (sentence case), not ochre */
/* GOAL DETAIL button: a DELIBERATE exception to the airy-ink-button rule — the work order (Ken
   2026-06-19) requires a SOLID primary button here (a floating link froze the test user). */
body.ink .gd-break{ background:#1e4d8c!important; color:#fff!important; font-weight:600; border-radius:12px; }
body.ink .gd-break:hover{ background:#1a447d!important; }

/* ---- inputs / textareas: ink on faint paper frames ---- */
body.ink input, body.ink textarea, body.ink select{
  background:transparent; color:var(--txt); font-family:var(--ff);
}
body.ink ::placeholder{color:var(--faint)}

/* ---- the red strike already matches the ink idiom — keep it, just ensure ink-red ---- */
body.ink .uptitle.struck, body.ink .cs-title.struck{text-decoration-color:var(--block)}

/* ---- focus floor (handwriting fonts make this matter more) ---- */
body.ink :focus-visible{outline:2.5px dashed var(--accent);outline-offset:3px}

/* ── AUTH / SIGN-IN — cohesive ink redesign + visibility fixes (Ken 2026-07-09 "redesign with our look,
   fix visibility, next level"). Root causes fixed: the airy button reset (l.205) had wiped the Sign-in
   fill + the Apple black; inputs were transparent + caught the global dashed focus ring (the ugly email
   border); ruled paper lines ran through the form. ── */
body.ink .authcard{ background-image:none!important; padding:1.7rem 1.5rem 1.4rem; }   /* clean cream — no rules through the form */
body.ink .authcard .auth-sub{ font-family:var(--ink-display); font-size:1.55rem; color:var(--txt); font-weight:700; margin:0.5rem 0 1.35rem; }
body.ink .authcard .fld label, body.ink .authcard .lbl{ color:var(--muted); font-size:0.72rem; letter-spacing:.09em; }
/* inputs = a real paper-inset box, email + password IDENTICAL */
body.ink .authcard input{ background:#fffef9!important; border:1.5px solid var(--line2)!important; border-radius:0.7rem!important;
  color:var(--txt)!important; padding:0.85rem 0.95rem!important; font-size:1.05rem!important; box-shadow:inset 0 1px 2px rgba(0,0,0,.05)!important; }
body.ink .authcard input::placeholder{ color:var(--muted)!important; opacity:1; }
body.ink .authcard input:focus, body.ink .authcard input:focus-visible{ outline:none!important; border-color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)!important; }   /* clean ring, not the dashed floor */
body.ink .authcard input:-webkit-autofill{ -webkit-text-fill-color:var(--txt)!important; -webkit-box-shadow:0 0 0 40rem #fffef9 inset!important; caret-color:var(--txt); }   /* kill the lavender autofill wash */
/* Sign in / Continue = the ONE primary — a solid ink-blue button (beats the airy reset) */
body.ink .authcard #authGo, body.ink .authcard #oauthContinue{ background:var(--accent)!important; color:#fff!important; border:none!important; font-weight:800!important;
  font-size:1.1rem!important; padding:0.95rem!important; border-radius:0.8rem!important;
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 55%,#000), 0 8px 20px rgba(36,74,133,.32)!important; }
body.ink .authcard #authGo:hover, body.ink .authcard #oauthContinue:hover{ filter:brightness(1.06); }
body.ink .authcard #authGo:active, body.ink .authcard #oauthContinue:active{ transform:translateY(2px); box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 55%,#000)!important; }
/* OAuth: Apple = solid black (was an invisible white glyph), Google = a bordered cream chip */
body.ink .authcard .oauth-btn{ border-radius:0.8rem!important; }
body.ink .authcard .oauth-btn.prov-apple{ background:#181818!important; color:#fff!important; border:1.5px solid #181818!important; }
body.ink .authcard .oauth-btn:not(.prov-apple){ background:#fffef9!important; border:1.5px solid var(--line2)!important; }
body.ink .authcard .oauth-btn.disabled{ opacity:.55; }
body.ink .authcard .auth-or{ color:var(--muted); }
body.ink .authcard .auth-or::before, body.ink .authcard .auth-or::after{ background:var(--line2)!important; }
body.ink .authcard .auth-toggle{ color:var(--muted); }
body.ink .authcard .auth-toggle a, body.ink .authcard #authSwap{ color:var(--accent)!important; font-weight:800; }
body.ink .authcard .auth-legal, body.ink .authcard .auth-legal a{ color:var(--muted)!important; }
body.ink .authcard .mocknote{ color:var(--faint); }

/* =========================================================================
   THEME-BREAK FIXES (from the ink-theme-audit sweep, 2026-06-18). Each block
   repairs a place that assumed the old DARK theme. Pure body.ink cascade —
   no class renames, no JS changes.
   ========================================================================= */

/* ── 1. ORPHAN FALLBACK TOKENS (highest leverage). --text/--good/--ok/--cyan/--bad
   are referenced ~20× across styles.css with hardcoded NEON dark-theme fallbacks
   (#42C978 green, #EF5350 red, …) but were NEVER defined, so every call site fell
   through to a neon literal. Alias them to the ink palette → fixes done-chips,
   undo buttons, clarify inputs, presence dots, badges in one shot. ── */
body.ink{
  --text:var(--txt); --good:var(--done); --ok:var(--done);
  --cyan:var(--accent); --bad:var(--block);
  --le-bd:#1a1a1a;          /* layout-editor per-box border — BLACK (Ken 2026-06-21 "I want borders to be black not blue"; was #244a85 blue) */
  --ferro-dim:.9;           /* Ken 2026-06-19 "make him contrast more... see him better" — raised from .5; the inverted bright body + 2x size already pop, this brings him to near-full visibility */
}

/* ── 2. TOASTS — base .toast was txt-on-bg = ink-on-walnut (unreadable). Invert. ── */
body.ink .toast{background:var(--txt);color:var(--surface)}
body.ink .toast.ok{color:var(--surface)}

/* ── 3. GUNSHOT animation — the brief red strike pseudo-elements (the dopamine hit on Done) carried
   dark-tuned glows; pin them to ink-red, no glow, so the cross reads on cream. The settled .is-done
   state is now GREY-OUT not cross-out (Ken 2026-06-20) — no ::after strike to re-tint there. ── */
body.ink .cur-sel.shot .uptitle::after, body.ink .tkt-cur.shot .cs-title::after, body.ink .uprow.shot .uptitle::after,
body.ink .tkt-cur.shot .jt-row:not(.col)::after, body.ink .tkt-cur.shot #dBreak::after, body.ink .tkt-cur.shot .cs-clar::after{
  background:var(--block); box-shadow:none;
}
body.ink .shot::before{ background:radial-gradient(circle at 78% 50%,rgba(181,59,45,.5),rgba(181,59,45,.2) 40%,transparent 64%); }
body.ink .cs-done.is-undo{ color:var(--accent); border-color:var(--accent); }

/* ── 4. FRESH-INJECTED steps — neon glow → ink-blue highlight. ── */
body.ink .tkt-row.fresh{ background:var(--accent-soft)!important; box-shadow:inset 0 0 0 1.5px var(--accent)!important; border-radius:10px; }
body.ink .tkt-row.fresh .uptitle{ color:var(--accent)!important; font-weight:700; }

/* ── 5. STATUS chips ── */
body.ink .stsel.st-done{color:var(--done)}
body.ink .stsel.st-blocked, body.ink .tkt-st.st-blocked{color:var(--block)}

/* ── 6. SHARE / SIT guest overlays (the viral share-a-ticket surface — high stakes,
   seen by non-users). Inner task box + reply field used --bg=walnut INSIDE the cream
   card = ink-on-walnut, unreadable. Make them light paper; warm the backdrop. ── */
body.ink #sitGuest, body.ink #shareGuest{ background:radial-gradient(120% 120% at 50% 0%, #3c2918 0%, var(--bg) 60%); }
body.ink .sitg-task{ background:var(--surface2); color:var(--txt); border-color:var(--line2); }
body.ink .shg-reply{ background:#fffef9; color:var(--txt); border-color:var(--line2); }
body.ink #shgDone, body.ink #sgCheer{ background:var(--accent)!important; color:var(--accent-ink)!important; border:none; box-shadow:0 2px 0 rgba(36,74,133,.35),0 8px 20px rgba(40,26,16,.30); }
body.ink .sitlive{ background:var(--surface2); border-color:var(--line); color:var(--muted); }
body.ink .sitlive.live{ color:var(--txt); border-color:var(--accent); }

/* ── 7. AGENT RELAY console — dark thread + near-black code block → paper. ── */
body.ink .relay-thread{ background:transparent; }
body.ink .relay-msg .bubble pre{ background:var(--surface2); color:var(--txt); border-color:var(--line); }

/* ── 8. REVIEW DRAWER / MODALS — bright-green op tints → ink-green; firm borders;
   warm the cold blue-black scrims to a walnut dim. ── */
body.ink .op .verb.create, body.ink .banner.ok{ background:rgba(79,110,59,.16)!important; color:var(--done); }
body.ink .op .verb.update, body.ink .op .verb.link{ background:var(--accent-soft)!important; color:var(--accent); }
body.ink .drawer, body.ink .modal .box, body.ink .panel{ border-color:var(--line2); }
body.ink .scrim, body.ink .modal, body.ink .imglb{ background:rgba(20,12,4,.55); }

/* ── 9. WORKSPACE draft board — cream .tk task cards vanished into the cream .col lane;
   lift them with a brighter sheet + firmer border. Collapse neon type-badges to one
   ink-blue chip (the per-type hue is decorative, not load-bearing). ── */
body.ink .tk{ background:#fffef9; border-color:var(--line2); box-shadow:0 1px 3px rgba(40,26,16,.12); }
body.ink .col .cb .tk{ border:1.5px solid var(--line2); }
body.ink .badge{ background:var(--accent)!important; color:var(--accent-ink); text-shadow:0 1px 1px rgba(0,0,0,.25); }

/* ── 10. SMALL BEACONS — trophy check + starter blinking light were dark-tuned. ── */
body.ink .troph-check{ color:var(--surface); }
body.ink .st-light{ background:var(--accent); box-shadow:0 0 12px 3px color-mix(in srgb,var(--accent) 55%,transparent); }

/* ── 11. LAYOUT EDITOR (dev overlay) — the copied-coordinates JSON box was near-black
   with dark text (unreadable); soften the dark-tuned drop shadows. ── */
body.ink .le-out{ background:var(--surface2); color:var(--txt); border-color:var(--line); }
body.ink #lePanel{ box-shadow:0 16px 40px rgba(40,26,16,.34); }
body.ink #leTools{ box-shadow:0 10px 26px rgba(40,26,16,.34); }
body.ink #leBanner{ box-shadow:0 4px 14px rgba(40,26,16,.28); }

/* ── 12. WIZARD intake / loading / blocked / retry render STRAIGHT on the walnut desk
   (no card wrapper), so their dark-ink token text was invisible. Flip the loose prompt
   text to light pencil, give the answer field a real paper inset, keep the primary
   CTA a solid ink-blue button. (.q#goalTitle on the board is hidden → unaffected.) ── */
body.ink #wizBody > .iqeyebrow, body.ink #wizBody > .iqcount, body.ink #wizBody > .sub{
  color:#cdbf9f; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
body.ink #wizBody > .q{ color:#f3ead4; text-shadow:0 2px 12px rgba(0,0,0,.45); font-family:var(--ink-display); }
body.ink #wizBody .ferro-msg{ color:#e7d9bb; }
body.ink #wizBody #iqAns{ background:#fffef9; color:var(--txt); border:1px solid var(--line2); border-radius:12px; }
body.ink #wizBody #iqAns::placeholder{ color:var(--faint); }
/* .iq-foot rides these too (Ken 2026-07-10): the intake's Back/↵ row moved up under the box, and it sits
   on the BARE DESK — a ghost Back in the cream --muted token, and a .45-opacity disabled ↵, were both
   invisible there. Light pencil Back; the ↵ keeps its logo blue even while disabled (dimmed, still read-
   able) so the way forward is always visible. Same bare-desk bug class as the North Star. */
body.ink #wizBody .wizfoot .ghost, body.ink #wizBody .iq-foot .ghost{ color:#d9ccae; }
body.ink #wizBody .wizfoot .ghost:hover, body.ink #wizBody .iq-foot .ghost:hover{ color:#fff; }
body.ink #wizBody .wizfoot button.cyan{ background:var(--accent)!important; color:#fff!important; border-radius:10px; padding:0.5625rem 1.125rem; }
/* THE PLAN-FOOTER TOOLS ARE REAL BUTTONS, not bare text (Ken 2026-07-10: "On ipad its hard to see export
   api scripts. Same with iphone it blends into background"). They CLEARED the contrast floor — the ratio
   was never the problem — but light text floating on the busy wood grain simply doesn't read as a control
   at any size. Legible-on-paper ≠ findable. Give them a cream chip with a real edge, so they're objects on
   the desk instead of ghosts in it. (Same treatment at every width — no per-device special-casing.) */
body.ink #planExport, body.ink #planScripts{
  background:var(--surface)!important; color:var(--txt)!important;
  border:1px solid var(--line2,#cdbfa2)!important; border-radius:0.6rem;
  padding:0.5rem 0.85rem; font-weight:700; box-shadow:0 1px 6px rgba(0,0,0,.35); opacity:1; }
body.ink #planExport:hover, body.ink #planScripts:hover{ border-color:var(--accent)!important; color:var(--accent)!important; }
body.ink #wizBody .iq-foot .lgoal-btn{ background:var(--accent)!important; color:#fff!important; border:none!important; border-radius:10px; padding:0.6875rem 1.125rem; font-size:1.25rem; }
body.ink #wizBody .iq-foot .lgoal-btn:disabled{ opacity:.75!important; }   /* still clearly THERE — just not armed yet */

/* ── 13. SCREEN-LEVEL loose text on the walnut desk (workspace page title / subhead /
   focus streak) — token text was dark-on-walnut. Light pencil, like the intake. The
   cards below (spot/tabs/columns/KPIs) are cream-contained and already read dark-on-cream. ── */
body.ink .main > .h1{ color:#f3ead4; text-shadow:0 2px 12px rgba(0,0,0,.45); }
body.ink .main > .sub{ color:#cdbf9f; }
body.ink .spotwrap > .streak, body.ink .spotwrap > .streak span{ color:#d9ccae; }
body.ink .spotwrap > .streak b{ color:#fff; }

/* ═════════════════════════════════════════════════════════════════════════
   LAUNCHER INKED (Ken 2026-06-18 "I want the entire thing done") — the home screen
   now JOINS the ink theme: the walnut desk shows through, the dog photo stays as a
   framed polaroid, the composer + chips + saved-project cards become cream paper, the
   headline is handwritten light pencil. LAYOUT is untouched (dog right, composer left,
   chips, card row) and the iPhone breakpoint is unchanged. Controls keep the clean
   sans (Readability-FIRST); only the headline is handwritten.
   ═════════════════════════════════════════════════════════════════════════ */
body.ink #scLaunch{
  background:transparent;                 /* let the walnut desk (html) show through */
  --ff:ui-rounded,"SF Pro Rounded","SF Pro Display",-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-family:var(--ff);                  /* controls inherit clean sans, not Kalam */
}
/* headline = handwritten light pencil on the desk; subhead + hint stay sans */
body.ink #scLaunch .launchhead h1{ color:#f3ead4; text-shadow:0 2px 14px rgba(0,0,0,.5); font-family:var(--ink-display); }
body.ink #scLaunch .launchsub{ color:#d6c9aa; font-family:var(--ff); }
body.ink #scLaunch .lhint{ color:#cdbf9f; font-family:var(--ff); }
/* LAUNCHER DOG = the photo (assets/mascot/launch_bg.jpg), framed as a polaroid on the desk.
   To swap in the hand-drawn pencil sketch later: save it to assets/mascot/launch_sketch.png and
   re-add  background-image:url("assets/mascot/launch_sketch.png");  here. (Was pointing at the
   sketch before the file existed → 404/blank panel; reverted to the photo that ships.) */
body.ink #scLaunch::before{
  border:6px solid #f6f0e1; box-shadow:0 20px 48px rgba(20,12,4,.55);
}
/* composer = cream paper card */
body.ink #scLaunch .lgoal{ background:rgba(246,240,225,.985)!important; border:none!important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 16px 40px rgba(40,26,16,.42); border-radius:16px; }
body.ink #scLaunch .lgoal-head{ background:var(--accent-soft); border-bottom:1px solid var(--line); }
body.ink #scLaunch .lgoal-title{ color:var(--txt); }
body.ink #scLaunch .lgoal-x{ background:none!important; color:var(--faint)!important; }
body.ink #scLaunch .lgoal-x:hover{ color:var(--txt)!important; }
body.ink #scLaunch .lgoal-in{ background:#fffef9!important; color:var(--txt)!important; }
body.ink #scLaunch .lgoal-in::placeholder{ color:var(--faint); }
body.ink #scLaunch .lgoal-btn{ background:var(--accent)!important; color:var(--accent-ink)!important; border-radius:10px; box-shadow:none; }
body.ink #scLaunch .lgoal-btn:hover{ background:var(--accent2)!important; }
body.ink #scLaunch .lgoal.is-empty .lgoal-btn{ background:none!important; color:var(--faint)!important; }
/* example chips = little paper chips */
body.ink #scLaunch .lchip{ background:rgba(246,240,225,.92)!important; color:var(--txt)!important; border:1.5px solid var(--line2); }
body.ink #scLaunch .lchip:hover{ color:var(--accent)!important; border-color:var(--accent); }
/* IDEA RAIN hues (Ken 2026-07-01 "not green"): the pencil palette must beat the lchip !important color */
body.ink #scLaunch .rainchip.rain-amber{ color:var(--ink-amber)!important; border-color:var(--ink-amber); }
body.ink #scLaunch .rainchip.rain-blue{ color:var(--accent)!important; border-color:var(--accent); }
body.ink #scLaunch .rainchip.rain-coral{ color:var(--ink-coral)!important; border-color:var(--ink-coral); }
body.ink #scLaunch .rainchip.rain-teal{ color:var(--ink-teal)!important; border-color:var(--ink-teal); }
body.ink #scLaunch .rainchip.rain-violet{ color:var(--ink-violet)!important; border-color:var(--ink-violet); }
body.ink #scLaunch .rainchip.rain-rose{ color:var(--ink-rose)!important; border-color:var(--ink-rose); }
/* BOOKSHELF (Ken 2026-06-19 "thats where I want projects to live. Like a book shelf") — saved plans
   are cream paper "books" on the walnut desk: a handwritten shelf label + coloured-pencil spines. */
body.ink .lshelf-head{ font-family:var(--ink-display); font-size:1.375rem; font-weight:700; letter-spacing:0;
  text-transform:none; color:var(--txt); }   /* dark ink — the shelf is a CREAM card in the 2×2 grid (styles.css .lshelf background:var(--surface)); the old pale #ecdfc2 washed out on cream (Ken 2026-07-01 "hard to see") */
body.ink .lplans-empty{ color:var(--muted); font-size:1rem; padding:0.5rem 0.25rem; }   /* readable on the cream card (desktop grid); the narrow layout re-lights it on the desk below */
/* Capture Lane on the inked launcher (Ken 2026-07-09) — cream paper, handwriting header, ink checkboxes. */
body.ink #scLaunch .caphead{ font-family:var(--ink-display); font-size:1.375rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--txt); }   /* match "My plans" (.lshelf-head) so both halves read as one widget (Ken 2026-07-10) */
body.ink #scLaunch .caprow:hover{ background:color-mix(in srgb,var(--accent) 8%,transparent); }
body.ink #scLaunch .capchk{ border-color:var(--line2); color:var(--muted); }
body.ink #scLaunch .capchk:hover{ color:var(--good,#4f6e3b); border-color:var(--good,#4f6e3b); }
body.ink #scLaunch .captitle{ color:var(--txt); font-family:var(--ink-display); font-size:1.25rem; }   /* match the plan-name handwriting (.planrow .nm) — same widget, one style (Ken 2026-07-10) */
body.ink #scLaunch .capbreak{ border-color:var(--accent); color:var(--accent); }
body.ink #scLaunch .capbreak:hover{ background:var(--accent); color:#fff; }
body.ink #scLaunch .capx, body.ink #scLaunch .capplus, body.ink #scLaunch .cap-add{ color:var(--muted); }
body.ink #scLaunch .cap-add:hover{ color:var(--accent); }
/* "My plans" + matches the Quick-tasks + — a plain, subtle glyph, not a blue pill, so both header rows read the same (Ken 2026-07-10 "make ... consistent ... style etc"). */
body.ink #scLaunch #tplAdd{ background:transparent!important; color:var(--muted)!important; border:none!important; box-shadow:none!important; font-size:1.6rem!important; font-weight:400!important; padding:0 0.15rem!important; }
body.ink #scLaunch #tplAdd:hover{ background:transparent!important; color:var(--accent)!important; }
/* ALIGN the delete × across Quick tasks + My plans (Ken 2026-07-10 "these X should be aligned, they are offset"):
   both rows get the same right padding, and both ×'s become the same right-anchored square box → the glyphs line up. */
/* Every + and × lives on the LEFT edge in the SAME 2rem box, so they align by construction — no padding
   fighting (Ken 2026-07-10 "put the x and + on the left so its easy to align them"). The .planrow carries
   its colour spine as a left BORDER, so the headers + the caprow get a matching transparent border → one
   shared left column for all four controls. Same colour (var(--muted)) too. */
body.ink #scLaunch .caplist, body.ink #scLaunch .lplans{ padding-left:0!important; padding-right:0!important; }
body.ink #scLaunch .caprow, body.ink #scLaunch .planrow{ padding-left:0!important; padding-right:0!important; display:flex!important; align-items:center; justify-content:flex-start!important; text-align:left!important; }   /* .planrow is a <button> — its default centring made the ✕ drift with the name length */
body.ink #scLaunch .caphead, body.ink #scLaunch .lshelf-head, body.ink #scLaunch .caprow{ border-left:0.1875rem solid transparent; padding-left:0.25rem!important; }   /* same inset as .planrow (spine + 0.25rem) → the ＋ sits in the ✕ column */
/* NESTED INDENT (Ken 2026-07-10 "nested indentation ... think python tab indentation"): the ITEM rows sit
   one tab in from their header, so a child never reads as a sibling of "Quick tasks" / "My plans". */
body.ink #scLaunch .caplist, body.ink #scLaunch .lplans{ margin-left:1.5rem!important; }
/* ARCHIVED is GONE from the launcher (Ken 2026-07-10 "I want this gone here 'Archived'") — re-asserted at
   higher specificity because the display:flex above out-specifies the base #scLaunch hide in styles.css. */
body.ink #scLaunch .arch-head, body.ink #scLaunch .planrow.arch-head, body.ink #scLaunch .planrow.is-arch{ display:none!important; }
body.ink #scLaunch .capdel, body.ink #scLaunch .planrow .del,
body.ink #scLaunch .cap-add, body.ink #scLaunch #tplAdd{
  position:static!important; top:auto!important; right:auto!important; margin:0!important; padding:0!important;
  width:2rem; height:2rem; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  color:var(--txt)!important; opacity:1; }   /* SAME black as the "Quick tasks"/"My plans" titles (Ken 2026-07-10 "same color black and black") */
/* The row delete is a − (minus), not an ✕ — it pairs with the header ＋ (Ken 2026-07-10 "instead of x
   here use - (minus), it goes better with +"). Same size + weight as the ＋ so the two read as a set. */
body.ink #scLaunch .capdel, body.ink #scLaunch .planrow .del,
body.ink #scLaunch .cap-add, body.ink #scLaunch #tplAdd{ font-size:1.6rem!important; font-weight:600!important; }
body.ink #scLaunch .capinput{ color:var(--txt); }
body.ink #scLaunch .capinput::placeholder{ color:var(--muted); }
body.ink #scLaunch .caprow.capdone .capchk{ background:var(--good,#4f6e3b); border-color:var(--good,#4f6e3b); }
body.ink #scLaunch .caprow.capdone .captitle{ color:var(--block,#b53b2d); }
/* Estimate chip on the hero step (C3) — pencil-muted; a big one warms to amber. */
body.ink .cs-est{ color:var(--muted); font-size:0.95rem; }
body.ink .cs-est.big{ color:var(--ink-amber,#b8862b); }
body.ink #scLaunch .planrow{ background:#fffef9!important; border:1.5px solid var(--line2)!important;
  border-left:6px solid var(--accent)!important; border-radius:4px 10px 10px 4px;
  color:var(--txt); box-shadow:0 8px 20px rgba(40,26,16,.34); }
body.ink #scLaunch .planrow:hover{ border-color:var(--accent)!important; }
body.ink #scLaunch .planrow .nm{ color:var(--txt); font-family:var(--ink-display); font-size:1.25rem; line-height:1.15; }
body.ink #scLaunch .planrow .del{ color:var(--muted); }   /* clearer than faint — the ✕ is a big, obvious target now */
body.ink #scLaunch .planrow .del:hover{ color:var(--block)!important; background:color-mix(in srgb,var(--block) 13%,transparent); }
body.ink #scLaunch .planrow.new{ background:transparent!important; border-style:dashed!important; color:var(--muted); }
/* coloured-pencil spines — the shelf reads as a row of different books */
/* per-row spine hues REMOVED with the spine (Ken 2026-07-11) — lane hues on the BOARD are untouched */

/* ═══ PLANS WIDGET = RULED NOTEBOOK PAPER (Ken 2026-07-10 "make the plans widget background look like a
   piece of paper like the animation; make the plans line up between the lines like it was written on
   it"). Same --ink-rule grid as the playlist: the shelf carries the rules and every text line rides one
   rule band, so Quick tasks + plan names sit ON the lines. ═══ */
body.ink #scLaunch .lshelf{
  background-image:repeating-linear-gradient(180deg,
    transparent 0 calc(var(--ink-rule) - 1.5px),
    rgba(140,118,82,.30) calc(var(--ink-rule) - 1.5px) var(--ink-rule))!important;
  background-position:0 0.75rem!important; background-repeat:repeat!important;
  padding:0.75rem 1.125rem 1rem!important; }
/* every header + row line rides a rule band (line-height = the rule pitch) */
body.ink #scLaunch .caphead,
body.ink #scLaunch .lshelf-head,
body.ink #scLaunch .captitle,
body.ink #scLaunch .capinput,
body.ink #scLaunch .lplans-empty,
body.ink #scLaunch .planrow .nm{ line-height:var(--ink-rule)!important; }
/* rows are exactly one (or N) rule bands tall, no rhythm-breaking padding */
body.ink #scLaunch .caprow{ min-height:var(--ink-rule)!important; padding:0 0.25rem!important; align-items:center!important; }
body.ink #scLaunch .caphead{ margin:0!important; }
body.ink #scLaunch .lshelf-head{ min-height:var(--ink-rule)!important; margin:0!important; }
body.ink #scLaunch .capcard{ background:transparent!important; border:none!important; box-shadow:none!important; margin:0 0 var(--ink-rule) 0!important; }
/* plan rows = handwritten lines ON the paper (drop the white card so the rules show through).
   One rule band tall. COLOUR SPINE REMOVED (Ken 2026-07-11 "get rid of this vertical line"). */
body.ink #scLaunch .planrow{
  background:transparent!important; border:none!important;
  box-shadow:none!important; border-radius:0!important; min-height:var(--ink-rule)!important;
  margin:0!important; padding:0 0.25rem!important; flex-direction:row!important;   /* 0.25rem matches .caprow → the ✕ column lines up across tasks + plans (Ken 2026-07-10) */
  justify-content:flex-start!important; align-items:center!important; gap:0.5rem!important; }
body.ink #scLaunch .planrow .nm{ font-size:1.25rem!important; text-align:left!important; flex:0 1 auto!important; }
body.ink #scLaunch .planrow .del{ position:static!important; margin-left:0!important; }   /* the ✕ is the FIRST child now (left edge) — the old margin-left:auto shoved the whole row right (Ken 2026-07-10) */

/* ═══════════════════════════════════════════════════════════════════════════
   14. COLORED-PENCIL INDEX + NOTETAKER LAYER (Ken 2026-06-18 "make the color do
   work... give each plan section its own colored-pencil identity → the left page
   becomes a colour-coded index; then add the highlighter / checkbox layer"). The
   ideas are adapted from the colored-pencil iteration onto OUR real class names
   (.qh-row / .qh-nm / .uprow / .uptitle / .cur-sel) — never the iteration's new
   markup, so every JS binding + guard survives. --lane-hue is set inline per lane
   in wizard.js (renderRootColumns). The HERO stays calm (no hue) on purpose —
   colour only where it carries meaning. Ink-theme only.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ink{
  --ink-amber:#936a12; --ink-coral:#b2462f; --ink-teal:#2a6e5e;
  --ink-violet:#5f3f93; --ink-rose:#a83c62;
}

/* lane name in its pencil hue + a colored wobble underline = the colour-coded index.
   (A COMPLETE lane stays red-struck/muted — no hue, no underline.) */
body.ink .qh-row .qh-nm{ position:relative; }
body.ink .qh-row .qh-nm:not(.struck){ color:var(--lane-hue,var(--txt)); }
/* UNDERLINE VISIBLE (Ken 2026-07-03 "I want categories underlined so they stand out more. Its hard
   for my eyes to tell the difference between titles and list items"): the wobble underline was drawn
   at bottom:-0.25rem — OUTSIDE the box — and .qh-nm's overflow:hidden (ellipsis) silently CLIPPED it.
   Now inside the box, thicker, full width, full opacity — a real section rule under every category. */
body.ink .qh-row .qh-nm:not(.struck)::after{ content:""; position:absolute; left:0; right:0; bottom:0.0625rem;
  height:0.25rem; background:var(--lane-hue,var(--accent)); filter:url(#inkRough3); border-radius:2px; opacity:1; }
/* the lane frame picks up a faint tint of its hue */
body.ink .qh-row::before{ border-color:color-mix(in srgb,var(--lane-hue,var(--line)) 50%,var(--line)); }

/* ACTIVE lane = highlighter swipe + the underline STAYS (Ken 2026-07-03: the underline is the
   header signal — it never disappears, or the active category loses its "I'm a title" cue) */
body.ink .qh-row.sel .qh-nm::before{ content:""; position:absolute; left:-0.4375rem; right:-0.5625rem; top:2%; bottom:-2%; z-index:-1;
  background:linear-gradient(95deg,transparent,var(--lane-hue,var(--accent)) 8%,var(--lane-hue,var(--accent)) 88%,transparent);
  opacity:.24; mix-blend-mode:multiply; filter:url(#inkRough1); border-radius:5px; transform:rotate(-.6deg); }

/* hand-drawn CHECKBOX before every step; done = a green ✓ while the title still red-strikes.
   HANGS IN A FIXED GUTTER (Ken 2026-07-03 "I do not want the list items indented! See how they
   are two lines?" — the old inline-block box pushed LINE 1 right while wrapped lines sat flush,
   a ragged two-line look; now the box is ABSOLUTE in the row's padding-left gutter, so every
   text line shares ONE left edge and the checkbox sits beside line 1). */
body.ink .uprow{ padding-left:1.5rem!important; }
body.ink .uprow .uptitle{ position:relative; }
body.ink .uprow .uptitle::before{ content:""; position:absolute; left:-1.5rem; top:0.28em;
  width:0.9375rem; height:0.9375rem; box-sizing:border-box; border-radius:5px; filter:url(#inkRough2);
  border:2px solid color-mix(in srgb,var(--lane-hue,var(--ink,#2c2a23)) 65%,var(--ink,#2c2a23)); }
body.ink .uprow.done .uptitle::before{ content:"✓"; line-height:0.6875rem; font-size:0.75rem; font-weight:800;
  text-align:center; color:var(--done); -webkit-text-fill-color:var(--done); border-color:var(--done); }

/* SELECTED step = UNMISTAKABLE (Ken 2026-06-22 "I want whatever is selected way more obvious"): a SOLID
   highlighter BAND in the lane hue + a thick left ACCENT BAR + a BOLD dark title + a full-bright number.
   Replaces the too-faint diagonal hatch (which read the same as a 'fresh' blue title). Background + inset
   shadow only — the band height never shifts. Scoped to .qh-playlist .uprow.cur-sel so it OUT-specifies
   the row-reset (body.ink .qh-playlist .uprow{background:none!important}); a plain .cur-sel covers the
   non-playlist case (e.g. the focus board). */
body.ink .qh-playlist .uprow.cur-sel, body.ink .cur-sel{
  background:color-mix(in srgb,var(--lane-hue,var(--accent)) 28%,transparent)!important;
  box-shadow:inset 6px 0 0 0 var(--lane-hue,var(--accent))!important; border-radius:3px!important; }
body.ink .qh-playlist .uprow.cur-sel .uptitle:not(.struck), body.ink .cur-sel .uptitle:not(.struck){
  color:var(--ink,#2c2a23)!important; font-weight:800!important; }
body.ink .qh-playlist .uprow.cur-sel .upord, body.ink .cur-sel .upord{
  color:var(--lane-hue,var(--accent))!important; opacity:1!important; font-weight:800!important; }
/* SELECTED = SCRIBBLED-IN CHECKBOX (Ken 2026-07-03 "Whatever is selected I want the square next
   to it scratched in like a scribble"): the active step's box fills with pencil hatch strokes in
   the lane hue — two crossing stroke directions + the inkRough wobble read as a hand scribble.
   A DONE box (.struck ✓) keeps its clean green check — scribble is the "you are here", not "done". */
body.ink .cur-sel .uptitle:not(.struck)::before{
  border-color:var(--lane-hue,var(--accent)); border-width:2.5px;
  background:
    repeating-linear-gradient(-55deg, transparent 0 0.09em,
      color-mix(in srgb,var(--lane-hue,var(--accent)) 85%,transparent) 0.09em 0.2em),
    repeating-linear-gradient(28deg, transparent 0 0.14em,
      color-mix(in srgb,var(--lane-hue,var(--accent)) 55%,transparent) 0.14em 0.24em);
}

/* (The margin star + sparkle doodles were REMOVED entirely — Ken 2026-06-18 "get rid of stars
   things". The colour-coded index, highlighter swipe, hatch, and checkboxes carry the look.) */

/* ═══════════════════════════════════════════════════════════════════════════
   15. CALM (default) vs COZY (opt-in via Settings → body.cozy) — two intensity
   tiers. DEFAULT = calm: keeps all the WAYFINDING (cream paper, colour-coded index,
   wobble cards, checkboxes, highlighter swipe, hatch) with a legible SANS body and a
   fainter ambient creature — a low-stimulation page for the freeze-prone user. COZY
   swaps body back to Kalam handwriting and raises the creature's presence. (The margin
   star/sparkle doodles were removed entirely.) One tap in Settings; default protects.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ink.cozy{
  --ff:"Kalam",ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",Roboto,sans-serif;   /* handwriting body */
  --ferro-dim:1;                                                                          /* livelier creature — full visibility in cozy (Ken 2026-06-19) */
}

/* suggested do-order number = HANDWRITTEN (Ken 2026-06-18 "a handwritten number in the order they
   should be done"): Caveat, in the step's lane hue, quiet — a GPS cue, not the old badge noise. */
body.ink .uprow .upord{ font-family:var(--ink-display); font-size:1.4em; font-weight:700;
  color:var(--lane-hue,var(--muted)); opacity:.85; }


/* ═══════════════════════════════════════════════════════════════════════════
   16. WRITTEN ON THE RULED LINES (Ken 2026-06-19 "The text of the app has to be
   within the rows of the background paper in proper spots as if they were really
   written on a sheet of paper. Be creative and make that happen and be very
   reliable. A title can take up two columns of rows but needs to be properly in
   them. Think how a school would teach you.")
   The playlist becomes a handwritten list that sits ON the paper's ruled lines.
   RELIABILITY BY CONSTRUCTION (not font-metric guessing): one variable --ink-rule
   is BOTH the rule pitch AND the text line-height, and the rules live on the rows
   container with the same origin as the first text line — so every line lands in a
   rule band no matter the font. A long title simply wraps to a 2nd ruled line.
   Scoped to the playlist; the rest of the app is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ink{ --ink-rule:34px; }
/* the playlist card gives up its own ruled bg + padding rhythm; the rows container
   carries the rules, locked to the text (band BOTTOM = the visible rule). */
body.ink .qh-playlist{ background-image:none!important; padding:0.5rem 1.125rem 1rem!important; }
body.ink .qh-playlist .tkt-rows{
  background-image:repeating-linear-gradient(180deg,
    transparent 0 calc(var(--ink-rule) - 1.5px),
    rgba(140,118,82,.34) calc(var(--ink-rule) - 1.5px) var(--ink-rule))!important;
  background-position:0 0!important; background-repeat:repeat!important;
  padding-top:0!important; }
/* every playlist line rides the grid: line-height = exactly one rule band, handwritten */
body.ink .qh-playlist .qh-nm,
body.ink .qh-playlist .uptitle{
  font-family:var(--ink-display)!important; line-height:var(--ink-rule)!important; }
body.ink .qh-playlist .uptitle{ font-size:1.3125rem!important; }
body.ink .qh-playlist .qh-nm{ font-size:1.5rem!important; }     /* lane = a bolder header line */
/* strip the floating wobble-card: no border layer, no box bg, no rhythm-breaking margin/padding.
   each row becomes N rule-bands tall (N = wrapped lines), stacked with zero gap so the grid stays true. */
body.ink .qh-playlist .qh-row{
  border:none!important; background:none!important; box-shadow:none!important;
  margin:0!important; padding:0!important; min-height:var(--ink-rule)!important;
  border-radius:0!important; align-items:flex-start!important; }
body.ink .qh-playlist .uprow{
  border:none!important; background:none!important; box-shadow:none!important;
  margin:0!important; padding:0 0 0 1.5rem!important; min-height:var(--ink-rule)!important;   /* left gutter = the hanging checkbox (Ken 2026-07-03 flush lines) */
  border-radius:0!important; align-items:flex-start!important; }
body.ink .qh-playlist .qh-row::before,
body.ink .qh-playlist .uprow::before{ display:none!important; }    /* kill the wobble border layer (the box) */
body.ink .qh-playlist .uprow + .uprow{ border-top:none!important; }
/* nested steps: indent horizontally only — the vertical rhythm stays locked to the rules */
body.ink .qh-playlist .qh-sub{ margin:0!important; padding:0!important; }   /* flush with the lane title (Ken 2026-07-01 "No indentation on these") */
/* keep the school touches: the checkbox sits on the line, the do-order number stays in the margin,
   the active line is highlighted, done crosses out — all without breaking the band height. */
body.ink .qh-playlist .upord{ line-height:var(--ink-rule)!important; align-self:flex-start; }
body.ink .qh-playlist .uprow .uptitle::before{ vertical-align:-2px; }


/* GOAL DETAIL EXPLAINER (Ken 2026-06-19 work order "kill the empty-field trap"): the goal /
   "Make it easier" view must show NO ruled lines — the blank lined area read as a text input and
   froze a test user. Keep the cream sheet + its wobble border, drop only the horizontal rules;
   the single .gd-divider under the goal is the only rule on this screen. */
body.ink .tkt-solo .qh-hero{ background-image:none!important; }


/* ═══ PHONE TYPE SCALE (responsive-audit, Ken 2026-06-19) ═══
   ink.css had NO @media rules → the lined-paper playlist type didn't scale down, so on a small phone
   the 21-24px handwriting on a 34px rule band wrapped to tall 2-3-line rows. Shrink the rule pitch AND
   the font TOGETHER (line-height is bound to --ink-rule, so the on-the-line lock is preserved). */
@media (max-width:480px){
  body.ink{ --ink-rule:30px; }
  body.ink .qh-playlist .uptitle{ font-size:1.125rem!important; }
  body.ink .qh-playlist .qh-nm{ font-size:1.25rem!important; }
}

/* Apple-settings groups on paper (2026-07-04) */
body.ink .set-group{ background:#fffef9!important; border:1.5px solid var(--line2)!important; }
body.ink .set-h{ color:var(--faint); }
/* API KEYS panel — real, professional buttons over the airy ink button reset (Ken 2026-07-10 "make it look more professional"). */
body.ink #apiTokNew{ background:var(--accent)!important; color:#fff!important; border:none!important; border-radius:0.5rem; padding:0.45rem 0.95rem; font-weight:700; font-size:0.875rem; box-shadow:none; }
body.ink #apiTokNew:hover{ background:var(--accent2)!important; }
/* Export scripts = a clearly-tappable SECONDARY button (bordered accent) — a visible feature, subordinate to the solid Generate. */
body.ink #apiScriptsBtn{ background:transparent!important; color:var(--accent)!important; border:1.5px solid var(--accent)!important; border-radius:0.5rem; padding:0.42rem 0.9rem; font-weight:700; font-size:0.875rem; box-shadow:none; }
body.ink #apiScriptsBtn:hover{ background:var(--accent)!important; color:#fff!important; }
body.ink #apiTokCreate, body.ink #apiTokCopy{ background:var(--accent)!important; color:#fff!important; border:none!important; border-radius:0.45rem; padding:0.4rem 0.85rem; font-weight:700; font-size:0.85rem; }
body.ink #apiTokCreate:hover, body.ink #apiTokCopy:hover{ background:var(--accent2)!important; }
body.ink #apiTokCancel, body.ink #apiTokDone{ background:transparent!important; border:1px solid var(--line2)!important; color:var(--muted)!important; border-radius:0.45rem; padding:0.4rem 0.8rem; font-weight:600; font-size:0.85rem; }
body.ink .tok-rev{ background:transparent!important; border:1px solid color-mix(in srgb,var(--block) 45%,var(--line))!important; color:var(--block)!important; border-radius:0.4rem; padding:0.3rem 0.7rem; font-weight:600; font-size:0.8rem; }
body.ink .tok-rev:hover{ background:color-mix(in srgb,var(--block) 12%,transparent)!important; }
body.ink .tok-reveal code{ background:#f0e7d4!important; border:1px solid var(--line2); color:var(--txt); }
body.ink .set-val{ color:var(--ink,#2c2a23); opacity:.75; }

/* ── BARE-DESK TEXT VISIBILITY SWEEP (Ken 2026-07-05, iPhone screenshots ×2: the wordmark's
   "Plan" and the My-plans header/Clear-all were near-invisible dark-on-walnut). RULE: any text
   sitting DIRECTLY on the walnut desk uses the light-pencil palette (h1 precedent #f3ead4 /
   #d6c9aa) — dark ink is for CREAM surfaces only. ── */
body.ink #scLaunch .launch-brand .word{ color:#f3ead4; }                    /* "Plan" reads on walnut */
body.ink #scLaunch .launch-brand .word b{ color:#8db4ea; }                  /* the O — pencil blue, light enough for dark wood */
body.ink #scLaunch .launch-brand .word em{ color:#e0745c; }                 /* the S — coral red, brighter than --block on walnut */
/* logo stands out on the black header (the black itself is ONE continuous layer of the html desk
   gradient — see html:has(body.ink) below: reaches y=0 behind the topbar, fades seamlessly into walnut). */
body.ink #scLaunch .launch-brand .word{ color:#4a90e2!important; text-shadow:0 2px 12px rgba(0,0,0,.55); font-weight:800; }   /* Plan = BLUE (Ken 2026-07-09 "look like [blue Plan / green OS]") */
body.ink #scLaunch .launch-brand .word b{ color:#46b56a!important; }        /* the O — green */
body.ink #scLaunch .launch-brand .word em{ color:#46b56a!important; }       /* the S — green (so "OS" is all green) */
/* MOBILE PLANS WIDGET = CREAM CARD (Ken 2026-07-10 "across interfaces we can't have radically different
   looking widgets — only layouts and positions"): the shelf is a cream card on phone/tablet too now
   (styles.css @media ≤1023 .lshelf gets background:var(--surface) + black border), so all of its text —
   header, capture lane, "No plans yet", filters — uses the SAME dark-ink defaults as desktop. The old
   light-pencil-on-desk overrides are gone; the widget reads identically across web + iPhone. */

/* ═══════════════════════════════════════════════════════════════════════════
   16. BLACK CHROME (Ken 2026-07-10): "header tool bar black — and make sure everything on it can be
   seen well since the color changed." The ink topbar goes true black (matches the GDS footer,
   styles.css .gdsbar) and every control flips to cream — readability first.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ink .topbar{ background:#000; backdrop-filter:none; border-bottom:1px solid #241e16; }
body.ink .topbar .subtle{ color:#e9e1ce; }                    /* ‹ ⌂ › 🏆 ⚙ — cream on black */
body.ink .topbar .subtle:hover{ color:#fff; background:rgba(255,255,255,.09); }
body.ink .topbar .whoami{ color:#b8af9b; }                    /* signed-in email — muted cream */
body.ink .topbar .crumb{ color:#b8af9b; }
body.ink .topbar .freshbadge{ color:#e9e1ce; background:transparent; border:1px solid #3a3226; }

/* DOT PAPER ON THE GOAL COMPOSER TOO (Ken 2026-07-10 "I want the grid also on the background of
   this" [the What-are-you-trying-to-achieve card]): same faint full-pitch dot grid as the plans
   widget — one paper language across the launcher. The white input box sits on top untouched. */
body.ink #scLaunch .lgoal{
  background-image:radial-gradient(circle, rgba(140,118,82,.20) 0.08rem, transparent 0.14rem)!important;
  background-size:var(--ink-rule) var(--ink-rule)!important; }

/* RHYTHM LOCK — text 100% ON the ruled lines (Ken 2026-07-10 "every text aligned with the lines in
   background like it was written on the paper"). Two structural defects fixed:
   (1) OFF-GRID GAPS: .lshelf/.lplans (.75rem), .capcard (.3rem), .caplist (.2rem) and .capinput's
       padding were not --ink-rule multiples, so every section drifted further off the grid — ALL
       zeroed; a row is exactly N bands tall and spacing comes from whole empty bands only.
   (2) FLOATING BASELINE: rows were vertically centered in their band, so text hovered between rules.
       ONE global background phase (--rule-phase) slides the grid so a rule sits just under each text
       baseline — handwriting ON the line. Tune the ONE number against a rendered screenshot only. */
body.ink #scLaunch .lshelf{ gap:0!important; padding:0 1.125rem 1rem!important;
  --rule-phase:calc(var(--ink-rule)*-0.26);
  /* DOTTED PAPER (Ken 2026-07-10 "instead of lines — grid or dotted"): bullet-journal dot grid at
     HALF the row pitch (square), so every text row still rides a dot row (the rhythm lock stands).
     Overrides the earlier ruled repeating-linear-gradient (later + !important wins). */
  /* SPARSER + FAINTER (Ken 2026-07-10 round 2 "dots less often and more faint — every 4 squares
     should be 1 large square"): spacing doubled half-pitch → FULL pitch (2×2 old cells = 1 new cell)
     and alpha .42 → .20 — quiet background paper; every text row still rides a dot row exactly. */
  background-image:radial-gradient(circle, rgba(140,118,82,.20) 0.08rem, transparent 0.14rem)!important;
  background-size:var(--ink-rule) var(--ink-rule)!important;
  background-position:0 var(--rule-phase)!important; }
body.ink #scLaunch .lplans{ gap:0!important; }
body.ink #scLaunch .capcard{ gap:0!important; }
body.ink #scLaunch .caplist{ gap:0!important; }
body.ink #scLaunch .caprow{ height:var(--ink-rule)!important; min-height:var(--ink-rule)!important; }
body.ink #scLaunch .capinput{ padding:0!important; height:var(--ink-rule)!important;
  line-height:var(--ink-rule)!important; font-size:1.05rem!important; }
body.ink #scLaunch .lshelf-head{ height:var(--ink-rule)!important; }
body.ink #scLaunch .planrow{ min-height:var(--ink-rule)!important; }
body.ink #scLaunch .lplans-empty{ line-height:var(--ink-rule)!important; padding:0!important; margin:0!important; }

/* the GDS logo's full-screen view stays TRUE BLACK on ink too (the warm translucent .imglb tint
   would gray the logo's own black field — brand black is theme-independent). */
body.ink .imglb:has(img[src*="gds-logo"]){ background:#000; }

/* LIVING TICKET on ink: hand-drawn little boxes, quiet receipt. */
body.ink .ckx .ckbox{border-color:var(--line);border-radius:0.3rem}
body.ink .ckx.done .ckbox{background:var(--good,#4f6e3b);border-color:var(--good,#4f6e3b)}
body.ink .cc-receipt{color:var(--muted);font-family:var(--ff)}

/* STEP-BOX WHITE (Ken 2026-07-11 "white, not looking greyed out like you can't type" + placeholder
   shortened to "Tell me anything…" so it never clips): same paper white as the auth inputs. */
body.ink .cs-hero-ask .cs-clar-row textarea, body.ink .cs-hero-ask .cs-clar-row input{
  background:#fffef9!important; border:1.5px solid var(--line2)!important; color:var(--txt)!important; }
body.ink .cs-hero-ask .cs-clar-row textarea::placeholder{ color:var(--muted)!important; opacity:1; }