/* =====================================================================
 * eg-wd-shell.css — the tokens, and the frame everything sits in.
 *
 * One of THREE partials carved out of universal-donation-widget.css on
 * 8 Sep 2026. That file was 483 lines against a 500 hard max and its own
 * comment already said the next addition had to carve it; the operator
 * controls for typeface and text size are that addition.
 *
 * ⚠️ CASCADE ORDER IS LOAD ORDER: shell → controls → blocks, exactly as
 * universal-donation-widget.html links them. The mobile media queries sit
 * at the END of eg-wd-blocks.css and override rules from all three, so
 * blocks must stay last. Nothing was edited in the carve — proven
 * byte-identical out of git by scripts/harness-widget-css-carve.js.
 *
 * HOLDS: the :root tokens, the reset, body, .widget, .header, the
 * progress dots, .content and .step. This is the file the appearance work
 * lands in — a typeface and a text scale are tokens, and tokens live here.
 * ===================================================================== */

        * { margin: 0; padding: 0; box-sizing: border-box; }

        /* ⚠️ A form control does NOT inherit the page's font. The UA sheet
           declares font-family on button/input/select/textarea, so `body {
           font-family }` never reaches them: measured, the Donate button, the
           amount buttons, the custom-amount box and the extra-ask buttons all
           rendered in Arial while every line of prose beside them rendered in
           the system stack. That split is already live and predates the font
           dial — .form-input carries its own `font-family: inherit` in
           eg-wd-controls.css, which is the same fix applied once, to one
           selector, by someone who hit this on that field alone. Putting it in
           the reset is what makes --font mean the WIDGET rather than the prose.
           font-family only, not the `font` shorthand: the shorthand would also
           reset size and weight, and every control here already declares its
           own. Guarded by scripts/harness-widget-css-tokens.js § D. */
        button, input, select, textarea { font-family: inherit; }

        :root {
            --primary: #dc2626;
            --primary-dark: #b91c1c;
            --success: #22c55e;
            --success-light: #dcfce7;
            --gray-50: #f9fafb;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-300: #d1d5db;
            /* ⚠️ --gray-400 and --gray-600 were READ in six places and DEFINED
               nowhere. An undefined var() is invalid at computed-value time,
               so `color` fell back to its INHERITED value — body's --gray-900
               — and every quiet secondary line on the widget rendered at full
               near-black body weight: the secure line, the capacity label, the
               operator's own description, the extra-ask second line and two
               summary rows. Nothing errored, nothing logged, and the widget
               simply had no visual hierarchy. Measured by rendering, not read:
               all six computed rgb(17,24,39) against #9ca3af / #4b5563. Values
               are Tailwind's own steps, which every other token here already
               is. */
            --gray-400: #9ca3af;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --gray-900: #111827;

            /* ── THE FOUR DIALS ────────────────────────────────────────────
               Everything below here is operator-settable per widget, set at
               runtime by eg-wd-appearance.js from the widget_configs row.
               Each one has a DEFAULT HERE and that is not optional: a token
               that only exists at runtime is undefined for every operator who
               left the field blank, and an undefined var() computes to
               nothing. Guarded by scripts/harness-widget-css-tokens.js § B. */

            /* Typeface. A KEY chosen in the builder maps to one of four stacks
               in eg-wd-appearance.js — the operator never types CSS, and we
               keep control of the fallbacks. No web font is fetched: the
               widget sits in a customer's checkout and a third-party font
               request there costs latency and privacy for a typeface most
               donors will never notice. */
            --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

            /* Text size. A multiplier on the ROOT font size, not on 32
               individual rules — every length in these three files is already
               in rem, so one number moves the type AND the padding that has to
               breathe with it. Set on :root, applied to html below. */
            --scale: 1;

            /* Corner shape. A multiplier, not a set of five named radii: the
               relationship between the card's corner and a button's corner is
               a design decision that should survive the operator's choice, so
               they scale together. 0 squares everything off. */
            --radius: 1;

            /* How wide the card is allowed to get. The narrow end matters more
               than the wide one — most embeds are a sidebar column. */
            --width: 400px;
        }

        html { font-size: calc(100% * var(--scale)); }

        body {
            font-family: var(--font);
            background: transparent;
            color: var(--gray-900);
            padding: 0;
            margin: 0;
        }

        .widget {
            max-width: var(--width);
            margin: 0 auto;
            background: white;
            border-radius: calc(16px * var(--radius));
            box-shadow: 0 4px 24px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 1rem 1.25rem;
            text-align: center;
        }
        .header h1 { font-size: 1.125rem; font-weight: 700; }

        /* The description sits INSIDE the gradient header, which is
           color:white and which eg-wd-appearance.js repaints with the
           operator's header_text_color. An inline colour on this element beat
           both of those and painted grey-600 on the primary gradient — every
           operator who wrote a description got it near-illegible. It inherits
           now, so it follows the header wherever the header goes.
           NO opacity: dimming it to read as "secondary" cost 0.1–0.7 of
           contrast ratio and took #dc2e2e from 4.69:1 (AA) to 4.05:1. The
           smaller size already says secondary. */
        #widget-description {
            font-size: 0.85rem;
            color: inherit;
            margin-top: 6px;
            line-height: 1.5;
            text-align: center;
        }

        /* Progress dots */
        .progress {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem;
            background: var(--gray-50);
        }
        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--gray-300);
            transition: all 0.2s;
        }
        .dot.active { background: var(--primary); width: 24px; border-radius: calc(4px * var(--radius)); }
        .dot.done { background: var(--success); }

        /* Test Banner - Hidden for production */
        .test-banner {
            display: none !important;
        }

        /* Content */
        .content { padding: 1.25rem; }

        /* Steps */
        .step { display: none; }
        .step.active { display: block; }