/* Seattle Door Co. — Pacific-NW storefront theme.
   The design language is the coming-soon letterhead's, carried through the
   whole store: carved Cinzel capitals, EB Garamond fine print, warm paper,
   fading hairline rules, and one token palette that fully resolves in both
   light and dark. Zen-garden discipline: the markup is semantic and stays
   untouched — everything visual lives here. */

/* Cinzel (OFL) — incised capitals in the tradition of chiseled letterforms;
   lowercase renders as small capitals, which is the letterhead voice.
   EB Garamond (OFL) — the bookish professional serif for legal/fine print.
   Both self-hosted (latin subset): no third-party requests, no tracking. */
@font-face {
  font-family: 'Cinzel';
  src: url(fonts/cinzel-800-latin.woff2) format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(fonts/eb-garamond-500-latin.woff2) format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --display: 'Cinzel', Georgia, "Times New Roman", serif;
  --bookish: 'EB Garamond', Georgia, "Times New Roman", serif;

  --evergreen: #2f6f57;
  --evergreen-dk: #1c4736;
  --evergreen-ink: #12332690;
  --ink: #1b241f;
  --muted: #6c7b72;
  --body-2: #3f4d45;          /* lead paragraphs, descriptions */
  --chip-ink: #4a574f;
  --bg: #f6f4ec;
  --bg2: #efece1;
  --card: #ffffff;
  --line: #e4e0d3;
  --line-2: #d6d0bf;          /* hover borders, table rules that must read */
  --gold: #b07a44;
  --danger: #b0463a;
  --ok: #2f7d54;
  --on-accent: #ffffff;       /* text on an evergreen fill */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,40,30,.07), 0 14px 40px rgba(20,40,30,.09);
  --scrim: rgba(18,30,24,.42);
  --code-bg: rgba(0,0,0,.06);

  /* The carve: light catches the lower edge of an incision, shadow tucks
     under the upper edge. Pure CSS — no images, no extra markup. */
  --carve-ink: #243029;
  --carve-lit: rgba(255,255,255,.65);
  --carve-lit-soft: rgba(255,255,255,.28);
  --carve-dark: rgba(22,30,25,.38);
  --carve-dark-soft: rgba(22,30,25,.16);
  --carve: 0 1px 0 var(--carve-lit), 0 2px 4px var(--carve-lit-soft),
           0 -1px 0 var(--carve-dark), 0 -2px 4px var(--carve-dark-soft);
  --carve-whisper: 0 1px 0 var(--carve-lit), 0 -1px 0 var(--carve-dark-soft);

  /* Paper: the letterhead's radial wash, spanning the whole document. */
  --paper: radial-gradient(120% 90% at 50% 0%, var(--bg) 0%, var(--bg2) 100%);
  /* A rule that fades at both ends — the hairline under the letterhead. */
  --hairline: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);

  /* Art stages behind product imagery. */
  --art-a: #f2eee5; --art-b: #e6e0d3;
  --art-deep-a: #e9e4d8; --art-deep-b: #d7cfbe;

  /* Soft state palettes: badge/alert fills that read in both themes. */
  --soft-ok-bg: #e4f3ea;   --soft-ok-line: #bfe3cd;   --soft-ok-ink: #1c6b40;
  --soft-warn-bg: #fff4e2; --soft-warn-line: #f0dcb2; --soft-warn-ink: #96631a;
  --soft-info-bg: #e5edf6; --soft-info-line: #c4d6ea; --soft-info-ink: #365a86;
  --soft-danger-bg: #f6e6e3; --soft-danger-line: #e6c9c3; --soft-danger-ink: #9a3320;
  --soft-act-bg: #e2f1ee;  --soft-act-line: #bfe0d8;  --soft-act-ink: #1f6b5c;
  --tint-green: #f2f8f4;   --tint-green-2: #e2efe8;   --tint-green-line: #cfe3d9;

  --topbar-bg: rgba(246,244,236,.92);
  --badge-bg: rgba(255,255,255,.8);
}
@media (prefers-color-scheme: dark) {
  :root {
    --evergreen: #4e9a7c;
    --evergreen-dk: #7fbfa4;
    --evergreen-ink: #a8d8c290;
    --ink: #ece9dd;
    --muted: #9aa89f;
    --body-2: #c6cfc8;
    --chip-ink: #b9c4bc;
    --bg: #101b15;
    --bg2: #0b140f;
    --card: #16221b;
    --line: #24352c;
    --line-2: #2f4438;
    --gold: #c98f54;
    --danger: #d8837a;
    --ok: #6fc596;
    --on-accent: #0b140f;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 14px 40px rgba(0,0,0,.35);
    --scrim: rgba(0,0,0,.55);
    --code-bg: rgba(255,255,255,.1);

    --carve-ink: #d9d5c6;
    --carve-lit: rgba(255,255,255,.10);
    --carve-lit-soft: rgba(255,255,255,.05);
    --carve-dark: rgba(0,0,0,.75);
    --carve-dark-soft: rgba(0,0,0,.35);

    --art-a: #1a2620; --art-b: #14201a;
    --art-deep-a: #1c2922; --art-deep-b: #131e18;

    --soft-ok-bg: #163a28;   --soft-ok-line: #1f4a33;   --soft-ok-ink: #7fdca6;
    --soft-warn-bg: #3a2f16; --soft-warn-line: #4a3d1e; --soft-warn-ink: #f0cf95;
    --soft-info-bg: #16283a; --soft-info-line: #22405c; --soft-info-ink: #9cc1ec;
    --soft-danger-bg: #40201b; --soft-danger-line: #57302a; --soft-danger-ink: #f0a595;
    --soft-act-bg: #14322c;  --soft-act-line: #1e4a40;  --soft-act-ink: #86d9c3;
    --tint-green: #14261d;   --tint-green-2: #182e23;   --tint-green-line: #1f4a33;

    --topbar-bg: rgba(16,27,21,.9);
    --badge-bg: rgba(16,27,21,.78);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--bg2); background-image: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--evergreen-dk); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5rem; }
/* Display headings carry the carved-sign voice everywhere. Cinzel sets
   lowercase as small caps, so no transform is needed; the carve shadow and
   balanced wrapping come from the letterhead. */
h1, .section-head h2 {
  font-family: var(--display); font-weight: 800;
  letter-spacing: .04em; line-height: 1.18;
  color: var(--carve-ink); text-shadow: var(--carve);
  text-wrap: balance;
}
main { min-height: 60vh; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--topbar-bg); backdrop-filter: blur(8px);
}
/* The letterhead hairline, fading at both ends, instead of a hard border. */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--hairline); }
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700;
  text-decoration: none; color: var(--ink); font-size: 1.05rem; letter-spacing: -.01em; }
.brand-mark { width: 40px; height: 40px; flex: none; display: block;
  border-radius: 50%; box-shadow: 0 1px 2px rgba(20,40,30,.12); }
/* The letterhead lettering: carved Cinzel capitals (lowercase renders as small
   caps), lit from below like an incision — the coming-soon page's h1, sized
   for the bar. Live text, screen-reader friendly, sharp at any density. */
