/* ============================================================================
   HOOSIER ONLINE — DESIGN SYSTEM · ds.css
   ----------------------------------------------------------------------------
   One stylesheet for every surface. Warm Americana, built like a tool:
   a Filson jacket, a Stanley thermos, a hand-painted sign. No kitsch,
   no gradient slop, no precious print-nostalgia.

   USAGE
   ·  <link rel="stylesheet" href="/ds.css"> AFTER any page-local <style>.
   ·  Light (public/giving) pages:  <body class="ds-page">
   ·  Dark surfaces (Walk-In, HQ):  <body class="ds-page ds-dark">
   ·  Every token and class is prefixed  --ho- / .ds-  so this file can sit
      beside existing page CSS without touching a single hard contract
      (#pgo, .plank, .step.on, lk-<look>, umami hooks all untouched).
   ·  Fonts load in the page <head> (Plus Jakarta Sans, Libre Caslon Display,
      Alfa Slab One, Playfair Display italic). Recommended: self-host the
      woff2s at /fonts/ and drop the Google <link> — key-bearing pages
      (/panel /pool /hq) should make zero third-party requests.

   ACCESSIBILITY FLOORS — verified by computation, do not "tune by eye":
   ·  every text/background pair below ≥ 4.5:1 (AA), large-text/graphic ≥ 3:1
   ·  tap targets ≥ 44px (buttons 48px, money buttons 56px)
   ·  smallest text 12px, and 12px is for eyebrows/labels ONLY
   ·  money/legal copy ≥ 16px, never italic, never --ho-text-3
   ·  states never rely on color alone: every state ships a glyph or a word
   ·  prefers-reduced-motion collapses all movement to plain opacity
   ·  never set user-scalable=no or maximum-scale — zoom is a right

   VERIFIED CONTRAST (WCAG 2.x relative luminance, worst listed surface):
     ink      #28211a on paper/cream/wash/sel/field ..... 12.55–15.60
     text-2   #514535 on paper/cream/wash ................ 7.37–8.56
     text-3   #6b5f4c on paper/cream/wash ................ 4.93–5.73  (meta only)
     brass-t  #7a6226 on paper/cream/wash/sel ............ 4.61–5.35
     oxblood  #7d2a1c on paper/cream/wash ................ 7.48–8.69
     ember-t  #b0341f on paper/cream/wash ................ 4.94–5.75
     ember    #c24a32 on paper/cream ..................... 4.24–4.47  (≥19px bold / graphics only)
     brass    #a08339 on paper/cream ..................... 3.16–3.33  (graphics/ornament only — NEVER text)
     line-2   #877655 on paper/cream/field ............... 3.85–4.34  (component boundaries)
     paper    #f5efe0 on oxblood / oxblood-deep .......... 8.25 / 10.48
     cream    #faf5e8 on ember-t / ember-deep ............ 5.75 / 7.26
     DARK  text #f5efe0 on bg/raise/board ................ 14.53–16.56
     DARK  dim #9b8d72 on bg/raise/board ................. 5.12–5.83
     DARK  brass #c9a24a on bg/raise/board ............... 7.39–7.92
     DARK  ember #e06a4f on bg/raise/board ............... 5.04–5.74
     DARK  line-2 #75674c on bg/raise/board .............. 3.02–3.44
   ========================================================================== */


/* ============================================================================
   1 · TOKENS
   ========================================================================== */
