/* The brand face, self-hosted from the same variable file www.sawbox.com serves.
   Its wght axis runs 400-700 (read from the font's own fvar table), so that is
   the range declared below - claiming 100 900 would just clamp silently.
   Note: sawbox.com's own @font-face declares no range at all, which makes the
   browser synthesise a fake bold instead of using the real 700 master. This is
   deliberately more correct than the parent site, not a divergence from it. */
@font-face {
  font-family: 'Google Sans';
  src: url('GoogleSans-Variable-Latin.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Logo asset. This URL resolves against styles.css's own location, not the
     linking page's, so the one default below is correct from every directory -
     a page in steps/ or catalogue/ does NOT need to override it. */
  --my-logo: url('img/logotransparent.png');

  /* ── The brand palette ──────────────────────────────────────────────────
     These six values ARE www.sawbox.com's Elementor global kit, verbatim
     (wp-content/uploads/elementor/css/post-11.css). The kit is six colours and
     nothing else. Think hard before adding a seventh: this file used to carry
     37 hex values - most of them Tailwind's slate/blue/amber ramps - and the
     mismatch with the main site was the result. */
  --brand-navy:  #192049;   /* kit "secondary" - headings, chrome, links     */
  --brand-gold:  #E1B83D;   /* kit "primary"   - buttons, accents            */
  --btn-hover:   #F0D878;   /* kit gold hover  - LIGHTER than base, not darker
                               (the old #c9a332 darkened, inverting the one
                               piece of feedback on every page)              */
  --bg-page:     #FDFDFD;   /* kit "accent"    - the page itself             */
  --bg-subtle:   #F4F5F6;   /* kit panel fill  - panels, insets, bands       */
  /* The ONE deliberate deviation from the kit, and it is deliberate. The kit's
     secondary grey is #999999, which measures 2.80:1 on this page and 2.61:1 on
     a panel - it fails WCAG AA (4.5:1) and even the 3:1 large-text floor. The
     main site can afford it because it uses that grey for a few small accents;
     this site puts real body copy in <small> and card descriptions. So this is
     the kit's grey pulled toward the brand navy until it passes: 6.16:1 on the
     page, 5.74:1 on a panel. */
  --text-muted:  #5A6072;

  /* ── Role aliases over the six above (no new colour introduced) ───────── */
  --bg-card:    #FFFFFF;    /* a white inset lifting off a --bg-subtle panel */
  --text-navy:  var(--brand-navy);
  --text-light: var(--bg-page);   /* text on navy */

  /* The one neutral that is not in the kit, kept only for hairline table
     rules and dividers. The kit has no border colour because the main site
     draws no component outlines at all - it separates with fill and space. */
  --border-light: #E7E8EC;

  /* A form field needs a firmer edge than --border-light without introducing a
     colour: navy, thinned. Derived, not new. */
  --field-edge: color-mix(in srgb, var(--brand-navy) 30%, transparent);

  /* Shape. sawbox.com applies exactly one corner radius, everywhere:
     buttons, images, inputs and panels alike. Circles are the only exception. */
  --radius: 20px;

  --main-font: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── The type scale ─────────────────────────────────────────────────────
     The kit's ladder, with its three breakpoints (see the media queries at the
     foot of this file). Two deliberate notes:

     - The kit's own h1 is 80/50/38. That is its HERO, used once on a landing
       page. This site puts an <h1> page title on every page, where 80px would
       be absurd, so the default h1 takes the kit's DISPLAY size (48/40/32) and
       the true hero scale is --fs-hero, applied only by .hero h1 on home.html.
     - Body copy is NOT tracked negative. The kit's body/accent style is 16px /
       500 / 1.5 / letter-spacing 0; the -0.02em belongs to the display sizes
       only, and -0.04em to the hero. */
  --fs-hero: 80px;
  --fs-h1:   48px;
  --fs-h2:   48px;
  --fs-lead: 24px;   /* the paragraph under an h1 (kit "secondary") */
  --fs-h3:   22px;   /* kit "text" */
  --fs-body: 16px;   /* kit "accent" - the base */
}

