/* ============================================================
   LOOK V4, THE INNER PAGES (docs/LOOK_V4.md section 15, 2026-11-12)
   Loaded last on every page except the home page, so it wins ties with each
   page's own <style>. Colour tokens live in site.css; the shared footer, nav
   underline, plinth and quiet labels are at the end of site.css.

   DECISIONS (rule 2x), one line each:
   HICK'S LAW: each page keeps the one thing it is for and loses the intro
     paragraphs, counts and chips around it, because each was a choice to skip.
   FIGURE-GROUND: pictures go bigger and sit on plain surfaces, no frames,
     because the machine or the part is the subject, not the box around it.
   VON RESTORFF: links are ink with an underline and only the one button per
     screen is orange, because orange means "press this" and nothing else.
   TABULAR FIGURES: prices and counts in Urbanist tabular, because the digits
     line up without the receipt-printer mono.
   CLOSURE (8e): on a phone the Market's next card peeks, because a cut-off
     card says there is more without a label.
   ============================================================ */

/* ---------- shared: links, page titles, quiet text links ---------- */
:is(.cr-by, .cr-note, .ap-out, .nf-hint, .mk-lede, .pr-wrap .fine, .lst-note) a {
  color: var(--ink); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.4); text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  :is(.cr-by, .cr-note, .ap-out, .nf-hint, .mk-lede, .lst-note) a:hover { text-decoration-color: var(--signal-hot); }
}
.v4-textlink {
  min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font: 600 0.9375rem/1 var(--font-ui); color: var(--ink-dim); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.3); text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) { .v4-textlink:hover { color: var(--ink); text-decoration-color: var(--signal-hot); } }
.v4-textlink:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; border-radius: 4px; }

/* every real photo and render gets the one grade (brand 90%, part 04) */
.cr img, .pl-hero-photo { filter: var(--dx-photo); }