:root{
  /* ---- raw palette (canon) -------------------------------------------- */
  --ho-paper:#f5efe0;        /* page */
  --ho-cream:#faf5e8;        /* raised card */
  --ho-wash:#ede4cf;         /* inset well / banner */
  --ho-field:#fffdf6;        /* input interiors */
  --ho-sel:#f3e8cd;          /* selected fill (always paired with a glyph) */
  --ho-ink:#28211a;
  --ho-oxblood:#7d2a1c;      /* the one red that means "act" */
  --ho-oxblood-deep:#641f13;
  --ho-brass:#a08339;        /* ornament, rules, stars — never text on light */
  --ho-brass-text:#7a6226;   /* brass you can read (4.6:1+) */
  --ho-ember:#c24a32;        /* large numerals / graphics only on light */
  --ho-ember-text:#b0341f;   /* ember you can read (4.9:1+) */
  --ho-ember-deep:#962b18;

  /* ---- dark raw (Walk-In / HQ / the sign board) ------------------------ */
  --ho-night:#131008;
  --ho-night-raise:#1d1712;
  --ho-board-hi:#241d12;     /* painted-board gradient top */
  --ho-board-lo:#191309;     /* painted-board gradient bottom */
  --ho-night-text:#f5efe0;
  --ho-night-dim:#9b8d72;
  --ho-night-brass:#c9a24a;
  --ho-night-ember:#e06a4f;
  --ho-night-edge:#332a1c;   /* decorative hairline on dark */
  --ho-night-line:#75674c;   /* functional boundary on dark (3:1+) */
  --ho-night-ok:#7d9459;     /* HQ-only status green; always with ✓ + word */

  /* ---- semantic: surfaces ---------------------------------------------- */
  --ho-surface:var(--ho-paper);
  --ho-surface-raise:var(--ho-cream);
  --ho-surface-well:var(--ho-wash);
  --ho-surface-field:var(--ho-field);
  --ho-surface-sel:var(--ho-sel);

  /* ---- semantic: text --------------------------------------------------- */
  --ho-text:var(--ho-ink);            /* primary; all money/legal copy */
  --ho-text-2:#514535;                /* supporting copy (7.4:1+) */
  --ho-text-3:#6b5f4c;                /* meta/captions only (4.9:1+) */
  --ho-accent-text:var(--ho-brass-text);
  --ho-hot-text:var(--ho-ember-text); /* countdowns, errors, "finishes it" */
  --ho-link:var(--ho-oxblood);

  /* ---- semantic: lines & ornament -------------------------------------- */
  --ho-hair:#cbbd9c;                  /* decorative hairline */
  --ho-line:#d8ccae;                  /* decorative border */
  --ho-line-2:#877655;                /* functional boundary: inputs, planks */
  --ho-ornament:var(--ho-brass);      /* stars, rivets, double rules */

  /* ---- semantic: actions ------------------------------------------------ */
  --ho-act:var(--ho-oxblood);
  --ho-act-hover:var(--ho-oxblood-deep);
  --ho-act-text:var(--ho-paper);
  --ho-act-edge:var(--ho-oxblood-deep);
  --ho-danger:var(--ho-ember-text);
  --ho-danger-hover:var(--ho-ember-deep);
  --ho-danger-text:var(--ho-cream);
  --ho-danger-edge:#7f2413;

  /* ---- meter ------------------------------------------------------------ */
  --ho-meter-track:#e9dcc0;
  --ho-meter-fill:var(--ho-oxblood);  /* 6.97:1 vs track */

  /* ---- focus ------------------------------------------------------------ */
  --ho-focus:var(--ho-ink);

  /* ---- type -------------------------------------------------------------
     Plus Jakarta Sans everywhere; the three sign faces exist ONLY inside
     .ds-sign (the founder's chosen storefront look). */
  --ho-font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --ho-font-heritage:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --ho-font-slab:'Alfa Slab One','Rockwell','American Typewriter',Georgia,serif;
  --ho-font-classic:'Playfair Display',Georgia,'Times New Roman',serif;

  /* scale — 12px is the floor and it is label-only; body is 17px */
  --ho-fs-0:.75rem;                                   /* 12 · eyebrows/labels ONLY  */
  --ho-fs-1:.875rem;                                  /* 14 · meta, captions        */
  --ho-fs-2:1rem;                                     /* 16 · money/legal floor     */
  --ho-fs-3:1.0625rem;                                /* 17 · body                  */
  --ho-fs-4:1.1875rem;                                /* 19 · lead / big buttons    */
  --ho-fs-5:1.375rem;                                 /* 22 · h3                    */
  --ho-fs-6:clamp(1.55rem,1.2rem + 1.8vw,2rem);       /* h2                         */
  --ho-fs-7:clamp(1.9rem,1.35rem + 2.9vw,2.75rem);    /* h1                         */
  --ho-fs-8:clamp(2.4rem,1.7rem + 3.8vw,3.5rem);      /* display / meter hero       */

  --ho-lh-tight:1.12;
  --ho-lh-snug:1.35;
  --ho-lh-body:1.65;

  /* tracking — caps never below 12px, tracking never past .18em */
  --ho-track-caps:.12em;
  --ho-track-wide:.18em;

  /* ---- space (4px grid) -------------------------------------------------- */
  --ho-sp-1:4px;  --ho-sp-2:8px;   --ho-sp-3:12px; --ho-sp-4:16px;
  --ho-sp-5:20px; --ho-sp-6:24px;  --ho-sp-7:32px; --ho-sp-8:40px;
  --ho-sp-9:48px; --ho-sp-10:64px; --ho-sp-11:96px;

  /* ---- radius — tools, not pills ---------------------------------------- */
  --ho-r-1:3px;      /* buttons, inputs, chips  */
  --ho-r-2:6px;      /* cards, planks, the sign */
  --ho-r-3:10px;     /* large panels            */
  --ho-r-round:999px;/* reserved: count badges  */

  /* ---- elevation — ink-tinted, low, honest ------------------------------- */
  --ho-shadow-1:0 1px 2px rgba(40,33,26,.10),0 1px 0 rgba(40,33,26,.04);
  --ho-shadow-2:0 2px 4px rgba(40,33,26,.08),0 8px 20px -8px rgba(40,33,26,.18);
  --ho-shadow-3:0 4px 10px rgba(40,33,26,.10),0 18px 40px -16px rgba(40,33,26,.30);
  --ho-shadow-board:0 24px 50px -30px rgba(40,33,26,.6);
  --ho-shadow-press:inset 0 2px 3px rgba(40,33,26,.18);

  /* ---- motion — confirmation, not spectacle ------------------------------ */
  --ho-ease:cubic-bezier(.22,1,.36,1);
  --ho-ease-io:cubic-bezier(.45,0,.25,1);
  --ho-dur-1:90ms;    /* feedback: press, tick        */
  --ho-dur-2:180ms;   /* hover, small reveals         */
  --ho-dur-3:280ms;   /* screen-level changes (max)   */
  --ho-dur-4:600ms;   /* one-shot: meter fill, reveal */

  /* ---- z ------------------------------------------------------------------ */
  --ho-z-raise:10; --ho-z-sticky:20; --ho-z-toast:50; --ho-z-grain:40;
}

/* ---- dark surface remap (Walk-In, HQ) — components below need no forks --- */
.ds-dark{
  --ho-surface:var(--ho-night);
  --ho-surface-raise:var(--ho-night-raise);
  --ho-surface-well:var(--ho-night-raise);
  --ho-surface-field:var(--ho-night-raise);
  --ho-surface-sel:#2a2214;

  --ho-text:var(--ho-night-text);
  --ho-text-2:#cfc2a6;
  --ho-text-3:var(--ho-night-dim);
  --ho-accent-text:var(--ho-night-brass);
  --ho-hot-text:var(--ho-night-ember);
  --ho-link:var(--ho-night-brass);

  --ho-hair:var(--ho-night-edge);
  --ho-line:var(--ho-night-edge);
  --ho-line-2:var(--ho-night-line);
  --ho-ornament:var(--ho-night-brass);

  /* the lit button: on a dark porch, the action is the bright thing */
  --ho-act:var(--ho-night-text);
  --ho-act-hover:#ffffff;
  --ho-act-text:var(--ho-ink);
  --ho-act-edge:var(--ho-night-text);
  --ho-danger-edge:var(--ho-night-ember);

  --ho-meter-track:#2a2214;
  --ho-meter-fill:var(--ho-night-brass);

  --ho-focus:var(--ho-night-text);

  --ho-shadow-1:0 1px 2px rgba(0,0,0,.5);
  --ho-shadow-2:0 2px 6px rgba(0,0,0,.45),0 10px 24px -10px rgba(0,0,0,.6);
  --ho-shadow-3:0 6px 14px rgba(0,0,0,.5),0 22px 48px -16px rgba(0,0,0,.7);
}


/* ============================================================================
   2 · BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

.ds-page{
  margin:0;
  background:var(--ho-surface);
  color:var(--ho-text);
  font:400 var(--ho-fs-3)/var(--ho-lh-body) var(--ho-font-sans);
}
body.ds-page{min-height:100vh}
.ds-dark.ds-page,.ds-dark .ds-page{-webkit-font-smoothing:antialiased}

.ds-page ::selection{background:var(--ho-ink);color:var(--ho-paper)}
.ds-dark.ds-page ::selection,.ds-dark ::selection{background:var(--ho-night-text);color:var(--ho-ink)}

.ds-page img,.ds-page svg{max-width:100%;height:auto}
/* zero-specificity base resets — any .ds-* component rule outranks them */
:where(.ds-page a){color:var(--ho-link);text-underline-offset:3px}
:where(.ds-page button){font:inherit;color:inherit}

