/* Outfit (SIL Open Font License 1.1; see /static/fonts/OFL-Outfit.txt), served from this site. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/outfit-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}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/outfit-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}
:root {
  --ink: #203c3b;
  --body-text: #334d4c;
  --text-form: 16px;
  --text-intro: 20px;
  --h1-creation: clamp(35px, 3.5vw, 44px);
  --brand-green: #337b6d;
  --rail-bg: #eef3ec;
  --pill-bg: #e2eee5;
  --tag-ink: #335e45; /* RC2 S14a: the prototype's tag text on --pill-bg (style.css `.tag`). */
  /* Approved RC2: warm paper and calm type; source-owned page layouts retain their state guards. */
  --page-bg: #fafbf7;
  --column: 760px;
  --h1: clamp(2.25rem, 4.5vw, 4rem);
  /* RC2 S9-E1: the prototype's title scale for `.legal-heading h1` (Terms, Privacy; line 21). Phones take the sizes in
     the media block right after this one. */
  --h1-legal: 48px;
  --paper: #fffefa;
  --muted: #596967;
  --line: #d9e2dc;
  --line-dash: rgba(31, 42, 68, 0.3);
  --accent: #214e47;
  --accent-ink: #ffffff;
  --ok: #214e47; /* The success colour (studio.css); the same value as --accent, another meaning. */
  --chip: #E6E7EA;
  --border-strong: #6d857d; /* Field and control boundaries keep the standing 3:1 floor. */
  --shadow: 0 1px 2px rgba(31, 42, 68, 0.08);
  --focus: #166b62;
  --white: #ffffff;
  /* The error colours (checklist item 12; only on error rules, test_visual_theme): text and borders, the fill,
     a flash's error rule. */
  --error-ink: #7a2424;
  --error-bg: #fceeee;
  --error-line: #efc4c4;
  --sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --tap: 44px;
  /* The standing UX checklist's token table (workspace procedures/ux-checklist.md, items 7-8; 19 Oct 2026, the
     design-tokens slice 29 Oct): every token lives in this first :root. New rules use these; --text-label is the
     only text under 16px (short labels: kickers, chips and pills, the stage word, step numbers). */
  --text-label: 14px;
  --text: 17px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 48px;
  /* Two steps between the five, named by value (owner, 29 Oct 2026, D1: the live site's 12 and 32 px). */
  --space-12: 12px;
  --space-32: 32px;
  --radius-sm: 4px;
  --radius-btn: 8px;
  --radius: 9px;
  --radius-lg: 12px;
  --motion: 220ms ease;
  --press: 1.03;
  /* The availability tags (RC2 Explore; owner 20 Oct approved the amber demo pair): Home's cards and the project
     page. */
  --availability-demo-bg: #fff0c9;
  --availability-demo-ink: #725014;
  --availability-download-bg: #e4edf9;
  --availability-download-ink: #244e7c;
  --availability-online-bg: #e3efe3;
  --availability-online-ink: #1f573d;
}
/* RC2 S9-E1: the prototype's phone titles (at 760px and below: `h1` 40, style.css line 1;
   `.legal-heading h1` 39, line 23). Tokens rather than a bare `h1` rule, which `.page-title` would outrank. Kept
   after the :root above (test_css_floor reads the first :root as the desktop tokens). */