@media (max-width: 1024px) {
  :root { --fs-hero: 50px; --fs-h1: 40px; --fs-h2: 40px; --fs-lead: 20px; --fs-h3: 20px; }
}

@media (max-width: 767px) {
  :root { --fs-hero: 38px; --fs-h1: 32px; --fs-h2: 32px; --fs-lead: 20px; --fs-h3: 20px; }
}

body {
  font-family: var(--main-font);
  background: var(--bg-page);
  color: var(--text-navy);
  font-weight: 500;          /* the kit's body weight; the site was 600-800 throughout */
  font-size: var(--fs-body); /* was never set at all, so every em below compounded
                                against whatever the browser happened to default to */
  line-height: 1.5;
  letter-spacing: 0;         /* the kit tracks the DISPLAY sizes negative, not body */
  padding: 30px;
  margin: 0;
}

/* ══ SITE CHROME ═════════════════════════════════════════════════════════
   One header and one footer, shared by every page that links this file. Both
   are navy bands, which is how sawbox.com carries its chrome.

   The navy is not decoration: img/logotransparent.png sets "BOX" and "DIY
   CABINETS" in WHITE, so the mark is only legible on a dark ground - which is
   what the old #878AA0 page background was really providing. Putting the navy
   behind the logo rather than behind the whole page is the main site's own
   arrangement, and it keeps the full-resolution PNG in use (the light-ground
   alternative, img/logolittle.jpg, is 216x65 and would be soft at this size). */
header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  background: var(--brand-navy);
  border-radius: var(--radius);
  padding: 14px 28px;
  margin-bottom: 28px;
}

.logo {
  margin: 0;
  background-image: var(--my-logo);
  width: 180px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
}

/* The kit's link idiom, on navy: light going gold. */
.site-nav a {
  color: var(--text-light);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--brand-gold);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
  background: var(--brand-navy);
  color: var(--text-light);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-top: 44px;
  font-size: 0.9em;
}

.site-footer a {
  color: var(--text-light);
  text-decoration: none;
  white-space: nowrap;
}

.site-footer a:hover {
  color: var(--brand-gold);
}

/* Narrow screens: the band stacks and centres rather than squeezing. */
@media (max-width: 640px) {
  header, .site-footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .logo { background-position: center; }
  .site-nav { justify-content: center; }
}

/* The kit left-aligns section headings inside its container; it centres only a
   hero. Pages that genuinely want centred text (home.html's .hero, the
   .planner-promo card) already set text-align on their own wrapper, so they are
   unaffected by dropping the blanket centring here. */
h1, h2 {
  color: var(--brand-navy);
  font-weight: 700;          /* the kit uses 500 and 700 only - never 600 */
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-h1);
  margin-bottom: 10px;
}

h2 {
  font-size: var(--fs-h2);
}

/* The kit's h3 is its "text" style - 22px at weight 500, NOT a small bold
   heading. It was never declared here, so h3s fell back to the browser's
   1.17em bold. */
h3 {
  color: var(--brand-navy);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* The hero scale, for a landing page's one big headline. */
.hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: -0.04em;
}

/* The lead paragraph under an h1. It carries real selling copy, so it gets the
   kit's SUB-HEAD treatment (navy, 500, larger) rather than --text-muted - that
   grey is #999999 and fails contrast on body-sized text. */
p.subtitle {
  color: var(--brand-navy);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  max-width: 68ch;
  margin: 0 0 40px 0;
}


/* Floating Tab Navigation Bar - Background set to #192049 */
.tab-bar {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 10px auto;

  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 8px 8px;
  border-radius: var(--radius);
  
  /* Solid, to match the navy <header> band directly above it on these pages.
     The main site's sticky header is #192049cc, but its translucency reads as
     navy because it overlays its own content; over this site's #FDFDFD page it
     came out a washed slate-blue that looked like a second, different navy. */
  background: var(--brand-navy);
}