.brand-word {
  font-family: var(--display); font-weight: 800; font-size: 1.18rem;
  letter-spacing: .08em; color: var(--carve-ink); white-space: nowrap;
  text-shadow: var(--carve);
}
/* Links wrap as whole units between items, never inside a phrase. */
.nav { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin-left: .5rem; }
.nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; padding: .2rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--evergreen-dk); border-bottom-color: var(--evergreen); }
.who { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .88rem; color: var(--muted); }
.whoname { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }
.linkbtn:hover { color: var(--ink); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: .15s; }
.btn-primary { background: var(--evergreen); color: var(--on-accent); }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--evergreen-dk); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--evergreen); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--soft-danger-line); }
.btn-danger:hover { background: var(--danger); color: var(--on-accent); }
.btn-lg { padding: .85rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .35rem .75rem; font-size: .82rem; }
.btn-block { display: flex; width: 100%; }
.clearlink { display: inline-block; margin-top: .6rem; color: var(--muted); font-size: .85rem; }

/* ── Layout containers ───────────────────────────────────── */
.section, .hero, .steps, .shop, .book, .order, .fit, .admin, .admin-detail, .pdp, .legal, .notfound {
  max-width: 1180px; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.4rem) clamp(1rem, 4vw, 2.5rem);
}
/* The gold letterspaced rule from the letterhead ("COMING SOON"), as the
   eyebrow voice above sections. */
.eyebrow { font-family: var(--display); text-transform: uppercase;
  letter-spacing: .26em; font-size: .72rem; color: var(--gold); font-weight: 800;
  margin: 0 0 .6rem; text-shadow: var(--carve-whisper); }
.lead { color: var(--body-2); font-size: 1.08rem; max-width: 62ch; }
.fineprint { color: var(--muted); font-size: .85rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -.02em; }
.hero .lead { margin: 1rem 0 1.6rem; max-width: 46ch; }
.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero-art { background: linear-gradient(160deg,var(--art-deep-a),var(--art-deep-b)); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.hero-art .door-svg { width: 100%; height: auto; max-height: 460px; display: block; }

/* ── Steps ───────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); }
.stepno { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--evergreen); color: var(--on-accent); font-weight: 800; margin-bottom: .5rem; }
.step h3 { font-size: 1.02rem; }
.step p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ── Section head ────────────────────────────────────────── */
/* Each section opens like the letterhead: heading over a fading hairline. */
.section-head { position: relative; display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.2rem; padding-bottom: .55rem; }
.section-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--hairline); }
.section-head h2, .section-head h1 { margin: 0; }
.seeall { text-decoration: none; font-weight: 600; color: var(--evergreen-dk); }

/* ── Door grid + card ────────────────────────────────────── */
.door-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.door-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: .16s; }
.door-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20,40,30,.12); border-color: var(--line-2); }
/* Fixed aspect box so every card is the same height regardless of what the door
   image's own proportions are — a 36" entry and a 72" multi-slide both sit in the
   same frame, centered, at a consistent scale. */
/* Square to match the normalized art canvas. Door images are drawn at one
   global pixels-per-inch, so a 96in folding wall and a 32in passage door sit on
   the same square field and their relative sizes are honest. A 3/4 box would
   letterbox every image and shrink the doors for no reason. */
.door-art { position: relative; background: linear-gradient(160deg,var(--art-a),var(--art-b));
  aspect-ratio: 1 / 1; display: flex; align-items: flex-end; justify-content: center; padding: .6rem; }
.door-art .door-svg { width: 100%; height: 100%; display: block; object-fit: contain; }
.badge { position: absolute; top: .6rem; right: .6rem; font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  background: var(--badge-bg); color: var(--evergreen-dk); border: 1px solid var(--line); padding: .2rem .45rem; border-radius: 4px; }
.door-info { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.door-collection { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; }
.door-name { font-weight: 700; font-size: 1.02rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0; }
.chip { font-size: .72rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: .12rem .55rem; color: var(--chip-ink); }
.door-price { display: flex; align-items: baseline; gap: .4rem; margin-top: .3rem; }
.price { font-weight: 800; font-size: 1.05rem; }
.price-big { font-weight: 800; font-size: 1.7rem; }
.price-note { color: var(--muted); font-size: .8rem; }
.door-lead { color: var(--muted); font-size: .78rem; }

/* ── Shop ────────────────────────────────────────────────── */
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 1.6rem; align-items: start; }
.filters { position: sticky; top: 70px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.fgroup { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.fgroup:last-of-type { border-bottom: 0; }
.fgroup h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .5rem; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; padding: .12rem 0; cursor: pointer; }
.fscroll { max-height: 200px; overflow-y: auto; padding-right: .3rem; }
.door-brand { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.search, .select, .field input, .measureform input { width: 100%; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: var(--card); color: var(--ink); }
.shop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.sortform label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); }
.sortform .select { width: auto; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }
.clearlink { text-align: center; }