@media (max-width: 760px) { :root { --h1: 40px; --h1-legal: 39px; } }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  color: var(--body-text);
  background: var(--page-bg);
  line-height: 1.55;
  font-size: var(--text);
  min-height: 100vh;
}
h1, h2, .page-title, .logo {
  font-family: var(--display);
  font-weight: 500;
}
/* RC2 headings: ink, the regular weight and a 1.2 line height; their sizes stay the page's or the browser's. */
h1, h2, h3 { color: var(--ink); font-weight: 500; line-height: 1.2; }
/* RC2 links: the text's own colour, underlined; an anchor drawn as a control sets text-decoration: none. */
a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
/* A standalone text link that is a control ("See all", "Back to project", "Reply"): 44 px each way (checklist line 9). */
a.action-link, button.action-link { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
a.action-link { color: var(--accent); }
/* A POST button drawn as that text link ("Cancel my pledge", UX pass 3 cut 11): no button fill, border or padding. */
button.action-link { background: none; border: 0; padding: 0; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 4px; }
button.action-link:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button, .btn {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius-btn);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  transition: transform var(--motion);
}
.btn:active { transform: scale(var(--press)); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.btn.secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn.accent { background: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: 1; cursor: not-allowed; background: var(--chip); color: var(--ink); }
/* UX pass 3 T1 (D2): a disabled secondary keeps the kit's disabled pair over shell.css's white .btn.secondary, and a
   pressed toggle (the studio's Point) reads selected; they replace the studio's local .st-secondary rules. */
.btn.secondary:disabled { background: var(--chip); color: var(--ink); cursor: not-allowed; }
.btn.secondary[aria-pressed="true"], .btn.secondary[aria-pressed="true"]:hover { background: var(--pill-bg); border-color: var(--focus); }
/* A pressed submit while its POST is in flight (app.js marks it; UX pass 2, the submit PR): the disabled look, and
   no second pointer press. The !important wins over every button rule on a native form (.btn.secondary in shell.css
   and the project page's form buttons in experience.css; UX pass 3 T1 moved the money presses onto the kit's tiers).
   Never disabled, so the button's name=value still posts. */
button[aria-busy="true"], .btn[aria-busy="true"] { background: var(--chip) !important; color: var(--ink) !important; box-shadow: none !important; pointer-events: none; }
form[data-submitting] { cursor: progress; }
.wrap { max-width: var(--column); margin: 0 auto; padding: 0 var(--space-3) 4rem; }
main.wrap > p, main.wrap > section > p { max-width: 47ch; }
/* A kit card's text runs as wide as its rows, up to the reading limit (the owner's item, 1 Nov 2026). */
main.wrap > .k-card > p, main.wrap > .k-task > p, .k-card > p, .k-task > p { max-width: 75ch; }
h1 { font-size: var(--h1); line-height: 1.05; letter-spacing: -0.045em; overflow-wrap: break-word; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: var(--ink); color: var(--white); }
/* In-page jumps (#discussion, #comment-N, a project page's section links) land below the sticky header, not under
   it (R11, 22 Oct 2026): taller than the header's two rows up to 760 px wide (129 px; shell.css) and its one row
   above (93 px). Focus moved by keys scrolls clear of it too. Targets set no scroll-margin-top of their own. In px,
   like the header, so a smaller browser font size can't shrink it; "width > 760px" leaves no gap at a fractional width. */
html { scroll-padding-top: 144px; }
@media (width > 760px) { html { scroll-padding-top: 104px; } }
header.pub {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.pub-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}
.logo { color: var(--ink); font-size: var(--text-lg); min-height: var(--tap); display: inline-flex; align-items: center; text-decoration: none; }
.header-cta { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.header-cta .btn { background: var(--accent); color: var(--accent-ink); }
.page-title { margin: var(--space-3) 0 var(--space-1); font-size: var(--h1); }
.lede, .muted, .caption { color: var(--muted); }
.caption { font-size: var(--text-form); }  /* A caption is the smallest text, at the 16 px floor (RC2 S18a's drawn caption; design system PR 3b). */
.chip {
  background: var(--paper); border: 1px solid var(--border-strong); color: var(--ink);
  font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: var(--radius-btn); min-height: var(--tap);
  display: inline-flex; align-items: center; text-decoration: none;
}
/* RC2 tags: a 4 px-radius label on the pill fill in ink. */
.stage-word {
  display: inline-block;
  font-size: var(--text-label);
  color: var(--ink);
  background: var(--pill-bg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.2;
}
.kicker { font-size: var(--text-label); font-weight: 700; color: var(--accent); text-transform: uppercase; }
.block { margin: var(--space-3) 0; }
.three { display: grid; gap: var(--space-2); }
.three dt { font-weight: 700; font-size: var(--text-label); text-transform: uppercase; }
.q { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-3); margin: 0 0 var(--space-3); }
.q legend { font-family: var(--display); font-weight: 700; }
.extras { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-3); margin: 0 0 var(--space-3); }
.extras summary { font-family: var(--display); font-weight: 700; cursor: pointer; }
.extra { margin: var(--space-12) 0 0; }
.extra-legend { font-weight: 700; margin: 0 0 var(--space-1); }
.plan-row { margin: var(--space-12) 0 0; }
.plan-row h3 { font-size: var(--text-form); margin: 0 0 var(--space-1); }
.plan-row p { margin: 0; }
.plan-sample {
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-12);
  font-size: var(--text);
}
input, textarea {
  width: 100%; font: inherit; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn); background: var(--paper);
}
/* Targets (checklist line 9): a text field, a select, a textarea and a disclosure are at least 44px tall. A
   checkbox or radio keeps its size and counts with its clickable label. The disclosure sets no display, so
   its triangle stays; align-content centres its text where the browser supports it. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { min-height: var(--tap); }
summary { min-height: var(--tap); align-content: center; cursor: pointer; }
/* A tick box's or radio's label is its target, 44 px tall. :where() keeps it at (0,0,1), so a page's own label rule
   keeps its display and alignment and gains only the height. */
