/* ============================================================
   funnel.css — plotter-bed overrides for the wizard, order flow,
   and account shell. Loaded LAST on create / order / login /
   reset / app / claim, after their page sheets.

   Scoped to `body` (not `main`) on purpose: the auth pages wrap
   their content in `<div class="auth-shell">`, not `<main>`, so a
   `main`-scoped rule silently misses them. This sheet only loads
   on the six funnel pages, so `body` scope is safe.
   ============================================================ */

/* ============================================================
   Colour migration. The incumbent funnel sheets (create/app/
   capture/order.css) hold ~70 references to the old post-office
   accents. tokens.css shims them onto the plotter palette, but
   its default for `--postal-red` is the ERROR red, so neutral
   chrome (sliders, selected tiles, active nav, the reveal nib,
   the "$4") rendered as if it were an error. Re-point the whole
   alias family at the pen here, then put genuine error / danger
   components back to `--flag` explicitly below.
   ============================================================ */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
  --postal-red: var(--pen);
  --postal-red-dark: var(--pen-deep);
  --postal-red-tint: var(--pen-wash);
  --red-text: var(--pen);
  --airmail-blue: var(--pen);
  --airmail-blue-bright: var(--pen);
  --airmail-blue-tint: var(--pen-wash);
  --link: var(--pen);
}