/* paper grain — decorative; sits above content, never intercepts input */
.ds-grain{position:relative}
.ds-grain::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--ho-z-grain);
  opacity:.3;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ds-dark.ds-grain::before,.ds-dark .ds-grain::before{opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .62 0 0 0 0 .45 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* focus — one ring everywhere, visible on any surface */
.ds-page :focus{outline:none}
.ds-page :focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}

/* ============================================================================
   3 · TYPE & TEXT
   ========================================================================== */
.ds-display{font-size:var(--ho-fs-8);font-weight:800;line-height:var(--ho-lh-tight);letter-spacing:-.015em}
.ds-h1{font-size:var(--ho-fs-7);font-weight:800;line-height:var(--ho-lh-tight);letter-spacing:-.01em;margin:0}
.ds-h2{font-size:var(--ho-fs-6);font-weight:800;line-height:1.2;letter-spacing:-.005em;margin:0}
.ds-h3{font-size:var(--ho-fs-5);font-weight:700;line-height:var(--ho-lh-snug);margin:0}
.ds-lede{font-size:var(--ho-fs-4);color:var(--ho-text-2);line-height:1.55}
.ds-meta{font-size:var(--ho-fs-1);color:var(--ho-text-3)}

/* THE sanctioned tracked-caps label. 12px/700 minimum — nothing smaller,
   nothing wider-tracked, and never for sentences or money copy. */
.ds-eyebrow{
  display:inline-block;font-size:var(--ho-fs-0);font-weight:700;line-height:1.3;
  text-transform:uppercase;letter-spacing:var(--ho-track-caps);color:var(--ho-accent-text);
}
.ds-eyebrow--ink{color:var(--ho-text)}

/* "Fine print" that is not fine: the floor for anything about money or terms.
   16px, upright, full-strength ink. Use --ho-text-2 only for asides. */
.ds-fine{font-size:var(--ho-fs-2);font-style:normal;color:var(--ho-text);line-height:1.6}
.ds-fine--soft{color:var(--ho-text-2)}

/* numbers: proportional for heroes, tabular ONLY where digits must align */
.ds-num{font-weight:800;letter-spacing:-.01em}
.ds-tabular{font-variant-numeric:tabular-nums}

.ds-good{color:var(--ho-accent-text)}   /* always beside a ★ or a word   */
.ds-hot{color:var(--ho-hot-text)}       /* always beside a clock or word */

/* ============================================================================
   4 · LAYOUT
   ========================================================================== */
.ds-container{width:100%;max-width:640px;margin-inline:auto;padding-inline:var(--ho-sp-5)}
.ds-container--wide{max-width:1080px}
.ds-container--hall{max-width:840px}

.ds-stack>*+*{margin-top:var(--ho-sp-6)}
.ds-stack--tight>*+*{margin-top:var(--ho-sp-3)}
.ds-stack--loose>*+*{margin-top:var(--ho-sp-8)}

.ds-row{display:flex;flex-wrap:wrap;gap:var(--ho-sp-3);align-items:center}
.ds-row--between{justify-content:space-between}
.ds-row--center{justify-content:center}

.ds-card{
  background:var(--ho-surface-raise);border:1px solid var(--ho-line);
  border-radius:var(--ho-r-2);padding:var(--ho-sp-6);box-shadow:var(--ho-shadow-1);
}
.ds-card--framed{border-color:var(--ho-text)}

/* double rule with a brass star — the section divider of the house */
.ds-rule{border:0;border-top:3px double var(--ho-hair);margin:var(--ho-sp-7) 0}
.ds-rule--star{position:relative;overflow:visible}
.ds-rule--star::after{
  content:"✶";position:absolute;top:0;left:50%;transform:translate(-50%,-58%);
  background:var(--ho-surface);padding:0 var(--ho-sp-3);
  color:var(--ho-ornament);font-size:.9rem;line-height:1;
}

/* wide content scrolls inside itself; the page never scrolls sideways */
.ds-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================================
   5 · A11Y UTILITIES
   ========================================================================== */
.ds-sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.ds-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ho-ink);color:var(--ho-paper);
  padding:var(--ho-sp-3) var(--ho-sp-5);font-weight:700;text-decoration:none;
  border-radius:0 0 var(--ho-r-1) 0;
}
.ds-skip:focus-visible{left:0}

/* expands a small visual control to a 44px legal target */
.ds-hit{position:relative}
.ds-hit::after{content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;width:max(100%,44px);height:max(100%,44px)}

/* ============================================================================
   6 · BUTTONS
   ----------------------------------------------------------------------------
   Sentence case, bold, 17px+. Money words are spelled out, not abbreviated.
   Caps live in eyebrows — not on the button a grandmother has to trust.
   ========================================================================== */
.ds-btn{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.7em 1.5em;
  border:1.5px solid transparent;border-radius:var(--ho-r-1);
  font:700 var(--ho-fs-3)/1.2 var(--ho-font-sans);letter-spacing:.01em;
  text-decoration:none;text-align:center;cursor:pointer;
  color:var(--ho-text);background:transparent;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:background-color var(--ho-dur-2) var(--ho-ease),
             border-color     var(--ho-dur-2) var(--ho-ease),
             color            var(--ho-dur-2) var(--ho-ease),
             box-shadow       var(--ho-dur-2) var(--ho-ease),
             transform        var(--ho-dur-1) var(--ho-ease);
}
.ds-btn:active{transform:translateY(1px);box-shadow:var(--ho-shadow-press)}

.ds-btn--primary{
  background:var(--ho-act);color:var(--ho-act-text);
  border-color:var(--ho-act-edge);box-shadow:var(--ho-shadow-1);
}
.ds-btn--primary:hover{background:var(--ho-act-hover);border-color:var(--ho-act-hover)}

.ds-btn--ghost{border-color:var(--ho-line-2);color:var(--ho-text);background:transparent}
.ds-btn--ghost:hover{border-color:var(--ho-text);background:rgba(40,33,26,.05)}
.ds-dark .ds-btn--ghost:hover{background:rgba(245,239,224,.07)}

.ds-btn--danger{
  background:var(--ho-danger);color:var(--ho-danger-text);border-color:var(--ho-danger-edge);
}
.ds-btn--danger:hover{background:var(--ho-danger-hover)}