label:where(:has(input[type="checkbox"])), label:where(:has(input[type="radio"])) { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--tap); }
/* Inside that label the box keeps its own width (the plain input rule above makes every input 100% wide, which in a
   flex row pushed the words away from their box). Also (0,0,1), after the input rule, so a page's own rule still wins. */
:where(label) input:where([type="checkbox"]), :where(label) input:where([type="radio"]) { width: auto; flex: 0 0 auto; }
input::placeholder, textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}
/* A flash is an RC2 notice: the accent's left rule on the rail fill (shell.css draws the rule). */
.flash { background: var(--rail-bg); padding: var(--space-2) var(--space-12); border-radius: var(--radius); }
.flash.bad { background: var(--error-bg); color: var(--error-ink); }
.idea-check { margin-bottom: var(--space-3); }
.footer { padding: var(--space-3); color: var(--muted); text-align: center; }
.inline { display: inline; }
.chip.qualifier {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  font-size: var(--text-label);
  font-weight: 600;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.writing-kept {
  background: var(--paper);
  border: 1px dashed var(--border-strong);
  padding: var(--space-12);
  border-radius: var(--radius);
}
.sketch-frame {
  display: block;
  width: 100%;
  min-height: 28rem;
  margin: var(--space-12) 0 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--paper);
}
.you-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-12) 0 var(--space-3); }
.you-tabs a {
  background: var(--paper);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.you-tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }
/* RC2 S3: a lined row, not a box (the prototype's account rows). */
.backed-row {
  border-top: 1px solid var(--line);
  padding: var(--space-3) 0;
  margin: 0;
}
.backed-row h2,.backed-row h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.backed-row a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
#pay-element { margin: var(--space-12) 0; min-height: 48px; }

