/* ==================================================================
   TUDS PRO ESTIMATOR — DIRECTION D APPLICATION SHELL
   ------------------------------------------------------------------
   "Studio as the primary, with Guided elements."

   Loaded AFTER deckcalculatorstyles.css. This file owns:
     1. the shared token set (Inter, one type scale, one accent)
     2. the component set  (.row .card .chip .swatch .field .btn
                            .badge .callout .sheet .seg .tbtn)
     3. the shell layout   (56px header + stepper · canvas rail ·
                            380px right panel · 64px money footer)
     4. the legacy neutralisers that fold the 91 ad-hoc button classes
        onto the one .btn spec (the class names stay on the elements
        because app.js selects by several of them — only the visual
        overrides are replaced).

   Reference: mockups/review-design-critique.md §2-4,
              mockups/direction-b-studio.html (grammar),
              mockups/direction-c-guided.html (teaching surfaces).
   ================================================================== */

/* ==================================================================
   1 · TOKENS
   ================================================================== */
:root {
  /* --- one type system ------------------------------------------ */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* five rungs, nothing between them, nothing below 12px */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 20px;
  --t-xl: 28px;

  /* two weights */
  --w-reg: 400;
  --w-semi: 600;

  --lh-tight: 1.25;   /* titles */
  --lh-body:  1.5;    /* prose, helper text */

  /* legacy scale re-pointed at the five rungs so the 299 existing
     `font-size: var(--text-*)` rules land on the same ladder.
     No two aliases may resolve to the same rung: --text-sm and --text-lg
     used to collapse onto --t-xs / --t-md, which made 20px and 28px
     unreachable from the legacy sheet (01-visual-design F5). */
  --text-xs:   var(--t-xs);
  --text-sm:   var(--t-sm);
  --text-base: var(--t-sm);
  --text-md:   var(--t-md);
  --text-lg:   var(--t-lg);
  --text-xl:   var(--t-lg);
  --text-2xl:  var(--t-xl);

  /* --- SPACE · one 4-pt scale, seven rungs, nothing between ------
     Declared HERE so the shell is self-sufficient: it consumed
     --space-* 84 times while declaring none of them, which left every
     one of those rules resolving through deckcalculatorstyles.css
     (01-visual-design F3). Banned raw values: 5, 6, 7, 9, 10, 11, 13px. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;   /* THE GUTTER: panel inset, card padding */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- PANEL METRICS -------------------------------------------- */
  --panel-pad:     var(--space-4, 16px);
  --panel-sec-gap: var(--space-6, 32px);
  --panel-head-h:  28px;             /* was 40px */
  --card-pad:      var(--space-4, 16px);
  --card-gap:      var(--space-3, 12px);
  --row-pad-y:     var(--space-3, 12px);   /* was the off-scale 10px */
  --row-pad-x:     var(--space-4, 16px);
  --row-min-h:     44px;             /* 12 + 20 + 12 */

  /* --- fallbacks for the four tokens the shell still borrows from
     deckcalculatorstyles.css, so the shell degrades instead of
     collapsing to zero if that sheet is ever unlinked (06 F3). ---- */
  --tuds-navy: #133A52;
  --tuds-teal: #2D6A6A;
  --transition-fast: 150ms ease;
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --pill-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  /* --- ink & surface -------------------------------------------- */
  --ink:   #16222B;
  --ink-2: #5A6A75;
  --ink-3: #8C99A2;
  --line:   #E3E8EB;
  --line-2: #EDF1F3;
  --bg:      #F6F8F9;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;

  /* --- the single accent (the existing teal token) --------------- */
  --accent:     #2D6A6A;
  --accent-700: #1F4F4F;
  --accent-50:  #EAF2F1;
  --accent-ring: rgba(45, 106, 106, 0.22);
  /* --accent on --chrome is a low-contrast pairing, and the footer CTA is
     the most important control in the product (01 F13). This is the same
     hue, lifted enough to read as the brightest thing on the dark strip. */
  --accent-on-chrome:     #3E9A8F;
  --accent-on-chrome-700: #348379;

  /* --- chrome (header + footer) --------------------------------- */
  --chrome:   #0E2C3F;
  --chrome-2: #16394E;
  --chrome-ink:    #DCE9F0;
  --chrome-ink-2:  #8FB0C3;
  --chrome-ink-3:  #7D9AAC;
  --rail:      #EEF2F4;
  --rail-line: #DCE3E7;
  --canvas-bg: #EDF1F3;

  /* --- status (badges and callouts only) ------------------------ */
  --ok:   #2F7D4F;  --ok-bg:   #EAF4EE;
  --warn: #9A6212;  --warn-bg: #FBF2E4;
  --err:  #B3261E;  --err-bg:  #FBEBEA;

  /* --- frame metrics -------------------------------------------- */
  --h-hdr: 56px;
  --h-rail: 44px;
  --h-foot: 64px;
  /* Fluid, so the panel is 340px at 1280 and 440px at 1920 instead of a
     hard 380px with a 1360px step (L6). */
  --w-panel: clamp(340px, 24vw, 440px);

  /* --- radii: six, not ten -------------------------------------- */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  --shadow-float: 0 2px 6px rgba(19, 58, 82, .06), 0 10px 28px rgba(19, 58, 82, .10);
  --shadow-pop:   0 6px 24px rgba(19, 58, 82, .12), 0 1px 2px rgba(19, 58, 82, .08);
  --shadow-modal: 0 24px 60px rgba(19, 58, 82, .22);
}

/* Every number in this product is tabular so columns of money,
   dimensions and quantities stack instead of jittering. */
body,
.num,
input[type="number"],
.shell-panel,
.shell-foot,
.bom-table,
.cost-summary-card,
.dashboard-table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==================================================================
   2 · COMPONENTS
   ================================================================== */

/* --- 2.1 button: one base, four variants, three sizes ------------ */
.btn,
.dashboard-new-btn,
.dashboard-scratchpad-btn,
.dashboard-bulk-btn,
.dashboard-load-more-btn,
.welcome-btn-primary,
.welcome-btn-secondary,
.login-submit,
.login-submit-secondary,
.login-google-btn,
.wizard-btn,
.footer-back-btn,
.footer-next-btn,
.substep-next-btn,
.substep-prev-btn,
.review-edit-btn,
.confirm-dialog__btn {
  height: 36px;
  min-height: 36px;
  padding: 0 var(--space-4, 16px);
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: var(--font-family);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  /* kill every gradient, bevel and inset highlight in one place */
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  transition: background var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease),
              color var(--transition-fast, 150ms ease);
}

.btn svg,
.btn i { width: 16px; height: 16px; flex: none; }

.btn-sm, .btn.sm { height: 28px; padding: 0 var(--space-3, 12px); font-size: var(--t-xs); }
.btn-lg, .btn.lg { height: 44px; padding: 0 var(--space-6, 32px); }