/* ---------- MARKET ---------- */
.mk-title { font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.mk-lede { margin-top: 12px; color: var(--ink-mute); font-size: 1.0625rem; }
.mk-filters .filt-search > span:first-child { font: 600 0.8125rem/1.2 var(--font-ui); letter-spacing: 0.01em; text-transform: none; color: var(--ink-mute); }
.mk-filters input[type="search"] { font-size: 1rem; }
/* the two shelves: quiet words with an orange underline, not a filled pill */
.mk-cats { background: none; border: 0; box-shadow: none; padding: 0; gap: 8px; border-bottom: 1px solid var(--dx-line); border-radius: 0; }
.mk-cats::before { content: none; }
.mk-cat { position: relative; height: 44px; padding: 0 8px; border-radius: 10px 10px 0 0; }
.mk-cat[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--signal); }
.mk-cat-n { display: none; }
.mk-cat:focus-visible { outline-color: var(--signal-hot); }
/* the first-10-makers offer: one plain line under the shelves while it is real */
.mk-bonus { margin-top: 16px; background: none; border: 0; box-shadow: none; padding: 0; }
.mk-bonus-row { gap: 10px 14px; }
.mk-bonus-t { font-size: 0.9375rem; color: var(--ink-dim); margin: 0; }
.mk-bonus-n, .mk-bonus-s { display: none !important; }
.mk-bonus-a { color: var(--ink); }
/* the count line keeps only what a search or filter kept, said in words */
.mk-count::before, .mk-count::after { content: none !important; }
.mk-count { font: 400 0.9375rem/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--ink-mute); }
.mk-count:empty { display: none; }
.mk-count b { color: var(--ink); }
/* cards: big renders, three to a row, no check chip (that lives on the build page) */
.mk-shot-pill, .mk-meta .mk-pill { display: none !important; }
.mk-grid, .mk-grid.is-ex { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mk-card { border-radius: 20px; border-color: var(--dx-line); background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .mk-card:hover { border-color: var(--hairline-strong); } }
.mk-ex .mk-shot, .mk-shot { aspect-ratio: 4 / 3; }
.mk-ex .mk-body { padding: 16px 18px 18px; }
.mk-name { font-size: 1.125rem; }
.mk-price { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .mk-grid, .mk-grid.is-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mk-grid, .mk-grid.is-ex {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -16px; padding: 0 16px 8px; scroll-padding-inline: 16px;
  }
  .mk-grid::-webkit-scrollbar { display: none; }
  .mk-grid > * { scroll-snap-align: start; }
  .mk-cats { width: 100%; }
}

/* ---------- PARTS ---------- */
/* the tool-wall photo band behind the title, darkened so the words read */
.pl-hero-photo {
  position: absolute; z-index: -2; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; object-fit: cover; object-position: center 40%;
  pointer-events: none; filter: var(--dx-photo) brightness(0.42);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.pl-hero::before { z-index: -1; }
/* the photo is CC BY-SA, so its credit sits where it is used (G12) */
.pl-photo-credit { position: absolute; right: 0; bottom: 8px; margin: 0; font-size: var(--fs-micro); color: var(--ink-mute); }
.pl-photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pl-h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.pl-lede { font-size: 1.0625rem; color: var(--ink-dim); max-width: 46ch; }
/* two numbers, not four: "37 parts" and "0 supports needed" */
.pl-stats li:nth-child(2), .pl-stats li:nth-child(3) { display: none; }
.pl-stats b { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
/* renders warm a breath, so grey plastic reads as bone filament, never blue */
.pc-img img, .pl-subject img, .ps-poster { filter: sepia(0.28) saturate(0.9) brightness(1.02); }
.pl-start { background: var(--surface); border-color: var(--dx-line); }
.pc-chip { font-family: var(--font-ui) !important; text-transform: none !important; letter-spacing: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; color: var(--ink-mute) !important; font-variant-numeric: tabular-nums; }
.dim.pl-more { background: none !important; }
.dim.pl-more::before, .dim.pl-more::after { content: none !important; }
.ps-sec { font-family: var(--font-ui); text-transform: none; letter-spacing: 0.01em; }

/* ---------- MY BUILDS, LIST, CHECKOUT: the empty plinth ---------- */
.mb-wrap.v4-out .mb-bench { display: none !important; }
.v4-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 40px 0 8px; background: none; border: 0; box-shadow: none; }
.v4-empty p { margin: 0; color: var(--ink-dim); font-size: 1.0625rem; }
.mb-signin.v4-empty { justify-content: center; }
.v4-empty-plinth { display: block; margin: 0 auto 24px; }
.gu-empty-mark { display: none; }

/* ---------- CREDITS: rows, not cards ---------- */
.cr-list { gap: 0; }
.cr { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 20px 0 !important; border-bottom: 1px solid var(--dx-line) !important; }
.cr:first-child { border-top: 1px solid var(--dx-line) !important; }
.cr img { border-radius: 14px; background: var(--surface); }   /* a quiet block the photo's size until it lands (T6) */

/* ---------- 404 ---------- */
.nf-plinth { width: min(380px, 80vw); margin-bottom: 24px; }
.nf-plinth svg { width: 62%; bottom: 34%; color: var(--ink-mute); }
.nf-title { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; }
.nf-path { margin: 12px 0 0; font-size: 0.8125rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.nf-q { margin: 20px 0 0; color: var(--ink-dim); font-size: 1.0625rem; }

/* ---------- APPEAL: plain numerals, ink links ---------- */
.ap-step b { background: none !important; color: var(--ink) !important; flex-basis: 18px !important; height: auto !important; font-size: 0.9375rem !important; }

/* ---------- LEGAL: a readable column ---------- */
.legal-wrap, .tp-wrap { max-width: 680px; }

/* ---------- PRICING (data-conv: plain, one action per plan) ---------- */
body[data-conv] .pr-dim, body[data-conv] .dimline { display: none !important; }
.legal-page { max-width: 680px; }
.legal-page p, .legal-page li { color: var(--ink-dim); }
.legal-page h2 { font-family: var(--font-ui); text-transform: none; letter-spacing: -0.01em; scroll-margin-top: 110px; }
.legal-page a { color: var(--ink); border-bottom-color: rgba(246, 244, 241, 0.4); }
.legal-page a:hover { color: var(--ink); border-color: var(--signal-hot); }
.legal-toc { margin: 8px 0 32px; padding: 8px 0; border-top: 1px solid var(--dx-line); border-bottom: 1px solid var(--dx-line); }   /* inset from both hairlines (impeccable cramped-padding; padding only, the words stay) */
.legal-toc summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--ink); }
.legal-toc summary:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 2px; border-radius: 6px; }
.legal-toc ol { margin: 0 0 16px; padding-left: 20px; columns: 2 240px; column-gap: 32px; }
.legal-toc li { margin: 0 0 6px; break-inside: avoid; font-size: 0.9375rem; }
.legal-toc a { border-bottom: 0; text-decoration: none; color: var(--ink-dim); }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal-hot); }
/* the one recommendation is the Recommended card in the row of plans, so the
   second copy of it above (with its chip and frame corners) and the jump pills
   step aside; each card says its name, price, renewal, what you get, one button */
body[data-conv] #rec, body[data-conv] #jump { display: none !important; }
.pack-unit, .pack-roll, .pack-diff { display: none !important; }
.pack-flag { font-family: var(--font-ui); text-transform: none; letter-spacing: 0.01em; font-weight: 600; }
.pack-amt, .pack-get { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.pr-how { display: inline; }
.pr-how summary { display: inline; cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.4); text-underline-offset: 3px; }
.pr-how[open] summary { display: block; margin: 8px 0; }
.truth-tag { font-family: var(--font-ui) !important; text-transform: none !important; letter-spacing: 0.01em !important; }
.packs-gloss a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.4); text-underline-offset: 3px; }
body[data-conv] .price-hero .truth { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 12px; text-align: center; }
body[data-conv] .price-hero { padding-bottom: 0; }
body[data-conv] #plansSection { padding-top: 56px; }
.pack.best { border-color: var(--dx-line) !important; box-shadow: none !important; }
.pack.best::before, .pack.best::after { content: none !important; }
#exNote { display: none !important; }
body { overflow-x: clip; }