/* Core experience v2: private draft, proposal review, and publish consent. */
.experience-flow {
  width: min(100%, 58rem);
  min-width: 0;
  margin: var(--space-3) auto var(--space-5);
  overflow-wrap: anywhere;
}
.experience-flow > h1,
.experience-flow > h2 { margin-top: 0; }
.experience-panel {
  min-width: 0;
  padding: clamp(0.85rem, 3vw, 1.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: none;
}
.experience-panel > :first-child { margin-top: 0; }
.experience-panel > :last-child { margin-bottom: 0; }
.experience-panel h2,
.experience-panel h3 { line-height: 1.25; }
.experience-panel label {
  display: block;
  margin: var(--space-12) 0 var(--space-1);
  font-weight: 650;
}
.experience-panel textarea { min-height: 8rem; resize: vertical; }
.experience-panel input,
.experience-panel textarea { min-width: 0; }
.experience-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}
.experience-actions > * { max-width: 100%; }
.experience-unavailable {
  min-width: 0;
  margin: var(--space-12) 0;
  padding: var(--space-12) var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--rail-bg);
  color: var(--muted);
}
.experience-unavailable {
  border-left: 3px solid var(--accent);
  color: var(--ink);
}
.experience-panel p,
.experience-panel li { overflow-wrap: anywhere; }
.experience-consent {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--rail-bg);
}
.experience-consent label {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font-weight: 600;
}
.experience-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
}
@media (max-width: 400px) {
  .experience-flow { margin-top: var(--space-12); }
  .experience-actions { align-items: stretch; }
  .experience-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  button, .btn { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   The kit's components (the design system, 30 Oct 2026; docs/design-system.md, docs/design-system/gallery.html).
   One canonical form per component, drawn to the approved tenets (workspace DECISIONS.md "The design foundations"),
   tokens only. Every class starts with `k-`, so conformance can tell kit from local. These land dark: no page uses
   them until its migration PR; `test_design_system.py` ties this block to the gallery and the document.
   --------------------------------------------------------------------------------------------------------------- */

/* T1 One next move leads: the task card. The one tinted surface on a page; it holds the status, the consequence or
   cost, and the one leading action. `.is-waiting`: the status leads and the page offers one way out, no filled button.
   `.is-done`: what was done and what comes next. */
.k-task { background: var(--rail-bg); border: 0; border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-4) 0; }
.k-task > :first-child { margin-top: 0; }
.k-task > :last-child { margin-bottom: 0; }
.k-task h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.k-task > p:not([class]) { margin: 0 0 var(--space-12); }
.k-task .k-actions { margin-top: var(--space-3); }
.k-task.is-waiting .k-status { font-size: var(--text-lg); }
.k-task.is-done { background: var(--paper); border: 1px solid var(--line); }

/* T5 Consistent, not uniform: the card. Paper, one line, the kit's radius, no shadow (the RC2 surface). Everything
   that is not the task card is a card or sits on the page itself. A card's heading is a section heading. */
.k-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin: var(--space-4) 0; box-shadow: none; }
.k-card > :first-child { margin-top: 0; }
.k-card > :last-child { margin-bottom: 0; }
.k-card h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.k-card h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-1); }
@media (max-width: 480px) { .k-task, .k-card { padding: var(--space-3); } }
/* The move a task holds from another page (`[data-move]`: the creator page's task card with the launch page's job
   card one heading level down, or its hosting form; design system PR 3d-2b-2, found at 3d-2a's capture) on the
   kit's scale: its sub-headings, a plain list's indent and gaps, a gap under its form and a row's gap between a tick
   and its press; an h4 in the heading family's weight, so it never outweighs the h3 above it. Only the move: the
   same markup on the launch page and the other pages' headings, lists and consent forms keep theirs until each
   page's own migration (3d-2b-2's review, M1). `:where` keeps each rule's weight as low as a bare task's. */
.k-task:where([data-move]) h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-1); }
.k-task:where([data-move]) h4 { font-size: var(--text); font-weight: 500; color: var(--ink); margin: var(--space-3) 0 var(--space-1); }
:where(.k-task[data-move]) :where(ol, ul):not([class]) { padding-left: var(--space-4); margin: 0 0 var(--space-3); }
:where(.k-task[data-move]) > form { margin: 0 0 var(--space-3); }
.k-task:where([data-move]) form > label:where(:has(> input[type="checkbox"])) + .btn { margin-top: var(--space-3); }