/* Buttons set to #E1B83D with #192049 text */
.tab-btn {
  background: var(--brand-gold);
  color: var(--text-navy);
  padding: 8px 8px;
  border-radius: var(--radius);
  border: none;
  font-weight: 500;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
}

/* Active Tab Button Highlight State */
.tab-btn.active {
  background: var(--bg-card);
  color: var(--brand-navy);
  box-shadow: 0 0 0 2px var(--brand-gold);
}

/* Styling for the material drop-down to match .tab-btn */
.tab-select {
  background: var(--brand-gold);
  color: var(--text-navy);
  padding: 8px 12px;
  border-radius: var(--radius);
  border: none;
  font-weight: 500;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.tab-select:hover {
  background: var(--btn-hover);
}

.tab-select.active {
  background: var(--bg-card);
  color: var(--brand-navy);
  box-shadow: 0 0 0 2px var(--brand-gold);
}

.tab-select option {
  background-color: var(--bg-card);
  color: var(--brand-navy);
  font-weight: 500;
}


/* Grid & Card rules for external HTML injections */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto 40px auto;
  cursor: pointer;
}

.card {
  /* --bg-subtle, not white: the page is now #FDFDFD, so a #FFFFFF card with no
     border and no shadow would be invisible against it. Fill is what separates
     surfaces here. */
  background: var(--bg-subtle);
  color: var(--text-navy);
  padding: 15px;
  border-radius: var(--radius);
  text-align: center;
  transition: outline-color 0.2s ease;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

/* The main site has no hover lift and no card shadow anywhere. A gold outline
   drawn INSIDE the card's own box gives the same affordance with no shadow and
   no layout shift. */
.card:hover {
  outline-color: var(--brand-gold);
}

/* :not(.copy-btn) matters. This rule is (0,1,1) and .copy-btn is (0,1,0), so an
   unscoped "color: inherit" here wins and paints the "More Info" button's label
   in the card's navy - on the button's navy fill. That made the label invisible
   on every catalogue gallery. Pre-existing; found by screenshotting the page. */
.card a:not(.copy-btn) {
  text-decoration: none;
  color: inherit;
}

.card a.copy-btn {
  text-decoration: none;
}

.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.3s;
}

.card:hover img {
  transform: scale(1.03);
}

/* Tints an image that's reused verbatim from another card (e.g. Wood's
   "Unfinished" card, which shares its species' "Natural" card's photo) so
   the two are still visually distinguishable. The huge inset spread washes
   a translucent light gray over the whole image without needing separate
   overlay markup. */
.card img.swatch-img-unfinished {
  box-shadow: inset 0 0 0 999px rgba(211, 211, 211, 0.55);
}

.card .color-swatch {
  width: 100%;
  height: 180px;
  border-radius: var(--radius);
  transition: transform 0.3s;
  border: 1px solid var(--border-light);
}

.card:hover .color-swatch {
  transform: scale(1.03);
}

.card-content {
  margin-top: 12px;
}

.card strong, td strong {
  font-size: 1.2em;
  display: block;
  color: var(--brand-navy);
}

small {
  display: block;
  color: var(--text-muted);
  margin-top: 4px;
}

.price-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 14px;
  background: var(--brand-navy);
  border-radius: var(--radius);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--text-light);
}

/* Main Container Box set to Card Background #FDFDFD */
/* Layout only. It used to be a white card floating on the old #878AA0 page
   background; with the page itself #FDFDFD there is nothing left for it to lift
   off, and the main site has no such floating panel. */
.container-box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  color: var(--text-navy);
}

.hidden {
  display: none;
}

/* Comparison Table */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

th, td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-navy);
}

th {
  background: var(--brand-navy);
  color: var(--brand-gold);
  font-weight: 700;
  font-size: 1.05em;
}

tr:hover {
  background: var(--bg-subtle);
}