/* primary — flat accent, one step darker on hover, never a transform */
.btn-primary,
.btn.primary,
.welcome-btn-primary,
.login-submit,
.dashboard-new-btn,
.footer-next-btn,
.confirm-dialog__btn--primary {
  background: var(--accent) !important;
  background-image: none !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-primary:hover:not(:disabled),
.btn.primary:hover:not(:disabled),
.welcome-btn-primary:hover:not(:disabled),
.login-submit:hover:not(:disabled),
.dashboard-new-btn:hover:not(:disabled),
.footer-next-btn:hover:not(:disabled) {
  background: var(--accent-700) !important;
  border-color: var(--accent-700) !important;
  transform: none !important;
}

.btn-primary:active:not(:disabled),
.btn.primary:active:not(:disabled) {
  background: var(--accent-700) !important;
  box-shadow: var(--shadow-inner, inset 0 2px 4px rgba(0,0,0,.06)) !important;
  transform: none !important;
}

/* secondary — white with a hairline */
.btn-secondary,
.btn.secondary,
.welcome-btn-secondary,
.login-submit-secondary,
.login-google-btn,
.dashboard-scratchpad-btn,
.dashboard-bulk-btn,
.dashboard-load-more-btn,
.footer-back-btn,
.review-edit-btn,
.confirm-dialog__btn--secondary {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.btn-secondary:hover:not(:disabled),
.btn.secondary:hover:not(:disabled),
.welcome-btn-secondary:hover:not(:disabled),
.login-google-btn:hover:not(:disabled),
.dashboard-scratchpad-btn:hover:not(:disabled),
.dashboard-bulk-btn:hover:not(:disabled),
.footer-back-btn:hover:not(:disabled),
.review-edit-btn:hover:not(:disabled) {
  background: var(--surface-2) !important;
  border-color: #B9C6CD !important;
  transform: none !important;
}

/* quiet — text only, for escape hatches */
.btn-quiet,
.btn.quiet,
.btn-ghost,
.dashboard-bulk-btn-ghost,
.dashboard-link-btn {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
}
.btn-quiet:hover, .btn.quiet:hover, .btn-ghost:hover,
.dashboard-bulk-btn-ghost:hover, .dashboard-link-btn:hover {
  background: var(--line-2) !important;
  color: var(--ink) !important;
}

/* destructive */
.btn-danger,
.btn.destructive,
.confirm-dialog__btn--danger {
  background: var(--err) !important;
  background-image: none !important;
  border-color: var(--err) !important;
  color: #fff !important;
}
.btn-danger:hover { background: #8E1E17 !important; }

.btn:disabled,
.btn.disabled,
.btn-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-full-width, .btn.full { width: 100%; }

/* icon button — the only control allowed in the canvas rail */
.iconbtn {
  width: 32px; height: 32px;
  min-width: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.iconbtn:hover { background: rgba(19, 58, 82, .07); color: var(--ink); }
.iconbtn[aria-pressed="true"], .iconbtn.active { background: var(--tuds-navy, #133A52); color: #fff; }
.iconbtn svg, .iconbtn i { width: 18px; height: 18px; }

/* --- 2.1b the mockup's panel primitives (L4) ----------------------
   Ported from mockups/direction-d-blend.html. `.stack` is the panel's
   vertical rhythm primitive — it replaces the 34 Tailwind `mt-*`
   utilities that used to set the gap between panel blocks one element
   at a time. `.eyebrow / .title / .hint` is the step header, and
   `.explain` is the one-line clarifier that sits under a control. */
.stack       { display: grid; gap: var(--space-4, 16px); }
.stack.tight { gap: var(--space-3, 12px); }

/* A row list that pulls out to the panel edges but keeps a top rule. */
.rows { border-top: 1px solid var(--line-2); }

.eyebrow {
  font-size: var(--t-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-700);
  font-weight: var(--w-semi);
}
/* 20px — the rung that used to be unreachable because --text-lg was
   aliased onto --t-md (L5, "step title → 20px"). */
.title {
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  color: var(--tuds-navy, #133A52);
  letter-spacing: -.01em;
  line-height: var(--lh-tight, 1.25);
  margin: 0;
}
.hint {
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: var(--lh-body, 1.5);
  margin: var(--space-1, 4px) 0 0;
}
.explain {
  font-size: var(--t-xs);
  color: var(--ink-2);
  line-height: var(--lh-body, 1.5);
  margin: var(--space-1, 4px) 0 0;
}
.explain b { color: var(--ink); font-weight: 500; }

/* Every step opens with the same three lines. */
.app-shell .step-head { margin: 0 0 var(--space-4, 16px); }

/* --- 2.1c the panel's own spacing utilities (L11) ------------------
   The panel region of index.html used to carry ~70 Tailwind spacing
   utilities, which is a second spacing system sitting on top of the
   shell's. These are the same rungs, expressed in the shell's tokens,
   so the panel has one scale and the markup no longer depends on the
   Tailwind CDN for its rhythm. Prefer `.stack` over a run of these. */
.stack.hair  { gap: var(--space-1, 4px); }
.u-m-0   { margin: 0; }
.u-mt-1  { margin-top: var(--space-1, 4px); }
.u-mt-2  { margin-top: var(--space-2, 8px); }
.u-mt-3  { margin-top: var(--space-3, 12px); }
.u-mb-1  { margin-bottom: var(--space-1, 4px); }
.u-mb-2  { margin-bottom: var(--space-2, 8px); }
.u-mb-3  { margin-bottom: var(--space-3, 12px); }
.u-mb-4  { margin-bottom: var(--space-4, 16px); }
.u-ml-1  { margin-left: var(--space-1, 4px); }
.u-gap-1 { gap: var(--space-1, 4px); }
.u-gap-2 { gap: var(--space-2, 8px); }
.u-px-1  { padding-left: var(--space-1, 4px); padding-right: var(--space-1, 4px); }
.u-px-3  { padding-left: var(--space-3, 12px); padding-right: var(--space-3, 12px); }
.u-py-2  { padding-top: var(--space-2, 8px); padding-bottom: var(--space-2, 8px); }
.u-p-3   { padding: var(--space-3, 12px); }

/* --- 2.2 row: label · value · chevron, 48px, expands in place ---- */
.row {
  width: 100%;
  min-height: var(--row-min-h, 44px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px);
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease);
}
.row:hover { background: var(--surface-2); }
.row .row-label {
  flex: 1; min-width: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.row .row-label small {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--w-reg);
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 2px;
}
.row .row-value {
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}
.row .row-chevron { color: var(--ink-3); flex: none; width: 16px; height: 16px; }
.row-body { padding: var(--space-4, 16px); border-bottom: 1px solid var(--line-2); }

/* --- 2.3 card ---------------------------------------------------- */
/* --surface-2, not --surface: a white card on a white panel was invisible
   as a grouping (01 F11). The half-step fill is what says "these things
   belong together" without adding a shadow. */
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-4, 16px);
  box-shadow: none;              /* shadow means floating, not grouped */
}
.card + .card { margin-top: var(--space-3, 12px); }
.card-header {
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--space-3, 12px);
}

/* completion gate card (borrowed from Direction C) */
.gate {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  background: var(--surface-2);
}
.gate.is-done { border-color: rgba(47, 125, 79, .35); background: var(--ok-bg); }
.gate.is-todo { border-color: rgba(154, 98, 18, .35); background: var(--warn-bg); }
.gate-icon {
  width: 28px; height: 28px; border-radius: var(--r-full);
  display: grid; place-items: center; flex: none; color: #fff;
  background: var(--ink-3);
}
.gate.is-done .gate-icon { background: var(--ok); }
.gate.is-todo .gate-icon { background: var(--warn); }
.gate-text { flex: 1; min-width: 0; }
.gate-text b { display: block; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); }
.gate-text small { display: block; font-size: var(--t-xs); color: var(--ink-2); margin-top: 1px; line-height: 1.4; }
.gate-value { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--tuds-navy, #133A52); }

/* --- 2.4 chip (single-select) ------------------------------------ */
.chip {
  height: 32px;
  padding: 0 var(--space-3, 12px);
  border: 0;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 500;
  background: var(--line-2);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.chip:hover { background: #E3E9EC; color: var(--ink); }
.chip[aria-pressed="true"], .chip.selected { background: var(--tuds-navy, #133A52); color: #fff; }
.chip:disabled, .chip.disabled { opacity: .4; cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }

/* --- 2.5 swatch --------------------------------------------------- */
.swatch {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(0, 0, 0, .10);
  overflow: hidden;
  position: relative;
  flex: none;
  background: var(--line-2);
}
.swatch[aria-pressed="true"], .swatch.selected {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: var(--accent);
}
.swatch-name { font-size: var(--t-xs); color: var(--ink-2); margin-top: var(--space-1, 4px); }

/* --- 2.6 field: label above, full width, help below --------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.field > label,
.field-label {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}
.field input,
.field select,
.field textarea,
.form-select,
.form-input,
.permit-info-input {
  height: 36px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0 var(--space-3, 12px);
  font-family: var(--font-family);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--surface);
}
.field textarea, textarea.form-input { height: auto; padding: var(--space-2, 8px) var(--space-3, 12px); line-height: var(--lh-body, 1.5); }
.field input:focus,
.field select:focus,
.field textarea:focus,
.form-select:focus,
.permit-info-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.field-help,
.field .help {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.4;
}
.field input::placeholder,
.field textarea::placeholder,
.permit-info-input::placeholder { color: var(--ink-3); font-size: var(--t-xs); }

/* --- 2.7 badge: status lives here, never in a button colour ------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  height: 22px;
  padding: 0 var(--space-2, 8px);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.badge-neutral { background: var(--line-2); color: var(--ink-2); }
.badge-info    { background: var(--accent-50); color: var(--accent-700); }
.badge-success { background: var(--ok-bg);   color: var(--ok); }
.badge-warning { background: var(--warn-bg); color: var(--warn); }
.badge-error   { background: var(--err-bg);  color: var(--err); }

/* --- 2.8 callout -------------------------------------------------- */
.callout {
  display: flex;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-2);
}
.callout-info    { border-color: rgba(45,106,106,.3); background: var(--accent-50); color: var(--accent-700); }
.callout-warning { border-color: rgba(154,98,18,.3);  background: var(--warn-bg);   color: var(--warn); }
.callout-error   { border-color: rgba(179,38,30,.3);  background: var(--err-bg);    color: var(--err); }
.callout-success { border-color: rgba(47,125,79,.3);  background: var(--ok-bg);     color: var(--ok); }

/* --- 2.9 segmented control ---------------------------------------- */
.seg {
  display: flex;
  gap: 2px;
  background: #E2E8EB;
  border-radius: var(--r-sm);
  padding: 2px;
  flex: none;
}
.seg button {
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.seg button.active,
.seg button[aria-pressed="true"] {
  background: #fff;
  color: var(--tuds-navy, #133A52);
  font-weight: var(--w-semi);
  box-shadow: var(--pill-active-shadow, 0 1px 3px rgba(0,0,0,.08));
}

/* --- 2.10 sheet: one overlay surface for every long form ---------- */
.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgba(9, 29, 41, .5);
  z-index: 420;
  display: flex;
  justify-content: flex-end;
}
.sheet-scrim.hidden { display: none !important; }
.sheet {
  background: var(--surface);
  width: 720px;
  max-width: 96vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  animation: sheetIn .18s ease-out;
}
.sheet.sheet-lg { width: 1040px; }
.sheet.sheet-sm { width: 480px; }
@keyframes sheetIn { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }

.sheet-head {
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 0 var(--space-6, 32px);
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 {
  margin: 0;
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  color: var(--tuds-navy, #133A52);
  letter-spacing: -.01em;
}
.sheet-head .sheet-close { margin-left: auto; }
.sheet-tabs { display: flex; gap: 4px; margin-left: var(--space-4, 16px); }
.sheet-tabs button {
  height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-full);
  background: transparent; font-size: var(--t-xs); color: var(--ink-2); cursor: pointer;
}
.sheet-tabs button[aria-pressed="true"] { background: var(--tuds-navy, #133A52); color: #fff; font-weight: var(--w-semi); }
.sheet-body { padding: var(--space-6, 32px); overflow: auto; flex: 1; min-height: 0; }
.sheet-foot {
  height: 64px; flex: none; display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: 0 var(--space-6, 32px); border-top: 1px solid var(--line); background: var(--surface-2);
}
.sheet-foot .sheet-foot-spacer { flex: 1; }

/* Two-column field grid — what a 30-field permit form needs and a
   380px rail physically cannot give it. */
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4, 16px) var(--space-6, 32px); }
.sheet-grid .wide { grid-column: 1 / -1; }
.sheet-subhead {
  grid-column: 1 / -1;
  font-size: var(--t-xs); font-weight: var(--w-semi); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  padding-top: var(--space-2, 8px); border-top: 1px solid var(--line-2); margin-top: var(--space-2, 8px);
}
.sheet-subhead:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* --- 2.11 popover / dropdown: ONE surface ------------------------- */
.snap-popover,
#layersDropdown,
.mode-badge-popover,
.docs-menu {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-pop) !important;
  padding: 4px !important;
  color: var(--ink) !important;
}
.snap-option,
#layersDropdown label,
.docs-menu button {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 0 var(--space-3, 12px) !important;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--t-xs) !important;
  color: var(--ink) !important;
  cursor: pointer;
  text-align: left;
}
.snap-option:hover,
#layersDropdown label:hover,
.docs-menu button:hover { background: var(--line-2); }
#layersDropdown > div:first-child {
  font-size: var(--t-xs) !important;
  color: var(--ink-3) !important;
  letter-spacing: .06em;
  padding: var(--space-1, 4px) var(--space-3, 12px);
}
#layersDropdown input[type="checkbox"] { accent-color: var(--accent); }

/* ==================================================================
   3 · SHELL LAYOUT
   ================================================================== */

.app-shell {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- 3.1 header: 56px, logo · project · stepper · account -------- */
.app-shell > .deck-calculator-header {
  height: var(--h-hdr);
  flex: none;
  background: var(--chrome);
  background-image: none;
  border-bottom: 0;
  padding: 0 var(--space-4, 16px);
  gap: var(--space-4, 16px);
}
.app-shell > .deck-calculator-header::before { display: none; }
.app-shell > .deck-calculator-header .header-content { gap: var(--space-3, 12px); flex: none; }
.app-shell > .deck-calculator-header .header-logo { height: 26px; }
.app-shell > .deck-calculator-header h1 {
  font-size: var(--t-sm) !important;
  font-weight: var(--w-semi) !important;
  letter-spacing: -.01em;
  color: #fff;
}

.shell-projname {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--t-sm);
  color: var(--chrome-ink);
  min-width: 0;
}
.shell-projname-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: #fff;
  font-family: var(--font-family);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  padding: 4px 8px;
  max-width: 220px;
  min-width: 80px;
  text-overflow: ellipsis;
}
.shell-projname-input:hover { background: rgba(255, 255, 255, .08); }
.shell-projname-input:focus {
  outline: none;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
}
.hdr-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, .14); flex: none; }

/* the ONE stepper, on a track, centred */
.shell-stepper {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex: none;
  min-width: 0;
}
.shell-stepper .stepper-track {
  display: flex;
  gap: 2px;
  background: var(--chrome-2);
  border-radius: var(--r-full);
  padding: 3px;
}
.shell-step {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--t-xs);
  color: #9FBACB;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}
.shell-step:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.shell-step-num {
  width: 17px; height: 17px;
  border-radius: var(--r-full);
  display: grid; place-items: center; flex: none;
  font-size: 10px; font-weight: var(--w-semi);
  border: 1px solid rgba(255, 255, 255, .3);
  color: inherit;
}
.shell-step-num svg { width: 11px; height: 11px; }
.shell-step.complete { color: #CFE3D9; }
.shell-step.complete .shell-step-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.shell-step.active { background: #fff; color: var(--chrome); font-weight: var(--w-semi); }
.shell-step.active .shell-step-num { background: var(--tuds-navy, #133A52); border-color: var(--tuds-navy, #133A52); color: #fff; }
.shell-step.unavailable { opacity: .45; cursor: not-allowed; }

.app-shell > .deck-calculator-header .header-actions { gap: var(--space-2, 8px); flex: none; }
.app-shell > .deck-calculator-header .header-action-btn {
  height: 30px;
  padding: 0 var(--space-3, 12px);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  background: rgba(255, 255, 255, .10);
}
.app-shell > .deck-calculator-header .header-action-btn:hover { background: rgba(255, 255, 255, .2); }
.app-shell > .deck-calculator-header .header-action-btn svg { width: 14px; height: 14px; }
.app-shell .save-indicator { font-size: var(--t-xs); color: var(--chrome-ink-2); }

/* --- 3.2 work area: canvas + one right panel --------------------- */
.app-shell .main-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: var(--bg);
}
/* the left rail is gone — #input-panel is now the right context panel */
.app-shell .main-layout #main-content-panel {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--canvas-bg);
}
.app-shell .main-layout #input-panel {
  order: 2;
  width: var(--w-panel);
  flex: 0 0 var(--w-panel);
  background: var(--surface);
  border-right: 0;
  border-left: 1px solid var(--line);
  box-shadow: none;
  overflow: hidden;
}
.app-shell .main-layout #input-panel.inspector-hidden {
  width: 0 !important;
  flex: 0 0 0 !important;
  border-left-width: 0;
}
/* the collapse tab straddles the LEFT edge of the right panel now */
.app-shell .inspector-edge-toggle {
  right: auto;
  left: -16px;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 6px 0 0 6px;
  box-shadow: -2px 0 4px rgba(0, 0, 0, .05);
}
.app-shell .inspector-edge-toggle svg { transform: rotate(180deg); }
.app-shell .main-layout #input-panel.inspector-hidden .inspector-edge-toggle { left: -16px; }
.app-shell .main-layout #input-panel.inspector-hidden .inspector-edge-toggle svg { transform: none; }

/* --- 3.3 canvas rail: the toolbar on the canvas's top edge -------- */
.canvas-rail {
  height: var(--h-rail);
  flex: none;
  background: var(--rail);
  border-bottom: 1px solid var(--rail-line);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--space-2, 8px);
  position: relative;
  z-index: 30;
}
.canvas-rail-tools { display: flex; align-items: center; gap: 2px; }
.canvas-rail-tools.hidden { display: none !important; }
.rail-divider { width: 1px; height: 20px; background: var(--rail-line); margin: 0 var(--space-2, 8px); flex: none; }
.rail-spacer { flex: 1; }

/* every rail control is an icon button, whatever classes JS needs on it */
.canvas-rail .btn,
.canvas-rail .tbtn {
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  color: var(--ink-2) !important;
  font-size: var(--t-xs) !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  box-shadow: none !important;
  cursor: pointer;
}
.canvas-rail .btn:hover:not(:disabled),
.canvas-rail .tbtn:hover:not(:disabled) { background: rgba(19, 58, 82, .07) !important; color: var(--ink) !important; }
.canvas-rail .btn.active,
.canvas-rail .btn[aria-pressed="true"],
.canvas-rail .tbtn[aria-pressed="true"] { background: var(--tuds-navy, #133A52) !important; color: #fff !important; }
.canvas-rail .btn svg,
.canvas-rail .btn i,
.canvas-rail .tbtn svg { width: 17px; height: 17px; }
.canvas-rail .btn:disabled, .canvas-rail .btn.btn-disabled { opacity: .35; pointer-events: none; }
.canvas-rail .seg { margin-left: auto; }

/* the rail's popovers drop DOWN, never into the drawing */
.canvas-rail .snap-popover,
.canvas-rail #layersDropdown {
  position: absolute;
  top: calc(100% + var(--space-2, 8px));
  left: 0;
  right: auto;
  min-width: 150px;
  z-index: 60;
}

/* --- 3.4 canvas stage -------------------------------------------- */
.app-shell #main-content-panel > .info-card {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
}
/* The stage is grey and the plan is a white sheet sitting on it (L10).
   The drawing used to bleed to all four edges of a full-width off-white
   box, so there was nothing to tell a customer they were looking at a
   drawing rather than at the application's background. */
.app-shell #canvasContainerWrapper {
  background: var(--canvas-bg);
  padding: var(--space-3, 12px);
}
.app-shell #canvasContainer {
  background: var(--surface);
  background-image: radial-gradient(circle, var(--line) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  border: 1px solid var(--rail-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

/* objects tray — chips docked bottom-left over the canvas */
.canvas-objects-tray {
  position: absolute;
  left: var(--space-4, 16px);
  bottom: var(--space-4, 16px);
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2, 8px);
  max-width: 60%;
  pointer-events: auto;
}
.canvas-objects-tray:empty { display: none; }
.canvas-objects-tray .tray-label {
  width: 100%;
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: -2px;
}
.tray-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(19, 58, 82, .08);
  transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.tray-chip:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(19, 58, 82, .14); }