.ds-btn--quiet{
  min-height:44px;padding:.5em .8em;font-weight:600;
  color:var(--ho-link);text-decoration:underline;text-underline-offset:3px;
}
.ds-btn--quiet:hover{color:var(--ho-text)}

/* the money button: one per screen, bigger than everything near it */
.ds-btn--big{min-height:56px;font-size:var(--ho-fs-4);padding:.75em 1.9em}
.ds-btn--block{display:flex;width:100%}

.ds-btn[disabled],.ds-btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
}

/* ============================================================================
   7 · FORM FIELDS
   ----------------------------------------------------------------------------
   Real labels above the field — placeholders are examples, never labels.
   Inputs never smaller than 17px (also stops iOS zoom-jump).
   Pair with autocomplete / inputmode / autocapitalize in the HTML.
   ========================================================================== */
.ds-field{margin:0 0 var(--ho-sp-5)}
.ds-field>label,.ds-label{
  display:block;margin-bottom:var(--ho-sp-2);
  font-size:var(--ho-fs-1);font-weight:700;color:var(--ho-text);letter-spacing:.02em;
}
.ds-field-hint{display:block;margin-top:2px;margin-bottom:var(--ho-sp-2);font-size:var(--ho-fs-1);font-weight:400;color:var(--ho-text-3)}

.ds-input,.ds-select,.ds-textarea{
  -webkit-appearance:none;appearance:none;
  width:100%;min-height:50px;padding:12px 14px;
  background:var(--ho-surface-field);color:var(--ho-text);
  border:1.5px solid var(--ho-line-2);border-radius:var(--ho-r-1);
  font:500 var(--ho-fs-3)/1.4 var(--ho-font-sans);
  transition:border-color var(--ho-dur-2) var(--ho-ease),box-shadow var(--ho-dur-2) var(--ho-ease);
}
.ds-input::placeholder,.ds-textarea::placeholder{color:#7c6e55;opacity:1;font-weight:400}
.ds-dark .ds-input::placeholder,.ds-dark .ds-textarea::placeholder{color:var(--ho-night-dim)}
.ds-input:focus-visible,.ds-select:focus-visible,.ds-textarea:focus-visible{
  border-color:var(--ho-act);outline:3px solid var(--ho-focus);outline-offset:2px;
}
.ds-dark .ds-input:focus-visible,.ds-dark .ds-select:focus-visible,.ds-dark .ds-textarea:focus-visible{border-color:var(--ho-accent-text)}
.ds-textarea{min-height:112px;resize:vertical}
.ds-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2328211a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px;
}
.ds-dark .ds-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f5efe0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E")}

/* error state: thicker hot border + a spoken message, never color alone */
.ds-input.is-err,.ds-select.is-err,.ds-textarea.is-err{border-color:var(--ho-hot-text);border-width:2px}
.ds-field-err{
  display:flex;align-items:flex-start;gap:8px;margin-top:var(--ho-sp-2);
  font-size:var(--ho-fs-2);font-weight:700;color:var(--ho-hot-text);
}
.ds-field-err::before{
  content:"!";flex:0 0 auto;width:20px;height:20px;margin-top:1px;
  border:2px solid currentColor;border-radius:50%;
  font:800 .8rem/16px var(--ho-font-sans);text-align:center;
}

/* one-tap choice chips (relationship: Family / Friend / Neighbor / Church / Work)
   markup: <label class="ds-choice"><input type="radio" name="rel"><span>Family</span></label> */
.ds-choices{display:flex;flex-wrap:wrap;gap:var(--ho-sp-2)}
.ds-choice{position:relative;display:inline-flex}
.ds-choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:.00001;cursor:pointer}
.ds-choice span{
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:8px 16px;
  background:var(--ho-surface-raise);border:1.5px solid var(--ho-line-2);border-radius:var(--ho-r-1);
  font-size:var(--ho-fs-2);font-weight:600;color:var(--ho-text);
  transition:border-color var(--ho-dur-2) var(--ho-ease),background-color var(--ho-dur-2) var(--ho-ease);
}
.ds-choice input:checked+span{background:var(--ho-surface-sel);border-color:var(--ho-text);box-shadow:inset 0 0 0 1px var(--ho-text)}
.ds-choice input:checked+span::before{content:"✓";font-weight:800}
.ds-choice input:focus-visible+span{outline:3px solid var(--ho-focus);outline-offset:2px}

/* the house checkbox — a real 26px box a shaky thumb can find */
.ds-checkbox{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;
  width:26px;height:26px;margin:2px 0 0;
  background:var(--ho-surface-field);border:2px solid var(--ho-text);border-radius:var(--ho-r-1);
  cursor:pointer;display:inline-grid;place-content:center;
}
.ds-checkbox:checked{
  background-color:var(--ho-act);border-color:var(--ho-act-edge);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23f5efe0' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
  background-size:18px;background-position:center;background-repeat:no-repeat;
}
.ds-dark .ds-checkbox:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2328211a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E");
}
.ds-checkbox:focus-visible{outline:3px solid var(--ho-focus);outline-offset:2px}

/* ============================================================================
   8 · THE ACKNOWLEDGEMENT — "The whole deal, plain."
   ----------------------------------------------------------------------------
   The most honest paragraph on the site, staged as the trust centerpiece.
   Sits ABOVE the pay button. Each risk is paired with its counterweight.
   Never pre-ticked. Never smaller than 16px. Never italic.
   markup:
     <section class="ds-ack">
       <h3 class="ds-ack-title">The whole deal, plain</h3>
       <ul class="ds-ack-list">
         <li class="ds-ack-item"><b>Not refundable.</b> It never sits in a pot —
             it becomes a logo, a site, an LLC inside 24 hours, on a clock you can watch.</li>
       </ul>
       <label class="ds-ack-check">
         <input type="checkbox" class="ds-checkbox" id="ack">
         <span class="ds-ack-words">I read the whole deal and I'm putting this board up anyway.</span>
       </label>
       <p class="ds-field-err" id="perr" role="alert" hidden>…</p>
     </section>
   ========================================================================== */