/* ── Product detail ──────────────────────────────────────── */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.pdp-art { position: sticky; top: 70px; background: linear-gradient(160deg,var(--art-deep-a),var(--art-deep-b)); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.pdp-art .door-svg { width: 100%; height: auto; max-height: 560px; }
.pdp-collection { color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .8rem; }
.pdp h1 { font-size: 2rem; letter-spacing: -.02em; }
.pdp-tag { color: var(--muted); font-size: 1.05rem; }
.pdp-price { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 .3rem; }
.pdp-breakdown { font-size: .88rem; color: var(--muted); }
.credit { color: var(--evergreen-dk); font-weight: 600; }
.pdp-swatches { margin: 1.2rem 0; }
.swlabel { font-size: .85rem; color: var(--muted); }
.swatches { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--card); outline: 1px solid var(--line); display: block; }
.swatch.on { outline: 2px solid var(--evergreen); }
.spectable { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .92rem; }
.spectable th { text-align: left; color: var(--muted); font-weight: 600; padding: .45rem 1rem .45rem 0; vertical-align: top; width: 34%; }
.spectable td { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.pdp-desc { color: var(--body-2); max-width: 62ch; }

/* ── Book / calendar ─────────────────────────────────────── */
.book-head { max-width: 60ch; }
.book-door { display: flex; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1.2rem 0; box-shadow: var(--shadow); }
.book-door-art .door-svg { width: 90px; height: 150px; }
.bookform h3 { margin-top: 1.6rem; }
.calendar { display: flex; gap: .6rem; overflow-x: auto; padding: .4rem 0 1rem; }
.cal-day { min-width: 128px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .6rem; }
.cal-day h5 { margin: 0 0 .5rem; font-size: .82rem; text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.slot { display: block; width: 100%; margin: .3rem 0; padding: .45rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .85rem; cursor: pointer; }
.slot:hover:not(:disabled) { border-color: var(--evergreen); }
.slot.sel { background: var(--evergreen); color: var(--on-accent); border-color: var(--evergreen); }
.slot:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.slotpick { font-weight: 600; color: var(--evergreen-dk); min-height: 1.4rem; margin-bottom: .8rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { display: flex; flex-direction: column; gap: .25rem; margin: .3rem 0; }
.field label { font-size: .82rem; color: var(--muted); font-weight: 600; }
.cal-note { font-size: .82rem; color: var(--muted); padding: .2rem 0; }

/* ── Order + admin ───────────────────────────────────────── */
.order-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.4rem; align-items: start; margin-top: 1rem; }
.order-head h1 { font-size: 1.6rem; }
.order-blurb { color: var(--body-2); max-width: 55ch; }
.action-card, .side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.action-card.highlight { border-color: var(--evergreen); background: var(--tint-green); }
.side-card h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.demo-note { background: var(--soft-warn-bg); border: 1px solid var(--soft-warn-line); color: var(--soft-warn-ink); border-radius: 8px; padding: .5rem .7rem; font-size: .84rem; margin: .6rem 0; }
.sel-door { display: flex; gap: 1rem; align-items: center; margin: .6rem 0; }
/* A project has no single door picture, so its itemised lines are the whole
   card: stacked, full width, the contractor note under them rather than
   squeezed beside a column of line items. */
.sel-door.multi { display: block; }
.sel-art .door-svg { width: 90px; height: 150px; }
.paybreak { font-size: .9rem; line-height: 1.7; }
.state-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .03em; padding: .2rem .6rem; border-radius: 999px; background: var(--bg2); color: var(--chip-ink); border: 1px solid var(--line); }
.state-MeasurementComplete, .state-DoorPurchased, .state-Installed, .state-Completed { background: var(--soft-ok-bg); color: var(--soft-ok-ink); border-color: var(--soft-ok-line); }
.state-MeasurementCancelled, .state-Refunded { background: var(--soft-danger-bg); color: var(--soft-danger-ink); border-color: var(--soft-danger-line); }
.state-DepositPending, .state-BalancePending, .state-ContractSigned { background: var(--soft-warn-bg); color: var(--soft-warn-ink); border-color: var(--soft-warn-line); }
.reschedule { margin-top: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.reschedule summary { cursor: pointer; font-weight: 600; color: var(--evergreen-dk); }
.alert { padding: .7rem 1rem; border-radius: 8px; background: var(--soft-warn-bg); border: 1px solid var(--soft-warn-line); color: var(--soft-warn-ink); margin-bottom: 1rem; }
.alert.ok { background: var(--soft-ok-bg); border-color: var(--soft-ok-line); color: var(--soft-ok-ink); }
.timeline { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.timeline li { padding: .35rem 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }
.tstate { font-weight: 700; }
.tnote { color: var(--muted); }
.tmono { color: var(--muted); font-size: .72rem; font-family: ui-monospace, monospace; }
.fit-card { display: flex; flex-direction: column; gap: .5rem; }
.fit-choose { margin-top: -.4rem; }
.opening-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; }
.opening-tab { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .9rem; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.opening-tab.active { border-color: var(--evergreen); box-shadow: inset 0 0 0 1px var(--evergreen); }
.opening-tab.chosen .opening-tab-sub { color: var(--evergreen-dk); }
.opening-tab-name { font-weight: 700; }
.opening-tab-sub { font-size: .78rem; color: var(--muted); }
.fit-skip { margin: .9rem 0; }
.fit-skip .clearlink { background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
.opening-row .task-top { flex-wrap: wrap; }
.backlink { margin-top: 1.2rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-row form { margin: 0; }

.orders-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.orders-table th, .orders-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .9rem; vertical-align: top; }
.orders-table th { background: var(--bg2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.measureform .grid2 { margin: .5rem 0; }

/* ── Legal / misc ────────────────────────────────────────── */
.legal { max-width: 720px; }
.legal h2 { margin-top: 1.6rem; font-size: 1.15rem; }
.notfound { text-align: center; padding: 4rem 1rem; }

/* ── Footer ──────────────────────────────────────────────── */
/* The letterhead's closing line: bookish Garamond, oldstyle figures, and a
   fading hairline instead of a hard border. */
.site-footer { position: relative; margin-top: 3rem; background: var(--bg2);
  font-family: var(--bookish); letter-spacing: .02em; font-feature-settings: 'onum'; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--hairline); }
.site-footer strong { font-family: var(--display); font-weight: 800; letter-spacing: .06em;
  color: var(--carve-ink); text-shadow: var(--carve-whisper); }
.fcols { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem,4vw,2.5rem) 1rem; flex-wrap: wrap; }
.fcols p { color: var(--muted); max-width: 44ch; font-size: .98rem; }
.fcols a { display: block; color: var(--muted); text-decoration: none; padding: .15rem 0; font-size: .98rem; }
.fcols a:hover { color: var(--ink); }
.fbottom { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem) 1.6rem; color: var(--muted); font-size: .9rem; }
.fbottom a { color: var(--muted); text-decoration: none; }
.fbottom a:hover { color: var(--ink); text-decoration: underline; }
/* Language picker: each language names itself; the active one reads as chosen. */
.langpick { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem) .9rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .92rem; }
.langpick a { color: var(--muted); text-decoration: none; }
.langpick a:hover { color: var(--ink); text-decoration: underline; }
.langpick a.on { color: var(--evergreen-dk); font-weight: 700; }

/* ── Installer area ──────────────────────────────────────── */
.installer { max-width: 1180px; margin: 0 auto; padding: clamp(1.2rem,3vw,2.4rem) clamp(1rem,4vw,2.5rem); }
.job-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.1rem; }
.job-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.job-open { display: flex; gap: .8rem; padding: .9rem; text-decoration: none; color: inherit; }
.job-art { flex: 0 0 74px; }
.job-art .door-svg { width: 74px; height: 120px; }
.job-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.job-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.job-card > form { margin: 0 .9rem .9rem; }
.job-detail .order-head h1 { font-size: 1.5rem; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form .select { width: auto; }
.updateform .field input[type=file] { padding: .4rem; }
.joblog { display: flex; flex-direction: column; gap: 1rem; }
.logitem { border-left: 3px solid var(--line); padding: .1rem 0 .1rem .8rem; }
.logmeta { display: flex; gap: .5rem; align-items: center; font-size: .82rem; }
.lognote { margin: .3rem 0; }
.logphoto { margin: .5rem 0 0; }
.logphoto img { max-width: 320px; width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.logphoto figcaption { color: var(--muted); font-size: .82rem; margin-top: .3rem; }
/* auto-fit, not a fixed 3: the payments page has four tiles now and the
   dashboard has four of its own. */
.pay-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem; margin: 1rem 0 1.6rem; }
.pay-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .2rem; }
.pay-k { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pay-v { font-size: 1.7rem; font-weight: 800; }
.pay-sub { color: var(--muted); font-size: .85rem; }
.pay-h { margin: 1.4rem 0 .6rem; }
.onboard { max-width: 860px; margin: 0 auto; padding: 2rem clamp(1rem,4vw,2.5rem); }
.companyform h3 { margin: 1.5rem 0 .4rem; font-size: 1.02rem; }
.plain { list-style: none; padding: 0; margin: .3rem 0; }
.plain li { padding: .2rem 0; }
.tasks { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0; }
.task-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.task-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.task-pay { margin-left: auto; font-weight: 700; }
.task-sub { font-size: .85rem; margin: .25rem 0 .5rem; }
.task-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .4rem 0; }
.task-actions form { margin: 0; }
.task-update, .measure-details { margin: .5rem 0; }
.task-update summary, .measure-details summary { cursor: pointer; display: inline-block; }
.task-badge { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: .18rem .55rem; border-radius: 999px; background: var(--bg2); color: var(--chip-ink); border: 1px solid var(--line); }
.task-Unassigned { background: var(--bg2); color: var(--muted); }
.task-Assigned { background: var(--soft-warn-bg); color: var(--soft-warn-ink); border-color: var(--soft-warn-line); }
.task-Scheduled { background: var(--soft-info-bg); color: var(--soft-info-ink); border-color: var(--soft-info-line); }
.task-InProgress { background: var(--soft-act-bg); color: var(--soft-act-ink); border-color: var(--soft-act-line); }
.task-Completed { background: var(--soft-ok-bg); color: var(--soft-ok-ink); border-color: var(--soft-ok-line); }
.task-Cancelled { background: var(--soft-danger-bg); color: var(--soft-danger-ink); border-color: var(--soft-danger-line); }

/* ── Customer progress tracker ───────────────────────────── */
.tracker { list-style: none; display: flex; padding: 0; margin: 1rem 0 1.8rem; overflow-x: auto; }
.track-step { flex: 1 0 auto; min-width: 88px; text-align: center; position: relative; color: var(--muted); font-size: .78rem; }
.track-step .dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; margin: 0 auto .4rem;
  background: var(--bg2); border: 2px solid var(--line); color: var(--muted); font-weight: 800; font-size: .85rem; position: relative; z-index: 1; }