.tray-chip-dot { width: 8px; height: 8px; border-radius: var(--r-full); flex: none; background: var(--accent); }
.tray-chip-name { font-size: var(--t-xs); font-weight: 500; color: var(--ink); line-height: 1.2; }
.tray-chip-sub { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.2; font-weight: var(--w-reg); }

/* the old right-edge icon rail is gone; if any legacy markup survives,
   it must never float over the drawing again. */
.app-shell .floating-controls { display: none !important; }

/* --- 3.5 right panel: three stacked sections, ONE scroll region --- */
.shell-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  background: var(--surface);
}
.shell-panel::-webkit-scrollbar { width: 9px; }
.shell-panel::-webkit-scrollbar-thumb { background: #D5DDE2; border-radius: 9px; border: 3px solid #fff; }

/* Sections are separated by SPACE and a hairline, not by an 8px grey bar
   (L5). The bar cost ~8px of panel height at every seam and read as a gap
   in the surface rather than a change of subject.

   It is still drawn as a border-TOP on a visible section that follows
   another visible one: the Estimate and Selected-material sections are
   permanently `hidden` and still count as children, so a border-bottom
   with `:last-child` exempt left a trailing rule under the last section
   on Draw and Decking. */
.ctx-section { border-bottom: 0; }
.ctx-section:not([hidden]) ~ .ctx-section:not([hidden]) {
  border-top: 1px solid var(--line);
  margin-top: var(--panel-sec-gap, 32px);
}
/* 28px, not 40px: this is a label strip, not a toolbar. Twelve pixels
   back on every section, and the step content starts above the fold. */
.ctx-section-head {
  height: var(--panel-head-h, 28px);
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 0 var(--space-4, 16px);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
  z-index: 3;
}
/* Only the step's own header pins — a sticky header on a section the rep
   has scrolled past is just a second header. */
#panelSelectionSection > .ctx-section-head { position: sticky; top: 0; }
.ctx-section-head h3 {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.ctx-section-head .ctx-section-meta { margin-left: auto; font-size: var(--t-xs); color: var(--ink-3); }
.ctx-section-body { padding: var(--space-4, 16px); }
.ctx-section-body.flush { padding: 0; }

/* the wizard panel now lives inside Selection and must not scroll itself */
.app-shell .wizard-panel { overflow: visible; flex: none; }
.app-shell .wizard-content { overflow: visible; }
/* ONE containment rule for the panel: `.ctx-section-body` owns the gutter
   (var(--space-4, 16px), above). The step content inside it contributes none of its
   own — the legacy 16px/68px on .wizard-step-content would otherwise double
   the inset and leave a 68px hole above the footer — so these two zero out
   and the section body is the only place the number lives.

   `flush` is for self-padded row lists only (the Estimate section). The
   Selection body used to carry it too, which left Draw's entry cards, the
   template gallery and the Quick Rectangle inputs with NO horizontal padding
   at any width: they ran into both panel edges, and the Depth field's "ft"
   suffix was clipped — worst at 1280, where the panel drops to 340px. */
.app-shell .wizard-step-content { padding: 0; }
/* The atoms that are meant to be full-bleed pull back out of the gutter, the
   way the mockup's row lists do, so they keep their edge-to-edge hover band. */
.app-shell .config-section,
.app-shell .config-accordion-divider,
.app-shell .config-pinned-zone,
.app-shell .wizard-step-content > .row,
.app-shell .panel-content > .row {
  margin-left: calc(-1 * var(--space-4, 16px));
  margin-right: calc(-1 * var(--space-4, 16px));
}
/* The step title is visible again, as the mockup's `.title` (L4). It is no
   longer the same string as the sticky header: the header is the eyebrow
   (the step's short name, "DECKING"), the title says what to do on the step
   ("Pick the boards"), and one `.hint` line says why. */
.app-shell .wizard-step-title {
  font-size: var(--t-lg);
  font-weight: var(--w-semi);
  color: var(--tuds-navy, #133A52);
  letter-spacing: -.01em;
  line-height: var(--lh-tight, 1.25);
  margin: 0;
  padding: 0;
  border: 0;
  text-transform: none;
}
.app-shell .panel-content { padding: 0; }

/* Framing's accordion is already the row atom — normalise it so
   Decking, Railing, Review and Permit all read as the same thing. */
.app-shell .config-section {
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  /* Vertical margin 0; the horizontal pull-out of the section body's gutter
     is set above and must not be reset here. */
  margin-top: 0;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}
.app-shell .config-section-header {
  min-height: var(--row-min-h, 44px);
  padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px);
  gap: var(--space-3, 12px);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.app-shell .config-section-header:hover { background: var(--surface-2); }
.app-shell .config-section-label { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.app-shell .config-section-value { font-size: var(--t-sm); color: var(--ink-2); }
.app-shell .config-section-body { padding: 0 var(--space-4, 16px) var(--space-4, 16px); }
.app-shell .config-accordion-divider {
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-2, 8px);
  background: transparent;
  border: 0;
}
.app-shell .config-pinned-zone { padding: var(--space-4, 16px); border-bottom: 1px solid var(--line-2); }

/* estimate-by-category rows */
.cat-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px);
  border-bottom: 1px solid var(--line-2);
  width: 100%;
  border-left: 0; border-right: 0; border-top: 0;
  background: transparent;
  text-align: left;
}
.cat-row-icon {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--accent-50); color: var(--accent-700);
  display: grid; place-items: center; flex: none;
  font-size: 11px; font-weight: var(--w-semi);
}
.cat-row-name { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--ink); font-weight: 500; }
.cat-row-value { font-size: var(--t-sm); color: var(--ink); white-space: nowrap; }
.cat-row.is-empty .cat-row-icon { background: var(--line-2); color: var(--ink-3); }
.cat-row.is-empty .cat-row-name { color: var(--ink-3); }
.cat-row.is-empty .cat-row-value { color: var(--accent); font-style: italic; font-size: var(--t-xs); font-weight: var(--w-semi); }
.cat-total {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: 12px var(--space-4, 16px); background: var(--surface-2);
}
.cat-total-name { flex: 1; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); }
.cat-total-value { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--tuds-navy, #133A52); }

/* selected-material card */
.matcard { display: flex; gap: var(--space-3, 12px); align-items: flex-start; }
.matcard-swatch {
  width: 62px; height: 62px; border-radius: var(--r); overflow: hidden; flex: none;
  border: 1px solid rgba(0, 0, 0, .08); background: var(--line-2);
}
.matcard-name { font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); line-height: 1.25; }
.matcard-brand { font-size: var(--t-xs); color: var(--ink-2); margin-top: 1px; }
.matcard-meta { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; }
.matcard-empty {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  width: 100%; background: var(--surface-2); cursor: pointer; text-align: left;
}
.matcard-empty:hover { border-color: var(--accent); background: var(--accent-50); }
.matcard-empty .matcard-empty-tile {
  width: 46px; height: 46px; border-radius: var(--r); flex: none;
  background: repeating-linear-gradient(45deg, var(--line-2), var(--line-2) 6px, #fff 6px, #fff 12px);
  border: 1px solid var(--line);
}
.matcard-empty b { display: block; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); }
.matcard-empty small { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }

/* --- 3.6 footer: category tiles · grand total · Back · Continue --- */
.app-shell .app-footer {
  position: static;
  height: var(--h-foot);
  flex: none;
  background: var(--chrome);
  border-top: 0;
  box-shadow: none;
  padding: 0 var(--space-4, 16px);
  gap: var(--space-5, 24px);
  z-index: 30;
}
.foot-cats { display: flex; align-items: center; gap: var(--space-5, 24px); min-width: 0; overflow: hidden; }
/* The strip is a READOUT, not a to-do list (AGREED-PLAN W8): the same five
   categories on every step, an em-dash where a number hasn't arrived yet, and
   each cell is a button that lands on the step that owns it. */
.foot-cat {
  display: flex; flex-direction: column; gap: 1px; white-space: nowrap;
  align-items: flex-start; text-align: left;
  background: none; border: 0; padding: 2px 4px; margin: 0 -4px;
  border-radius: var(--r-sm, 6px);
  font-family: inherit; cursor: pointer;
  transition: background var(--transition-fast, .12s ease);
}
.foot-cat:hover { background: rgba(255, 255, 255, .08); }
.foot-cat:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 1px; }
.foot-cat-key {
  font-size: var(--t-xs);
  color: var(--chrome-ink-3);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.foot-cat-val { font-size: 13px; color: var(--chrome-ink); }
/* Pending is a dimmed em-dash — never an italic imperative. "Choose decking"
   in the money strip told the rep to do something in the one place that is
   supposed to only report. */
.foot-cat.is-pending .foot-cat-key { color: rgba(255, 255, 255, .32); }
.foot-cat.is-pending .foot-cat-val { color: rgba(255, 255, 255, .32); }
/* At laptop widths Review's three actions share the strip with all five
   categories; tighten the gaps and the label tracking so the last label
   ("Hardware") is never clipped at 1280. */
@media (max-width: 1360px) {
  .app-shell .app-footer { gap: var(--space-3, 12px); }
  .foot-cats { gap: var(--space-3, 12px); padding-right: 4px; }
  .foot-cat-key { letter-spacing: .02em; }
}
.foot-divider { width: 1px; height: 34px; background: rgba(255, 255, 255, .14); flex: none; }
.foot-spacer { flex: 1; }
.app-shell .footer-cost { flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.1; }
.app-shell .footer-cost-label {
  font-size: var(--t-xs);
  color: var(--chrome-ink-3);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: var(--w-reg);
}
.app-shell .footer-cost-value {
  font-size: var(--t-xl);
  font-weight: var(--w-semi);
  color: #fff;
  letter-spacing: -.02em;
}
.app-shell .footer-nav-buttons { gap: var(--space-2, 8px); }
.app-shell .footer-back-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--chrome-ink) !important;
}
.app-shell .footer-back-btn:hover { background: rgba(255, 255, 255, .12) !important; }
.app-shell .footer-next-btn { min-width: 176px; height: 40px; }