/* ---------- T3: one clean backdrop behind every product picture ---------- */
#state-result #viewer3d, .mk-shot, .mk-ex .mk-shot, .mk-pub .mk-shot, .mb-shot { background: var(--prod-bg) !important; }

/* ---------- T2: a verdict is said in words beside the model, never painted
   behind it. The coloured glow, the lit top edge, the tinted borders and the
   tinted boxes go for every state; the pill keeps its word. ---------- */
.verdict, .wcheck { border-color: var(--hairline) !important; }
.verdict::before, .verdict::after { content: none !important; }
.verdict .v-icon { background: var(--surface-2) !important; border-color: var(--hairline) !important; }
.verdict .v-changes { background: var(--surface-2) !important; border-color: var(--hairline) !important; }
.dt-verdict.concept, .mb-held.concept { background: var(--surface) !important; border-color: var(--hairline) !important; }
.mb-held.concept::before { content: none !important; }
.safety-rating > .rate-red { background: none !important; }
.v-pill { font-family: var(--font-ui) !important; text-transform: none !important; letter-spacing: 0.01em !important; }
/* step numbers are ink, not orange: they are read, not pressed (G8) */
#state-result .steps-list li::before { border-color: var(--hairline-strong) !important; color: var(--ink) !important; background: none !important; box-shadow: none !important; font-variant-numeric: tabular-nums; }
/* links inside the tabs read as ink with an underline; only buttons are orange */
#state-result .dt-panel a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(246, 244, 241, 0.4); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { #state-result .dt-panel a:not(.btn):hover { text-decoration-color: var(--signal-hot); } }

/* ---------- STATE IN WORDS, NOT PAINT (fix 2026-11-12, LOOK_V4 3a + 17, NEIL_V5 T2) ----------
   Market verdicts and My builds states keep their words ("Concept only", "Checked")
   but lose the green, yellow and red fields, borders and dots: one accent on the
   site, and a problem is said beside the model, never painted behind it. */
.dt-verdict, .dt-verdict.pass, .dt-verdict.close, .dt-verdict.concept,
.mb-held, .mb-held.concept { background: var(--surface, rgba(255, 236, 220, 0.03)); border-color: var(--hairline); }
.mb-held.concept::before { background: var(--ink-mute); }
.mk-pill, .mk-pill.pass, .mk-pill.close, .mk-pill.concept,
.mb-pill, .mb-pill.pass, .mb-pill.close, .mb-pill.concept {
  color: var(--ink-dim); border-color: var(--hairline); text-transform: none; letter-spacing: 0; font-family: var(--font-ui);
}
.mk-pill::before, .mb-pill::before { display: none; }
/* the three numbers that decide a verdict, the "To fix" label, Free, the shortfall line and
   the Published badge: words in ink, no green, yellow or red text (the script adds "close"
   or "fails" beside a number that is not a pass, so the colour carried nothing the words do not) */
.dt-key.pass .dt-key-v, .dt-key.warn .dt-key-v, .dt-key.fail .dt-key-v, .dt-key.unknown .dt-key-v { color: var(--ink); }
.dt-key-k { font-family: var(--font-ui); text-transform: none; letter-spacing: 0.01em; }
.dt-verdict .dt-fix b, .dt-free, .dt-cost.is-free b { color: var(--ink); }
.dt-short { color: var(--ink-dim); }
.mb-badge, .mb-badge.draft {
  font-family: var(--font-ui); text-transform: none; letter-spacing: 0.01em;
  color: var(--ink-dim); border-color: var(--hairline-strong); background: rgba(12, 11, 10, 0.78);
}
.mb-msg.ok { color: var(--ink-dim); }

/* ---------- /INVENT COMPOSER = THE HOME PILL (fix 2026-11-12) ----------
   One idea box on the site, not two: a 64 px pill with the dots on the left
   (D3), growing with the idea (the script sets the height). The suggestion
   chips and the half-off-screen side drone go: one idea per screen. */
#state-input #ideaInput {
  min-height: 64px; height: 64px; border-radius: 32px; resize: none;
  padding: 19px 24px 19px 64px; line-height: 1.4; font-weight: 500;
  display: block;   /* an inline-block textarea left an 8 px baseline gap under the pill, so the dots sat low */
}
#state-input #ideaInput.gm-has { padding-bottom: 19px; }
#state-input .idea-box .gm-in-box { left: 12px; bottom: 10px; }
#state-input .spark-row, #state-input .floor-show { display: none; }