.track-step .tlabel { position: relative; z-index: 1; padding: 0 .2rem; display: block; }
.track-step::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.track-step:first-child::before { display: none; }
.track-step.done .dot { background: var(--evergreen); border-color: var(--evergreen); color: var(--on-accent); }
.track-step.done::before { background: var(--evergreen); }
.track-step.now { color: var(--ink); font-weight: 700; }
.track-step.now .dot { background: var(--card); border-color: var(--evergreen); color: var(--evergreen-dk); box-shadow: 0 0 0 4px rgba(47,111,87,.15); }
.apt-big { font-size: 1.1rem; font-weight: 700; color: var(--evergreen-dk); background: var(--tint-green); border: 1px solid var(--tint-green-line);
  border-radius: 8px; padding: .6rem .9rem; display: inline-block; margin: .3rem 0; }
.order-main h2 { font-size: 1.5rem; }
.cal-status { color: var(--ok); font-weight: 600; }
.ship-status { display: inline-block; font-weight: 800; color: var(--evergreen-dk); background: var(--tint-green); border: 1px solid var(--tint-green-line); border-radius: 999px; padding: .15rem .6rem; }
.ship-timeline { list-style: none; padding: 0; margin: .9rem 0 0; }
.ship-timeline li { display: flex; gap: .7rem; padding: .5rem 0; border-left: 2px solid var(--line); margin-left: 6px; padding-left: 1rem; position: relative; }
.ship-dot { position: absolute; left: -7px; top: .7rem; width: 12px; height: 12px; border-radius: 50%; background: var(--line); border: 2px solid var(--card); }
.ship-dot.on { background: var(--evergreen); box-shadow: 0 0 0 3px rgba(47,111,87,.2); }
.region-badge { font-size: .68rem; font-weight: 700; padding: .12rem .5rem; border-radius: 4px; }
.region-Washington { background: var(--soft-ok-bg); color: var(--soft-ok-ink); border: 1px solid var(--soft-ok-line); }
.region-PacificNorthwest { background: var(--soft-info-bg); color: var(--soft-info-ink); border: 1px solid var(--soft-info-line); }
.region-National { background: var(--bg2); color: var(--muted); border: 1px solid var(--line); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero, .pdp, .shop, .order-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .filters, .pdp-art { position: static; }
  /* Keep navigation usable on phones: wrap it to its own full-width row and let
     it scroll horizontally rather than hiding it. */
  .topbar { flex-wrap: wrap; row-gap: .5rem; padding: .6rem 1rem; }
  .who { margin-left: auto; }
  .nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 1.1rem; padding-bottom: .15rem; -webkit-overflow-scrolling: touch;
    /* A right-edge fade hints that the rail swipes; the extra right padding is
       what the fade eats at full scroll, so the last link is never dimmed. */
    padding-right: 1.6rem;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent); }
  .nav a { white-space: nowrap; }
  /* The hero render is the best thing on the page — show it on phones too, just
     capped so it can't push the copy and CTA below the fold. It follows the copy
     in source order, so the headline still lands first. */
  .hero-art { padding: 1rem; }
  /* max-width MUST be here alongside max-height. The art canvas is square, so
     capping height alone lets a 44vh-tall image also be 44vh WIDE; on a 390px
     phone that plus padding exceeds the viewport, and because grid children
     default to min-width:auto the oversized item widens the whole column and
     shoves the copy off-screen. Capping both, plus min-width:0, contains it. */
  .hero > * { min-width: 0; }
  .hero-art .door-photo, .hero-art .door-svg {
    max-height: 44vh; max-width: 100%; width: auto; height: auto; margin: 0 auto; }
}
@media (max-width: 620px) {
  .steps, .grid2, .pay-summary { grid-template-columns: 1fr; }
  /* Wide tables scroll horizontally inside themselves; the page never does. */
  .orders-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .orders-table thead, .orders-table tbody, .orders-table tfoot { display: table; width: 100%; min-width: 460px; }
  /* Narrow money tables (statements, cockpit panels, journal lines) fit the
     phone as-is — the amounts must be visible without a swipe. */
  .orders-table.fit thead, .orders-table.fit tbody, .orders-table.fit tfoot { min-width: 0; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form .select, .inline-form input, .inline-form button { width: 100%; }
  .shop-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
  .fcols { flex-direction: column; gap: 1rem; }
  .task-actions { flex-direction: column; align-items: stretch; }
  .task-actions form, .task-actions .btn { width: 100%; }
  .sel-door { flex-direction: column; align-items: flex-start; }
  .book-door { flex-direction: column; align-items: flex-start; }
  .track-step { min-width: 72px; font-size: .66rem; }
  main { min-height: 50vh; }
}

/* ── Internal metrics dashboard ─────────────────────────────────────────── */
.channel-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1.2rem; }
.channel-tabs .ctab { padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; text-decoration: none; color: inherit; background: var(--card); }
.channel-tabs .ctab.on { background: var(--evergreen); color: var(--on-accent); border-color: var(--evergreen); }
.metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.metric-card { border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; background: var(--card); }
.metric-card .mc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.metric-card .mc-val { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: .15rem 0; }
.metric-card .mc-tgt { font-size: .76rem; color: var(--muted); }
table.scorecard td.basis { max-width: 340px; font-size: .78rem; }
.pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill.ok { background: var(--soft-ok-bg); color: var(--soft-ok-ink); }
.pill.off { background: var(--soft-danger-bg); color: var(--soft-danger-ink); }
ul.funnel { list-style: none; padding: 0; margin: 0 0 .5rem; }
ul.funnel li { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--line); }
ul.funnel li strong { font-variant-numeric: tabular-nums; }
.channel-hero { margin-bottom: 1rem; }
.channel-hero h2 { margin: 0 0 .25rem; }
ul.chneeds { margin: .3rem 0 0; padding-left: 1.1rem; }
ul.chneeds li { margin: .3rem 0; }