/* --- 3.7 documents menu ------------------------------------------ */
.docs-menu-wrap { position: relative; }
.docs-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2, 8px));
  min-width: 220px;
  z-index: 60;
}
.docs-menu.hidden { display: none !important; }

/* --- 3.8 review summary ------------------------------------------ */
.review-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}
.review-summary-cell .k {
  font-size: var(--t-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.review-summary-cell .v { font-size: var(--t-md); font-weight: var(--w-semi); color: var(--tuds-navy, #133A52); margin-top: 2px; }
.review-actions { display: grid; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.review-actions-row { display: flex; gap: var(--space-2, 8px); }
.review-actions-row > * { flex: 1; }
/* What "Share with customer" does — this replaced a whole "Customer link"
   card that carried a second Share button (QA item 10). */
.review-actions-hint {
  margin: var(--space-2, 8px) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.45;
}
/* Overview tiles: three equal columns, values never wrap ("4' 0"" on two
   lines at 1280/1440). A total of $10,000+ steps down one size to fit. */
.app-shell .project-overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.app-shell .project-overview-metrics .metric-card { min-width: 0; padding: var(--space-2, 8px) var(--space-1, 4px); }
.app-shell .project-overview-metrics .metric-value {
  white-space: nowrap;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.app-shell .project-overview-metrics .metric-value.is-long { font-size: 0.8125rem; }
/* The chips under the Overview metrics are specs, and say so (QA item 11). */
.project-overview-specs-label {
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--space-3, 12px);
}

/* ==================================================================
   4 · LEGACY NEUTRALISERS
   Nothing below adds a new look; each line removes a competing one.
   ================================================================== */

/* the 2011 bevel on the primary button, and the !important re-override
   that gave it a second appearance inside .floating-controls */
.floating-controls .btn.active,
.floating-controls .btn-primary { background-image: none !important; }

/* sub-11px labels go to 12px — reps read this across a desk */
.progress-step-number,
.visual-option-desc,
.breaker-width-select,
.tab-count,
.scratchpad-hint,
.mode-badge-custom-label { font-size: var(--t-xs) !important; }

/* The panel's inline Tailwind text utilities, folded onto the ladder.
   No !important: Tailwind's own utilities live in @layer utilities and
   `.app-shell .text-xs` already outranks a bare `.text-xs`, so the flag
   was cargo-culted and only made these two rules impossible to
   override locally (L11). */
.app-shell .text-xs { font-size: var(--t-xs); }
.app-shell .text-sm { font-size: var(--t-sm); }

/* dashboard + auth surfaces adopt the same tokens */
.dashboard-page .dashboard-table th {
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-semi);
}
.dashboard-page .dashboard-table td { font-size: var(--t-sm); color: var(--ink); }
.dashboard-filter-select,
.dashboard-search-input,
.dashboard-bulk-select {
  height: 36px;
  border-radius: var(--r);
  font-family: var(--font-family);
  font-size: var(--t-sm);
}
.login-page .login-field input,
.login-page .login-field select { height: 40px; border-radius: var(--r); font-size: var(--t-sm); }
.login-page .login-title { font-size: var(--t-lg); font-weight: var(--w-semi); }

/* ==================================================================
   4b · SHEETS OVER THE CANVAS
   The permit form, the materials list and the full specifications all
   open as ONE surface on the right of the canvas instead of three
   different dialogs (a navy bar with ghost buttons, a white modal, and
   a 30-field form crammed into the rail).
   ================================================================== */

/* The panel must not become a second scroll region, and the step panels
   must not keep a transform after their entrance animation — a transform
   makes a containing block and would trap position:fixed sheets inside. */
.app-shell .wizard-step-content {
  height: auto;
  overflow: visible;
  padding-bottom: 0;
  animation: none !important;
  opacity: 1;
  transform: none;
}

.sheet .permit-info-grid,
.sheet-body .permit-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 16px) var(--space-6, 32px);
}
.sheet-body .permit-info-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  font-size: var(--t-xs);
  color: var(--ink-2);
  font-weight: 500;
}
.sheet-body .permit-info-checkbox {
  font-size: var(--t-sm);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.inf {
  width: 15px; height: 15px; border-radius: var(--r-full);
  background: var(--line-2); color: var(--ink-3);
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: var(--w-semi); flex: none;
  cursor: help;
}

/* The two legacy dialogs adopt the sheet surface. Their markup and every
   onclick stay exactly as they were. */
.specs-modal:not(.hidden),
.cut-list-modal:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: flex;
  justify-content: flex-end;
  background: rgba(9, 29, 41, .5);
}
.specs-modal-content,
.cut-list-modal-content {
  width: 720px !important;
  max-width: 96vw;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.specs-modal-header,
.cut-list-modal-header,
#framingBomModal .specs-modal-header {
  height: 56px;
  flex: none;
  padding: 0 var(--space-6, 32px) !important;
  border-bottom: 1px solid var(--line);
  /* never a navy bar with white ghost buttons — one header, one surface */
  background: var(--surface) !important;
  color: var(--ink) !important;
}
#framingBomModal .specs-modal-header h2,
.specs-modal-header h2,
.cut-list-modal-header h2 {
  font-size: var(--t-md) !important;
  font-weight: var(--w-semi) !important;
  color: var(--tuds-navy, #133A52) !important;
}
#framingBomModal .specs-modal-header .btn,
#framingBomModal .specs-modal-header button {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-size: var(--t-xs) !important;
}
#framingBomModal .specs-modal-header #sendToQmBtn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.specs-modal-body,
.cut-list-modal-body,
#framingBomContent {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-6, 32px) !important;
  max-height: none !important;
}
.specs-modal-footer,
.cut-list-modal-footer {
  height: 64px;
  flex: none;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0 var(--space-6, 32px);
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  justify-content: flex-end;
}