/* Pattern 1: the agreement block, the approved agreement's heading and every line above the tick, in a task or on the
   page itself (design system PR 3b; the pledge pages' `.pl form` rules did this before they left that frame). */
.k-agreement h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
.k-agreement ul, .k-agreement ol { padding-left: var(--space-4); margin: 0 0 var(--space-3); }
.k-agreement li { margin-block: var(--space-2); }

/* The three tiers in one row: the leading action first, the rest after; wraps, and stacks full-width on a phone. */
.k-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.k-actions .action-link { margin-left: var(--space-1); }
@media (max-width: 480px) { .k-actions { flex-direction: column; align-items: stretch; } .k-actions .btn { width: 100%; } .k-actions .action-link { margin-left: 0; } }

/* T2 Always know where it is on the road: the status line. What is true now, then what happens next and when. */
.k-status { margin: 0 0 var(--space-3); color: var(--body-text); }
.k-status .k-status-now { color: var(--ink); font-weight: 600; }
.k-status .k-status-next { color: var(--muted); }
.k-status .k-status-now + .k-status-next::before { content: " · "; color: var(--muted); }

/* T6, checklist 16: the form row. Label, hint, control, then the error, in that order; one error look. */
.k-field { margin: 0 0 var(--space-3); }
.k-field label, .k-field .k-label { display: block; font-weight: 500; color: var(--ink); margin: 0 0 var(--space-1); }
fieldset.k-field { border: 0; padding: 0; margin: 0 0 var(--space-3); min-width: 0; }
fieldset.k-field > legend.k-label { padding: 0; }
.k-field .k-field-check { margin-bottom: var(--space-1); }
.k-field .k-hint { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-form); }
.k-field .k-error { display: none; margin: var(--space-1) 0 0; color: var(--error-ink); font-size: var(--text-form); }
.k-field.is-error .k-error { display: block; }
.k-field.is-error input, .k-field.is-error select, .k-field.is-error textarea { border-color: var(--error-ink); border-width: 2px; }
.k-field.k-field-check label { display: flex; align-items: flex-start; gap: var(--space-2); min-height: var(--tap); font-weight: 400; color: var(--body-text); }

/* T3 Honest states: the notice. One shape (the rail fill and a left rule in the boundary colour, so the one filled
   button stays the page's only accent); `.is-bad` is the error pair
   (checklist 12: only on error rules). It says what is true and, where there is one, the way back. */
.k-notice { margin: var(--space-3) 0; padding: var(--space-12) var(--space-3); background: var(--rail-bg); border: 0; border-left: 3px solid var(--border-strong); border-radius: var(--radius); color: var(--ink); }
.k-notice p { margin: 0; }
.k-notice p + p { margin-top: var(--space-1); }
.k-notice code { overflow-wrap: anywhere; }  /* A one-time token stays whole on the screen at phone width. */
.k-notice.is-bad { background: var(--error-bg); border-left-color: var(--error-ink); color: var(--error-ink); }

/* T7 Money is plain: the money rows. What each amount is, left; the amount, right, in lined-up digits; the total
   strong; then the note that says when it is taken, from where and what happens if things go wrong. */
.k-money { margin: 0 0 var(--space-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1); }
.k-money dt { margin: 0; color: var(--body-text); }
.k-money dd { margin: 0; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.k-money .k-money-total { font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); padding-top: var(--space-1); margin-top: var(--space-1); }
.k-money .k-money-part { color: var(--body-text); }
.k-money dt.k-money-part { padding-left: var(--space-3); }
.k-money-note { margin: 0 0 var(--space-3); color: var(--body-text); }
.k-money-note strong { color: var(--ink); font-weight: 600; }

