/* ============================================================================
   DECK GARDEN — PACK BUILDER · "VINTAGE ALMANAC" THEME OVERLAY
   ----------------------------------------------------------------------------
   Drop-in re-skin of the builder, matching the home page's Almanac theme
   (../theme-almanac.css): aged parchment, oxblood + forest-ink + antique
   brass, Playfair Display + EB Garamond letterpress type.

   This file is loaded AFTER style.css in builder/index.html, so it overrides
   by the cascade. style.css is untouched — remove the one <link> line to
   revert. Zero HTML/JS changes.

   How it works:
     1. Re-map style.css's :root tokens to the Almanac palette  (~70% coverage)
     2. Re-map the "Home-page Polish Pass" --hp-* tokens too     (the !important frames)
     3. Override the ~30% of colors that are hardcoded (not var()): the green
        image/audio subsystem, the reds, placeholder, append-toggle, gradients,
        and the few literal violets in the bold-headings pass.
     4. Swap fonts to Playfair Display (display) + EB Garamond (body).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ============================ 1. TOKEN RE-MAP ============================ */
:root {
  /* ---- Calm warm-neutral system with a real VALUE LADDER so nesting reads:
         page (recedes) → card (lifts) → sub-panel (whisper) → input (clean).
         The old palette made all four the same tan, so nothing had structure. */
  --bg:          #ece3cf;   /* page — deepest warm tan, sits BACK */
  --surface:     #fdfbf4;   /* section card — warm off-white, lifts FORWARD */
  --surface-2:   #f6f0e1;   /* sub-panels — a whisper of warmth above white */
  --ink:         #2c2419;   /* sepia-black ink */
  --ink-soft:    #5f5340;   /* faded ink */
  --ink-muted:   #94866a;   /* light annotation */

  /* ---- ONE accent family: antique brass (structure) + ink (text) ---- */
  --gold:        #a9802f;
  --gold-dark:   #7e5e1d;
  --gold-soft:   #f1e7cd;   /* pale brass wash for pills/code chips */
  --gold-line:   #ddca9d;   /* soft brass hairline */
  --line:        #e2d7bf;   /* quiet neutral border (lower-contrast, calmer) */
  --line-soft:   #ece3ce;

  /* accent (categories checked, meter, etc.) -> BRASS, not green ---- */
  --accent:      #9a7327;   /* brass — single accent for selected states */
  --accent-soft: #f3ead2;   /* pale brass wash */

  /* info/help -> quiet brass-ink; warn -> brass; error -> oxblood (actions only) */
  --info:        #6e5a2f;
  --info-soft:   #f4eedd;
  --info-line:   #ddccb0;

  --warn:        #8a5a14;
  --warn-soft:   #f6ecd2;

  --error:       #7a2620;   /* oxblood — reserved for remove / errors only */

  /* ---- Polish-pass accents -> all BRASS now (the decorative dusty-oxblood was
     adding the reddish busyness to header bar / frames; fold it into brass).
     The logo's oxblood is applied separately as a literal, so this is safe. -- */
  --hp-purple:       #8a6a22;   /* deep brass (was dusty oxblood) */
  --hp-purple-light: #c0973f;   /* brass-light */
  --hp-gold-light:   #c69a44;   /* brass-light */
  --hp-shadow-lift:  0 26px 54px -20px rgba(60, 40, 16, 0.30),
                     0 10px 22px -12px rgba(122, 92, 42, 0.22);
}

/* ============================ 2. FONTS ================================== */
body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 17px;            /* EB Garamond runs a hair small; nudge up */
}
header h1,
section > h2,
.deck-details-header h2,
.builder-home {
  font-family: 'Playfair Display', Georgia, serif !important;
}
/* Make the builder logo EXACTLY match index.html's .logo:
   Playfair Display, 26px / weight 800, oxblood text, 14px gap, 96px emblem
   with the same sepia drop-shadow. Overrides the style.css .builder-home base. */
.builder-home {
  gap: 14px !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #7a2620 !important;               /* oxblood — exact index value (--oxblood isn't defined in builder) */
}
.builder-home img {
  width: 192px !important; height: 192px !important;   /* doubled (was 96px) */
  object-fit: contain;
  filter: sepia(0.25) drop-shadow(0 2px 4px rgba(60,40,16,0.3)) !important;
}

/* ============================ 3. HARDCODED OVERRIDES ==================== */