/* ── Generated photorealistic door art (falls back to inline SVG) ────────── */
.door-photo { width: 100%; height: auto; display: block; object-fit: contain; border-radius: 6px; }
/* Door photos are transparent PNG/WebP normalized to one canvas, so they just need
   to fit their box — never stretch, never overflow. */
.door-art .door-photo { width: 100%; height: 100%; object-fit: contain; }
.sel-art .door-photo, .book-door-art .door-photo { width: 100%; max-width: 130px; height: auto; margin: 0 auto; }
/* Equal-height cards: the info block absorbs the slack so rows line up. */
.door-grid { align-items: stretch; }
.door-card .door-info { flex: 1 1 auto; }
.door-card .door-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em; }

/* ── Door configurator ──────────────────────────────────────────────────── */
.configure { max-width: 1180px; margin: 0 auto; padding: 0 1rem; }
.cfg-grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 1.5rem; align-items: start; }
/* Grid children default to min-width:auto, so wide <select>s push the whole page
   sideways and clip the header. Let them shrink instead. */
.cfg-grid > *, .cfg-fields > * { min-width: 0; }
.cfg-fields .select, .cfg-fields input, .cfg-fields textarea { max-width: 100%; box-sizing: border-box; }
.cfg-preview { position: sticky; top: 1rem; }
.cfg-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem 1rem; }
.cfg-fields .field { display: flex; flex-direction: column; gap: .25rem; }
.cfg-fields label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cfg-section { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--card); }
.cfg-section h3 { margin: 0 0 .7rem; font-size: 1rem; }
.issue { display: flex; gap: .5rem; padding: .45rem .7rem; border-radius: 8px; margin: .3rem 0; font-size: .88rem; }
.issue.block { background: var(--soft-danger-bg); color: var(--soft-danger-ink); }
.issue.warn { background: var(--soft-warn-bg); color: var(--soft-warn-ink); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table td { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.price-table td.amt { text-align: right; font-variant-numeric: tabular-nums; }
.price-table tr.total td { border-bottom: none; font-weight: 700; font-size: 1.1rem; padding-top: .6rem; }
.price-table tr.sub td { color: var(--muted); font-size: .85rem; }
@media (max-width: 860px) { .cfg-grid { grid-template-columns: 1fr; } .cfg-preview { position: static; } }

/* ── Brand logo (roundel mark + serif wordmark) ──────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
/* Phones: shrink the wordmark before the nav starts wrapping mid-phrase, and keep
   the mark SQUARE — it's a circular roundel now, not the old tall door slab, so a
   22x29 box would stretch it. */
@media (max-width: 620px) {
  .brand-word { font-size: 1.05rem; letter-spacing: .06em; }
  .brand-mark { width: 30px; height: 30px; }
}

/* ── ZIP availability gate ───────────────────────────────────────────────── */
.zipgate { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .6rem; }
.zipgate .field { flex: 0 0 190px; }
.zipmsg { margin: .4rem 0 1rem; font-size: .92rem; line-height: 1.5; }
.zipmsg:empty { display: none; }
.zipmsg.ok { color: var(--soft-ok-ink); }
.zipmsg.warn { color: var(--soft-warn-ink); }
.zipmsg.gap { background: var(--soft-warn-bg); color: var(--soft-warn-ink); border-left: 3px solid var(--gold);
  padding: .8rem 1rem; border-radius: 0 8px 8px 0; }

/* ── Legal pages ─────────────────────────────────────────────────────────── */
.legal { max-width: 760px; line-height: 1.65; }
.legal h2 { margin-top: 1.8rem; font-size: 1.12rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .35rem 0; }
.legal .callout { background: var(--bg2); border-left: 3px solid var(--evergreen); padding: 1rem 1.2rem;
  border-radius: 0 10px 10px 0; margin: 1.2rem 0; }
.legal code { background: var(--code-bg); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }

/* ── Cancellation legs (supplier + installer) ────────────────────────────── */
table.legs tr.total td { border-top: 2px solid var(--line-2); padding-top: .5rem; }

/* ── Hardware preview overlay (composited onto the hardware-free door photo) ── */
/* The overlay is positioned in PERCENTAGES OF THIS BOX, so the box has to be
   exactly the image box — no padding, no letterboxing. The art canvas is square
   and products are drawn at real scale inside it, so a square stage with the image
   filling it means canvas percentages and CSS percentages are the same thing.
   Any padding here shifts every piece of hardware by that padding. */
.door-art-stage { position: relative; display: block; padding: 0;
  aspect-ratio: 1 / 1; background: linear-gradient(160deg,var(--art-a),var(--art-b));
  border-radius: var(--radius); overflow: hidden; }
.door-art-stage .door-photo { width: 100%; height: 100%; object-fit: fill; }
.door-art-stage .door-photo, .door-art-stage svg { display: block; width: 100%; height: auto; }
.hw-overlay {
  position: absolute;
  /* left/top/width and the mirror transform are computed server-side from the
     door's real dimensions + the 36" lockset standard (HardwareImageProvider). */
  transform-origin: center center;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  z-index: 2;
}

/* ── Wood showcase (homepage) ─────────────────────────────────────────────
   Solid wood is the highest-margin line and by far the best photography, so it
   gets its own band above the rest of the catalog. */
.section-head { flex-wrap: wrap; gap: .6rem 1.2rem; }
.section-sub { margin: .5rem 0 0; max-width: 62ch; color: var(--muted); }
.wood-feature { background: linear-gradient(170deg, var(--art-a), var(--art-b)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem; }
.wood-feature .section-head { align-items: flex-start; }

/* Species tiles — the entry point into a filtered wood shop. */
.species-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.species-tile a { display: flex; flex-direction: column; gap: .1rem; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease; }
.species-tile a:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,40,30,.08), 0 14px 30px rgba(20,40,30,.1); }
.species-tile a:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 2px; }
.species-art { display: block; aspect-ratio: 1 / 1; background: linear-gradient(160deg,var(--art-a),var(--art-b));
  border-radius: 8px; overflow: hidden; margin-bottom: .55rem; }
.species-art .door-photo, .species-art .door-svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.species-name { font-weight: 700; font-size: .95rem; }
.species-count { font-size: .78rem; color: var(--muted); }

/* ── Active filter chips ──────────────────────────────────────────────────
   Each applied filter is individually removable; "Clear all" keeps the sort. */
.fchips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.fchip { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
  font-size: .82rem; font-weight: 600; color: var(--evergreen-dk);
  background: var(--tint-green); border: 1px solid var(--tint-green-line); border-radius: 999px; padding: .28rem .7rem; }