.ds-ack{
  background:var(--ho-surface-raise);
  border:2px solid var(--ho-text);border-radius:var(--ho-r-2);
  padding:var(--ho-sp-5) var(--ho-sp-5) var(--ho-sp-4);
  box-shadow:var(--ho-shadow-1);
}
.ds-ack-title{
  margin:0 0 var(--ho-sp-3);font-size:var(--ho-fs-4);font-weight:800;color:var(--ho-text);
}
.ds-ack-title::after{content:"";display:block;width:44px;height:3px;background:var(--ho-ornament);margin-top:8px}
.ds-ack-list{list-style:none;margin:0 0 var(--ho-sp-4);padding:0}
.ds-ack-item{
  position:relative;padding:6px 0 6px 22px;
  font-size:var(--ho-fs-2);font-style:normal;color:var(--ho-text);line-height:1.6;
}
.ds-ack-item::before{content:"—";position:absolute;left:0;top:6px;color:var(--ho-ornament)}
.ds-ack-item b{font-weight:800}
.ds-ack-check{
  display:flex;gap:var(--ho-sp-3);align-items:flex-start;
  min-height:48px;padding:var(--ho-sp-3);margin-inline:calc(-1 * var(--ho-sp-3));
  border-radius:var(--ho-r-1);cursor:pointer;
}
.ds-ack-check:hover{background:var(--ho-surface-sel)}
.ds-ack-words{font-size:var(--ho-fs-2);font-weight:600;color:var(--ho-text);line-height:1.5}

/* ============================================================================
   9 · PLANKS — the six boards ($25 … $500) + "cap the gate"
   ----------------------------------------------------------------------------
   Real <button>s. Selection = border + ✓ word, never a tint alone.
   markup:
     <div class="ds-planks">
       <button type="button" class="ds-plank" aria-pressed="false">
         <span class="ds-plank-amt ds-num">$100</span>
         <span class="ds-plank-name">Beam</span>
         <span class="ds-plank-flag">most picked</span>   ← only when true
       </button>
       <button type="button" class="ds-plank ds-plank--cap" aria-pressed="false">
         <span class="ds-plank-amt ds-num">$37</span>
         <span class="ds-plank-name">Caps the roof</span>
       </button>
     </div>
   ========================================================================== */
.ds-planks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:12px} /* padding clears the “most picked” flag */
@media (min-width:760px){.ds-planks{grid-template-columns:repeat(6,1fr)}}

.ds-plank{
  -webkit-appearance:none;appearance:none;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:76px;padding:12px 6px;
  background:var(--ho-surface-raise);color:var(--ho-text);
  border:1.5px solid var(--ho-line-2);border-radius:var(--ho-r-2);
  box-shadow:0 2px 0 rgba(40,33,26,.12);
  cursor:pointer;touch-action:manipulation;
  transition:border-color var(--ho-dur-2) var(--ho-ease),
             background-color var(--ho-dur-2) var(--ho-ease),
             transform var(--ho-dur-1) var(--ho-ease),
             box-shadow var(--ho-dur-1) var(--ho-ease);
}
.ds-plank:hover{border-color:var(--ho-text)}
.ds-plank:active{transform:translateY(2px);box-shadow:0 0 0 rgba(40,33,26,.12)}

.ds-plank-amt{font-size:var(--ho-fs-5);line-height:1.1}
.ds-plank-name{
  font-size:var(--ho-fs-0);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ho-track-caps);color:var(--ho-accent-text);
}
.ds-plank-flag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ho-ink);color:var(--ho-paper);border-radius:var(--ho-r-1);
  padding:2px 8px 1px;font-size:var(--ho-fs-0);font-weight:700;letter-spacing:.06em;
}
.ds-dark .ds-plank-flag{background:var(--ho-night-brass);color:var(--ho-ink)}

.ds-plank.is-sel,.ds-plank[aria-pressed="true"]{
  background:var(--ho-surface-sel);border-color:var(--ho-text);
  box-shadow:inset 0 0 0 1.5px var(--ho-text),0 2px 0 rgba(40,33,26,.12);
}
/* selection carries a word, on its own quiet line — never a tint alone */
.ds-plank.is-sel::after,.ds-plank[aria-pressed="true"]::after{
  content:"✓ picked";margin-top:2px;
  font-size:var(--ho-fs-0);font-weight:800;letter-spacing:.02em;color:var(--ho-text);
}

/* the completion plank — exact dollars to cross the next gate; render FIRST */
.ds-plank--cap{
  grid-column:1 / -1;flex-direction:row;justify-content:center;gap:12px;min-height:64px;
  border:2px solid var(--ho-hot-text);
}
.ds-plank--cap .ds-plank-amt{font-size:var(--ho-fs-5);color:var(--ho-hot-text)}
.ds-plank--cap .ds-plank-name{color:var(--ho-hot-text);letter-spacing:.08em}
.ds-plank--cap.is-sel,.ds-plank--cap[aria-pressed="true"]{
  border-color:var(--ho-text);box-shadow:inset 0 0 0 1.5px var(--ho-text),0 2px 0 rgba(40,33,26,.12);
}

/* ============================================================================
   10 · METER — the nearest finish line is the hero
   ----------------------------------------------------------------------------
   Once any money is in, the big number is "$N to go", not a low total.
   markup:
     <div class="ds-meter">
       <div class="ds-meter-head">
         <span class="ds-meter-hero ds-num">$37</span>
         <span class="ds-meter-herolabel">to the Roof — cards, flyer, yard sign</span>
       </div>
       <div class="ds-meter-track" role="progressbar" aria-valuemin="0"
            aria-valuemax="1400" aria-valuenow="803"
            aria-valuetext="$803 of $1,400 raised. $37 more reaches the Roof gate.">
         <div class="ds-meter-fill" style="--pct:57.4%"></div>
         <span class="ds-meter-gate is-passed" style="--at:25%"></span>
         <span class="ds-meter-gate is-passed" style="--at:45%"></span>
         <span class="ds-meter-gate is-next"   style="--at:60%"></span>
         <span class="ds-meter-gate" style="--at:75%"></span>
         <span class="ds-meter-gate" style="--at:88%"></span>
       </div>
       <p class="ds-meter-sub">$803 of $1,400 on the barn · <b>$37 caps the roof</b></p>
     </div>
   ========================================================================== */
.ds-meter{margin:0}
.ds-meter-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:var(--ho-sp-3)}
.ds-meter-hero{font-size:var(--ho-fs-8);line-height:1;color:var(--ho-text)}
.ds-meter-herolabel{font-size:var(--ho-fs-3);font-weight:600;color:var(--ho-text-2);max-width:22em}