/* genuine error / warn / destructive: still the flag red */
.form-msg.is-error {
  color: var(--flag) !important;
  background: var(--flag-wash) !important;
  border-color: color-mix(in srgb, var(--flag) 32%, transparent) !important;
}
.note-fit.is-tight { color: var(--flag) !important; }
.hw-cell.is-warn { box-shadow: inset 0 -3px 0 var(--flag) !important; }
.sig-warn { color: var(--flag) !important; }
.card.is-danger { border-color: color-mix(in srgb, var(--flag) 45%, transparent) !important; }
.card.is-danger h2 { color: var(--flag) !important; }
.btn-danger { background: var(--flag) !important; border-color: var(--flag) !important; color: #fff !important; }
.btn-danger:hover { background: color-mix(in srgb, var(--flag) 85%, #000) !important; border-color: color-mix(in srgb, var(--flag) 85%, #000) !important; }
/* dark --flag (#f0655b) is pale — #fff on the base fill is ~3:1; use
   near-black. The :hover fill darkens (#000 mix ≈ #cc564d) where near-black
   drops to 4.3:1, so flip the hover label back to white (≈4.6:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-danger { color: #14161c !important; }
  :root:not([data-theme="light"]) .btn-danger:hover { color: #fff !important; }
}
:root[data-theme="dark"] .btn-danger { color: #14161c !important; }
:root[data-theme="dark"] .btn-danger:hover { color: #fff !important; }
.link-btn.hw-danger, .link-btn.pm-danger, .link-btn.saddr-danger,
.link-btn.sub-danger, .link-btn.adm-danger { --danger-text: var(--flag) !important; color: var(--flag) !important; }
:root[data-theme="dark"] .link-btn.hw-danger, :root[data-theme="dark"] .link-btn.pm-danger,
:root[data-theme="dark"] .link-btn.saddr-danger, :root[data-theme="dark"] .link-btn.sub-danger,
:root[data-theme="dark"] .link-btn.adm-danger { color: var(--flag) !important; }

/* ---- No corner radius, anywhere in the funnel ----------- */
body :where(*), body :where(*)::before, body :where(*)::after { border-radius: 0 !important; }

/* ---- One accent: the pen, never the flag red for chrome -- */
body :where(
  .step-tab.is-current, .wizard-step.is-current, .co-step.is-current,
  .step-rail-item.is-current, .is-current, .side-toggle.is-active,
  .co-side-toggle[aria-selected="true"]
) {
  border-color: var(--pen) !important;
}
body :where(.step-rail-item.is-current)::before,
body :where(.step-tab.is-current)::before,
body :where(.wizard-steps .is-current)::before {
  background: var(--pen) !important;
}
body :where(.step-rail-item.is-current .step-rail-dot, .wizard-step.is-current .wizard-step-num) {
  background: var(--pen) !important;
  border-color: var(--pen) !important;
  color: #fff !important;
}

/* links inside the funnel follow the pen */
body a:not(.btn):not(.wordmark):not(.auth-brand):not(.skip-link) { color: var(--pen); }

/* ---- The pigeon mark: pen blue, never the incumbent red -- */
.wordmark-mark, .auth-brand svg, .badge-pigeon { color: var(--pen) !important; }
.auth-brand { color: var(--ink) !important; text-decoration: none; }

/* ---- Kill the old motif remnants ----------------------- */
.wizard-intro .badge, .create-hero .badge, .co-intro .badge,
.page-hero .badge, .wizard-head .badge,
.postmark, .auth-card::before, .auth-card::after,
.stamp-paper::before,
.dropzone::before, .dropzone::after {
  display: none !important;
}

/* photo dropzone: a dashed "cut here" area that themes properly
   (the incumbent hardcodes an opaque white fill + tape corners) */
.dropzone {
  background: var(--paper) !important;
  border: var(--hair) dashed var(--rule-strong) !important;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--pen) !important; }

/* ---- critique #6 polish ------------------------------------ */
/* the note-step handwritten preview scales to fit, never clips */
#note-preview { overflow: hidden; }
#note-preview svg { width: 100%; height: auto; display: block; max-height: 5.5rem; }
#note-preview svg path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }

/* completed step in the rail: the check replaces the numeral, not glued to it */
.step-rail-item.is-done .step-rail-dot { font-size: 0 !important; color: var(--pen) !important; border-color: var(--pen) !important; }
.step-rail-item.is-done .step-rail-dot::before { font-size: 0.8rem !important; color: var(--pen) !important; }

/* the bipolar Straighten slider: plain track + thumb, no left-anchored fill
   that reads as "adjusted" at 0 degrees */
#pe-straighten { accent-color: var(--ink-faint) !important; }
#pe-straighten::-webkit-slider-runnable-track { background: var(--rule-strong); height: 2px; }
#pe-straighten::-moz-range-track { background: var(--rule-strong); height: 2px; }
#pe-straighten::-moz-range-progress { background: transparent; }

/* address field labels get room off the input edge */
.addr-field .mini-label { display: block; margin-bottom: 0.35rem; }

/* the photo editor canvas keeps the panel's inset instead of going full-bleed */
.photo-editor-stage, #photo-editor-stage { max-width: 100%; }

/* order.html signed-in header: don't overflow a narrow phone */
@media (max-width: 460px) {
  .site-header .btn-ghost { display: none; }
  .site-header-inner .btn.btn-sm { padding-inline: 0.7rem; }
}

/* ---- Panels: ruled onto the bed, not floating on a shadow */
body :where(.step-panel, .co-panel, .wizard-panel, .app-card, .card),
.auth-card {
  background: var(--paper-raised) !important;
  border: var(--hair) solid var(--ink) !important;
  box-shadow: none !important;
}
/* the wizard panel's old kraft-fiber ::before and faint inset ::after are
   motif remnants — the 1px ink border is the whole edge now */
.wizard-panel::before, .wizard-panel::after { display: none !important; }

/* ---- Inputs: plotter fields --------------------------- */
body :where(input, textarea, select) {
  background: var(--paper) !important;
  border: var(--hair) solid var(--rule-strong) !important;
  color: var(--ink) !important;
  font-family: var(--font-body);
}
body :where(input, textarea, select):focus-visible {
  outline: 2px solid var(--pen) !important;
  outline-offset: 1px;
  border-color: var(--pen) !important;
}
body :where(input, textarea)::placeholder { color: var(--ink-faint); }
body :where(input, textarea, select)[aria-invalid="true"] {
  border-color: var(--flag) !important;
}
.field-error {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--flag);
}
.addr-field { position: relative; }
.btn-oauth { border: var(--hair) solid var(--ink) !important; background: var(--paper) !important; color: var(--ink) !important; }
.oauth-sep, .oauth-row .oauth-sep span { font-family: var(--font-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; }

/* ---- The reveal: repaint the void as the bed ----------- */
.creation-overlay {
  overscroll-behavior: contain;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--bed-cell) var(--bed-cell),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--bed-cell) var(--bed-cell),
    var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.creation-overlay :where(h1, h2, h3, h4, p, span, li, dt, dd) { color: var(--ink) !important; }
.creation-overlay :where(.creation-status, #creation-status, .anim-caption) { color: var(--ink-dim) !important; font-family: var(--font-mono); }
/* a thin progress rule under the status line, driven by
   --reveal-progress (0..1) that wizardReveal.js sets on real milestones */
#creation-status {
  position: relative;
  padding-bottom: 0.6rem;
}
#creation-status::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--reveal-progress, 0));
  transform-origin: left;
  background: var(--pen);
  transition: transform 0.4s var(--ease-out);
}
#creation-status::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--rule);
}
@media (prefers-reduced-motion: reduce) { #creation-status::after { transition: none; } }
#creation-skip { color: var(--ink-faint) !important; }
#creation-skip:hover { color: var(--ink) !important; text-decoration: underline; }
.creation-animate::before, .creation-animate .lamp, .postcard-3d .lamp { display: none !important; }
.postcard-face {
  background: var(--paper-raised) !important;
  border: var(--hair) solid var(--ink) !important;
  box-shadow: none !important;
}
.creation-overlay .btn-primary { background: var(--pen) !important; border-color: var(--pen) !important; color: #fff !important; }
/* dark lifts --pen to pale blue; flip the label to near-black for AA, but
   ONLY in real dark state (the media query must gate the no-attribute arm,
   or a light-OS visitor on the default theme gets #14161c on #1f43c8 ~2.2:1) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .creation-overlay .btn-primary { color: #14161c !important; }
}
:root[data-theme="dark"] .creation-overlay .btn-primary { color: #14161c !important; }

/* stroke paths inside any funnel preview svg */
body svg .stroke-ghost-path, .creation-overlay svg .stroke-ghost-path { stroke: var(--ink-faint); opacity: 0.26; }
body svg .stroke-nib, .creation-overlay svg .stroke-nib { fill: var(--pen); stroke: none; }
.postcard-face-back svg path:not(.stroke-ghost-path),
#result-proof-svg path:not(.stroke-ghost-path),
.anim-message-svg path:not(.stroke-ghost-path) {
  stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Postmark / stamp remnants align to the pen -------- */
body :where(.pc-hero-postmark, .anim-postmark) { color: var(--pen) !important; border-color: var(--pen) !important; }
/* the reveal's inline-SVG stamp / pigeon graphics draw with currentColor now */
.anim-stamp, .mail-stamp, .mail-pigeon { color: var(--pen) !important; }

/* ---- order.html: a real gate state while the session /
   human-check resolves, instead of a blank bed ---------- */
.order-gate {
  border: var(--hair) solid var(--ink);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  max-width: 36rem;
}
.order-gate:has(+ #order-wizard:not(.hidden)) { display: none; }
/* seat the Cloudflare Turnstile widget in the gate, not floating mid-page */
#order-gate + * .cf-turnstile, .cf-turnstile { margin-top: var(--sp-4); }

/* ============================================================
   Round 2 — the remaining "old world" tells the shim missed.
   The incumbent create/order sheets still carry dashed cards,
   ruled-notebook strips, #fff hardcodes, a hover tilt, and a
   checkerboard; and the send-and-confirm overlay was never
   touched. Neutralise all of it to the bed.
   ============================================================ */

/* dashed borders mean "travel move" / "cut here" here — never a card edge.
   Repoint every incumbent dashed panel to a solid hairline. */
body :where(.font-option, .hand-traced-summary, .hw-picker, .hw-cell,
  .saved-addr-chip, .pay-summary, .co-summary, .co-produces, .addr-verify,
  .style-more-options, .custom-font-panel, .sig-row, .cart-strip) {
  border-style: solid !important;
  border-color: var(--rule) !important;
}
.font-option.is-selected, .hw-cell.is-selected, .saved-addr-chip.is-selected {
  border-color: var(--pen) !important;
  box-shadow: inset 0 0 0 1px var(--pen) !important;
}
/* the bed is rectangles on a grid — no playful tilt on hover */
.font-option:hover, .hw-cell:hover, .machine-card:hover, .about-fact-card:hover,
.step-tease:hover, .faq-item:hover { transform: none !important; }

/* ruled-notebook preview strips (repeating-linear-gradient + #ded8ca) →
   a plain lifted sheet; the stroke carries the meaning, not fake paper lines */
#note-preview, .note-preview, .result-proof-svg, .result-proof,
.hw-preview, .custom-font-preview, .sig-preview {
  background-image: none !important;
  background-color: var(--paper) !important;
}
.result-proof-svg svg { height: auto !important; max-height: 4rem; width: 100% !important; }

/* #fff hardcodes off the three-value palette */
.postcard-stage, .co-stage, .mail-half, .send-result,
.pc-mock, .review-photo, .review-thumb { background: var(--paper-raised) !important; }

/* the photo-editor checkerboard → a plain recessed well */
.photo-editor-stage, #photo-editor-stage {
  background: var(--paper-sunken) !important;
  background-image: none !important;
}

/* dropzone placeholder: readable in both themes (old sheet had no dark value),
   and inset off the dashed edge */
.dropzone, #photo-drop { background: var(--paper) !important; padding: var(--sp-5) !important; }
.dropzone-placeholder, .dropzone-placeholder p { color: var(--ink-dim) !important; }
.dropzone-placeholder svg, .dropzone-placeholder .hint { color: var(--ink-faint) !important; }

/* current step dot: pen fill + a numeral that clears AA on the pen in both
   themes (dark rendered #e9e8e3 on #e9e8e3 — an invisible "1"; and plain
   #fff on the pale dark --pen is only ~3:1) */
.step-rail-item.is-current .step-rail-dot,
.step-rail-item.is-current > .step-rail-dot {
  background: var(--pen) !important;
  border-color: var(--pen) !important;
  color: #fff !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .step-rail-item.is-current .step-rail-dot,
  :root:not([data-theme="light"]) .step-rail-item.is-current > .step-rail-dot { color: #14161c !important; }
}
:root[data-theme="dark"] .step-rail-item.is-current .step-rail-dot,
:root[data-theme="dark"] .step-rail-item.is-current > .step-rail-dot { color: #14161c !important; }

/* undersized funnel micro-labels → 11px floor */
.oauth-sep, .oauth-row .oauth-sep span, .field-error,
.co-produces strong, .co-summary dt, .co-summary dd { font-size: 0.6875rem !important; }

/* ---- The send-and-confirm overlay: same bed as the reveal ---- */
.send-overlay {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--bed-cell) var(--bed-cell),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--bed-cell) var(--bed-cell),
    var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.send-overlay :where(h1, h2, h3, h4, p, span, li, dt, dd) { color: var(--ink) !important; }
.send-status { color: var(--ink-dim) !important; font-family: var(--font-mono); }
.mail-half {
  border: var(--hair) solid var(--ink) !important;
  box-shadow: 0 1px 0 rgba(28, 27, 24, 0.14), 0 18px 34px -26px rgba(28, 27, 24, 0.4) !important;
}
.mail-scene::before { display: none !important; }
.mail-postmark { border-color: var(--pen) !important; color: var(--pen) !important; }
.mail-pigeon { color: var(--pen) !important; }
.send-result { box-shadow: 0 1px 0 rgba(28, 27, 24, 0.16), 0 20px 38px -28px rgba(28, 27, 24, 0.4) !important; }
.send-done-mark { color: var(--pen) !important; }
.send-done-sub, .send-done-meta { color: var(--ink-dim) !important; }

/* the step rail scrolls horizontally with no cue that steps 4-5 exist.
   Wrap it while the layout is still single-column (< 920px, where the
   wizard grid stacks) so every step stays visible. */
@media (max-width: 919px) {
  .step-rail {
    flex-wrap: wrap !important;
    overflow: visible !important;
  }
  .step-rail-item { flex: 1 1 30% !important; }
}

/* handwriting picker: three distinct default hands up front, the rest
   (two near-identical scripts + trace + own-font) behind one disclosure.
   Bigger tiles so the scripts are actually tellable apart. */
.font-preview-holder { height: 60px !important; }
.font-option.is-selected::after { display: none !important; } /* keep the inset pen ring, drop the squared-circle badge */
.hw-more { margin-top: var(--sp-4); border-top: var(--hair) solid var(--rule); padding-top: var(--sp-3); }
.hw-more > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hw-more > summary::-webkit-details-marker { display: none; }
.hw-more > summary::before { content: "▸"; font-size: 0.7em; color: var(--ink-faint); transition: transform 0.12s var(--ease-out); }
.hw-more[open] > summary::before { transform: rotate(90deg); }
.hw-more[open] > summary { margin-bottom: var(--sp-3); }
.hw-more #font-grid-more { margin-bottom: var(--sp-4); }

/* the reveal payoff screen: one action earns money — make it the sole
   primary, and drop the three alternates to a quiet row beneath it */
.result-actions { flex-direction: column !important; align-items: stretch !important; gap: var(--sp-3) !important; }
#result-send { width: 100%; font-size: 1rem; padding-block: 0.85rem; }
#result-again {
  align-self: center;
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-dim) !important;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.4rem !important;
}
#result-again:hover { color: var(--ink) !important; }
.result-restyle, #result-edit { text-align: center; }