/* T4 Only what the decision needs: the fold. Detail one tap below, never a box of its own inside a card. */
.k-fold { margin: var(--space-3) 0 0; border-top: 1px solid var(--line); }
.k-rows + .k-fold { margin-top: 0; border-top: 0; }  /* The last row's line is the fold's. */
.k-fold > summary { font-weight: 500; color: var(--ink); min-height: var(--tap); align-content: center; cursor: pointer; padding: var(--space-1) 0; }
.k-fold > summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.k-fold > :not(summary) { margin: var(--space-2) 0 var(--space-3); }

/* T5: the list row. A lined row, not a box; an optional mark left, text, at most two stacked actions right, the way in
   first; on a phone the actions take the whole width under the text. */
.k-rows { list-style: none; margin: 0; padding: 0; }
.k-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.k-row:has(> .k-row-media) { grid-template-columns: auto minmax(0, 1fr) auto; }
.k-row:last-child { border-bottom: 1px solid var(--line); }
/* The card's own edge closes its rows: never two lines. */
.k-card > .k-rows:last-child > .k-row:last-child, .k-task > .k-rows:last-child > .k-row:last-child { border-bottom: 0; padding-bottom: 0; }
.k-row h2, .k-row h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--text-lg); margin: 0; }
.k-row h2 { font-size: var(--text-xl); }
.k-row h2 a, .k-row h3 a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: 0; overflow-wrap: anywhere; }
.k-row p { margin: var(--space-1) 0 0; color: var(--body-text); }
.k-row-body { min-width: 0; }
.k-row.is-later h2, .k-row.is-later h3, .k-row.is-later p { color: var(--muted); }
.k-row-media { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.k-row-media form { margin: 0; }
.k-row-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.k-row-actions .k-row-action { width: 100%; box-sizing: border-box; text-align: center; }
@media (max-width: 480px) {
  .k-row { grid-template-columns: minmax(0, 1fr); }
  .k-row:has(> .k-row-media) { grid-template-columns: auto minmax(0, 1fr); }
  .k-row-actions { grid-column: 1 / -1; }
}

/* T2: the tag. A short label on the pill fill; the three capability colours carry meaning and nothing else does. */
.k-tag { display: inline-block; font-size: var(--text-label); font-weight: 400; letter-spacing: normal; line-height: 1.2; color: var(--tag-ink); background: var(--pill-bg); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.k-tag.is-online { background: var(--availability-online-bg); color: var(--availability-online-ink); }
.k-tag.is-demo { background: var(--availability-demo-bg); color: var(--availability-demo-ink); }
.k-tag.is-download { background: var(--availability-download-bg); color: var(--availability-download-ink); }

/* T3: the empty or waiting block. Says what is true, what happens next and, where there is one, the one way out.
   It is the task card's waiting shape used where there is no task. */
.k-empty { margin: var(--space-3) 0; padding: var(--space-3); background: var(--rail-bg); border: 0; border-radius: var(--radius); color: var(--ink); }
.k-empty p { margin: 0; }
.k-empty p + p { margin-top: var(--space-1); }
.k-empty .action-link { margin-top: var(--space-1); }

/* T7: the meter. The number with its meaning above the bar, never the bar alone. */
.k-meter-label { margin: 0 0 var(--space-1); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-meter-label .k-meter-note { color: var(--muted); font-weight: 400; }
.k-meter { height: 8px; border-radius: var(--radius-btn); background: var(--pill-bg); overflow: hidden; margin: 0 0 var(--space-2); }
.k-meter > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-btn); }

/* T2: the road. The stages in order; the current one in ink, the ones done quiet, the ones to come muted. */
.k-road { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; color: var(--muted); font-size: var(--text-form); }
.k-road li { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap); }
.k-road .is-done { color: var(--body-text); }
.k-road .is-now { color: var(--ink); font-weight: 600; }
.k-road li + li::before { content: "·"; color: var(--line); margin-right: var(--space-1); }
/* Design system PR 3d-1: the version the road belongs to, written above it ("Version N"); it labels the road. */
.k-road-label { margin: 0; color: var(--body-text); font-size: var(--text-form); font-weight: 600; }