.fchip:hover { background: var(--tint-green-2); }
.fchip:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 2px; }
.fchip-x { font-size: 1.05rem; line-height: 1; color: var(--muted); }
.fchip-clear { background: transparent; border-color: var(--line); color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Filter sidebar ───────────────────────────────────────────────────────── */
/* Long facet lists scroll inside the sticky rail rather than running off-screen. */
.filters { max-height: calc(100vh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.fgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; padding: .15rem 0; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary h4 { margin: 0; }
.fgroup > summary::after { content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.fgroup[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fgroup > summary:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 2px; border-radius: 4px; }
.check > span:first-of-type { flex: 1; }
.fcount { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.filters-actions { margin-top: .9rem; }
.filters-head { display: none; }
.filter-trigger { display: none; }
.filters-scrim { display: none; }

@media (prefers-reduced-motion: reduce) {
  .species-tile a, .fgroup > summary::after, .filters { transition: none; }
}

/* ── Mobile: filters become a bottom sheet ────────────────────────────────
   A 250px rail stacked above 110 door cards would push the results a full
   screen down, so on phones the facets move behind a trigger and the results
   stay at the top. */
@media (max-width: 900px) {
  .filter-trigger { display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .55rem 1rem; cursor: pointer; box-shadow: var(--shadow);
    /* Sits above the results, full-width tap target on the smallest screens. */
    align-self: flex-start; }
  .filter-trigger:focus-visible { outline: 2px solid var(--evergreen); outline-offset: 2px; }

  .filters { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60;
    max-height: 86vh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 0 1.1rem 1.1rem; transform: translateY(101%);
    transition: transform .25s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 40px rgba(20,40,30,.22); }
  .filters.open { transform: none; }
  .filters-head { display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1; background: var(--card);
    padding: .9rem 0 .6rem; margin: 0 0 .2rem; border-bottom: 1px solid var(--line); }
  .filters-head h2 { margin: 0; font-size: 1.05rem; }
  .filters-close { font-size: 1.6rem; line-height: 1; background: none; border: 0;
    color: var(--muted); cursor: pointer; padding: 0 .3rem; }
  /* The primary action stays reachable without scrolling the sheet. `position:
     sticky` cannot do this here: the action bar is the last child of the form, so
     bottom:0 has no travel room inside its own parent and it only appears once you
     have already scrolled to the end. Instead the sheet is a flex column whose
     FACETS scroll and whose action bar is a fixed-size row outside that scroll. */
  .filters { display: flex; flex-direction: column; overflow: hidden; }
  /* flex-basis MUST stay auto here. The shorthand `flex: 1` means `1 1 0%`, and a
     zero basis inside an auto-height container contributes no content height — the
     sheet collapses to just its header and renders as an invisible strip. */
  #filterform { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .filters-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; }
  .filters-actions { flex: none; background: var(--card);
    padding: .8rem 0 .2rem; margin-top: 0; border-top: 1px solid var(--line); }
  .filters-scrim { display: block; position: fixed; inset: 0; z-index: 55;
    background: var(--scrim); }
  /* MUST outrank the rule above: a bare `display:block` in a media query beats the
     UA stylesheet's [hidden]{display:none}, which would leave the scrim covering
     the whole page and swallowing every tap while the sheet is closed. */
  .filters-scrim[hidden] { display: none; }
  /* Bigger touch targets on the facet rows. */
  .check { padding: .4rem 0; font-size: .95rem; }
  .check input { width: 18px; height: 18px; }
}

/* Phones: two door cards per row. The default auto-fill(min 240px) collapses to a
   single column below ~520px, which turns a 110-door catalog into 110 full screens
   of scrolling — browsing becomes unusable exactly where it matters most. */
@media (max-width: 620px) {
  .door-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .door-info { padding: .7rem; }
  .door-name { font-size: .92rem; }
  .door-price { font-size: 1rem; }
  /* The spec pills are noise at this size; keep the card to name + price. */
  .door-card .chips { display: none; }
  .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .wood-feature { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .filters { transition: none; }
}

/* ── Itemized payment breakdown ───────────────────────────────────────────
   Door and installation are separate sales by separate entities, each with its
   own tax line, so the summary is a list of rows rather than one blended total. */
.paybreak { margin: .6rem 0 0; font-size: .92rem; }
.payline { display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .28rem 0; border-bottom: 1px dotted var(--line); }
.payline:last-child { border-bottom: 0; }
.payline.muted span { color: var(--muted); }
.paytotal { margin-top: .3rem; padding-top: .5rem; border-top: 1px solid var(--line);
  border-bottom: 0; font-weight: 800; font-size: 1.05rem; }
.pdp-tax { color: var(--muted); font-size: .85rem; margin: .4rem 0 0; }

/* ── Installer rate card ──────────────────────────────────────────────────── */
.rates-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; box-shadow: var(--shadow); margin-bottom: 1.6rem; }
.fld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.fld > span { font-weight: 700; font-size: .9rem; }
.fld > span em { font-weight: 400; font-style: normal; color: var(--muted); }
.fld input { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.fld small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.rates-h { margin-top: 2rem; }
.rates-table td { font-variant-numeric: tabular-nums; }
/* Margin is the number that decides whether a rate is viable, so it is coloured
   rather than left for the installer to work out against a target in a doc. */
.marg-ok   { color: var(--ok); font-weight: 800; }
.marg-warn { color: var(--gold); font-weight: 800; }
.marg-neg  { color: var(--danger); font-weight: 800; }

/* ── Realtime configurator ────────────────────────────────────────────────── */
.cfg-busy { cursor: progress; }
/* Fade the controls, never the preview: the customer is looking at the product
   while they change it, and dimming that reads as "something broke". */
.cfg-busy .cfg-controls { opacity: .55; transition: opacity .15s ease; }
.cfg-controls { transition: opacity .2s ease; }

.hw-overlay { position: absolute; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.hw-overlay.is-in { opacity: 1; }

.cfg-pricecard { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); margin-top: 1rem; }

.qty-row { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: .9rem 0; }
.qty-label { font-weight: 700; font-size: .9rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--bg2); }
.qty-btn { width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.2rem; line-height: 1; color: var(--ink); transition: background .15s ease; }
.qty-btn:hover { background: var(--tint-green-2); }
.qty-input { width: 52px; height: 38px; border: 0; background: transparent; text-align: center;
  font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }

.cfg-add { transition: transform .12s ease, background .15s ease; }
.cfg-add:not(:disabled):active { transform: scale(.985); }
.cfg-add:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }

/* An unavailable option stays visible and disabled with its reason, so the
   customer learns the constraint rather than watching choices disappear. */
.field select option:disabled { color: var(--muted); font-style: italic; }

.cfg-issues:not([hidden]) { margin-bottom: 1rem; display: grid; gap: .5rem; }

/* Cart count in the header, bumped when something is added. */
[data-cart-count] { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 .35rem; border-radius: 999px; background: var(--evergreen); color: var(--on-accent);
  font-size: .72rem; font-weight: 800; margin-left: .3rem; }
[data-cart-count].is-bumped { animation: cart-bump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.cfg-toast { position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 1rem);
  background: var(--evergreen); color: var(--on-accent); padding: .7rem 1.2rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem; box-shadow: 0 8px 30px rgba(20,40,30,.28);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; z-index: 80; }
.cfg-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .hw-overlay, .cfg-toast, .cfg-add, .cfg-controls { transition: none; }
  [data-cart-count].is-bumped { animation: none; }
}
.payline-note { color: var(--muted); font-weight: 400; }
/* A long hardware name must not clip its price inside the select. */
.field select { max-width: 100%; text-overflow: ellipsis; }

/* ── Installer dashboard ─────────────────────────────────────────────────── */
/* The crew's own numbers. Goal bar and month chart are plain elements: the
   heights are the only computed values, so there is nothing here a chart
   library would do better, and nothing to load behind the auth gate. */
.goal-row { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.goal-row strong { font-size: 1.5rem; }
.goal-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.goal-fill { height: 100%; background: var(--evergreen); border-radius: 999px;
    transition: width .5s cubic-bezier(.22,.61,.36,1); }
.goal-fill.met { background: var(--ok); }

.bars { display: flex; align-items: flex-end; gap: .5rem; height: 150px; margin: 0 0 1rem; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; }
.bar-track { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; }
.bar-fill { width: 100%; background: var(--evergreen); border-radius: 4px 4px 0 0;
    transition: height .5s cubic-bezier(.22,.61,.36,1); }
.bar-label { font-size: .75rem; color: var(--muted); }

.installer-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

/* ── Installer onboarding: application form, agreements, compliance ──────── */
.fieldhint { font-size: .78rem; color: var(--muted); margin-top: .2rem; display: block; }
.info-box { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.info-box ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.info-box li { padding: .12rem 0; }

/* Each agreement is a disclosure plus the checkbox that accepts it. Keeping them
   visually joined matters: the box and the text it binds you to are one thing. */
.agreements { display: flex; flex-direction: column; gap: .9rem; margin-top: .8rem; }
.agreement-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; }
.agreement-item summary { cursor: pointer; padding: .2rem 0; }
.agreement-body { font-size: .88rem; color: var(--ink); padding: .5rem 0 .2rem; }
.agreement-body ul { margin: .3rem 0; padding-left: 1.2rem; }
.agreement-body li { padding: .22rem 0; }
.checkbox-row { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; margin-top: .5rem; cursor: pointer; }
.checkbox-row input[type=checkbox] { margin-top: .28rem; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--evergreen); }

/* The setup / compliance checklist. The leading glyph carries the state, so it is
   given a fixed column and a colour rather than left to flow with the text. */
.checklist { list-style: none; padding: 0; margin: .6rem 0 0; }
.checklist li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .5rem; align-items: baseline;
    padding: .38rem 0; border-top: 1px solid var(--line); font-size: .88rem; }
.checklist li:first-child { border-top: 0; }
.checklist li > span:first-child { font-weight: 800; color: var(--muted); text-align: center; }
.checklist li.ok > span:first-child { color: var(--ok); }
.checklist li.todo > span:first-child { color: var(--danger); }
.checklist li.warn > span:first-child { color: var(--gold); }
.checklist li.ok { color: var(--muted); }
.checklist li .btn { margin-left: .4rem; }

@media (prefers-reduced-motion: reduce) {
    .goal-fill, .bar-fill { transition: none; }
}

/* ── RCW 18.27.114 contractor disclosure (Order page) ─────────────────────── */
.notice-card h3 { margin-top: 0; }
.notice-text { white-space: pre-wrap; font-family: inherit; font-size: .86rem;
    line-height: 1.5; color: var(--muted); background: var(--bg-soft, rgba(127,127,127,.06));
    border: 1px solid var(--line); border-radius: 8px; padding: 1rem;
    max-height: 20rem; overflow-y: auto; }
.notice-form { display: flex; flex-direction: column; gap: .7rem; margin-top: .9rem; max-width: 32rem; }
.notice-form .check { display: flex; gap: .5rem; align-items: baseline; }

/* ── On-site checkout (Stripe embedded) ──────────────────────── */
.checkout-page { max-width: 920px; margin: 0 auto; padding: 1.2rem; }
.checkout-mount { min-height: 480px; margin-top: 1rem; }

/* ── Header: cart + account chip ─────────────────────────── */
.cartlink { position: relative; display: flex; align-items: center; color: var(--muted); }
.cartlink:hover { color: var(--ink); }
.cartlink svg { width: 22px; height: 22px; display: block; }
.cart-badge { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--evergreen); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 16px; text-align: center; }
.cart-badge.is-bumped { animation: cart-bump .3s ease; }
@keyframes cart-bump { 40% { transform: scale(1.4); } }
.who-chip { display: flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--muted); }
a.who-chip:hover .whoname { color: var(--ink); }
.avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--evergreen-dk);
  color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; letter-spacing: .02em; flex: none; }