.ds-meter-track{
  position:relative;height:20px;margin-top:18px; /* clearance for gate stars */
  background:var(--ho-meter-track);
  border:1px solid var(--ho-line-2);border-radius:var(--ho-r-1);
}
.ds-meter-fill{
  position:absolute;inset:2px auto 2px 2px;width:calc(var(--pct,0%) - 4px);
  min-width:2px;max-width:calc(100% - 4px);
  background:var(--ho-meter-fill);border-radius:2px;
  transition:width var(--ho-dur-4) var(--ho-ease);
}
/* gate ticks; passed gates wear the brass star */
.ds-meter-gate{position:absolute;top:-5px;bottom:-5px;left:var(--at);width:2px;background:var(--ho-line-2)}
.ds-meter-gate.is-passed{background:var(--ho-text)}
.ds-meter-gate.is-passed::after{
  content:"★";position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  color:var(--ho-ornament);font-size:.8rem;line-height:1;
}
.ds-meter-gate.is-next{width:3px;background:var(--ho-hot-text)}
.ds-meter-gate.is-next::after{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ho-hot-text);
}
.ds-meter-sub{margin:var(--ho-sp-3) 0 0;font-size:var(--ho-fs-2);color:var(--ho-text-2)}
.ds-meter-sub b{color:var(--ho-text);font-weight:800}

/* small in-gate progress bar ("$173 of $210 through this gate") */
.ds-meter-mini{position:relative;height:8px;background:var(--ho-meter-track);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-1)}
.ds-meter-mini i{position:absolute;inset:1px auto 1px 1px;width:calc(var(--pct,0%) - 2px);min-width:2px;max-width:calc(100% - 2px);background:var(--ho-meter-fill);border-radius:2px}

/* ============================================================================
   11 · GATES — the ladder of named deliverables
   ----------------------------------------------------------------------------
   Three states, each carrying a WORD, not just a color:
     .is-built   ★ node, "BUILT" stamp + real artifacts
     .is-shop    "IN THE SHOP" + live countdown (a real clock on real work)
     .is-locked  "unlocks at N%" — quiet, still legible
   markup:
     <ol class="ds-gates">
       <li class="ds-gate is-built">
         <span class="ds-gate-node" aria-hidden="true">★</span>
         <div class="ds-gate-body">
           <p class="ds-gate-meta"><span class="ds-gate-state">Built</span> 25% · $350</p>
           <h3 class="ds-gate-title">The Foundation</h3>
           <p class="ds-gate-what">Name, logo, brand kit, sign art</p>
           <p class="ds-stamp">★ Built in 3 hours</p>
           <div class="ds-gate-files">
             <a class="ds-artifact" href="…">the logo — see it</a>
           </div>
         </div>
       </li>
       <li class="ds-gate is-shop">
         <span class="ds-gate-node" aria-hidden="true"></span>
         <div class="ds-gate-body">
           <p class="ds-gate-meta"><span class="ds-gate-state">In the shop</span> 60% · $210</p>
           <h3 class="ds-gate-title">The Roof</h3>
           <p class="ds-count ds-tabular">due in 14:02:11</p>
           <p class="ds-gate-note">logo redraw — new ETA 9pm</p>  ← required if late
         </div>
       </li>
       <li class="ds-gate is-locked"> … <p class="ds-gate-when">unlocks at 75% — $210 to go</p>
     </ol>
   ========================================================================== */
.ds-gates{list-style:none;margin:0;padding:0}
.ds-gate{position:relative;display:grid;grid-template-columns:36px 1fr;gap:0 var(--ho-sp-3);padding:var(--ho-sp-4) 0}
.ds-gate+.ds-gate{border-top:1px solid var(--ho-line)}
/* the rail */
.ds-gate::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:var(--ho-line)}
.ds-gate:first-child::before{top:var(--ho-sp-4)}
.ds-gate:last-child::before{bottom:auto;height:var(--ho-sp-4)}

.ds-gate-node{
  position:relative;z-index:1;grid-row:1 / span 9;
  width:28px;height:28px;margin-top:2px;
  display:inline-grid;place-content:center;
  background:var(--ho-surface);border:2px solid var(--ho-line-2);border-radius:50%;
  font-size:.85rem;line-height:1;color:var(--ho-text);
}
.ds-gate-body{grid-column:2;min-width:0}
.ds-gate-meta{margin:0 0 2px;font-size:var(--ho-fs-1);font-weight:600;color:var(--ho-text-3)}
.ds-gate-state{
  display:inline-block;margin-right:8px;padding:2px 8px 1px;
  border:1px solid currentColor;border-radius:var(--ho-r-1);
  font-size:var(--ho-fs-0);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
}
.ds-gate-title{margin:0;font-size:var(--ho-fs-4);font-weight:800;color:var(--ho-text)}
.ds-gate-what{margin:2px 0 0;font-size:var(--ho-fs-2);color:var(--ho-text-2)}
.ds-gate-amt{font-weight:800;color:var(--ho-text)}

/* built */
.ds-gate.is-built .ds-gate-node{background:var(--ho-brass);border-color:var(--ho-brass);color:var(--ho-ink)}
.ds-dark .ds-gate.is-built .ds-gate-node{background:var(--ho-night-brass);border-color:var(--ho-night-brass)}
.ds-gate.is-built .ds-gate-state{color:var(--ho-accent-text)}
.ds-stamp{margin:6px 0 0;font-size:var(--ho-fs-1);font-weight:700;color:var(--ho-accent-text)}
.ds-gate-files{display:flex;flex-wrap:wrap;gap:var(--ho-sp-2);margin-top:var(--ho-sp-2)}
.ds-artifact{
  display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:8px 14px;
  background:var(--ho-surface-raise);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-1);
  font-size:var(--ho-fs-1);font-weight:600;color:var(--ho-link);
  text-decoration:underline;text-underline-offset:3px;
}
.ds-artifact:hover{border-color:var(--ho-text);color:var(--ho-text)}

/* in the shop */
.ds-gate.is-shop .ds-gate-node{border-color:var(--ho-hot-text)}
.ds-gate.is-shop .ds-gate-node::after{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--ho-hot-text);
  animation:ds-pulse 1.6s var(--ho-ease-io) infinite;
}
.ds-gate.is-shop .ds-gate-state{color:var(--ho-hot-text)}
.ds-count{margin:6px 0 0;font-size:var(--ho-fs-2);font-weight:800;color:var(--ho-hot-text)}
.ds-gate-note{
  margin:6px 0 0;padding:8px 12px;
  background:var(--ho-surface-well);border-left:3px solid var(--ho-hot-text);border-radius:0 var(--ho-r-1) var(--ho-r-1) 0;
  font-size:var(--ho-fs-2);color:var(--ho-text);
}

