/* Deck Garden Pack Builder — polished, sectioned, friendly. */

/* Metric-matched fallback for Cormorant Garamond (the brand wordmark/title
   serif). Renders Georgia pre-scaled to ~Cormorant's metrics while the web font
   loads, so the wordmark doesn't visibly shrink/lighten when Cormorant swaps in
   (display:swap). Used as the first fallback in the .builder-home / h1 stack. */
@font-face {
    font-family: 'Cormorant Fallback';
    src: local('Georgia'), local('Times New Roman');
    size-adjust: 89%;
    ascent-override: 95%;
    descent-override: 28%;
}

:root {
    --card-ratio: 1.6;

    /* Palette */
    --bg:          #f6f3ea;
    --surface:     #ffffff;
    --surface-2:   #fbf8ef;
    --ink:         #2c2618;
    --ink-soft:    #6a5f3e;
    --ink-muted:   #97896a;
    --gold:        #b8902a;
    --gold-dark:   #8a6916;
    --gold-soft:   #f1e6b8;
    --gold-line:   #e8d68c;
    --line:        #e0d7bf;
    --line-soft:   #ede6cf;

    --accent:      #1e6ba8;
    --accent-soft: #e6f0fa;

    --info:        #2e5d7e;
    --info-soft:   #e7f3fa;
    --info-line:   #b9d8ec;

    --warn:        #a86c1a;
    --warn-soft:   #fbf2dc;

    --error:       #b03030;

    /* Spacing + radius */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(80, 60, 20, 0.06);
    --shadow-md: 0 2px 12px rgba(80, 60, 20, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background:
        radial-gradient(1200px 600px at 20% -200px, rgba(184, 144, 42, 0.07), transparent 60%),
        radial-gradient(900px 500px at 100% 0px, rgba(30, 107, 168, 0.05), transparent 60%),
        var(--bg);
    color: var(--ink);
    line-height: 1.5;
    font-size: 15.5px;
    -webkit-font-smoothing: antialiased;
}

/* ============================== HEADER ============================== */
header {
    padding: 36px 36px 28px;
    background: linear-gradient(180deg, #ffffff 0%, #fcf8ec 100%);
    border-bottom: 1px solid var(--line);
    text-align: center;
}
header h1 {
    margin: 0 0 8px;
    font-size: 2em;
    letter-spacing: -0.01em;
    color: var(--gold-dark);
    font-weight: 700;
}
header .subtitle {
    margin: 0 auto;
    max-width: 640px;
    color: var(--ink-soft);
    font-size: 1.02em;
}
header .subtitle code {
    background: var(--gold-soft);
    color: var(--gold-dark);
    padding: 1px 7px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.85em;
}

/* "How it works" strip below the title — three quick step bubbles. */
.how-it-works {
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 24px auto 4px;
    max-width: 820px;
}
.how-step {
    flex: 1 1 200px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.how-step-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.how-step-text {
    flex: 1;
    font-size: 0.92em;
    color: var(--ink-soft);
    line-height: 1.4;
}
.how-step-text strong {
    color: var(--ink);
    display: block;
    margin-bottom: 2px;
}

/* ============================== SECTIONS ============================== */
section {
    padding: 26px 32px 30px;
    max-width: 1100px;
    margin: 22px auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    counter-increment: section-counter;
}

/* Auto-numbered section badge sitting on the top-left edge. */
body { counter-reset: section-counter; }
section > h2::before {
    content: counter(section-counter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 12px;
    background: var(--gold);
    color: #fff;
    border-radius: 50%;
    font-size: 0.85em;
    font-weight: 700;
    vertical-align: middle;
    line-height: 1;
}

h2 {
    margin: 0 0 8px;
    font-size: 1.35em;
    color: var(--gold-dark);
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
h2 .optional {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--ink-muted);
    background: var(--line-soft);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
    letter-spacing: 0.3px;
}

/* Section intro line — short sentence right under the heading explaining
   what the section is for. */
.section-intro {
    margin: 4px 0 20px;
    color: var(--ink-soft);
    font-size: 0.96em;
    max-width: 720px;
}

/* ============================== FORM FIELDS ============================== */
label {
    color: var(--ink);
    font-size: 0.95em;
}
input[type="text"],
textarea,
input[type="file"] {
    font: inherit;
    font-size: 0.96em;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    min-width: 220px;
    color: var(--ink);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
    background: #fffef9;
}
textarea {
    min-height: 70px;
    resize: vertical;
    line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: #b8ad8a; }

/* ============================== DECK META ============================== */
/* "Append data to existing deck" toggle — sits to the right of the
   "Deck details" section heading. Wraps to its own line on narrow
   viewports thanks to flex-wrap. */
.deck-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 4px;
}
.deck-details-header h2 { margin: 0; }
/* ---- Non-desktop notice banner (top of page, shown only on touch/small) -- */
.desktop-notice {
    display: none;             /* JS adds .show on non-desktop devices */
    align-items: center;
    /* NO flex `gap` here — iOS Safari < 14.1 ignores flex gap, which on a real
       iPhone collapsed the icon inline and dropped the horizontal padding
       (it rendered fine in Chrome/Blink). The icon now carries its own
       margin-right instead, and box-sizing + width:100% keep the padding from
       collapsing on narrow viewports. */
    padding: 14px 18px;
    background: linear-gradient(180deg, #fff6d8 0%, #ffe9a8 100%);
    border-bottom: 2px solid var(--gold, #b8902a);
    color: #5a4410;
    font-size: 0.98rem;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 2px 10px rgba(138, 105, 22, 0.18);
    box-sizing: border-box;
    width: 100%;
}
.desktop-notice.show { display: flex; }
.desktop-notice-icon {
    font-size: 1.5rem;
    flex: 0 0 auto;
    margin-right: 12px;        /* replaces flex gap (Safari-safe) */
    display: inline-block;     /* fallback if flex is ignored */
    min-width: 1.5rem;         /* lock width so the emoji never collapses inline */
    text-align: center;
    line-height: 1;            /* trim emoji ascenders/descenders */
}
.desktop-notice strong { color: #4a3608; }

/* ---- Build-mode pill: prominent new-vs-append selector at the top ---------
   Sits under the 3 steps / star. A pretty, clearly-visible segmented pill so
   "am I making a new deck or adding to one?" is the first, unmissable choice. */
.build-mode-bar {
    display: flex;
    justify-content: center;
    margin: 4px auto 26px;
    padding: 0 16px;
}
.build-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px 8px 16px;
    border: 1.5px solid var(--gold-line);
    border-radius: 999px;
    background:
        linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow: 0 4px 16px rgba(138, 105, 22, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    flex-wrap: wrap;
    justify-content: center;
}
.build-mode-pill legend {
    float: none;
    width: auto;
    padding: 0 6px 0 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.86em;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--gold-dark);
}
/* The two choices — each a tappable segment that fills gold when selected. */
.build-mode-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 0.98em;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.build-mode-opt:hover { background: var(--gold-soft); }
.build-mode-opt input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: var(--gold);
    cursor: pointer;
    margin: 0;
}
.build-mode-opt:has(input:checked) {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    border-color: var(--gold-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(138, 105, 22, 0.3);
}
.build-mode-opt:has(input:checked) input[type="radio"] { accent-color: #fff; }
.build-mode-pill .help-btn { margin-left: 0; }
@media (max-width: 560px) {
    .build-mode-pill { border-radius: var(--r-lg); }
    .build-mode-opt { flex: 1 1 100%; justify-content: center; }
}

/* Visual cue while append-mode is on: dim the "required" red asterisks
   the placeholder + browser-required state otherwise creates, and
   show a thin amber banner under the section header so the user
   remembers required-field checks are bypassed. */
.deck-meta.is-append-mode .required-mark { display: none; }

.deck-meta .row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.deck-meta label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88em;
    color: var(--ink-soft);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.deck-meta label input,
.deck-meta label textarea {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink);
}
.deck-meta .row > label {
    flex: 1 1 240px;
}
.deck-meta .flags {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    gap: 22px;
}
.deck-meta .flags label {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.92em;
    color: var(--ink);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.deck-meta .flags input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--gold);
    cursor: pointer;
}

/* Render-options panel: three fieldsets stacking how the deck's title /
   content / orientation render, replacing the flat 3-checkbox row. */
.deck-meta .render-options {
    margin-top: 18px;
    gap: 14px;
    flex-direction: column;
}
.deck-meta .render-option-group {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin: 0;
    background: var(--surface-2);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    width: 100%;
}
.deck-meta .render-option-group legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.82em;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.deck-meta .render-option-group .render-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.95em;
    color: var(--ink);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    cursor: pointer;
    flex-direction: row;
    transition: background 120ms ease, border-color 120ms ease;
}
.deck-meta .render-option-group .render-pill:hover { background: #fff; }
.deck-meta .render-option-group .render-pill:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.deck-meta .render-option-group .render-pill input[type="radio"],
.deck-meta .render-option-group .render-pill input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
    min-width: 0;
}

/* Brief flash on a render-option-group when the user tries to add cards
   without picking that group — pulses the border so the prompt's
   "choose first" message has a visual anchor. */
@keyframes dgRenderOptionAttention {
    0%, 100% { box-shadow: 0 0 0 0 rgba(176, 48, 48, 0); border-color: var(--line); }
    25%, 75% { box-shadow: 0 0 0 4px rgba(176, 48, 48, 0.18); border-color: var(--error); }
}
.deck-meta .render-option-group.needs-attention {
    animation: dgRenderOptionAttention 1.2s ease-in-out 2;
}

.word-counter {
    display: block;
    font-size: 0.78em;
    color: var(--ink-muted);
    margin-top: 4px;
    letter-spacing: 0.2px;
    text-transform: none;
    font-weight: normal;
}
.word-counter.over {
    color: var(--error);
    font-weight: 600;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    font-size: 0.88em;
    color: var(--ink-soft);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    cursor: pointer;
}
.inline-check input[type="checkbox"] {
    min-width: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
}

/* Inline checkbox + "?" help button sitting on one row under the
   Description textarea. */
.inline-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* "Auto generate About page" — same panel treatment as the render-option
   groups (Card title / Card content / Reversed cards) so it reads as
   part of that family of controls. */
.deck-meta .desc-about-pill-row {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    align-self: flex-start;
}
.deck-meta .desc-about-pill-row .render-pill {
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.95em;
    color: var(--ink);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.deck-meta .desc-about-pill-row .render-pill:hover { background: #fff; }
.deck-meta .desc-about-pill-row .render-pill:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.deck-meta .desc-about-pill-row .render-pill input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
    min-width: 0;
}

/* Generic "?" help button used next to checkboxes / radios. Small circle
   that fires an alert() with the option's explainer text. */
.help-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--info-line);
    background: var(--info-soft);
    color: var(--info);
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.help-btn:hover {
    background: #d6eaf7;
    border-color: var(--info);
    transform: scale(1.08);
}
.help-btn:active { transform: scale(0.96); }

/* Description row: left half holds the textarea + inline-check, right half
   holds the Language label/input side-by-side on one line. */
.deck-meta .desc-lang-row { align-items: flex-start; }
.deck-meta .desc-lang-row .desc-half { flex: 1 1 460px; }
.deck-meta .desc-lang-row .lang-half {
    flex: 1 1 240px;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
}
.deck-meta .desc-lang-row .lang-half .lang-label {
    flex: 0 0 auto;
}
.deck-meta .desc-lang-row .lang-half input {
    flex: 1 1 auto;
    min-width: 120px;
    /* Cancel the uppercased/letter-spaced look the parent label applies
       to its child input — the input should read like a normal field. */
    text-transform: none;
    letter-spacing: normal;
}
/* Language autocomplete wrapper — takes the input's place in the flex row;
   the input fills it and the suggestion dropdown overlays below. */
.lang-ac {
    position: relative;
    flex: 1 1 auto;
    min-width: 120px;
    display: block;
}
.lang-ac input { width: 100%; box-sizing: border-box; min-width: 0; }
.lang-ac-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 40;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    display: none;
}
.lang-ac-menu.is-open { display: block; }
.lang-ac-opt {
    padding: 9px 12px;
    cursor: pointer;
    color: var(--ink);
    font-size: 0.95em;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid #f0ead8;
}
.lang-ac-opt:last-child { border-bottom: none; }
.lang-ac-opt:hover, .lang-ac-opt.is-active { background: var(--gold-soft); }

/* Categories row taking full row width now that Language has moved out. */
.categories.categories-wide { flex: 1 1 100%; width: 100%; }

/* ============================== COVER / BACK ROWS ============================== */
.back-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 14px 0 0;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
}
.back-thumb {
    width: 78px;
    height: calc(78px * var(--card-ratio));
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background-color: var(--gold-soft);
    background-size: cover;
    background-position: center;
    border: 1px dashed var(--gold-line);
    box-shadow: var(--shadow-sm);
}
.back-controls { flex: 1; }
.back-label {
    font-weight: 600;
    color: var(--gold-dark);
    display: block;
    margin-bottom: 6px;
    font-size: 0.98em;
}
.back-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.back-actions .muted {
    color: var(--ink-muted);
    font-style: italic;
    font-size: 0.9em;
}

/* ============================== DROPZONES ============================== */
.dropzone {
    border: 2px dashed var(--gold-line);
    border-radius: var(--r-md);
    padding: 30px;
    text-align: center;
    color: var(--ink-soft);
    background: linear-gradient(180deg, #fffdf3 0%, #fbf6e2 100%);
    font-size: 0.98em;
    transition: background 140ms, border-color 140ms, transform 140ms;
}
.dropzone:hover { transform: translateY(-1px); }
.dropzone.hover {
    background: linear-gradient(180deg, #fbf3d2 0%, #f4ead8 100%);
    border-color: var(--gold);
}
.dropzone button {
    margin: 0 4px;
}
.dropzone-content {
    border-color: #a5c3a5;
    background: linear-gradient(180deg, #f7fbf7 0%, #ecf3eb 100%);
    color: #4a6a4a;
}
.dropzone-content.hover {
    background: linear-gradient(180deg, #e9f5e9 0%, #dceede 100%);
    border-color: #6ea36e;
}

.content-dropzone-wrap { margin: 16px 0; }
.hint-content {
    color: #3f6b3f;
    background: #f1f7f1;
    padding: 10px 14px;
    border-left: 3px solid #94c094;
    border-radius: 4px;
    margin: 10px 0 0;
    font-size: 0.88em;
    line-height: 1.5;
}

/* Content-image slot (per-card) */
.card-row .content-thumb-slot {
    width: 0;
    height: calc(56px * var(--card-ratio));
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 180ms ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    color: #6f8f6f;
    text-align: center;
    line-height: 1.1;
}
.card-row .content-thumb-slot.filled,
.card-row .content-thumb-slot.empty {
    width: 56px;
    margin-left: 4px;
}
.card-row .content-thumb-slot.filled {
    border: 1px solid #a5c3a5;
    position: relative;
    color: transparent;
}
.card-row .content-thumb-slot.filled::after {
    content: '✕';
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 1em;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    opacity: 0.9;
}
.card-row .content-thumb-slot.empty {
    border: 1.5px dashed #a5c3a5;
    background-color: #f7fbf7;
    padding: 2px;
}
.card-row .content-thumb-slot.empty:hover { background-color: #ecf5ec; }

/* ============================== CARD LIST ============================== */
.card-list, .page-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.card-row, .page-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 140ms ease, transform 140ms ease;
}
.card-row:hover, .page-row:hover {
    box-shadow: var(--shadow-md);
}
.card-row.dragging { opacity: 0.4; transform: scale(0.99); }

.card-row .grip {
    cursor: grab;
    color: var(--ink-muted);
    font-size: 1.3em;
    padding: 0 4px;
    user-select: none;
    align-self: center;
}
.card-row .grip:active { cursor: grabbing; }
.card-row .index {
    font-weight: 700;
    color: var(--gold-dark);
    min-width: 28px;
    text-align: right;
    font-size: 0.95em;
    padding-right: 4px;
    flex-shrink: 0;
    align-self: center;
}
.card-row .thumb {
    width: 60px;
    height: calc(60px * var(--card-ratio));
    background-size: cover;
    background-position: center;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    background-color: var(--gold-soft);
    box-shadow: var(--shadow-sm);
}
.fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}
.fields input[type="text"] { min-width: 0; }
.fields textarea { width: 100%; }

/* ============================== BUTTONS ============================== */
button {
    font: inherit;
    font-size: 0.94em;
    padding: 7px 14px;
    border: 1px solid var(--gold-line);
    border-radius: var(--r-sm);
    background: #fff;
    cursor: pointer;
    color: var(--gold-dark);
    font-weight: 500;
    transition: background 120ms, border-color 120ms, transform 120ms;
}
button:hover {
    background: var(--gold-soft);
    border-color: var(--gold);
}
button:active { transform: translateY(1px); }

button.primary {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #fff;
    border-color: var(--gold-dark);
    padding: 12px 28px;
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(138, 105, 22, 0.25);
}
button.primary:hover {
    background: linear-gradient(180deg, var(--gold-dark) 0%, #6b510e 100%);
    border-color: #6b510e;
}

button.link {
    border: none;
    background: transparent;
    color: #aa5a5a;
    padding: 2px 6px;
    font-size: 0.85em;
    text-decoration: underline;
    font-weight: 500;
}
button.link:hover { background: transparent; color: #882222; }

button.remove {
    align-self: flex-start;
    border: none;
    color: #aa3535;
    font-size: 1.1em;
    padding: 4px 10px;
    background: transparent;
    border-radius: 999px;
}
button.remove:hover { background: #fdecec; color: #882222; }

/* ============================== HINT / INFO BUBBLES ============================== */
.hint {
    color: var(--ink-soft);
    font-size: 0.88em;
    margin: 8px 2px 0;
    line-height: 1.55;
}
.hint code {
    background: var(--gold-soft);
    color: var(--gold-dark);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.85em;
}
.section-intro + .hint,
.bulk-fill .hint:not(.hint-content),
.intro-page .hint {
    background: var(--info-soft);
    border-left: 3px solid var(--info-line);
    padding: 10px 14px;
    border-radius: 4px;
    color: var(--info);
    margin: 8px 0;
}

/* ============================== FOOTER / CTA ============================== */
footer {
    padding: 28px 32px 36px;
    max-width: 1100px;
    margin: 22px auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
footer .footer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.status {
    font-size: 0.92em;
    color: var(--ink-soft);
}
.status.err { color: var(--error); font-weight: 500; }
.status.ok  { color: #2e7a2e; font-weight: 500; }

/* ============================== BULK FILL ============================== */
.bulk-fill { /* inherits section styling now */ }
.bulk-fill textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.88em;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    min-height: 130px;
    margin-top: 10px;
}
.bulk-fill .bulk-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.bulk-fill code {
    background: var(--gold-soft);
    color: var(--gold-dark);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}
.bulk-fill .hint-list {
    margin: 8px 0 12px 72px;   /* indented ~50px past the default list inset so the steps read as a clear visual block */
    padding: 0;
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--ink-soft);
}
.bulk-fill .hint-list li { margin-bottom: 4px; }

/* Intro Page — give the Body textarea more space to breathe between
   the Button/Heading row above and the section edge. Also bump it to
   2x the visual width / height of the inputs above by stretching to
   the full row width and pushing min-height up. */
.intro-page .intro-body-row {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.intro-page .intro-body-row textarea {
    width: 100%;
    min-height: 220px;
    line-height: 1.6;
    padding: 14px 16px;
}
.bulk-fill .bulk-target {
    margin: 14px 0 6px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.bulk-fill .bulk-target legend {
    font-weight: 700;
    padding: 0 8px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.82em;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.bulk-fill .bulk-target label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.95em;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background 120ms ease, border-color 120ms ease;
}
.bulk-fill .bulk-target label:hover { background: #fff; }
.bulk-fill .bulk-target label:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.bulk-fill .bulk-target input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

/* Tinted pill that groups the "Content 2 button" radio with the
   "Button label" textfield. */
.bulk-fill .bulk-target .bulk-content2-btn-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    background: #fff7d6;
    border: 1px solid #e8c97a;
    border-radius: var(--r-sm);
    max-width: 100%;
    flex-wrap: wrap;   /* let the label input wrap instead of overflowing */
}
/* The "Extended content button" group (its radio + the Button-label input) is
   hidden until "Extended content" is the selected Fill target — JS adds
   .is-visible. Hidden by default so it can't overflow the page on mobile. */
.bulk-fill .bulk-target .bulk-content2-btn-group { display: none; }
.bulk-fill .bulk-target .bulk-content2-btn-group.is-visible { display: inline-flex; }
.bulk-fill .bulk-target .bulk-content2-btn-group label { margin: 0; padding: 3px 8px; }
.bulk-fill .bulk-target label.bulk-quick-fill { gap: 6px; padding: 3px 0; border: none; }
.bulk-fill .bulk-target label.bulk-quick-fill:has(input:checked) { background: transparent; }
.bulk-fill .bulk-target label.bulk-quick-fill span {
    font-size: 0.82em;
    color: var(--ink-soft);
    font-weight: 500;
}
.bulk-fill .bulk-target label.bulk-quick-fill input {
    padding: 5px 10px;
    border: 1px solid #c7a13a;
    border-radius: 4px;
    font-size: 0.92em;
    min-width: 180px;
    font-family: inherit;
    cursor: text;
    background: #fff;
}
.bulk-fill .bulk-target .bulk-help-btn {
    margin-left: auto;
    align-self: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--info-line);
    background: var(--info-soft);
    color: var(--info);
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.bulk-fill .bulk-target .bulk-help-btn:hover {
    background: #d6eaf7;
    border-color: var(--info);
    transform: scale(1.08);
}
.bulk-fill .bulk-target .bulk-help-btn:active { transform: scale(0.96); }

/* ============================== AUDIO SLOT (per-card) ============================== */
.audio-slot {
    margin-top: 6px;
    font-size: 0.85em;
    line-height: 1.3;
    border-radius: var(--r-sm);
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease;
}
.audio-slot.empty {
    border: 1px dashed #aaa;
    color: var(--ink-soft);
    background: transparent;
}
.audio-slot.empty::before { content: "+ Audio"; }
.audio-slot.empty:hover { background: #f0f0f0; color: var(--ink); }
.audio-slot.filled {
    border: 1px solid #6b8e6b;
    background: #eaf5ea;
    color: #2e5a2e;
    display: flex; align-items: center; gap: 6px;
}
.audio-slot.filled::before { content: "♪ "; font-weight: bold; }
.audio-slot.filled .audio-name {
    flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audio-slot.filled .audio-clear {
    color: #888;
    font-weight: bold;
    padding: 0 4px;
}
.audio-slot.filled .audio-clear:hover { color: #c33; }

/* ============================== CATEGORIES ============================== */
.categories {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 0;
    background: var(--surface-2);
}
.categories legend {
    padding: 0 8px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.82em;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.categories .cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    margin: 4px 4px 0 0;
    border: 1px solid #c8bf9c;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    font-size: 0.92em;
    color: var(--ink-soft);
    transition: background 120ms, border-color 120ms, color 120ms;
}
.categories .cat-pill:hover {
    background: #fbf6e2;
    border-color: var(--gold);
    color: var(--gold-dark);
}
.categories .cat-pill input { margin: 0; accent-color: var(--accent); }
.categories .cat-pill:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* ============================== INTRO PAGE SECTION ============================== */
.intro-page { /* inherits section styling */ }

/* ============================== BUNDLE METER ============================== */
.bundle-meter {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: 0.92em;
}
.bundle-meter-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.bundle-meter-label {
    font-weight: 700;
    color: var(--ink);
    font-size: 0.82em;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.bundle-meter-value strong, .bundle-meter-cards strong {
    color: var(--accent);
    font-size: 1.1em;
}
.bundle-meter-value .muted, .bundle-meter-cards .muted {
    color: var(--ink-muted);
    font-weight: normal;
}
.bundle-meter-bar {
    width: 100%;
    height: 10px;
    background: #e8e1c9;
    border-radius: 999px;
    overflow: hidden;
}
.bundle-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #4a92cd);
    border-radius: 999px;
    transition: width 220ms ease, background 220ms ease;
}
.bundle-meter-hint {
    margin-top: 10px;
    font-size: 0.86em;
    color: var(--ink-soft);
    line-height: 1.5;
}
.bundle-meter[data-state="warn"] .bundle-meter-fill { background: linear-gradient(90deg, var(--warn), #c8932e); }
.bundle-meter[data-state="warn"] .bundle-meter-hint { color: var(--warn); }
.bundle-meter[data-state="cap"]  .bundle-meter-fill { background: linear-gradient(90deg, var(--error), #c75050); }
.bundle-meter[data-state="cap"]  .bundle-meter-hint { color: var(--error); font-weight: 600; }
.bundle-meter[data-state="cap"]  { border-color: var(--error); background: #fcf0f0; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 720px) {
    header { padding: 24px 18px 18px; }
    header h1 { font-size: 1.55em; }
    section, footer {
        margin: 14px 12px;
        padding: 20px 18px;
        border-radius: var(--r-md);
    }
    .how-it-works { padding: 0 12px; }
    .card-row, .page-row { padding: 10px; gap: 8px; }
    .card-row .thumb { width: 52px; height: calc(52px * var(--card-ratio)); }
    section > h2::before { width: 26px; height: 26px; margin-right: 8px; }
    h2 { font-size: 1.18em; }
    button.primary { width: 100%; }
}

/* ====================================================================== */
/* ===============  HOME-PAGE POLISH PASS (decorative only)  ============= */
/* Brings the marketing site's visual language to the builder: a faint    */
/* Flower-of-Life motif backdrop, gradient hairline section frames, a      */
/* jewelled header accent + step bubbles, richer shadows with a hover lift,*/
/* and a fancier download button. Purely cosmetic — no markup/JS touched.  */
/* Appended last so it overrides cleanly and is trivial to remove.         */
/* ====================================================================== */

:root {
    /* Home-page accent — a violet that complements the builder's gold. */
    --hp-purple:       #3d2463;
    --hp-purple-light: #7a5ca8;
    --hp-gold-light:   #d4b06a;
    --hp-shadow-lift:  0 26px 54px -20px rgba(61, 36, 99, 0.30),
                       0 10px 22px -12px rgba(122, 92, 42, 0.22);
}

/* ---- Page backdrop: richer gradient + faint Flower-of-Life lattice ---- */
body {
    background:
        radial-gradient(1200px 600px at 18% -220px, rgba(184, 144, 42, 0.10), transparent 60%),
        radial-gradient(900px 520px at 100% -40px, rgba(122, 92, 168, 0.08), transparent 60%),
        linear-gradient(168deg, #f7f2e6 0%, var(--bg) 44%, #f1ecf6 100%) !important;
}
body::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    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.13'%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");
    background-size: 88px 77px;
    -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 50%, transparent 92%);
            mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 50%, transparent 92%);
}
/* Keep all real content above the fixed motif layer. */
header, section, footer { position: relative; z-index: 1; }

/* ---- Clickable home logo (emblem + wordmark) above the builder title ---- */
.builder-home {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 auto 14px; text-decoration: none;
    /* Cormorant Garamond = the home page's brand display serif, so the builder
       wordmark matches index.html. Metric-matched fallback avoids the swap flash. */
    font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif; font-size: 23px; font-weight: 600;
    color: var(--hp-purple); transition: transform 0.2s ease, opacity 0.2s ease;
}
.builder-home img {
    width: 56px; height: 56px; object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(61,36,99,0.22));
}
.builder-home:hover { transform: translateY(-1px); opacity: 0.88; }

/* ---- Header: jewelled top-accent bar + gradient wordmark ---- */
header {
    background:
        radial-gradient(680px 280px at 50% -120px, rgba(212, 176, 106, 0.20), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #fcf8ec 100%) !important;
    border-bottom: none !important;
    box-shadow: 0 1px 0 rgba(184, 145, 61, 0.18), 0 14px 30px -24px rgba(61, 36, 99, 0.30);
}
header::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--hp-purple-light) 18%, var(--gold) 50%, var(--hp-purple-light) 82%, transparent);
}
header::after {
    content: "✦";
    display: block; margin: 14px auto 0; width: max-content;
    color: var(--gold); font-size: 0.8em; letter-spacing: 0.6em; opacity: 0.7;
}
header h1 {
    background: linear-gradient(120deg, var(--gold-dark), var(--gold) 45%, var(--hp-purple) 120%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- "How it works" step bubbles: gradient frame + numbered glow ---- */
.how-step {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(140deg, var(--hp-gold-light), rgba(184,145,61,0.25) 55%, var(--hp-purple-light)) border-box !important;
    border: 1.5px solid transparent !important;
    box-shadow: 0 10px 26px -16px rgba(61, 36, 99, 0.30) !important;
    transition: transform 0.25s cubic-bezier(.2,.7,.2,1), box-shadow 0.25s ease;
}
.how-step:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(61, 36, 99, 0.38) !important; }
.how-step-num {
    background: linear-gradient(140deg, var(--gold), var(--gold-dark)) !important;
    box-shadow: 0 2px 6px -1px rgba(184,145,61,0.55), 0 0 0 3px rgba(184,145,61,0.12);
}

/* ---- Sections: gradient hairline frame, thin top accent, hover lift ---- */
section {
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(150deg, var(--hp-gold-light), rgba(184,145,61,0.22) 48%, var(--hp-purple-light)) border-box !important;
    border: 1.5px solid transparent !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 16px 40px -20px rgba(61, 36, 99, 0.22),
        0 6px 16px -10px rgba(122, 92, 42, 0.16) !important;
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.2,1);
    /* NB: no overflow:hidden here — it would clip the Language autocomplete
       dropdown (.lang-ac-menu) that overlays below its input. The accent bar
       below rounds its own top corners instead, so it never pokes past the
       card's rounded edge. */
}
section::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold) 24%, var(--gold) 76%, transparent);
    opacity: 0.85;
}
section:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 26px 54px -22px rgba(61, 36, 99, 0.32),
        0 10px 22px -12px rgba(122, 92, 42, 0.20) !important;
}

/* ---- Section number badge: gradient fill + soft halo ---- */
section > h2::before {
    background: linear-gradient(140deg, var(--gold), var(--gold-dark)) !important;
    box-shadow: 0 3px 8px -2px rgba(184,145,61,0.55), 0 0 0 4px rgba(184,145,61,0.12);
}
/* Little gold flourish under each section heading. */
section > h2 { position: relative; }

/* ---- Footer: matching gradient frame + accent bar ---- */
footer {
    background:
        linear-gradient(160deg, var(--surface) 55%, var(--surface-2)) padding-box,
        linear-gradient(150deg, var(--hp-gold-light), rgba(122,92,168,0.22) 50%, var(--gold-dark)) border-box !important;
    border: 1.5px solid transparent !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 18px 44px -20px rgba(61, 36, 99, 0.26) !important;
    position: relative;
}
footer::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold) 24%, var(--gold) 76%, transparent);
    opacity: 0.85;
}

/* ---- Primary download button: jewelled gradient + lift ---- */
button.primary {
    background: linear-gradient(140deg, var(--hp-gold-light) 0%, var(--gold) 48%, var(--gold-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 22px -8px rgba(138, 105, 22, 0.55), 0 0 0 1px rgba(255,255,255,0.25) inset !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
button.primary:hover {
    background: linear-gradient(140deg, var(--gold) 0%, var(--gold-dark) 55%, #6b510e 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(138, 105, 22, 0.6), 0 0 0 1px rgba(255,255,255,0.25) inset !important;
}

/* Respect reduced-motion: drop the lift transitions/transforms. */
@media (prefers-reduced-motion: reduce) {
    .how-step, .how-step:hover,
    section, section:hover,
    button.primary, button.primary:hover { transition: none !important; transform: none !important; }
}

/* ====================================================================== */
/* ===================  BOLD HEADINGS PASS  ============================= */
/* Big, confident, embellished headings. Oversized gradient type, jewelled  */
/* number medallions with a glow ring, sparkle accents, a bold gradient     */
/* underline ribbon, dressed-up fieldset legends, a striking header title,  */
/* and a richer patterned section header strip. Appended last so it wins.   */
/* ====================================================================== */

/* Gold shimmer sweep — the App-side heading effect (forestShimmer): an
   animated gradient clipped to the text, sliding left↔right. */
@keyframes builderHeadingShimmer {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ---- HEADER title: huge shimmering gradient wordmark with a glow ---- */
header h1 {
    font-size: clamp(2.1em, 5vw, 3.2em) !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.04 !important;
    background-image: linear-gradient(100deg,
        var(--gold-dark) 0%, #e6b94e 22%, var(--gold) 40%,
        var(--hp-purple-light) 64%, var(--hp-purple) 82%, var(--gold-dark) 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none;
    filter: drop-shadow(0 3px 10px rgba(122, 92, 168, 0.20));
    animation: builderHeadingShimmer 6s ease-in-out infinite;
}

/* ---- SECTION HEADINGS: confident but not heavy. Solid gold-dark ink,
   NO shimmer (shimmer is reserved for the top header title only), and NO
   underline ribbon under the number. ---- */
section > h2,
.deck-details-header h2 {
    position: relative;
    font-size: clamp(1.45em, 2.4vw, 1.8em) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    align-items: center !important;
    /* Make the heading row fill the decorative band so the divider (at 118px
       from the section TOP = 92px from the content box top, since top padding
       is 26px) lands just below it, and the intro after it is divider-anchored.
       min-height = 92px content-box height, with the row centered. */
    min-height: 92px !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    text-transform: none;
    color: var(--gold-dark) !important;
    /* explicitly NOT gradient-clipped / animated */
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
}
/* Keep the optional pill painted normally. */
section > h2 .optional, .deck-details-header h2 .optional {
    -webkit-text-fill-color: initial !important; animation: none; background: var(--line-soft);
}

/* Underline ribbon removed per request. */
section > h2::after,
.deck-details-header h2::after { content: none !important; }

/* ---- BIG jewelled number medallion ---- */
/* The wrapped "Deck details" h2 (inside .deck-details-header) doesn't match
   the base `section > h2::before` counter rule, so emit the counter here too
   (it sits in section 1, so it reads "1"). */
.deck-details-header h2::before {
    content: counter(section-counter);
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; vertical-align: middle; line-height: 1;
}
section > h2::before,
.deck-details-header h2::before {
    width: 46px !important; height: 46px !important;
    margin-right: 16px !important;
    font-size: 1.15em !important;
    font-weight: 800 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background:
        linear-gradient(150deg, #f4cf6a 0%, var(--gold) 45%, var(--gold-dark) 100%) !important;
    border: 2px solid rgba(255,255,255,0.65);
    box-shadow:
        0 0 0 4px rgba(184,145,61,0.16),
        0 8px 18px -6px rgba(138,105,22,0.6),
        0 2px 0 rgba(255,255,255,0.5) inset !important;
    animation: none !important;  /* medallion stays solid, no shimmer */
}
/* Optional pill flanking the heading text. */
section > h2 .optional { font-size: 0.5em !important; }

/* ---- SECTION header strip: a bold tinted banner behind the heading area --- */
/* A soft gradient wash + a faint octagram tile sits behind the h2+intro so
   each section opens with a confident, colorful header zone. */
section > h2 {
    /* pull the heading visually to the top of the card */
    z-index: 3;
}
/* Explainer line sits 15px BELOW the divider hairline. The heading row above
   fills the band (min-height 92px) so its bottom edge meets the divider at
   118px; a 15px top-margin then drops the intro exactly 15px under the line. */
.section-intro {
    font-weight: 500 !important;
    color: var(--ink-soft) !important;
    font-size: 1.0em !important;
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}
.section-intro::first-line { font-weight: 600; }

/* Richer top-banner behind heading+intro per section — replaces the thin
   accent bar with a real colored header zone. We layer it as a tall ::after
   gradient pinned to the top of the card, under the content. */
section { isolation: isolate; }
section::after {
    height: 118px !important;
    border-radius: 20px 20px 0 0;
    background:
        linear-gradient(180deg, rgba(184,145,61,0.13) 0%, rgba(122,92,168,0.07) 55%, transparent 100%),
        repeating-linear-gradient(135deg, rgba(184,145,61,0.05) 0 2px, transparent 2px 11px) !important;
    opacity: 1 !important;
    z-index: 0 !important;
}
/* a crisp gold hairline at the bottom of that header band */
section::before {
    content: ""; position: absolute; left: 0; right: 0; top: 118px; height: 2px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(184,145,61,0.45) 20%, var(--gold) 50%, rgba(184,145,61,0.45) 80%, transparent);
    pointer-events: none;
}
section > * { position: relative; z-index: 2; }

/* ---- FIELDSET LEGENDS: bold pill sub-headings ---- */
.render-option-group legend,
.bulk-target legend,
.categories legend,
.deck-meta .render-option-group legend,
.bulk-fill .bulk-target legend {
    font-weight: 800 !important;
    font-size: 0.86em !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: var(--gold-dark) !important;
    background: linear-gradient(135deg, #fff, var(--gold-soft)) !important;
    border: 1.5px solid var(--gold-line) !important;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    box-shadow: 0 3px 8px -3px rgba(184,145,61,0.4) !important;
}

/* ---- "Deck details" header h2 keeps the ribbon + medallion (it lives in a
   flex row with the append toggle); make sure the underline aligns. ---- */
.deck-details-header h2 { padding-bottom: 16px; }

/* ---- HOW-IT-WORKS step bubble titles: bolder ---- */
.how-step-text strong {
    font-size: 1.06em;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--gold-dark);
}

/* ---- Mobile: scale the headings + band down. Band is 96px (divider at
   top:96px). Mobile section padding-top is 20px, so the heading row fills
   96-20 = 76px to meet the divider; the intro keeps its 15px margin. ---- */
@media (max-width: 720px) {
    section > h2,
    .deck-details-header h2 { font-size: 1.3em !important; min-height: 76px !important; }
    section > h2::before,
    .deck-details-header h2::before { width: 38px !important; height: 38px !important; margin-right: 12px !important; }
    section::after { height: 96px !important; }
    section::before { top: 96px; }
    header h1 { font-size: 1.9em !important; }
}

/* Halt the heading shimmer for motion-sensitive users — they keep the bold
   gradient, just frozen mid-sweep. */
@media (prefers-reduced-motion: reduce) {
    header h1,
    section > h2,
    .deck-details-header h2 { animation: none !important; background-position: 0% 50% !important; }
}

/* ====================================================================== */
/* =================  MOBILE RESPONSIVE FIX  ============================ */
/* Kills the sideways drag (horizontal overflow) and shrinks oversized     */
/* controls on phones. Root cause of the side-scroll: every input/textarea */
/* carries `min-width: 220px`, so two-up form rows demanded ~440px+ and     */
/* couldn't fit a ~390px viewport. Here we let fields shrink, stack the     */
/* two-column rows, and size the Categories pills to the screen. Appended   */
/* last so it wins the cascade. No markup/JS changed.                       */
/* ====================================================================== */

/* Global guard: nothing may push past the viewport edge. */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 640px) {
    /* 1) Inputs/textareas may shrink below their desktop 220px floor. */
    input[type="text"], input[type="number"], input[type="file"],
    textarea, .lang-ac, .lang-ac input,
    .deck-meta .desc-lang-row .lang-half input,
    .bulk-fill .bulk-target label.bulk-quick-fill input {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* 2) Two-up form rows stack to one column on phones. */
    .deck-meta .row { flex-direction: column; gap: 12px !important; }
    .deck-meta .row > label,
    .deck-meta .desc-lang-row > .desc-half,
    .deck-meta .desc-lang-row > .lang-half {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* 3) Categories pills: size to the screen — smaller text/padding so the
       13 pills wrap into tidy rows instead of bursting the card. */
    .categories { padding: 12px 10px !important; }
    .categories .cat-pill {
        font-size: 0.82em !important;
        padding: 5px 10px !important;
        margin: 3px 3px 0 0 !important;
        max-width: 100%;
    }

    /* 4) Bulk-fill target row + its inline button-label input wrap cleanly. */
    .bulk-fill .bulk-target { gap: 8px !important; }
    .bulk-fill .bulk-target label.bulk-quick-fill { flex-wrap: wrap; }
    .bulk-fill .bulk-target label.bulk-quick-fill input { flex: 1 1 100%; }

    /* 5) Anything pre-formatted / long tokens must wrap, not scroll. */
    code, pre { white-space: pre-wrap !important; word-break: break-word; }
    .subtitle, .hint, .section-intro { overflow-wrap: anywhere; }

    /* 6) Card + page rows: let the fields column shrink (it holds the inputs). */
    .card-row .fields, .page-row .fields { min-width: 0 !important; }

    /* 7) The decorative section header band/divider already scale at 720px;
       keep section padding tight so content has room. */
    section, footer { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Extra-small phones (≤400px): a touch more compression on the pills. */
@media (max-width: 400px) {
    .categories .cat-pill { font-size: 0.78em !important; padding: 4px 9px !important; }
    .builder-home span { font-size: 18px; }
    header h1 { font-size: 1.7em !important; }
}