/* The new flow's look (R-28): Margin Notes (c2-pushed) at strength 0.55, opening dark. A Board rail
   where the studio annotates (the steps, the one Blue chalk circle, the one Cyan Caveat note), and a calm
   work area where the person works. Light keeps that structure and chrome; its cards and elements take
   Chalk Panels' light chalk panels (Chalk #E7EBF0 panels, Board text on Chalk, one Lavender action with a
   Board label and edge, Slate never on a panel). Vince's pick: clients/design-studio/.planning/
   design-studio/process-round/pick.json.

   Loaded by lookHead() (site/lib/studio/look.js) after studio.css; every rule is scoped to body.look, so
   an old-pipeline page (no class) renders exactly as before.

   THE CONTRACT (builders and the capture harness code to these):
   Theme      <html data-theme="dark|light">, set before paint by lookHead()'s inline script from
              localStorage 'ds-theme' (dark when unset). Only the switch sets it; no prefers-color-scheme.
   Switch     themeSwitch(): <button class="lk-switch" data-theme-switch aria-pressed aria-label="Light mode">,
              wired by /assets/theme.js. aria-pressed="true" means light is on.
   Shell      body.look > .lk-view > aside.lk-rail (rail()) + .lk-work (the page's own main)
              lookPage() in look.js builds all of it on render.js page().
   Rail       .lk-rail, .lk-steps li(.done|.now[aria-current=step]), .lk-ring, .lk-note (Caveat, Cyan),
              .lk-marks (the phone strip's ticks), .lk-rail-foot. Built by rail(); never hand-written.
   Head       .lk-head > h1 + .lede (or p): the page title in Cabin Sketch and its line in Slate.
   Panels     .lk-panel: a card (raised Board in dark, a Chalk panel in light).
              .lk-panel.flat: unboxed on the work ground in dark, a Chalk panel in light (a form, a list).
              Inside a panel the tokens below switch to the panel's own, so everything nests right.
   Buttons    .button (the one Lavender action per view), .button.secondary (quiet, edged),
              .lk-link (a text button or link, Cyan underline), .lk-icon-btn (52 px square, icon only).
              [aria-busy="true"] on any button shows its working state.
   Fields     label + input/textarea/select (styled bare, no class needed), .hint (secondary line),
              .choice (a label holding a checkbox or radio), fieldset/legend, [aria-invalid="true"].
   Status     .status (empty hides it), .status.good (Blue chalk tick, plain words), .status.bad
              (Board words on a Chalk label in dark; Chalk words on a Board label inside a light panel).
              .lk-line: a quiet working or waiting line with a chalk dot.
   Lines      .muted (secondary words), .hint, .lede, .lk-rule (a 2 px chalk dash between groups).
   Frame      [data-client-frame]: whatever holds the client's own work. Neutral greys only
              (#2A2D31 dark, #D9DADC light), no grain, no dash, no studio colour on or inside it.
              .lk-frame-bar (its top bar: .lk-dots + a label in the frame's own grey ink).
   Tokens     --lk-board --lk-chalk --lk-slate --lk-lav --lk-cyan --lk-blue (the palette)
              --lk-ground (work area) --lk-ink --lk-ink-2 (words on the current surface)
              --lk-panel --lk-line (control edges) --lk-dash (chalk rules) --lk-focus
              --lk-field --lk-field-ink --lk-field-line --lk-act --lk-act-ink --lk-act-line
              --lk-frame --lk-frame-2 --lk-frame-ink --lk-frame-line --lk-cut (the hand-cut radius)
   Widths     Desktop 1440, Large tablet 1024, Small tablet 768, Phone 390. The rail becomes a top
              strip at 960 and below; the work area's gutters tighten at 600 and below. */