/* Detail View Styling */
.detail-header {
  border-bottom: 2px solid var(--brand-navy);
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.detail-header h2 {
  color: var(--brand-navy);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media(max-width: 768px) {
  .detail-grid {
      grid-template-columns: 1fr;
  }
}

.detail-image {
  width: 100%;
  max-height: 350px;
  object-fit: cover;
  border-radius: var(--radius);
}

.detail-desc {
  color: var(--brand-navy);
  margin-top: 15px;
  line-height: 1.5;
}

/* Sub-image pair layout */
.sub-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.sub-images-grid img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius);
}

.pros-cons {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.pro-list, .con-list {
  background: var(--bg-subtle);
  padding: 14px;
  border-radius: var(--radius);
}

.pro-list h4 { color: #15803d; margin: 0 0 8px 0; }
.con-list h4 { color: #b91c1c; margin: 0 0 8px 0; }

ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-navy);
}

.traits-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.trait-item {
  background: var(--bg-subtle);
  padding: 10px 14px;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  font-size: 0.95em;
}

.trait-label {
  color: var(--text-muted);
}

.trait-value {
  font-weight: 700;
  color: var(--brand-navy);
}

/* Heat & Moisture Environmental Specs Grid */
.env-specs-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media(max-width: 900px) {
  .env-specs-grid {
      grid-template-columns: 1fr;
  }
}

/* Panel Styling */
.heat-section, .moisture-section {
  background: var(--bg-subtle);
  padding: 15px;
  border-radius: var(--radius);
}

/* Heat vs moisture stays distinguishable, but the distinction is carried by the
   accent colour alone (gold / navy) rather than by an amber-and-blue pair that
   exists nowhere in the brand. */
.heat-section {
  border-left: 5px solid var(--brand-gold);
}

.moisture-section {
  border-left: 5px solid var(--brand-navy);
}

.heat-section h4 {
  margin: 0 0 10px 0;
  color: var(--brand-navy);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.moisture-section h4 {
  margin: 0 0 10px 0;
  color: var(--brand-navy);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.env-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.env-item {
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-light);
}

.env-label {
  font-size: 0.85em;
  color: var(--text-muted);
}

.heat-value {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--brand-navy);
  white-space: nowrap;
}

.moisture-value {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--brand-navy);
  text-align: right;
}

/* ==========================================
   STEP 1 SPECIFIC STYLES
   ========================================== */

/* Outer Container Panel */
.form-wrapper {
  max-width: 1100px;
  margin: 0 auto 40px auto;
  color: var(--text-navy);
  padding: 35px 0;
}

/* Renamed h1 due to conflict with base h1 rules */
h1.step1-specific {
  color: var(--brand-navy);
  font-size: var(--fs-h1);
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--brand-gold);
  text-align: left;
}

/* Callouts. All of them are a --bg-subtle panel with a single left accent -
   NAVY for "read this", GOLD for "do this next". They used to be three separate
   Tailwind tints (slate, blue, amber) with matching borders and body colours,
   which is most of what made the site read as a different product. */
.step-intro-box {
  background: var(--bg-subtle);
  border: none;
  border-left: 6px solid var(--brand-navy);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 30px;
}

.step-intro-box h2 {
  text-align: left;
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--brand-navy);
  font-size: 1.25em;
}

.step-intro-box ol {
  margin: 0;
  padding-left: 22px;
  color: var(--text-navy);
}

.step-intro-box ol li {
  margin-bottom: 8px;
  line-height: 1.5;
  font-weight: 500;
}

/* White, not --bg-subtle: this callout mostly lives INSIDE a fieldset, which is
   itself --bg-subtle, and a grey panel on a grey panel disappears - only the
   accent bar showed. White makes it read against the panel, and on the page the
   navy accent still delineates it. */
.info-box {
  background: var(--bg-card);
  border: none;
  border-left: 6px solid var(--brand-navy);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 15px 0;
  color: var(--brand-navy);
}

/* Explicit Section Groupings (Fieldsets) */
/* Separated by fill, not by an outline - which is how the main site separates
   everything. The surface ladder is: page #FDFDFD > panel #F4F5F6 > inset #FFF. */
fieldset {
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 35px;
  background: var(--bg-subtle);
}