/* locked — quiet but never illegible */
.ds-gate.is-locked .ds-gate-node{border-style:dashed;background:transparent}
.ds-gate.is-locked .ds-gate-title{color:var(--ho-text-2)}
.ds-gate.is-locked .ds-gate-state{color:var(--ho-text-3)}
.ds-gate-when{margin:2px 0 0;font-size:var(--ho-fs-1);font-weight:600;color:var(--ho-text-3)}

@keyframes ds-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ============================================================================
   12 · CREW WALL — names, kin, dollars: the proof and the anchor
   ----------------------------------------------------------------------------
   markup:
     <ul class="ds-wall">
       <li class="ds-crew">
         <b class="ds-crew-name">Mary</b>
         <span class="ds-crew-rel">Sister</span>
         <span class="ds-crew-amt ds-num">$100</span>
       </li>
       <li class="ds-crew ds-crew--star"> … <span class="ds-crew-cap">★ capped the roof</span></li>
       <li class="ds-crew is-promised"> … <span class="ds-crew-rel">promised</span></li>
       <li class="ds-crew is-you"> …  ← the visitor's own board, starred client-side
     </ul>
   ========================================================================== */
.ds-wall{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--ho-sp-2)}
.ds-crew{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;
  background:var(--ho-surface-raise);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-1);
  font-size:var(--ho-fs-2);
}
.ds-crew-name{font-weight:800;color:var(--ho-text)}
.ds-crew-rel{
  font-size:var(--ho-fs-0);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ho-track-caps);color:var(--ho-accent-text);
}
.ds-crew-amt{color:var(--ho-text)}
.ds-crew-note{flex-basis:100%;margin:2px 0 0;font-size:var(--ho-fs-1);color:var(--ho-text-2)}
.ds-crew--note{flex-wrap:wrap}

.ds-crew--star{border:1.5px solid var(--ho-brass);box-shadow:0 2px 0 rgba(40,33,26,.10)}
.ds-crew-cap{font-size:var(--ho-fs-1);font-weight:700;color:var(--ho-accent-text)}
.ds-crew.is-promised{border-style:dashed;background:transparent}
.ds-crew.is-you{border-color:var(--ho-text);box-shadow:inset 0 0 0 1px var(--ho-text)}
.ds-crew.is-you .ds-crew-name::before{content:"★ ";color:var(--ho-ornament)}

/* ============================================================================
   13 · STAT TILES
   ----------------------------------------------------------------------------
   Value in ink (never in a "data color"), label below, delta as glyph + words.
   markup:
     <div class="ds-stats">
       <div class="ds-stat">
         <span class="ds-stat-val ds-num">$830</span>
         <span class="ds-stat-label">On the barn</span>
         <span class="ds-stat-delta">▲ $150 this week</span>
       </div>
     </div>
   ========================================================================== */
.ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--ho-sp-3)}
.ds-stat{
  display:flex;flex-direction:column;gap:2px;
  background:var(--ho-surface-raise);border:1px solid var(--ho-line);border-top:2px solid var(--ho-text);
  border-radius:0 0 var(--ho-r-2) var(--ho-r-2);padding:var(--ho-sp-4);
}
.ds-stat-val{font-size:var(--ho-fs-6);line-height:1.1;color:var(--ho-text)}
.ds-stat-label{
  font-size:var(--ho-fs-0);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--ho-track-caps);color:var(--ho-accent-text);
}
.ds-stat-delta{margin-top:2px;font-size:var(--ho-fs-1);font-weight:700;color:var(--ho-text-2)}

/* ============================================================================
   14 · TOAST
   ----------------------------------------------------------------------------
   markup: <div class="ds-toast" role="status">★ Saved — your crew sees it now.</div>
   show:   .classList.add('on')   (entry animates; reduced-motion = fade only)
   ========================================================================== */
.ds-toast{
  position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);
  z-index:var(--ho-z-toast);width:max-content;max-width:min(92vw,460px);
  background:var(--ho-ink);color:var(--ho-paper);
  border:1px solid var(--ho-oxblood-deep);border-radius:var(--ho-r-2);
  padding:14px 20px;box-shadow:var(--ho-shadow-3);
  font-size:var(--ho-fs-2);font-weight:600;line-height:1.45;
  opacity:0;visibility:hidden;
  transition:opacity var(--ho-dur-3) var(--ho-ease),transform var(--ho-dur-3) var(--ho-ease),visibility 0s var(--ho-dur-3);
}
.ds-toast.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--ho-dur-3) var(--ho-ease),transform var(--ho-dur-3) var(--ho-ease)}
.ds-dark .ds-toast{background:var(--ho-night-text);color:var(--ho-ink);border-color:var(--ho-night-text)}
.ds-toast--good{border-left:4px solid var(--ho-brass)}
.ds-toast--err{border-left:4px solid var(--ho-night-ember)}
.ds-dark .ds-toast--err{border-left-color:var(--ho-ember-deep)}

/* ============================================================================
   15 · WELCOME-BACK BANNER — memory as hospitality
   ----------------------------------------------------------------------------
   markup:
     <aside class="ds-back">
       <p class="ds-back-kick">Since you were here</p>
       <p class="ds-back-line">+<b>$150</b> in boards — the roof gate crossed,
          the cards are printed. <b>$95</b> to the keys.</p>
       <p class="ds-back-plain">Remembered on this phone, nowhere else.</p>
       <button class="ds-back-x" aria-label="Dismiss">✕</button>
     </aside>
   ========================================================================== */
.ds-back{
  position:relative;
  background:var(--ho-surface-well);
  border:1px solid var(--ho-line);border-left:4px solid var(--ho-brass);
  border-radius:var(--ho-r-2);padding:var(--ho-sp-4) 52px var(--ho-sp-4) var(--ho-sp-4);
}
.ds-back-kick{
  margin:0 0 2px;font-size:var(--ho-fs-0);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--ho-track-caps);color:var(--ho-accent-text);
}
.ds-back-line{margin:0;font-size:var(--ho-fs-3);color:var(--ho-text);line-height:1.5}
.ds-back-line b{font-weight:800}
.ds-back-plain{margin:6px 0 0;font-size:var(--ho-fs-1);color:var(--ho-text-3)}
.ds-back-x{
  -webkit-appearance:none;appearance:none;position:absolute;top:4px;right:4px;
  width:44px;height:44px;display:grid;place-content:center;
  background:none;border:none;border-radius:var(--ho-r-1);
  color:var(--ho-text-3);font-size:1rem;cursor:pointer;
}
.ds-back-x:hover{color:var(--ho-text);background:rgba(40,33,26,.06)}
.ds-dark .ds-back-x:hover{background:rgba(245,239,224,.08)}