/* ── Cart page ───────────────────────────────────────────── */
.cartpage { max-width: 860px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.cart-line { display: flex; gap: 1rem; align-items: center; padding: 1rem 0;
  border-bottom: 1px solid var(--hairline); }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 700; }
.cart-line-sel { color: var(--muted); font-size: .88rem; }
.cart-line-total { font-weight: 700; white-space: nowrap; min-width: 6ch; text-align: right; }
.cart-summary { margin-top: 1rem; display: grid; gap: .3rem; justify-items: end; }
.cart-summary .grand { font-size: 1.15rem; font-weight: 800; }
.cart-checkout { margin-top: 2rem; }
.cart-checkout .fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 40rem; }
.cart-checkout .notice-card { margin: 1rem 0; }
.cart-checkout .btn { margin-top: 1rem; }
@media (max-width: 640px) {
  .cart-line { flex-wrap: wrap; }
  .cart-checkout .fields { grid-template-columns: 1fr; }
}

/* ── Address autocomplete (checkout) ─────────────────────── */
.addr-search { grid-column: 1 / -1; }
.addr-search gmp-place-autocomplete { width: 100%; display: block; }

/* ── Folded statutory notice (cart checkout + order page) ── */
.notice-fold { border: 1px solid var(--hairline); border-radius: 10px; padding: .7rem .9rem; background: #fff; }
.notice-fold summary { cursor: pointer; display: flex; flex-direction: column; gap: .1rem; }
.notice-fold summary::-webkit-details-marker { display: none; }
.notice-fold summary { list-style: none; position: relative; padding-right: 1.4rem; }
.notice-fold summary::after { content: "▸"; position: absolute; right: .2rem; top: .1rem;
  color: var(--muted); transition: transform .15s ease; }
.notice-fold[open] summary::after { transform: rotate(90deg); }
.notice-fold-title { font-weight: 700; }
.notice-fold-sub { color: var(--muted); font-size: .85rem; }
.notice-fold[open] summary { margin-bottom: .7rem; }
.notice-fold .notice-text { margin: 0; }

/* ── Customer cockpit: the communication thread ──────────────────────────────
   One chain per customer, every channel in it. Direction is carried by
   alignment and fill (theirs left and plain, ours right and tinted) so the
   shape of a conversation reads before any of the words do. Colours are the
   existing tokens, so dark mode needs no second definition. */
.thread { display: flex; flex-direction: column; gap: .75rem; max-height: 32rem; overflow-y: auto; padding: .25rem; }
.thread-empty { color: var(--muted); text-align: center; padding: 2rem 0; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg-in { align-self: flex-start; }
.msg-out { align-self: flex-end; align-items: flex-end; }
.msg-bubble { border: 1px solid var(--line); border-radius: var(--radius); padding: .55rem .8rem; white-space: pre-wrap; word-break: break-word; }
.msg-in .msg-bubble { background: var(--card); border-bottom-left-radius: 4px; }
.msg-out .msg-bubble { background: var(--tint-green); border-color: var(--tint-green-line); border-bottom-right-radius: 4px; }
/* An internal note never left the building — it must never be mistaken for
   something the customer saw. */
.msg-note .msg-bubble { background: var(--bg2); border-style: dashed; font-style: italic; }
.msg-meta { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin-top: .25rem; }
.msg-subject { font-weight: 700; margin-bottom: .25rem; }
.msg-media { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.msg-media img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.msg-failed .msg-bubble { border-color: #b4453a; }
.thread-blocked { background: var(--bg2); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: .6rem .8rem; color: var(--muted); font-size: .85rem; }
.composer { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.composer-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.composer textarea { flex: 1; min-height: 4.5rem; font: inherit; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); resize: vertical; }

/* Express consent: its own box, never bundled into the terms acceptance. Sized
   to read as a deliberate choice rather than fine print. */
.consent { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; padding: .8rem .9rem; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); font-size: .86rem; color: var(--chip-ink); cursor: pointer; }
.consent input { margin-top: .15rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--evergreen); }

/* The inbox: who is waiting on us, longest first. Three columns that collapse
   to a stack on a phone, because the admin reads this on site. */
.inbox { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); margin-bottom: 1.4rem; }
.inbox-row { display: grid; grid-template-columns: minmax(9rem, 15rem) 1fr auto; gap: .8rem; align-items: baseline; padding: .65rem .9rem; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row:hover { background: var(--bg2); }
/* A left bar, not a colour wash: it survives both themes and reads at a glance
   without making the text harder to read. */
.inbox-wait { box-shadow: inset 3px 0 0 var(--evergreen); font-weight: 600; }
.inbox-who { display: flex; gap: .4rem; align-items: baseline; }
.inbox-preview { color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-when { color: var(--muted); font-size: .78rem; font-weight: 400; white-space: nowrap; }
.chip-warn { background: var(--tint-amber, var(--bg2)); border-color: var(--line-2); }
.thread-consent { color: var(--muted); font-size: .78rem; margin: .6rem 0 0; }
@media (max-width: 640px) {
  .inbox-row { grid-template-columns: 1fr; gap: .2rem; }
  .inbox-preview { white-space: normal; }
}

/* Find a customer. Sized to be typed into without aiming — the admin is on the
   phone with the person they're looking for. */
.searchbar { display: flex; gap: .5rem; margin: 0 0 1rem; }
.searchbar input { flex: 1; max-width: 30rem; font: inherit; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); }
.searchbar input:focus { outline: 2px solid var(--evergreen); outline-offset: 1px; }

/* Irreversible actions, folded away. Deliberate navigation, never a button
   sitting beside everyday ones. */
.danger-fold { margin-top: 1.5rem; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: .7rem .9rem; }
.danger-fold summary { cursor: pointer; color: var(--muted); font-size: .85rem; }
.danger-fold p { font-size: .82rem; margin: .6rem 0; }

/* The post-job review page. One question, eleven big tap targets — this is read
   on a phone, standing in a hallway, and anything fiddly costs an answer. */
.review { max-width: 40rem; margin: 0 auto; padding: 2rem 1.2rem 3rem; }
.nps-scale { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.2rem 0 .4rem; }
.nps-num { flex: 1 1 2.6rem; min-width: 2.6rem; min-height: 3rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.nps-num:hover, .nps-num:focus { background: var(--tint-green); border-color: var(--evergreen); outline: none; }
.nps-ends { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin: 0 0 1.5rem; }
.review-comment { display: flex; flex-direction: column; gap: .5rem; margin: 1.5rem 0; }
.review-comment label { font-size: .9rem; color: var(--muted); }
.review-comment textarea { font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); resize: vertical; }
.review-comment button { align-self: flex-start; }
.review-saved { background: var(--tint-green); border: 1px solid var(--tint-green-line); border-radius: var(--radius); padding: .7rem .9rem; }
.review-google { margin-top: 2rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); }
.review-google h2 { margin-top: 0; font-size: 1.05rem; }
.review-back { margin-top: 2rem; font-size: .85rem; }
/* An answered review that nobody has closed the loop on. */
.review-flag { display: inline-flex; align-items: center; gap: .35rem; }

/* An unhappy customer nobody has called yet. Warm, not alarming — this is a
   person to ring, not an outage. */
.action-card.highlight-warn { border-color: #c08a3e; background: var(--bg2); }
.review-row { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: 0; }
.review-row form { margin-left: auto; }

/* The questions the four steps don't answer: who comes to the house, what
   happens if it's wrong, what happens if they change their mind. Set quieter
   than the steps — reassurance, not a sales pitch. */
.assurances { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem 2rem; max-width: var(--wide, 72rem); margin: 0 auto; padding: 2.5rem 1.2rem 0; }
.assurance h3 { font-size: .95rem; margin: 0 0 .4rem; }
.assurance p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.assurance a, .fineprint a { color: var(--evergreen); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Product spec sheet.
   A <dl> with no rules of its own renders the way the browser defaults say:
   term on one line, definition indented 40px on the next. That is fine for a
   glossary and wrong for a spec table, and on a phone it turned every one of
   ~20 attributes into two lines of stairs. Label and value now sit on one row
   with a hairline between, which reads at any width. */
.spec-group { margin-top: 1.5rem; }
.spec-group h3 { font-size: 1rem; margin: 0 0 .2rem; }
.specs { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr; margin: 0; font-size: .9rem; }
.specs dt { color: var(--muted); padding: .45rem .9rem .45rem 0; border-top: 1px solid var(--line); }
.specs dd { margin: 0; padding: .45rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }

/* Payment schedule (50/40/10, or one payment in full). Paid rows recede; the
   row that is due now carries the weight, because it is the only one the
   customer can act on. */
.schedule-h { font-size: .95rem; margin: 1rem 0 .1rem; }
.schedule .payline.paid span:last-child { color: var(--muted); }
.schedule .payline.due { font-weight: 700; }
.cancel-window { margin-top: .8rem; }

/* Installer coverage map. Tall enough to read a metro at a glance; the tables
   under it carry the same data, so a missing key or a blocked tile costs
   nothing but the picture. */
.coverage-map { height: 60vh; min-height: 380px; width: 100%; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg2); margin: 1rem 0 .4rem; }