/* ---- Page backdrop: warm parchment gradient (kills the violet wash) ---- */
body {
  background:
    radial-gradient(1200px 600px at 18% -220px, rgba(169, 128, 47, 0.12), transparent 60%),
    radial-gradient(900px 520px at 100% -40px, rgba(122, 38, 32, 0.07), transparent 60%),
    linear-gradient(168deg, #f6efdc 0%, var(--bg) 48%, #f1e7d0 100%) !important;
}

/* ---- Base header gradient (the non-polish literal) ---- */
header {
  background:
    radial-gradient(680px 280px at 50% -120px, rgba(198, 154, 68, 0.22), transparent 65%),
    linear-gradient(180deg, var(--surface) 0%, #f6edd6 100%) !important;
  box-shadow: 0 1px 0 rgba(169, 128, 47, 0.20), 0 14px 30px -24px rgba(60, 40, 16, 0.28);
}

/* ---- Inputs: clean WHITE field (bottom of the value ladder), crisp brass
   focus ring. White fields against the warm panels are what make the form
   feel professional & legible instead of tan-on-tan. ---- */
input[type="text"], input[type="number"], textarea, select, input[type="file"] {
  background: #ffffff !important;
}
input:focus, textarea:focus, select:focus {
  background: #ffffff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(169,128,47,0.14) !important;
}
input::placeholder, textarea::placeholder { color: #aa9a78; }

/* ---- Non-desktop notice banner (Almanac skin) ---- */
.desktop-notice {
  background: linear-gradient(180deg, #f6edd6 0%, var(--gold-soft) 100%);
  border-bottom-color: var(--gold);
  color: var(--ink-soft);
}
.desktop-notice strong { color: var(--gold-dark); }

/* ---- Build-mode pill: brass-framed segmented selector (Almanac skin) ---- */
.build-mode-pill {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--surface) 0%, #f6edd6 100%);
  box-shadow: 0 4px 18px rgba(138, 105, 22, 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.build-mode-pill legend { color: var(--gold-dark); }
.build-mode-opt { color: var(--ink-soft); }
.build-mode-opt:hover { background: var(--gold-soft); }
.build-mode-opt input[type="radio"] { accent-color: var(--gold); }
.build-mode-opt:has(input:checked) {
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-color: var(--gold-dark);
  color: #fff;
}

/* ---- Image dropzones: soft brass dashed on a calm panel (was busy gradient) -- */
.dropzone {
  background: var(--surface-2) !important;
  border-color: var(--gold-line) !important;
}
.dropzone.hover {
  background: var(--gold-soft) !important;
  border-color: var(--gold) !important;
}

/* ---- Content-image subsystem: GREEN folded into the brass/ink family so it
   no longer competes. Same calm panel as other dropzones; ink text. ---- */
.dropzone-content {
  border-color: var(--gold-line);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.dropzone-content.hover {
  background: var(--gold-soft);
  border-color: var(--gold);
}
.hint-content {
  color: var(--ink-soft);
  background: var(--surface-2);
  border-left-color: var(--gold-line);
}
.card-row .content-thumb-slot          { color: var(--ink-muted); }
.card-row .content-thumb-slot.filled   { border-color: var(--gold-line); }
.card-row .content-thumb-slot.empty    { border-color: var(--gold-line); background-color: var(--surface-2); }
.card-row .content-thumb-slot.empty:hover { background-color: var(--gold-soft); }

/* ---- Audio subsystem: GREEN -> brass/ink (an attached clip reads via a brass
   chip, not a green one). ---- */
.audio-slot.empty:hover { background: var(--surface-2); }
.audio-slot.filled {
  border-color: var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold-dark);
}
.audio-slot.filled .audio-clear:hover { color: var(--error); }

/* ---- Secondary buttons: parchment face (was #fff) ---- */
button { background: #fdf8ec; }

/* ---- Link / remove buttons: oxblood family (was muddy reds) ---- */
button.link            { color: #9a4a40; }
button.link:hover      { color: #5c1a16; }
button.remove          { color: #9a3a30; }
button.remove:hover    { background: #f6e3df; color: #5c1a16; }

/* ---- Status: a muted sage for "ok" (the ONE quiet positive cue), oxblood for
   error. Kept low-saturation so it reads calm, not the old bright green. ---- */
.status.ok { color: #5a7355; }

/* ---- Bulk-fill textarea: clean white like the other inputs ---- */
.bulk-fill textarea { background: #ffffff !important; }

/* ---- Categories pills: brass hairline on white; checked = filled brass chip
   with white text (a clear, single-accent selected state — no green). ---- */
.categories { background: var(--surface-2) !important; }
.categories .cat-pill { border-color: var(--gold-line); background: #ffffff; color: var(--ink-soft); }
.categories .cat-pill:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-dark); }
.categories .cat-pill input { accent-color: var(--gold); }
.categories .cat-pill:has(input:checked) {
  background: var(--gold-soft) !important;
  border-color: var(--gold) !important;
  color: var(--gold-dark) !important;
}
.categories legend { background: var(--surface) !important; }

/* ---- Bundle meter: brass fill (was green), quiet parchment track ---- */
.bundle-meter-bar  { background: var(--surface-2); }
.bundle-meter-fill { background: linear-gradient(90deg, var(--gold), var(--gold-dark)) !important; }
.bundle-meter-value strong, .bundle-meter-cards strong { color: var(--gold-dark) !important; }

/* ============================ 4. POLISH-PASS LITERALS =================== */
/* These rules in style.css use literal violet/gold rgba()s with !important,
   so the --hp-* re-map alone can't reach them. Re-state with the brass/oxblood
   equivalents at equal-or-higher specificity. */

/* Section header-band: VERY subtle single-hue brass wash, no red, no diagonal
   hatch (the hatch + two-color tint was a big source of the "busy" feel). ---- */
section::after {
  background:
    linear-gradient(180deg, rgba(169,128,47,0.08) 0%, transparent 100%) !important;
}
/* Band-bottom hairline — a quiet brass rule */
section::before {
  background: linear-gradient(90deg, transparent, rgba(169,128,47,0.30) 25%, var(--gold-line) 50%, rgba(169,128,47,0.30) 75%, transparent);
}

/* ---- Calmer sub-panels: render-option fieldsets sit on the whisper tint with
   a soft brass hairline, so they read as ONE quiet nesting level (not another
   competing tan block). ---- */
.render-option-group,
.bulk-target,
.reversed-group {
  background: var(--surface-2) !important;
  border: 1px solid var(--gold-line) !important;
}
/* Cover / card-back upload rows: same quiet panel */
.back-row {
  background: var(--surface-2);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-md);
}

/* ---- Section & footer FRAMES: replace the brass→dusty-oxblood two-tone
   gradient border with a single clean brass hairline. The reddish edge on
   every card was part of the visual noise; one quiet hue reads far more
   professional. ---- */
section,
footer {
  background: var(--surface) !important;
  border: 1px solid var(--gold-line) !important;
  border-radius: 18px !important;
}
/* The how-it-works mini step cards: same single-hue treatment */
.how-step {
  background: var(--surface) !important;
  border: 1px solid var(--gold-line) !important;
}

/* HEADER title: calm single-hue brass gradient (no red/oxblood in the title —
   that mid-title red was part of the busyness). Soft brass drop-shadow. ---- */
header h1 {
  background-image: linear-gradient(100deg,
      var(--gold-dark) 0%, var(--gold) 45%, #c49a45 70%, var(--gold-dark) 100%) !important;
  filter: drop-shadow(0 2px 8px rgba(126, 94, 29, 0.16)) !important;
}

/* Number medallion: warm brass face (literal golds -> brass tints) ---- */
section > h2::before,
.deck-details-header h2::before {
  background:
    linear-gradient(150deg, #e7c878 0%, var(--gold) 45%, var(--gold-dark) 100%) !important;
}

/* Fieldset legend pills: brass wash (already var-based, nudge the literal #fff) */
.render-option-group legend,
.bulk-target legend,
.categories legend,
.deck-meta .render-option-group legend,
.bulk-fill .bulk-target legend {
  background: linear-gradient(135deg, var(--surface), var(--gold-soft)) !important;
}

/* ============================ 5. LATTICE MOTIF ========================== */
/* The Flower-of-Life backdrop already uses a brass stroke (%23a8812f); re-state
   it so the builder's tile size/opacity match the home page's Almanac motif. */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56'%3E%3Cg fill='none' stroke='%23a8812f' stroke-width='0.6' stroke-opacity='0.18'%3E%3Ccircle cx='-32' cy='0' r='32'/%3E%3Ccircle cx='0' cy='0' r='32'/%3E%3Ccircle cx='32' cy='0' r='32'/%3E%3Ccircle cx='64' cy='0' r='32'/%3E%3Ccircle cx='96' cy='0' r='32'/%3E%3Ccircle cx='-48' cy='28' r='32'/%3E%3Ccircle cx='-16' cy='28' r='32'/%3E%3Ccircle cx='16' cy='28' r='32'/%3E%3Ccircle cx='48' cy='28' r='32'/%3E%3Ccircle cx='80' cy='28' r='32'/%3E%3Ccircle cx='-32' cy='56' r='32'/%3E%3Ccircle cx='0' cy='56' r='32'/%3E%3Ccircle cx='32' cy='56' r='32'/%3E%3Ccircle cx='64' cy='56' r='32'/%3E%3Ccircle cx='96' cy='56' r='32'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 88px 77px !important;
}