legend {
  font-size: 1.25em;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--brand-navy);
  padding: 6px 16px;
  border-radius: var(--radius);
  letter-spacing: 0.5px;
}

/* Distinct Sub-card Panels */
.sub-group {
  background: var(--bg-card);
  padding: 20px;
  border-radius: var(--radius);
  margin-top: 15px;
}

/* Links & Accent Highlights */
/* The kit's link behaviour: navy, going gold on hover. There is no blue link
   anywhere in the brand. */
a.step1-specific {
  color: var(--brand-navy);
  font-weight: 700;
  text-decoration: underline;
}

a.step1-specific:hover {
  color: var(--brand-gold);
}

/* Interactive Radio/Checkbox Option Buttons */
.checkbox-group-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  /* A hairline, not the old 2px slate slab. It keeps a 1px border rather than
     going borderless because these chips appear on white, on #F4F5F6 panels and
     on white insets, so a fill alone cannot be relied on to separate them. */
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  color: var(--text-navy);
  transition: all 0.15s ease-in-out;
  user-select: none;
}

.radio-label:hover {
  border-color: var(--brand-gold);
  background: var(--bg-subtle);
}

.radio-label input[type="checkbox"],
.radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-navy);
  cursor: pointer;
}

/* High-Contrast Inputs & Textareas */
/* Every textual control, not just [type=text]. The step pages were each
   inlining their own email field because this selector did not reach it. */
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--field-edge);
  font-family: var(--main-font);
  font-size: 0.95em;
  color: var(--brand-navy);
  background: var(--bg-card);
  margin-top: 8px;
  resize: vertical;
}

textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus {
  outline: none;
  border-color: var(--brand-navy);
  box-shadow: 0 0 0 3px rgba(25, 32, 73, 0.2);
}

/* Read-only stand-in for a text field whose value only ever comes from
   clicking a swatch card (door_categories.html's swatchDisplay field type)
   — styled to match input[type="text"] above, minus anything implying it's
   editable. */
.swatch-display {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--field-edge);
  font-family: var(--main-font);
  font-size: 0.95em;
  color: var(--brand-navy);
  background: var(--bg-subtle);
  margin-top: 8px;
}

.swatch-display.swatch-display-empty {
  color: var(--text-muted);
  font-style: italic;
}

/* Helper "?" Button Badge */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.15s ease;
}

.help-btn:hover {
  background: var(--brand-gold);
  color: var(--brand-navy);
  transform: scale(1.12);
}

/* Dialog & Dialog Backdrop Styling */
dialog {
  border: none;
  border-radius: var(--radius);
  padding: 24px;
  background: var(--bg-card);
  color: var(--text-navy);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  width: 90%;
}

dialog::backdrop {
  background: rgba(25, 32, 73, 0.5);   /* navy, not slate-900 */
  backdrop-filter: blur(3px);
}

/* Summary Terminal Review Area */
#review-area {
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 13.5px;
  background: var(--brand-navy);
  color: var(--text-light);
  border: none;
  line-height: 1.5;
}

/* Action Buttons */
/* The kit's button, verbatim: gold fill, navy text, 20px radius, 14/24 padding,
   weight 500, no border, no shadow, and a hover that goes LIGHTER. */
.btn-step1-specific {
  background: var(--brand-gold);
  color: var(--brand-navy);
  padding: 14px 24px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
  text-decoration: none;
  display: inline-block;
  margin-top: 12px;
}

.btn-step1-specific:hover {
  background: var(--btn-hover);
}

/* Secondary action button, e.g. "Cancel" next to a .btn-step1-specific confirm button */
.btn-cancel {
  background: transparent;
  color: var(--text-light);
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 2px solid var(--text-light);
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-cancel:hover {
  background: rgba(253, 253, 253, 0.15);
}

/* Bar of action buttons pinned to the bottom of the viewport, e.g. the
   Cancel/Confirm pair on doors/door_categories.html's detail view. */
.floating-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 6px 6px;
  background: color-mix(in srgb, var(--brand-navy) 92%, transparent);
  box-shadow: 0 -4px 20px rgba(25, 32, 73, 0.25);
}