@font-face { font-family: "Cabin Sketch"; src: url("/assets/fonts/cabin-sketch-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens. Dark is the default, so a page without script still opens on the board ---------- */
:root {
  --lk-board: #0e1116; --lk-chalk: #e7ebf0; --lk-slate: #838c98;
  --lk-lav: #d2c2ff; --lk-cyan: #7cf3ff; --lk-blue: #4a8fe0;
  --lk-ground: #12161c;
  --lk-ink: #e7ebf0; --lk-ink-2: #838c98;
  --lk-line: #838c98;
  --lk-dash: rgba(231, 235, 240, 0.22);
  --lk-focus: #7cf3ff;
  --lk-under: #7cf3ff;
  --lk-tick: #4a8fe0;
  --lk-panel: #181d25; --lk-panel-ink: #e7ebf0; --lk-panel-ink-2: #9aa3ae; --lk-panel-line: #838c98;
  --lk-panel-dash: rgba(231, 235, 240, 0.22); --lk-panel-focus: #7cf3ff; --lk-panel-under: #7cf3ff;
  --lk-panel-tick: #4a8fe0; --lk-panel-act-line: #d2c2ff;
  --lk-bubble: #1d232c; --lk-bubble-ink: #e7ebf0;
  --lk-field: #0e1116; --lk-field-ink: #e7ebf0; --lk-field-line: #838c98; --lk-field-ph: #838c98;
  --lk-act: #d2c2ff; --lk-act-ink: #0e1116; --lk-act-line: #d2c2ff; --lk-act-hover: #e1d6ff;
  --lk-bad-ground: #e7ebf0; --lk-bad-ink: #0e1116;
  --lk-frame: #2a2d31; --lk-frame-2: #36393e; --lk-frame-ink: #d9dadc; --lk-frame-line: #3a3d42;
  --lk-cut: 10px 14px 9px 13px;
  --lk-rail-w: 300px;
  /* --lk-check is the status tick (Blue chalk on the board, Board on a light panel); --lk-box-check
     is a ticked box's mark, which follows the field (Blue chalk on Board, Board on white) */
  --lk-check-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M3.5 12.5c2.4 1.5 4.2 3.5 5.6 6C12.4 11.8 17 6.4 22.6 3.4' fill='none' stroke='%234A8FE0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lk-check-board: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M3.5 12.5c2.4 1.5 4.2 3.5 5.6 6C12.4 11.8 17 6.4 22.6 3.4' fill='none' stroke='%230E1116' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lk-check: var(--lk-check-blue);
  --lk-box-check: var(--lk-check-blue);
}
html[data-theme="light"] {
  --lk-panel: #e7ebf0; --lk-panel-ink: #0e1116; --lk-panel-ink-2: #3b424c; --lk-panel-line: #0e1116;
  --lk-panel-dash: rgba(14, 17, 22, 0.26); --lk-panel-focus: #0e1116; --lk-panel-under: #0e1116;
  --lk-panel-tick: #0e1116; --lk-panel-act-line: #0e1116;
  --lk-bubble: #e7ebf0; --lk-bubble-ink: #0e1116;
  --lk-field: #ffffff; --lk-field-ink: #0e1116; --lk-field-line: #0e1116; --lk-field-ph: #5b626c;
  --lk-frame: #d9dadc; --lk-frame-2: #c8cacd; --lk-frame-ink: #2a2d31; --lk-frame-line: #c4c6c9;
  --lk-box-check: var(--lk-check-board);
}

/* ---------- The page ---------- */
html:has(body.look) { background: var(--lk-board); color-scheme: dark; overflow-x: clip; scrollbar-color: #2b323c var(--lk-board); }
body.look {
  margin: 0; min-height: 100vh; min-height: 100svh; background: var(--lk-ground); color: var(--lk-ink);
  font-family: "Atkinson Hyperlegible", "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 1.55;
  font-variant-numeric: normal; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
.look [hidden] { display: none !important; }
.look ::selection { background: var(--lk-lav); color: var(--lk-board); }
.look :focus-visible { outline: 2px dashed var(--lk-focus); outline-offset: 3px; border-radius: 4px; }
.look ::-webkit-scrollbar { width: 12px; height: 12px; }
.look ::-webkit-scrollbar-track { background: var(--lk-board); }
.look ::-webkit-scrollbar-thumb { background: #2b323c; border-radius: 6px; border: 3px solid var(--lk-board); }
.look img { max-width: 100%; height: auto; }
.look h1, .look h2 { font-family: "Cabin Sketch", serif; font-weight: 700; letter-spacing: 0; text-wrap: balance; color: inherit; }
.look h1 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.04; margin: 0 0 12px; }
.look h2 { font-size: 1.75rem; line-height: 1.08; margin: 0 0 12px; }
/* h3 sits under Cabin Sketch's 24 px floor, so it is Atkinson */
.look h3 { font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: 1.1875rem; line-height: 1.3; letter-spacing: 0; margin: 0 0 8px; color: inherit; }
.look p { margin: 0 0 12px; max-width: 62ch; }
.look a { color: inherit; text-decoration-color: var(--lk-under); text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
.look .muted { color: var(--lk-ink-2); }
.look .hint { color: var(--lk-ink-2); font-size: 0.9375rem; line-height: 1.45; margin: 0; }
.look .lede { color: var(--lk-ink-2); font-size: 1.125rem; line-height: 1.5; max-width: 56ch; }
.look .visually-hidden, .look .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.look .num { font-variant-numeric: tabular-nums; }
.look .lk-rule { border: 0; border-top: 2px dashed var(--lk-dash); margin: 28px 0; }

/* ---------- The two zones ---------- */
.lk-view { display: grid; grid-template-columns: var(--lk-rail-w) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; }
.lk-work { background: var(--lk-ground); padding: 56px clamp(24px, 4.4vw, 72px) 72px; min-width: 0; }
.lk-work > main { width: auto; max-width: 74rem; margin: 0; padding: 0; }
.lk-head { display: grid; gap: 10px; margin-bottom: 36px; max-width: 46rem; }
.lk-head h1, .lk-head p { margin: 0; }

/* ---------- The rail: where the studio annotates ---------- */
.lk-rail {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; overflow-y: auto;
  padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 26px; color: var(--lk-chalk);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(420px 300px at 30% 12%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(360px 260px at 70% 78%, rgba(255, 255, 255, 0.035), transparent 70%),
    var(--lk-board);
  border-right: 2px dashed rgba(231, 235, 240, 0.22);
  scrollbar-width: thin;
}
.lk-rail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lk-logo { display: block; width: 176px; height: auto; flex: none; }
/* .lk-proj and .lk-rail-foot are <p>s: `.look p` (0,1,1) would set their margins, so they carry .look too */
.look .lk-proj { display: grid; gap: 2px; margin: 0; }
.lk-proj b { font-size: 1.0625rem; overflow-wrap: anywhere; }
.lk-proj span { color: var(--lk-slate); font-size: 0.9375rem; }

.lk-steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lk-steps li {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 12px;
  min-height: 44px; font-family: "Cabin Sketch", serif; font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--lk-slate);
}
.lk-steps .lk-num { font-family: "Atkinson Hyperlegible", sans-serif; font-size: 0.875rem; font-weight: 700; justify-self: center; color: var(--lk-slate); }
.lk-steps li.done, .lk-steps li.now { color: var(--lk-chalk); }
.lk-steps li.now .lk-num { color: var(--lk-chalk); }
.lk-steps .lk-tick { justify-self: center; width: 26px; height: 22px; }
.lk-steps .lk-tick path { fill: none; stroke: var(--lk-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lk-steps .nm { position: relative; justify-self: start; padding: 6px 10px; margin-left: -10px; }
.lk-ring { position: absolute; inset: -6px -14px -8px -10px; width: calc(100% + 24px); height: calc(100% + 14px); overflow: visible; pointer-events: none; }
.lk-ring path { fill: none; stroke: var(--lk-blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lk-note {
  grid-column: 2; display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 6px 16px;
  font-family: "Caveat", cursive; font-weight: 600; font-size: 1.625rem; line-height: 1.1; color: var(--lk-cyan);
  transform: rotate(-2deg); transform-origin: left;
}
.lk-note svg { flex: none; width: 26px; height: 22px; margin-top: -4px; }
.lk-note svg path { fill: none; stroke: var(--lk-cyan); stroke-width: 2.2; stroke-linecap: round; }
.lk-marks { display: none; }
.look .lk-rail-foot { margin: auto 0 0; color: var(--lk-slate); font-size: 0.9375rem; line-height: 1.45; border-top: 2px dashed rgba(231, 235, 240, 0.22); padding-top: 18px; max-width: none; }
.lk-rail-foot b { color: var(--lk-chalk); display: block; }

/* The theme switch: a chalk-edged square on the rail. Sun shows on the board (it offers light), moon in light */
.lk-switch {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; margin: 0;
  border: 2px dashed rgba(231, 235, 240, 0.4); border-radius: var(--lk-cut); background: transparent; color: var(--lk-chalk); cursor: pointer;
}
.lk-switch svg { width: 22px; height: 22px; }
.lk-switch svg path, .lk-switch svg circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-switch .lk-moon { display: none; }
html[data-theme="light"] .lk-switch .lk-sun { display: none; }
html[data-theme="light"] .lk-switch .lk-moon { display: block; }
.lk-rail :focus-visible { outline-color: var(--lk-cyan); }
@media (hover: hover) { .lk-switch:hover { border-style: solid; border-color: var(--lk-chalk); } }
/* On the desktop rail the studio name keeps the concept's size (about 194px) and the head keeps its height, so
   the head reaches into the rail's right gutter and the switch beside the name goes down to the logo's height */
@media (min-width: 961px) {
  .lk-rail-top { margin-right: -22px; }
  .lk-rail-top .lk-logo { width: 194px; }
  .lk-rail-top .lk-switch { width: 32px; height: 32px; }
  .lk-rail-top .lk-switch svg { width: 18px; height: 18px; }
}

/* ---------- Panels: one per task, never one per block ---------- */
.lk-panel {
  --lk-ink: var(--lk-panel-ink); --lk-ink-2: var(--lk-panel-ink-2); --lk-line: var(--lk-panel-line);
  --lk-dash: var(--lk-panel-dash); --lk-focus: var(--lk-panel-focus); --lk-under: var(--lk-panel-under);
  --lk-tick: var(--lk-panel-tick); --lk-act-line: var(--lk-panel-act-line);
  background: var(--lk-panel); color: var(--lk-ink); border-radius: 8px; padding: clamp(20px, 2.4vw, 32px); min-width: 0;
}
html[data-theme="light"] .lk-panel { color-scheme: light; --lk-bad-ground: #0e1116; --lk-bad-ink: #e7ebf0; --lk-check: var(--lk-check-board); }
/* Dark Margin Notes lays a form straight on the work ground, split by chalk dashes, not boxed */
html:not([data-theme="light"]) .lk-panel.flat {
  --lk-ink: #e7ebf0; --lk-ink-2: #838c98; --lk-line: #838c98; --lk-dash: rgba(231, 235, 240, 0.22);
  --lk-focus: #7cf3ff; --lk-under: #7cf3ff; --lk-tick: #4a8fe0; --lk-act-line: #d2c2ff;
  background: none; padding: 0; border-radius: 0;
}
/* On a light chalk panel a heading is Atkinson bold, as Chalk Panels sets it: Cabin Sketch's hatching
   is chalk, and reads as grey dust in Board ink */
html[data-theme="light"] .lk-panel h2 { font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
/* A panel inside a panel is never a second card: the inner one keeps its words and drops its box */
.lk-panel .lk-panel { background: none; padding: 0; border-radius: 0; }
.lk-panel > :first-child { margin-top: 0; }
.lk-panel > :last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.look .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px;
  border-radius: var(--lk-cut); border: 2px solid var(--lk-act-line); background: var(--lk-act); color: var(--lk-act-ink);
  font: inherit; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: none;
}
.look .button.secondary { background: transparent; color: var(--lk-ink); border-color: var(--lk-line); }
.look .button svg { width: 20px; height: 20px; flex: none; }
.look .button svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.look .button:active { transform: none; }
.look .button[disabled], .look .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.look .button[aria-busy="true"] { opacity: 1; cursor: progress; }
.look .button[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: lk-turn 0.9s linear infinite;
}
@keyframes lk-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .look .button[aria-busy="true"]::after { animation: none; border-right-color: currentColor; border-style: dotted; } }
@media (hover: hover) {
  .look .button:hover { background: var(--lk-act-hover); }
  .look .button.secondary:hover { background: transparent; border-color: var(--lk-ink); }
  .look .button[disabled]:hover { background: var(--lk-act); }
  .look .lk-link:hover { text-decoration-thickness: 3px; }
}
.look .lk-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--lk-ink); font: inherit; font-weight: 700; font-size: 0.9375rem;
  text-decoration: underline; text-decoration-color: var(--lk-under); text-underline-offset: 0.3em; text-decoration-thickness: 2px;
}
.look .lk-icon-btn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; padding: 0;
  border-radius: var(--lk-cut); border: 2px solid var(--lk-line); background: transparent; color: var(--lk-ink); cursor: pointer;
}
.look .lk-icon-btn svg { width: 24px; height: 24px; }
.look .lk-icon-btn svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Fields ---------- */
.look label { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.35; margin: 0 0 8px; }
.look input[type="text"], .look input[type="email"], .look input[type="tel"], .look input[type="url"],
.look input[type="number"], .look input[type="password"], .look input[type="search"], .look select, .look textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; margin: 0;
  background: var(--lk-field); color: var(--lk-field-ink); -webkit-text-fill-color: var(--lk-field-ink);
  border: 2px solid var(--lk-field-line); border-radius: 8px; font: inherit; font-size: 1.0625rem; line-height: 1.4;
  appearance: none; -webkit-appearance: none; caret-color: var(--lk-field-ink);
}
.look textarea { min-height: 120px; resize: vertical; }
.look input::placeholder, .look textarea::placeholder { color: var(--lk-field-ph); -webkit-text-fill-color: var(--lk-field-ph); opacity: 1; }
.look input:focus-visible, .look select:focus-visible, .look textarea:focus-visible {
  outline: 2px solid transparent; outline-offset: 0; border-color: var(--lk-blue);
  box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.45);
}
html[data-theme="light"] .look input:focus-visible, html[data-theme="light"] .look select:focus-visible, html[data-theme="light"] .look textarea:focus-visible { border-color: var(--lk-board); box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.55); }
@media (hover: hover) { .look input:hover, .look select:hover, .look textarea:hover { border-color: var(--lk-field-ink); } }
.look input[aria-invalid="true"], .look textarea[aria-invalid="true"] { border-color: var(--lk-field-ink); border-style: dashed; }
.look fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.look legend { padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 1.125rem; }
/* A label holding a box: label.choice (label.inline on the tiles page reads the same) */
.look label.choice, .look label.inline { display: flex; gap: 14px; align-items: flex-start; min-height: 44px; padding: 8px 0; margin: 0; font-weight: 400; font-size: 1.0625rem; cursor: pointer; }
.look input[type="checkbox"], .look input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0;
  border: 2px solid var(--lk-field-line); border-radius: 6px 8px 5px 7px; background: var(--lk-field) center / 20px 17px no-repeat; cursor: pointer;
}
.look input[type="radio"] { border-radius: 50%; }
.look input[type="checkbox"]:checked { background-image: var(--lk-box-check); border-color: var(--lk-field-ink); }
.look input[type="radio"]:checked { border-color: var(--lk-field-ink); box-shadow: inset 0 0 0 5px var(--lk-field), inset 0 0 0 14px var(--lk-field-ink); }
.look input[type="checkbox"]:focus-visible, .look input[type="radio"]:focus-visible { outline: 2px dashed var(--lk-focus); outline-offset: 3px; }

/* ---------- Status lines: always words, with a mark beside them ---------- */
.look .status { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 0; border-radius: 0; background: none; color: var(--lk-ink); font-size: 0.9375rem; font-weight: 700; line-height: 1.45; max-width: 60ch; }
.look .status:empty { display: none; }
.look .status::before { content: none; flex: none; }
.look .status.good::before { content: ""; width: 24px; height: 20px; background: var(--lk-check) center / contain no-repeat; }
.look .status.bad { background: var(--lk-bad-ground); color: var(--lk-bad-ink); padding: 9px 14px; border-radius: 6px 8px 5px 7px; }
.look .status.bad::before {
  content: "!"; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 2px solid currentColor; font-size: 0.8125rem; line-height: 1; font-weight: 700;
}
.look .lk-line { display: flex; gap: 10px; align-items: center; color: var(--lk-ink-2); font-size: 0.9375rem; margin: 10px 0 0; }
.look .lk-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- The neutral client frame: the client's own work, never studio colour ---------- */
.look [data-client-frame] {
  background: var(--lk-frame); border: 1px solid var(--lk-frame-line); border-radius: 10px; color: var(--lk-frame-ink);
  padding: 10px; min-width: 0; box-shadow: none; outline-color: var(--lk-frame-ink);
}
.look [data-client-frame] :focus-visible { outline-color: var(--lk-frame-ink); }
.look .lk-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 10px; color: var(--lk-frame-ink); font-size: 0.8125rem; font-weight: 700; }
.look .lk-dots { display: inline-flex; gap: 6px; }
.look .lk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #4a4e55; }
html[data-theme="light"] .look .lk-dots i { background: #9fa2a7; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1240px) {
  .lk-work { padding-top: 44px; }
}
/* The rail becomes the top strip: logo and switch, the project, the current step circled with its
   note, and a row of ticks for the rest. It scrolls away with the page on purpose */
@media (max-width: 960px) {
  .lk-view { grid-template-columns: minmax(0, 1fr); }
  .lk-rail {
    position: static; height: auto; overflow: visible; padding: 16px 16px 18px; gap: 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    border-right: 0; border-bottom: 2px dashed rgba(231, 235, 240, 0.22);
  }
  .lk-rail-top { grid-column: 1; }
  .lk-logo { width: 150px; }
  .lk-proj { grid-column: 2; grid-row: 1; justify-items: end; text-align: right; }
  .lk-proj b { font-size: 0.9375rem; }
  .lk-proj span { font-size: 0.8125rem; }
  .lk-steps { grid-column: 1 / -1; }
  .lk-steps li:not(.now) { display: none; }
  .lk-steps li.now { grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 18px; }
  .lk-steps li.now .lk-num { display: none; }
  .lk-steps .nm { margin-left: 6px; padding: 6px 12px; font-size: 1.625rem; }
  .lk-note { grid-column: 2; margin: 0; font-size: 1.5625rem; align-self: center; }
  .lk-note svg { display: none; }
  .lk-marks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; color: var(--lk-slate); font-size: 0.875rem; }
  .lk-marks ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .lk-marks li { width: 18px; height: 16px; display: grid; place-items: center; }
  .lk-marks li svg { width: 18px; height: 16px; }
  .lk-marks li svg path { fill: none; stroke: var(--lk-blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .lk-marks li.later::after { content: ""; width: 10px; height: 2px; border-radius: 2px; background: var(--lk-slate); }
  .lk-marks li.now::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--lk-blue); }
  .lk-rail-foot { display: none; }
  .lk-rail-top { gap: 14px; justify-content: flex-start; }
  .lk-work { padding: 36px clamp(16px, 4vw, 40px) 56px; }
}
@media (max-width: 600px) {
  /* A long step name and its note do not share 358px, so the note drops under the ring, whole */
  .lk-steps li.now { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .lk-note { grid-column: 1; white-space: nowrap; margin-left: 28px; }
  .lk-steps li.now[data-note-fits] { grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 14px; }
  .lk-steps li.now[data-note-fits] .lk-note { grid-column: 2; margin-left: 0; font-size: 1.375rem; }
  .lk-steps li.now[data-note-fits="tight"] { column-gap: 10px; }
  .lk-steps li.now[data-note-fits="tight"] .nm { font-size: 1.3125rem; padding: 4px 10px; margin-left: 2px; }
  .lk-steps li.now[data-note-fits="tight"] .lk-note { font-size: 1.125rem; }
  /* The ring runs 14px past the name on its right, so on the chat ("Your story", "one at a time") the note
     keeps clear of it, as the concept leaves space before its note. Scoped to the chat's step: the other
     tight pages' pictures are judged or accepted as they are (2026-10-31) */
  .lk-steps li.now[data-step-id="story"][data-note-fits="tight"] { column-gap: 24px; }
  .lk-work { padding: 28px 16px 48px; }
  .lk-head { margin-bottom: 26px; }
  .look h1 { font-size: 2.25rem; }
  .look .lede { font-size: 1.0625rem; }
  .look .lk-panel { padding: 20px 16px; }
  html:not([data-theme="light"]) .look .lk-panel.flat { padding: 0; }
}

/* ---------- Look builder C addition (phase 8; reconcile with A at merge) ----------
   An input with no type attribute is a text field too (the pay page's name field, the phone-code field
   p7.js and money/common.js build): the same field look as the typed ones above. */
.look input:not([type]) {
  width: 100%; min-height: 52px; padding: 12px 16px; margin: 0; box-sizing: border-box;
  background: var(--lk-field); color: var(--lk-field-ink); -webkit-text-fill-color: var(--lk-field-ink);
  border: 2px solid var(--lk-field-line); border-radius: 8px; font: inherit; font-size: 1.0625rem; line-height: 1.4;
  appearance: none; -webkit-appearance: none; caret-color: var(--lk-field-ink);
}
.look input:not([type]):focus-visible { outline: 2px solid transparent; outline-offset: 0; border-color: var(--lk-blue); box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.45); }
html[data-theme="light"] .look input:not([type]):focus-visible { border-color: var(--lk-board); box-shadow: 0 0 0 3px rgba(74, 143, 224, 0.55); }
@media (hover: hover) { .look input:not([type]):hover { border-color: var(--lk-field-ink); } }
/* With the rail as a top strip, a short page (the build view's first steps) stretched both rows to fill
   the screen's height and left a gap under the strip: the rows now sit at the top */
@media (max-width: 960px) { .lk-view { align-content: start; } }
/* A disabled secondary button (the pay page's Cancel while it works) kept the main button's Lavender on
   hover under its light words (1.4:1, uiscan): it stays unfilled */
@media (hover: hover) { .look .button.secondary[disabled]:hover { background: transparent; } }