/* --- Review summary meta ------------------------------------------ */
.review-summary-meta { margin-top: var(--space-3, 12px); }
.review-scope-badges { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; margin-bottom: var(--space-3, 12px); }
.review-meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
  padding: var(--space-1, 4px) 0;
  border-top: 1px solid var(--line-2);
  font-size: var(--t-xs);
}
.review-meta-k { color: var(--ink-3); width: 86px; flex: none; }
.review-meta-v { color: var(--ink); flex: 1; min-width: 0; }
.review-meta-v.is-empty { color: var(--accent); font-style: italic; font-weight: var(--w-semi); }

.app-shell .review-edit-links { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-4, 16px); }
.app-shell .review-edit-btn { height: 28px; padding: 0 var(--space-3, 12px); font-size: var(--t-xs); }

/* ==================================================================
   4c · PICKER DENSITY, SWATCH CARDS, "WHY THESE SIZES?"
   ================================================================== */

.picker-density-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-2, 8px);
}
.picker-density-row .field-label { flex: 1; }
.picker-density-toggle { flex: none; }
.picker-density-toggle button { height: 24px; padding: 0 var(--space-2, 8px); }

/* ---- the suggestion card (decision 5) ----------------------------
   The replacement for the silent defaults: an offer, not a decision.
   It sits at the top of Decking and Railing while nothing is chosen,
   and disappears the moment something is. */