/* ============================================================================
   16 · EMPTY STATES — name the missing thing, give the one move
   ----------------------------------------------------------------------------
   markup:
     <div class="ds-empty">
       <span class="ds-empty-mark" aria-hidden="true">✶</span>
       <h3 class="ds-empty-title">No boards on the wall yet</h3>
       <p class="ds-empty-body">Every barn starts with two sure hands.
          Text the link to the two people who'd show up in the rain.</p>
       <a class="ds-btn ds-btn--primary" href="…">Send it to your two</a>
     </div>
   ========================================================================== */
.ds-empty{
  border:2px dashed var(--ho-line-2);border-radius:var(--ho-r-2);
  padding:var(--ho-sp-8) var(--ho-sp-5);text-align:center;
}
.ds-empty-mark{display:block;font-size:1.6rem;line-height:1;color:var(--ho-ornament);margin-bottom:var(--ho-sp-3)}
.ds-empty-title{margin:0 0 var(--ho-sp-2);font-size:var(--ho-fs-4);font-weight:800;color:var(--ho-text)}
.ds-empty-body{margin:0 auto var(--ho-sp-5);max-width:34em;font-size:var(--ho-fs-2);color:var(--ho-text-2)}

/* ============================================================================
   17 · THE SIGN — the founder's storefront, always a lit board at night
   ----------------------------------------------------------------------------
   The board stays dark on every surface: it is a physical object, not a theme.
   Look keys match production exactly: lk-heritage (default) / lk-modern /
   lk-bold / lk-classic — the classes /build, /panel, /pool already toggle.
   markup:
     <div class="ds-sign lk-heritage">
       <div class="ds-sign-nm">Reeves Mow &amp; Plow</div>
       <div class="ds-sign-tn">Anderson · Indiana</div>
       <div class="ds-sign-est">est. 2026 — under construction</div>
     </div>
   ========================================================================== */
.ds-sign{
  position:relative;text-align:center;
  background:linear-gradient(180deg,var(--ho-board-hi),var(--ho-board-lo));
  border:1px solid var(--ho-ink);border-radius:var(--ho-r-2);
  padding:36px 22px 26px;box-shadow:var(--ho-shadow-board);
}
/* brass rivets */
.ds-sign::before,.ds-sign::after{
  content:"";position:absolute;top:12px;width:6px;height:6px;border-radius:50%;
  background:var(--ho-night-brass);opacity:.85;
}
.ds-sign::before{left:14px}
.ds-sign::after{right:14px}

.ds-sign-nm{
  font:400 clamp(1.5rem,6.6vw,2.3rem)/1.15 var(--ho-font-heritage);
  color:var(--ho-night-text);text-transform:uppercase;letter-spacing:.05em;
  overflow-wrap:break-word;
}
.ds-sign.lk-modern .ds-sign-nm{font-family:var(--ho-font-sans);font-weight:700;letter-spacing:.1em}
.ds-sign.lk-bold .ds-sign-nm{font-family:var(--ho-font-slab);font-weight:400;letter-spacing:.03em}
.ds-sign.lk-classic .ds-sign-nm{font-family:var(--ho-font-classic);font-style:italic;font-weight:600;text-transform:none;letter-spacing:.01em}

.ds-sign-tn{
  margin-top:10px;font-size:var(--ho-fs-0);font-weight:700;line-height:1.3;
  letter-spacing:var(--ho-track-wide);text-transform:uppercase;color:var(--ho-night-brass);
}
.ds-sign-est{margin-top:6px;font-size:var(--ho-fs-1);font-style:italic;color:var(--ho-night-dim)}

.ds-sign--small{padding:20px 16px 16px;border-radius:var(--ho-r-1);box-shadow:var(--ho-shadow-2)}
.ds-sign--small .ds-sign-nm{font-size:clamp(1.1rem,4.5vw,1.5rem)}
.ds-sign--small::before,.ds-sign--small::after{top:8px;width:4px;height:4px}

/* ============================================================================
   18 · PROOF STRIP — the last thing this money built, at the decision point
   ----------------------------------------------------------------------------
   markup:
     <a class="ds-proof" href="…logo.svg">
       <img class="ds-proof-thumb" src="…" alt="Reeves Mow & Plow logo">
       <span class="ds-proof-txt">
         <b>Last thing this money built</b> — the logo, 2 days ago
         <span class="ds-stamp">★ Built in 3 hours</span>
       </span>
     </a>
   ========================================================================== */
.ds-proof{
  display:flex;align-items:center;gap:var(--ho-sp-3);
  background:var(--ho-surface-raise);border:1px solid var(--ho-line-2);border-radius:var(--ho-r-2);
  padding:var(--ho-sp-3);text-decoration:none;color:var(--ho-text);
  transition:border-color var(--ho-dur-2) var(--ho-ease);
}
.ds-proof:hover{border-color:var(--ho-text)}
.ds-proof-thumb{
  flex:0 0 auto;width:64px;height:64px;object-fit:cover;
  border:1px solid var(--ho-line-2);border-radius:var(--ho-r-1);background:var(--ho-surface-well);
}
.ds-proof-txt{font-size:var(--ho-fs-2);line-height:1.45;color:var(--ho-text-2)}
.ds-proof-txt b{color:var(--ho-text);font-weight:800}
.ds-proof-txt .ds-stamp{display:block;margin-top:2px}

/* ============================================================================
   19 · MOTION & PREFERENCES
   ========================================================================== */
/* one-shot entrance for reveals; apply .ds-rise-in on insert */
@keyframes ds-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ds-rise-in{animation:ds-rise var(--ho-dur-3) var(--ho-ease) both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .ds-gate.is-shop .ds-gate-node::after{animation:none;opacity:1;transform:none}
}

@media (forced-colors:active){
  .ds-meter-fill,.ds-meter-mini i{background:CanvasText}
  .ds-meter-gate{background:CanvasText}
  .ds-checkbox:checked{background-color:Highlight}
  .ds-btn,.ds-plank,.ds-crew,.ds-toast{forced-color-adjust:auto}
}

/* ============================================================================
   20 · RESPONSIVE POLISH
   ========================================================================== */
@media (min-width:900px){
  .ds-container{padding-inline:var(--ho-sp-6)}
  .ds-card{padding:var(--ho-sp-7)}
  .ds-gate{grid-template-columns:44px 1fr}
  .ds-gate::before{left:17px}
  .ds-gate-node{width:32px;height:32px}
}