.floating-action-bar .btn-step1-specific,
.floating-action-bar .btn-cancel {
  margin-top: 0;
}

/* Stacked list of plain reference links below the style picker, e.g.
   Painted/Wood's Product Showcase Catalog / Mid-Century Modern links on
   doors/door_categories.html. */
.resource-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Cabinet material entry cards (cabinet_materials.html's material list,
   the same "add multiple, pick a category, edit details" pattern used for
   .door-card/.hardware-card, but shared here instead of duplicated per-page) */
.material-card {
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.material-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-light);
}

.remove-material-btn, .change-material-btn {
  background: #ef4444;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.2s ease;
}

.change-material-btn {
  background: var(--brand-navy);
  margin-right: 6px;
}

.remove-material-btn:hover {
  background: #dc2626;
}

.change-material-btn:hover {
  color: var(--brand-gold);
}

.selected-title {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--brand-navy);
}

.selected-label {
  font-size: 0.85em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* Step 2 Transition Footer */
/* Gold accent: this one is the "here is your next step" hand-off. */
.step2-callout {
  background: var(--bg-subtle);
  border: none;
  border-left: 6px solid var(--brand-gold);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 35px;
}

.step2-callout h3 {
  margin: 0 0 8px 0;
  color: var(--brand-navy);
  font-size: 1.25em;
}

.step2-callout p {
  margin: 0 0 16px 0;
  color: var(--brand-navy);
  line-height: 1.5;
  font-weight: 500;
}

/* Small action link/button. Used for the "More Info" link on catalog cards
   (emitted by sawbox-id.js's renderColorCatalog) and for toolbar buttons like
   comparison.html's "Copy Table Data (CSV)". The .copied state confirms a copy. */
.copy-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 14px;
  background: var(--brand-navy);
  color: var(--text-light);
  border: none;
  border-radius: var(--radius);
  font-size: 0.9em;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.copy-btn:hover {
  color: var(--brand-gold);
}

.copy-btn.copied {
  background: #15803d;
}

/* ══ SMALL SHARED COMPONENTS ══════════════════════════════════════════════
   Each of these was an inline style="" repeated across pages - the back link
   13 times, the plain link 8, the field label 5. They are here so a theme
   change reaches them. Pure one-off spacing (a lone margin-top on one element)
   is deliberately still inline: turning those into utility classes would mean
   inventing a spacing vocabulary this no-build repo has no way to police. */

/* "← Back to ..." at the top of a content or step page. */
.back-link {
  display: inline-block;
  color: var(--brand-navy);
  font-weight: 500;
  text-decoration: underline;
  padding: 10px 16px;
}

.back-link:hover {
  color: var(--brand-gold);
}

/* A link that should not look like a link (card titles, list rows). */
.plain-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--brand-navy);
}

.plain-link:hover {
  color: var(--brand-gold);
}

/* Form field furniture. */
.field-label {
  display: block;
  font-weight: 700;
  color: var(--brand-navy);
  margin-bottom: 6px;
}

.field-hint {
  margin: 4px 0 16px 0;
  color: var(--text-muted);
  font-size: 0.95em;
}

/* Validation message. Red is kept: it is one of the few places colour carries
   meaning rather than style. Hidden until the page reveals it. */
.field-error {
  display: none;
  color: #dc2626;
  font-size: 0.88em;
  margin-top: 4px;
  font-weight: 500;
}

.text-error {
  color: #dc2626;
}

/* A rule between sections of a picker page. */
.section-rule {
  margin-top: 30px;
  border-top: 1px solid var(--border-light);
  padding-top: 25px;
}

/* The bare "x" that closes a <dialog>. */
.dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.dialog-close:hover {
  color: var(--brand-navy);
}

/* An input that should not run the full width of its panel (the step pages'
   email field). The shared input rule sets width:100%; this caps it. */
.field-narrow {
  max-width: 400px;
}