.suggest-card {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
  border: 1px solid var(--accent-ring);
  border-radius: var(--r-lg);
  background: var(--accent-50);
  flex-wrap: wrap;
}
.suggest-card .suggest-sw {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .12);
  display: block;
}
.suggest-card .suggest-text { flex: 1 1 140px; min-width: 0; }
.suggest-card .suggest-text b {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--ink);
  line-height: var(--lh-tight, 1.25);
  margin-top: 2px;
}
.suggest-card .suggest-text small:last-child {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-2);
  margin-top: 2px;
}
.suggest-card .suggest-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* ---- the product card (L7, decision 2) ---------------------------
   Ported from mockups/direction-d-blend.html. Texture, colour name,
   brand + line, and two or three benefit bullets: the only surface in
   the app a customer is meant to look at. The compact list is still one
   click away on the density toggle. */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3, 12px); }
.pgrid.one { grid-template-columns: 1fr; }
.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  text-align: left;
  padding: 0;
  position: relative;
  display: block;
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease),
              transform var(--transition-fast, 150ms ease);
}
.pcard:hover { border-color: #B9C6CD; box-shadow: var(--shadow-float); transform: translateY(-1px); }
.pcard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pcard .pimg { display: block; height: 78px; position: relative; overflow: hidden; }
.pcard.tall .pimg { height: 112px; }
.pcard .pbody { display: block; padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-3, 12px); }
.pcard .pn { display: block; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); line-height: var(--lh-tight, 1.25); }
.pcard .pb { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 1px; }
.pcard .ptick {
  position: absolute; right: var(--space-2, 8px); top: var(--space-2, 8px);
  width: 20px; height: 20px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; display: none; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.pcard[aria-pressed="true"] .ptick { display: grid; }
.pcard .pflag { position: absolute; left: var(--space-2, 8px); top: var(--space-2, 8px); }
.bens { list-style: none; margin: var(--space-2, 8px) 0 0; padding: 0; display: grid; gap: var(--space-1, 4px); }
.bens li {
  font-size: var(--t-xs); color: var(--ink-2); line-height: 1.4;
  display: flex; gap: var(--space-2, 8px); align-items: flex-start;
}
.bens svg { flex: none; margin-top: 2px; color: var(--accent); }

.swatch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2, 8px); }
.swatch-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}
.swatch-card:hover { border-color: #B9C6CD; box-shadow: var(--shadow-float); }
.swatch-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ---- ONE CARD GRAMMAR (L8) ---------------------------------------
   .template-card (8px radius, 1px grey, teal wash on hover) and
   .visual-option (12px radius, 1.5px grey, teal wash when selected)
   were two more card looks on the same panel. Both fold onto the
   .swatch-card spec above: one radius, one border, one hover, and
   selection shown by the accent ring rather than by repainting the
   card's fill. */
.app-shell .template-card,
.app-shell .visual-option {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--transition-fast, 150ms ease),
              box-shadow var(--transition-fast, 150ms ease);
}
.app-shell .template-card:hover,
.app-shell .visual-option:hover {
  border-color: #B9C6CD;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.app-shell .visual-option.selected,
.app-shell .template-card.selected {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.app-shell .visual-option.selected .visual-option-icon { color: var(--accent); }
.app-shell .template-card:hover .template-svg { color: var(--accent); }
.swatch-card .swatch { width: 100%; height: 44px; border-radius: var(--r); }
.swatch-card .swatch-name { margin: 0; font-size: var(--t-xs); font-weight: 500; color: var(--ink); line-height: 1.25; }
.swatch-card .badge { align-self: flex-start; }

/* cards is the default; list hides the cards and shows the native select */
body[data-picker-density="cards"] #compositeColorCards { display: grid; }
body[data-picker-density="cards"] #compositeColor { display: none; }
body[data-picker-density="list"]  #compositeColorCards { display: none; }
body[data-picker-density="list"]  #compositeColor { display: block; }

/* the railing picker is already a tile grid — "list" collapses it to rows */
body[data-picker-density="list"] #railingColorGrid {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
body[data-picker-density="list"] #railingColorGrid .visual-option {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  min-height: 40px;
  padding: 0 var(--space-3, 12px);
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  text-align: left;
}
body[data-picker-density="list"] #railingColorGrid .visual-option-icon { margin: 0 !important; }
body[data-picker-density="list"] #railingColorGrid .visual-option-name { font-size: var(--t-sm); }

/* "Why these sizes?" */
#whySizesBtn { margin: 0 0 var(--space-3, 12px); padding-left: 0; }
.why-row { padding: var(--space-3, 12px) 0; border-bottom: 1px solid var(--line-2); }
.why-row:last-of-type { border-bottom: 0; }
.why-row b { display: block; font-size: var(--t-sm); font-weight: var(--w-semi); color: var(--ink); }
.why-row p { margin: 4px 0 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55; }

.review-total-link { margin-top: var(--space-2, 8px); padding-left: 0; }

/* "Why these sizes?" — a button under the height card, with room around it. */
.app-shell .why-sizes-btn {
  margin: var(--space-3, 12px) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* The Pro grand total is an exact number — never a range, and never a
   caption under it. (Ranges belong to Homeowner mode, Phase 10.) */
.app-shell .footer-cost .foot-range,
.app-shell .footer-cost-caption { display: none !important; }

/* ==================================================================
   5 · NARROW DESKTOP
   The product is desktop-only today (Phase 8 owns the mobile pass);
   this only keeps 1280px usable.
   ================================================================== */
/* The 1360px `--w-panel: 340px` override is gone: the clamp on --w-panel
   already lands on 340px at 1280 and grows from there (L6). */
@media (max-width: 1360px) {
  /* Labels SHRINK, they do not hide. Hiding them left six numbered dots and
     one word at 1280 — the stepper stopped being a map of the job and became
     a progress bar nobody could read (AGREED-PLAN, responsive floor). */
  .shell-step { padding: var(--space-1, 4px) var(--space-2, 8px); gap: var(--space-1, 4px); font-size: 11px; }
  .shell-step-num { width: 16px; height: 16px; font-size: 9px; }
  .shell-step-num svg { width: 10px; height: 10px; }
}
@media (max-width: 1180px) {
  .shell-step { padding: var(--space-1, 4px); gap: var(--space-1, 4px); font-size: 10px; }
}

/* The "ft" suffix is a fixed label, not a flexible column: the number
   input owns the slack. Without this the span was the thing that gave
   way at 1280 and the unit was clipped to "f" (L6). */
.app-shell .dimension-input-group { min-width: 0; }
.app-shell .dimension-input-group input { min-width: 0; flex: 1 1 auto; }
.app-shell .dimension-unit { flex: 0 0 auto; white-space: nowrap; }

/* ==================================================================
   6 · THE HEIGHT PROMPT
   The first modal in the product, and the only dark one: navy card,
   slate borders, white text, while every sheet and card behind it is
   light (QA item 17). Two modal styles in one flow reads as two
   different applications. It stays non-dismissable — no scrim click,
   no close button — because the height is mandatory; only its
   surface changes.
   ================================================================== */
.height-prompt-overlay { background: rgba(9, 29, 41, .5); }

.height-prompt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
  color: var(--ink);
}
.height-prompt-title { color: var(--tuds-navy, #133A52); }
.height-prompt-subtitle,
.height-prompt-hint { color: var(--ink-2); }
.height-prompt-toggle-label { color: var(--ink-3); }

.height-prompt-stepper-label { color: var(--ink-3); }
.height-prompt-stepper-controls { border-color: var(--line); }
.height-prompt-stepper-btn {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-2);
}
.height-prompt-stepper-btn:hover { background: var(--line-2); color: var(--ink); }
.height-prompt-stepper-value {
  background: var(--surface);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.height-prompt-stepper-value input { color: var(--ink); }

.height-prompt-toggle { border-color: var(--line); }
.height-prompt-toggle-option {
  background: var(--surface);
  color: var(--ink-2);
  border-right-color: var(--line);
}
.height-prompt-toggle-option:hover { background: var(--surface-2); color: var(--ink); }
.height-prompt-toggle-option.active { background: var(--tuds-teal, #2D6A6A); color: #fff; }

.height-prompt-keep { color: var(--ink-2); }

/* ==================================================================
   7 · THE "NONE" AFFIRMATIVES  (W4 part B)
   "No stairs on this deck" / "No railing on this quote". A tick box,
   not a button: the rep is recording a decision, and the control has
   to look like it can be un-ticked. Off it is quiet; on it reads the
   same green as a finished gate, because that is what it is.
   ================================================================== */
.none-affirmative {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  width: 100%;
  margin-top: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  text-align: left;
  background: var(--surface-2, #FAFBFC);
  border: 1px solid var(--line, #E3E9ED);
  border-radius: var(--r-md, 8px);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast, .12s ease),
              border-color var(--transition-fast, .12s ease);
}
.none-affirmative:hover { border-color: var(--line-2, #CFD8DE); }
.none-affirmative b {
  display: block;
  font-size: var(--t-sm, 13px);
  font-weight: var(--w-semi, 600);
  color: var(--ink, #14212B);
}
.none-affirmative small {
  display: block;
  font-size: var(--t-xs, 11px);
  color: var(--ink-2, #5B6B77);
  margin-top: 1px;
  line-height: 1.4;
}
.none-affirmative-box {
  width: 16px; height: 16px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line-2, #CFD8DE);
  border-radius: 4px;
  background: var(--surface, #fff);
}
.none-affirmative.is-on { border-color: rgba(47, 125, 79, .35); background: var(--ok-bg, #EEF6F1); }
.none-affirmative.is-on .none-affirmative-box {
  background: var(--ok, #2F7D4F);
  border-color: var(--ok, #2F7D4F);
  /* the tick, drawn rather than shipped as an icon font */
  background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%),
                    linear-gradient(-45deg, transparent 60%, #fff 60%, #fff 70%, transparent 70%);
  background-size: 10px 10px, 10px 10px;
  background-position: 1px 3px, 4px 2px;
  background-repeat: no-repeat;
}

/* Review's primary actions, in the footer slot Next occupies on every other
   step (W6). Send is the rightmost and the only filled button, so the eye
   lands on it the same way it lands on Next. */
.footer-review-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}
.footer-review-actions.hidden { display: none !important; }
.app-shell .footer-review-actions .btn-secondary {
  background: rgba(255, 255, 255, .10) !important;
  border-color: transparent !important;
  color: var(--chrome-ink, #DCE9F0) !important;
}
.app-shell .footer-review-actions .btn-secondary:hover {
  background: rgba(255, 255, 255, .18) !important;
}
.app-shell .footer-review-actions #reviewSendQmBtn { min-width: 200px; height: 40px; }

/* ---- primaries mounted on the dark chrome (L9) -------------------
   Continue and Send to QuoteMachine sit on --chrome, where the panel
   accent is the lowest-contrast thing in the strip. They take the
   chrome variant so the CTA is the brightest element in the footer. */
.app-shell .app-footer .btn-primary,
.app-shell .app-footer .footer-next-btn,
.app-shell .app-footer #reviewSendQmBtn {
  background: var(--accent-on-chrome) !important;
  border-color: var(--accent-on-chrome) !important;
  color: #04231F !important;
}
.app-shell .app-footer .btn-primary:hover:not(:disabled),
.app-shell .app-footer .footer-next-btn:hover:not(:disabled),
.app-shell .app-footer #reviewSendQmBtn:hover:not(:disabled) {
  background: var(--accent-on-chrome-700) !important;
  border-color: var(--accent-on-chrome-700) !important;
}

/* The Review edit-jump cluster is a grid, not a wrapped row: five links
   that re-flow on every viewport read as leftovers (01 F12). */
.app-shell .review-edit-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 8px);
  margin-top: var(--space-4, 16px);
}
.app-shell .review-edit-btn { width: 100%; justify-content: center; }

/* The unpriced count is a control, not a caption (W10). */
.foot-unpriced {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2, 8px);
  margin-left: var(--space-3, 12px);
  border-radius: var(--r-full, 999px);
  border: 1px solid rgba(255, 199, 128, .45);
  background: rgba(255, 199, 128, .14);
  color: #F2C68A;
  font-family: inherit;
  font-size: var(--t-xs, 12px);
  font-weight: var(--w-semi, 600);
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
.foot-unpriced:hover { background: rgba(255, 199, 128, .26); }

/* A badge that happens to be a button keeps the badge's look. */
.badge-button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}