/* =============================================================================
   The Code Smithy: main stylesheet (tcs.css)

   READ THIS FIRST if you're editing by hand:
   - The style guide (StyleGuide.dc.html on the design canvas) is the source of truth.
     Every size, color and corner below comes from it. Change the guide first, then here.
   - Use the named values in :root (var(--...)). Never type a raw size or color
     (like 15px or #17663A) into a rule. If you need a new one, add it to the guide
     and to :root first.
   - No inline styles (style="...") on pages. Every look is a class in this file.
   - Headings: the tag says what it is (h1-h4), the class says how it looks
     (.t-h1 to .t-h4), and they always match. One h1 per page.
   - control-panel.css (the signed-in pages) imports this file. It must not define
     its own colors, fonts or sizes; it only lays out its pages with these.

   Sections: 1 Named values · 2 Base · 3 Type · 4 Buttons and links · 5 Status and
   messages · 6 Forms · 7 Header and footer · 8 Home page · 9 Art and animation ·
   10 Style guide page and canvas helpers
   ============================================================================= */


/* =============================================================================
   1. Named values (tokens)
   ============================================================================= */
:root {
  /* Navy: dark surfaces */
  --navy-950: #081429;            /* page background, dark sections */
  --navy-900: #0B1A33;            /* game tiles, strips on dark */
  --navy-800: #0B1C3A;            /* headings on light, navy buttons (16.9:1 on white) */
  --navy-700: #1A2D50;            /* a dark section inside a white panel: lighter than the page, so it stands out (body text 11.7:1) */
  --line-dark: #1C2A44;           /* borders on dark */
  --outline-on-dark: #6B7A95;     /* ghost button border */
  --text-on-dark: #E9EDF4;        /* body text on navy (15.7:1) */
  --text-on-dark-soft: #C3CBD8;   /* lead text on navy (11.3:1) */
  --muted-on-dark: #9AA6BA;       /* secondary text on navy (7.5:1) */

  /* Ember: the logo's sparks */
  --ember: #EA4336;               /* logo art only: never text or buttons */
  --ember-button: #C23A2B;        /* primary buttons (white text 5.3:1) */
  --ember-on-light: #A92E1F;      /* links and danger text on light (6.8:1) */
  --ember-on-light-hover: #7E2216;
  --ember-on-dark: #F2836F;       /* links and eyebrows on navy (7.2:1) */
  --ember-on-dark-hover: #FFB3A3; /* link hover and focus ring on navy */
  --ember-numeral: #B3341F;       /* step numbers */
  --steel: #959AA2;               /* logo art only */

  /* Light surfaces and text */
  --white: #FFFFFF;
  --paper: #F5F6F8;               /* light sections, inset boxes */
  --paper-2: #ECEFF4;             /* alternate light sections, row dividers */
  --line-light: #D5DBE5;          /* card borders, dividers */
  --line-strong: #7A869A;         /* input and button borders (3.7:1; borders need 3:1) */
  --ink: #3E4A60;                 /* body text on light (8.9:1) */
  --ink-muted: #5A667C;           /* hints, meta lines (5.8:1 on white, 5.4:1 on paper) */
  --disabled-bg: #C9CED6;
  --disabled-text: #3E4A60;       /* 5.6:1 on disabled-bg */

  /* Status: text / background / accent (dot, left border). The same pills work on
     light and dark backgrounds. */
  --success-text: #17663A; --success-bg: #E3F4EA; --success: #1E8A4C;  /* 6.1:1 */
  --warning-text: #5A3E00; --warning-bg: #FFF0C7; --warning: #B07800;  /* 8.7:1 */
  --danger-text: #7E2216;  --danger-bg: #FBE7E1;  --danger: #A92E1F;   /* 8.3:1 */
  --neutral-text: #3E4A60; --neutral-bg: #E6EAF0; --neutral: #6B7891;  /* 7.4:1 */

  /* Art only (illustrations, banners, the billing switch): never text */
  --art-banner: #22324F;          /* banner placeholder gradient */
  --art-navy-2: #2B3D5E;
  --art-navy-3: #3A4F75;
  --art-navy-4: #14284A;
  --art-glow-1: #FFB347;          /* forge glow */
  --art-glow-2: #FFD27A;
  --art-glow-3: #FFE3A0;
  --art-steel-light: #C9CDD3;     /* the steel ingot */
  --art-steel-dark: #545B63;

  /* Fonts */
  --font-display: 'Cinzel', Georgia, serif;   /* headings and big numbers only: its lowercase is small capitals */
  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;   /* addresses and links */

  /* Type scale: the only text sizes a page may use */
  --fs-display: clamp(44px, 6vw, 72px);  /* home page hero only */
  --fs-h1: clamp(34px, 4.5vw, 48px);     /* the one page title */
  --fs-h2: clamp(26px, 3vw, 34px);       /* section titles; the mission quote */
  --fs-h3: 24px;                         /* sub-sections, card titles */
  --fs-h4: 20px;                         /* small titles: game tiles, list items */
  --fs-lead: 21px;                       /* the paragraph under a page title */
  --fs-body: 18px;                       /* all reading text, form inputs */
  --fs-small: 16px;                      /* buttons, menus, notes, tables */
  --fs-caption: 14px;                    /* hints, meta lines, pills, tags */
  --fs-label: 13px;                      /* UPPERCASE labels and eyebrows */
  --fs-figure: 40px;                     /* big numbers: stats, prices */
  --fs-numeral: 56px;                    /* step numbers 1 2 3 */
  --fs-wordmark: 28px;                   /* "The Code Smithy" beside the logo in the header */

  /* Corners */
  --radius: 6px;                  /* page buttons */
  --radius-control: 8px;          /* inputs, card buttons, pager, small boxes */
  --radius-card: 10px;            /* cards, list rows */
  --radius-panel: 14px;           /* big white panels on dark */
  --radius-pill: 999px;           /* status pills and tags */

  /* Layout */
  --page-max: 1240px;
  --gutter: 32px;
  --shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.35);   /* white panels floating on navy */
  --backdrop: rgba(8, 20, 41, 0.72);                 /* behind a dialog: navy 950, dimmed */
}


/* =============================================================================
   2. Base
   ============================================================================= */
body { margin: 0; background: var(--navy-950); }
.site { background: var(--navy-950); color: var(--text-on-dark); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; }
p, ul, ol { margin: 0; }
img { max-width: 100%; }
.container { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }

/* Light areas (white panels, light sections) flip the text and link colors */
.theme-light { color: var(--ink); }
.theme-dark { color: var(--text-on-dark); }   /* dark sections inside a light area */

/* Accessibility helpers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 10; background: var(--white); color: var(--navy-800); padding: 12px 18px; border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; }


/* =============================================================================
   3. Type. Put these on the element: <h2 class="t-h2">, <p class="t-caption">.
   Headings are white on dark and navy on light (.theme-light).
   ============================================================================= */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4 { margin: 0; font-family: var(--font-display); color: var(--white); text-wrap: balance; }
.t-display { font-size: var(--fs-display); font-weight: 900; line-height: 1.02; }
.t-h1 { font-size: var(--fs-h1); font-weight: 900; line-height: 1.08; }
.t-h2 { font-size: var(--fs-h2); font-weight: 900; line-height: 1.12; }
.t-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.t-h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.25; }
.theme-light .t-display, .theme-light .t-h1, .theme-light .t-h2, .theme-light .t-h3, .theme-light .t-h4 { color: var(--navy-800); }

.t-lead { margin: 0; font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-dark-soft); max-width: 34em; text-wrap: pretty; }
.theme-light .t-lead { color: var(--ink); }
.t-body { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.t-small { margin: 0; font-size: var(--fs-small); line-height: 1.5; }
.t-caption { margin: 0; font-size: var(--fs-caption); line-height: 1.45; }
.t-label { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; }
.t-eyebrow { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; color: var(--ember-on-dark); }
.theme-light .t-eyebrow { color: var(--ember-on-light); }
.t-eyebrow a { color: inherit; }
.t-muted { color: var(--ink-muted); }

/* Big numbers and the quote */
.t-figure { margin: 0; font-family: var(--font-display); font-size: var(--fs-figure); font-weight: 900; line-height: 1.05; color: var(--white); }
.theme-light .t-figure { color: var(--navy-800); }
.t-numeral { margin: 0; font-family: var(--font-display); font-size: var(--fs-numeral); font-weight: 900; line-height: 1; color: var(--ember-numeral); }
.t-quote { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.35; color: var(--white); text-wrap: balance; }
.theme-light .t-quote { color: var(--navy-800); }


/* =============================================================================
   4. Buttons and links. Every button is at least 44 px tall.
   One ember button per area (the main action); the rest are white or outlined.
   ============================================================================= */
a { color: var(--ember-on-dark); }
a:hover { color: var(--ember-on-dark-hover); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--ember-on-dark-hover); outline-offset: 3px; border-radius: var(--radius); }
.theme-light a { color: var(--ember-on-light); }
.theme-light a:hover { color: var(--ember-on-light-hover); }
.theme-light a:focus-visible, .theme-light button:focus-visible { outline-color: var(--ember-on-light); }

/* Page buttons (.btn): big calls to action on page backgrounds */
.btn { display: inline-block; box-sizing: border-box; min-height: 44px; text-align: center; text-decoration: none; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; line-height: 1.4; border-radius: var(--radius); padding: 14px 28px; border: 2px solid transparent; cursor: pointer; }
.btn--primary, .btn--primary:hover, .theme-light .btn--primary, .theme-light .btn--primary:hover { background: var(--ember-button); color: var(--white); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost, .btn--ghost:hover { border-color: var(--outline-on-dark); background: transparent; color: var(--white); }   /* transparent: a <button> otherwise gets the browser's light grey */
.theme-light .btn--outline, .theme-light .btn--outline:hover { border-color: var(--navy-800); color: var(--navy-800); }
.btn--small { padding: 10px 20px; font-size: var(--fs-small); }
.btn[disabled], .theme-light .btn--primary[disabled], .theme-light .btn--primary[disabled]:hover { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; filter: none; }

/* Card buttons (.btn--card): actions inside white panels and cards */
.btn--card { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 10px 16px; font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; text-decoration: none; border-radius: var(--radius-control); border: 1px solid var(--line-strong); background: var(--white); color: var(--navy-800); cursor: pointer; }
.theme-light .btn--card { color: var(--navy-800); }
.btn--card:hover { border-color: var(--navy-800); }
.btn--card:focus-visible { outline: 3px solid var(--ember-on-light); outline-offset: 2px; }
.btn--card-primary, .theme-light .btn--card-primary { border-color: var(--navy-800); background: var(--navy-800); color: var(--white); }
.btn--card-primary:hover { filter: brightness(1.15); }
.btn--card-ember, .theme-light .btn--card-ember, .theme-light .btn--card-ember:hover { border-color: var(--ember-button); background: var(--ember-button); color: var(--white); }
.btn--card-ember:hover { filter: brightness(1.08); }
.btn--card-danger, .theme-light .btn--card-danger { color: var(--ember-on-light); }
.btn--card[disabled] { background: var(--disabled-bg); border-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; filter: none; }

/* A button that looks like a link (for actions inside a sentence) */
.link-button { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ember-on-light); text-decoration: underline; cursor: pointer; }
.link-button--flush { margin-left: 0; }

/* Back link and breadcrumb (on dark, above a page) */
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--text-on-dark); text-decoration: underline; text-underline-offset: 4px; }
.back-link:hover { color: var(--white); }
.breadcrumb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-small); }
.breadcrumb li + li::before { content: "›"; margin-right: 10px; color: var(--muted-on-dark); }
.breadcrumb__here { font-weight: 600; color: var(--text-on-dark-soft); }


/* =============================================================================
   5. Status and messages. Never color alone: every pill has a word.
   ============================================================================= */
/* Status pills: the same light pills on light and dark backgrounds */
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 700; line-height: 1.4; }
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; }
.status-pill--running { color: var(--success-text); background: var(--success-bg); }
.status-pill--running .status-pill__dot { background: var(--success); }
.status-pill--starting { color: var(--warning-text); background: var(--warning-bg); }
.status-pill--starting .status-pill__dot { background: var(--warning); }
.status-pill--asleep { color: var(--neutral-text); background: var(--neutral-bg); }
.status-pill--asleep .status-pill__dot { background: var(--neutral); }
.status-pill--stopped { color: var(--danger-text); background: var(--danger-bg); }
.status-pill--stopped .status-pill__dot { background: var(--danger); }

/* Messages: a sentence with a colored left border */
.notice { padding: 12px 16px; border-radius: var(--radius-control); font-size: var(--fs-small); border-left: 4px solid; }
.notice--ok { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.notice--warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-text); }

/* A short result with a dot: "Checked", "Couldn't check" */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 700; }
.check::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.check--ok { color: var(--success-text); }
.check--ok::before { background: var(--success); }
.check--warn { color: var(--warning-text); }
.check--warn::before { background: var(--warning); }

/* Steps of a running job: done / now / next / failed. Each step has a numbered circle; a done step's
   number becomes a check mark, a failed one's an "!". Never color alone: each step also starts with
   hidden words for screen readers (<span class="sr-only">Done: </span>, "Now: ", "Didn't work: "),
   and the step being worked on has aria-current="step".
   Use: <ol class="progress-steps"><li class="progress-steps__done">...</li>
        <li class="progress-steps__now" aria-current="step">...</li><li>...</li></ol> */
.progress-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; font-size: var(--fs-small); color: var(--ink-muted); }
.progress-steps > li { counter-increment: step; display: flex; align-items: flex-start; gap: 12px; }
.progress-steps > li::before { content: counter(step); flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 26px; height: 26px; border: 2px solid var(--line-strong); border-radius: 50%; font-size: var(--fs-caption); font-weight: 700; line-height: 1; }
.progress-steps__detail { display: block; font-size: var(--fs-caption); font-weight: 400; color: var(--ink-muted); }
.progress-steps > .progress-steps__done { color: var(--success-text); }
.progress-steps > .progress-steps__done::before { content: "✓"; border-color: var(--success); background: var(--success); color: var(--white); }
.progress-steps > .progress-steps__now { font-weight: 700; color: var(--navy-800); }
.progress-steps > .progress-steps__now::before { border-color: var(--navy-800); background: var(--navy-800); color: var(--white); }
.progress-steps > .progress-steps__failed { font-weight: 700; color: var(--danger-text); }
.progress-steps > .progress-steps__failed::before { content: "!"; border-color: var(--danger); background: var(--danger); color: var(--white); }

/* Progress ring: how far a job has got, as a filling circle with the percent in the middle.
   Only for real progress the server reports; while there's no number yet (waiting its turn,
   starting up), use .progress-ring--waiting: a short arc that turns, and no number.
   Use: <div class="progress-ring" role="progressbar" aria-label="..." aria-valuemin="0"
        aria-valuemax="100" aria-valuenow="42"><svg class="progress-ring__svg" viewBox="0 0 120 120"
        aria-hidden="true"><circle class="progress-ring__track" cx="60" cy="60" r="52"/>
        <circle class="progress-ring__fill" cx="60" cy="60" r="52" pathLength="100"
        stroke-dasharray="100" stroke-dashoffset="58"/></svg>
        <span class="progress-ring__value" aria-hidden="true">42%</span></div>
   (stroke-dashoffset = 100 minus the percent). */
.progress-ring { position: relative; flex: none; width: 160px; height: 160px; }
.progress-ring__svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring__track { fill: none; stroke: var(--paper-2); stroke-width: 12; }
.progress-ring__fill { fill: none; stroke: var(--ember-button); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.progress-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-figure); font-weight: 700; color: var(--navy-800); }
.progress-ring--waiting .progress-ring__svg { animation: tcs-turn 1.4s linear infinite; }
@keyframes tcs-turn { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
/* The ring beside its steps (wraps under it on a phone) */
.progress-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.progress-panel > .progress-steps { flex: 1 1 240px; }

/* Dialog (modal): for anything that needs a clear yes or no, like a restore. The browser's own
   <dialog>, opened with showModal(): keyboard focus stays inside, Esc cancels, the page behind is
   dimmed and can't be clicked. Use: <dialog class="dialog theme-light" aria-labelledby="...">
   with a t-h2 title, the explanation, then .dialog__actions (Cancel first, the main action last). */
.dialog { box-sizing: border-box; width: min(100% - 32px, 620px); max-height: calc(100% - 32px); overflow: auto; margin: auto; padding: 0; border: 0; border-radius: var(--radius-panel); background: var(--white); color: var(--ink); box-shadow: var(--shadow-panel); }
.dialog::backdrop { background: var(--backdrop); }
.dialog__body { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 8px; }


/* =============================================================================
   6. Forms. A visible label above every field; hints under it; Required and
   Optional written out.
   ============================================================================= */
.form-stack { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.field__label { font-size: var(--fs-small); font-weight: 700; color: var(--navy-800); }
.field__input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--navy-800); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-control); }
.field__input:focus-visible { outline: 3px solid var(--ember-on-light); outline-offset: 1px; }
.field__input--code { letter-spacing: 0.4em; font-size: var(--fs-h3); text-align: center; }
.field__hint { font-size: var(--fs-caption); color: var(--ink-muted); }
.field__status { font-size: var(--fs-small); font-weight: 700; }
.field__status--ok { color: var(--success-text); }
.field__status--error { color: var(--ember-on-light); }
.field__required, .field__optional { margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--paper-2); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
.field__required { color: var(--ember-on-light); }
.field__optional { color: var(--ink-muted); }

/* A labelled group of fields (a fieldset), and two fields on one line */
.field-group { margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--paper-2); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.field-group > legend { padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field-row__wide { flex: 3 1 320px; min-width: 0; }
.field-row__narrow { flex: 1 1 160px; min-width: 0; }

/* Checkbox with its words beside it; the whole line is the touch target (44 px tall).
   Use: <label class="check-field"><input class="check-field__box" type="checkbox"> I accept ...</label> */
.check-field { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; box-sizing: border-box; padding-block: 10px; font-size: var(--fs-body); color: var(--ink); cursor: pointer; }
.check-field__box { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--navy-800); cursor: pointer; }

/* Collapsible section: optional extras folded away until someone wants them. The browser's own
   <details>/<summary>, so keyboard and screen readers work; the summary holds the section's
   heading, and a chevron that turns when it opens.
   Use: <details class="disclosure"><summary class="disclosure__summary"><h2 class="t-h2 disclosure__title">...</h2></summary>
        <div class="disclosure__body">...</div></details> */
.disclosure { display: block; }
.disclosure > .disclosure__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; cursor: pointer; list-style: none; }
.disclosure > .disclosure__summary::-webkit-details-marker { display: none; }
.disclosure > .disclosure__summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px; border-right: 3px solid var(--navy-800); border-bottom: 3px solid var(--navy-800); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.disclosure[open] > .disclosure__summary::after { transform: translateY(3px) rotate(-135deg); }
.disclosure__summary:focus-visible { outline: 3px solid var(--ember-on-light); outline-offset: 4px; border-radius: var(--radius-control); }
.disclosure__title { margin: 0; }
.disclosure__body { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
@media (prefers-reduced-motion: reduce) { .disclosure > .disclosure__summary::after { transition: none; } }

/* Someone else's legal text to read before agreeing (Foundry's EULA), word for word, in a box
   that scrolls. Keyboard users scroll it too: give it tabindex="0", role="region" and a name.
   Use: <div class="legal-box" tabindex="0" role="region" aria-label="...">...</div> */
.legal-box { max-height: 320px; overflow: auto; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--paper); font-size: var(--fs-small); color: var(--ink); }
.legal-box:focus-visible { outline: 3px solid var(--ember-on-light); outline-offset: 2px; }
.legal-box h3, .legal-box h4 { margin: 16px 0 6px; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700; color: var(--navy-800); }
.legal-box h3:first-child { margin-top: 0; }
.legal-box p, .legal-box ol { margin: 0 0 10px; }
.legal-box li { margin-bottom: 6px; }

/* Buttons at the end of a form: Cancel + the main action, right-aligned */
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 32px; }
.form-actions--tight { padding-top: 8px; }
.form-actions__note { flex: 1 1 260px; font-size: var(--fs-small); font-weight: 700; color: var(--ember-on-light); }


/* =============================================================================
   7. Header and footer (every page with the site menu)
   ============================================================================= */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; }
.brand, .brand:hover { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--white); }
.brand__badge { width: 76px; height: 76px; }
.brand__name { font-family: var(--font-display); font-size: var(--fs-wordmark); font-weight: 900; letter-spacing: 0.02em; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; font-size: var(--fs-small); font-weight: 600; }
.site-nav__link, .site-nav__link:hover { color: var(--white); text-decoration: none; }
button.site-nav__link { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }   /* "Sign out" is a form button that looks like the other links */
.site-nav__soon { color: var(--muted-on-dark); }
.site-nav__soon-tag { font-size: var(--fs-caption); color: var(--ember-on-dark); }
.account-chip, .account-chip:hover { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; }
.account-chip__initials { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ember-button); color: var(--white); font-size: var(--fs-caption); font-weight: 700; }
/* Two lines beside the initials: "My games", then who is signed in (the email), so a second account in another window is never a surprise. */
.account-chip__text { display: flex; flex-direction: column; line-height: 1.25; }
.account-chip__who { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); font-weight: 400; color: var(--muted-on-dark); }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 40px 56px; border-top: 1px solid var(--line-dark); color: var(--muted-on-dark); font-size: var(--fs-small); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer__nav a { color: var(--text-on-dark-soft); }


/* =============================================================================
   8. Home page (Main.dc.html) and shared page sections
   ============================================================================= */
.section { padding-block: 112px; }
.section--white { background: var(--white); border-bottom: 1px solid var(--line-light); }
.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); border-bottom: 1px solid var(--line-light); }
.section--dark { background: var(--navy-950); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.stack { display: flex; flex-direction: column; gap: 48px; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 72px 96px; }
.hero__copy { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__art { flex: 1 1 420px; display: flex; justify-content: center; }

/* At a glance: three stats in a strip */
.glance { background: var(--navy-900); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.glance__list { list-style: none; padding-block: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 24px; }
.glance__item { display: flex; flex-direction: column; gap: 4px; }
.glance__value { font-family: var(--font-display); font-size: var(--fs-figure); font-weight: 900; line-height: 1.05; color: var(--white); }
.glance__label { font-size: var(--fs-small); color: var(--muted-on-dark); }

/* Made by a GM */
.why { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.why__intro { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.why__badge { width: 220px; height: 220px; }
.why__list { flex: 999 1 520px; min-width: 0; list-style: none; padding: 0; }
.why__item { display: flex; flex-direction: column; gap: 8px; padding-block: 28px; border-top: 1px solid var(--navy-800); }
.why__item:last-child { border-bottom: 1px solid var(--navy-800); }

/* Mission (the quote itself uses .t-quote) */
.mission { max-width: 900px; margin: 0 auto; padding: 104px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }

/* How it works (the numbers use .t-numeral) */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; }
.step { display: flex; flex-direction: column; gap: 12px; }

/* Plans: Founding Smiths across the top, three plans in a row, Guild Master across the bottom */
.plans { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-card); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.plan--wide { grid-column: 1 / -1; }
.plan__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.plan__name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px; }
.plan__price { font-family: var(--font-display); font-size: var(--fs-figure); font-weight: 900; color: var(--navy-800); }
.plan__per { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; color: var(--ink-muted); }
.plan__was { margin-right: 10px; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; color: var(--ink-muted); }
.plan__desc { font-size: var(--fs-body); color: var(--navy-800); }
.plan__features { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.plan__features--cols { display: block; columns: 3 220px; column-gap: 40px; }
.plan__features--cols li { break-inside: avoid; margin-bottom: 6px; }
.plan__cta { margin-top: auto; padding: 14px; }
.plans__note { text-align: center; color: var(--ink-muted); font-size: var(--fs-small); }
/* Founding Smiths: a dark card so it stands out on the light section */
.plan--founder { background: var(--navy-800); border-color: var(--navy-800); color: var(--text-on-dark-soft); }
.plan--founder .t-h3 { color: var(--white); }
.plan--founder .plan__desc { color: var(--text-on-dark); }
.plan__founder-count { color: var(--ember-on-dark); font-size: var(--fs-body); }
.plan__founder-count strong { color: var(--white); }

/* Monthly / yearly switch label and saving tag (the switch art is in section 9) */
.plans__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.billing { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.billing__label { color: var(--ink-muted); }
.billing__label.is-active { color: var(--navy-800); font-weight: 700; }
.billing__save { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--ember-button); color: var(--white); font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; }

/* Coming soon / Need a hand: dark sections with a grid of short items */
.soon { padding-block: 88px; display: flex; flex-direction: column; gap: 32px; }
.soon__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 40px; }
.soon__item { display: flex; flex-direction: column; gap: 10px; }
.soon__item p { color: var(--text-on-dark-soft); }


/* =============================================================================
   9. Art and animation (logo, icons, billing switch). Colors here are art only.
   Every animation plays once, under 5 s, and stays still for reduced motion.
   ============================================================================= */
/* Animated logo, from the designer's own vector pieces: the hammer arm strikes the anvil
   three times, sparks burst at each impact, and it ends in the logo's original pose. */
.logo-anim { position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; filter: drop-shadow(0 30px 60px rgba(194, 58, 43, 0.25)); }
.logo-anim__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-anim__arm { transform-origin: 29% 31%; animation: tcs-swing 1.25s 0.4s 3 both; }
.logo-anim__sparks { transform-origin: 56% 54%; animation: tcs-burst 1.25s 0.4s 3 both; }
.logo-anim__rest { animation: tcs-jolt 1.25s 0.4s 3 both; }
.logo-anim__glow { position: absolute; left: 44%; top: 52%; width: 22%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(234, 67, 54, 0.95), rgba(234, 67, 54, 0)); opacity: 0; pointer-events: none; animation: tcs-glow 1.25s 0.4s 3 both; }
@keyframes tcs-swing {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  36% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  52% { transform: rotate(15deg); animation-timing-function: ease-out; }
  60% { transform: rotate(10deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0); }
}
@keyframes tcs-burst { 0%, 51% { opacity: 0; transform: scale(.5); } 54% { opacity: 1; transform: scale(.7); } 78% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes tcs-jolt { 0%, 51%, 62%, 100% { transform: translateY(0); } 54% { transform: translateY(4px); } }
@keyframes tcs-glow { 0%, 51% { opacity: 0; } 54% { opacity: 1; } 100% { opacity: 0; } }

/* "At a glance" icons: the resting style IS the last frame */
.icon { width: 64px; height: 64px; display: block; margin-bottom: 8px; }
.icon__track { fill: none; stroke: var(--art-navy-2); stroke-width: 5; stroke-linecap: round; }
.icon__gauge { fill: none; stroke: var(--ember); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 69.1; stroke-dashoffset: 11.5; animation: tcs-gauge 1.8s 0.9s cubic-bezier(.2, .7, .3, 1) both; }
.icon__needle { stroke: var(--white); stroke-width: 3; stroke-linecap: round; transform-box: view-box; transform-origin: 32px 40px; transform: rotate(60deg); animation: tcs-needle 1.8s 0.9s cubic-bezier(.2, .7, .3, 1) both; }
.icon__hub { fill: var(--white); }
.icon__base { stroke: var(--art-navy-2); stroke-width: 2; stroke-linecap: round; }
@keyframes tcs-needle { from { transform: rotate(-90deg); } 70% { transform: rotate(68deg); } 85% { transform: rotate(56deg); } to { transform: rotate(60deg); } }
@keyframes tcs-gauge { from { stroke-dashoffset: 69.1; } 70% { stroke-dashoffset: 4.6; } 85% { stroke-dashoffset: 13; } to { stroke-dashoffset: 11.5; } }
.icon__paper { fill: var(--text-on-dark); }
.icon__sheet { fill: var(--text-on-dark); stroke: var(--navy-900); stroke-width: 1; }
.icon__day { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h4); fill: var(--navy-800); text-anchor: middle; }
.icon__moon { fill: var(--navy-800); }
.icon__binding { fill: var(--ember); }
.icon__ring { fill: var(--steel); }
.icon__page { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); opacity: 0; animation: tcs-flip .45s ease-in both; }
.icon__page--1 { animation-delay: 1.1s; }
.icon__page--2 { animation-delay: 1.9s; }
.icon__page--3 { animation-delay: 2.7s; }
@keyframes tcs-flip { from { transform: scaleY(1); opacity: 1; } 85% { opacity: 1; } to { transform: scaleY(0); opacity: 0; } }
.icon__sea { fill: var(--art-navy-4); }
.icon__land { fill: var(--ember); }
.icon__grid { fill: none; stroke: var(--art-navy-3); stroke-width: 1.5; }
.icon__rim { fill: none; stroke: var(--white); stroke-width: 2.5; }
.icon__spin { transform: translateX(-48px); animation: tcs-spin 4.2s 0.9s cubic-bezier(.35, 0, .25, 1) both; }
@keyframes tcs-spin { from { transform: translateX(0); } to { transform: translateX(-48px); } }

/* Billing switch: a steel ingot slides into the forge and glows hot for yearly (the better
   deal). A real switch for screen readers; the motion is decoration only. */
.billing-switch { position: relative; width: 104px; height: 48px; padding: 0; border: 2px solid var(--navy-800); border-radius: var(--radius-pill); background: linear-gradient(var(--art-banner), var(--navy-800)); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.45); cursor: pointer; overflow: visible; }
.billing-switch:focus-visible { outline: 3px solid var(--ember-on-light); outline-offset: 3px; }
.billing-switch__forge { position: absolute; right: 4px; top: 4px; width: 40px; height: 36px; border-radius: 0 20px 20px 0; background: radial-gradient(circle at 70% 50%, var(--art-glow-2) 0%, var(--ember) 45%, rgba(234, 67, 54, 0) 75%); opacity: 0.25; transition: opacity 0.5s ease; }
.billing-switch__ingot { position: absolute; left: 8px; top: 11px; width: 42px; height: 22px; clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, var(--art-steel-light) 0%, var(--steel) 45%, var(--art-steel-dark) 100%); transition: transform 0.55s cubic-bezier(.5, 0, .2, 1), background 0.4s ease 0.35s, filter 0.4s ease 0.35s; }
.billing-switch__spark { position: absolute; left: 76px; top: 22px; width: 4px; height: 4px; border-radius: 50%; background: var(--art-glow-2); opacity: 0; pointer-events: none; }
.billing-switch.is-yearly .billing-switch__forge { opacity: 1; animation: tcs-flicker 1.6s 0.6s ease-in-out 2; }
.billing-switch.is-yearly .billing-switch__ingot { transform: translateX(46px); background: linear-gradient(180deg, var(--art-glow-3) 0%, var(--art-glow-1) 40%, var(--ember) 100%); filter: drop-shadow(0 0 6px rgba(255, 140, 60, 0.9)); }
.billing-switch.is-yearly .billing-switch__spark--1 { animation: tcs-spark-1 0.7s 0.5s ease-out both; }
.billing-switch.is-yearly .billing-switch__spark--2 { animation: tcs-spark-2 0.8s 0.55s ease-out both; }
.billing-switch.is-yearly .billing-switch__spark--3 { animation: tcs-spark-3 0.75s 0.6s ease-out both; }
@keyframes tcs-flicker { 0%, 100% { opacity: 1; } 30% { opacity: 0.8; } 60% { opacity: 0.95; } }
@keyframes tcs-spark-1 { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(10px, -26px); } }
@keyframes tcs-spark-2 { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(22px, -18px); } }
@keyframes tcs-spark-3 { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(-4px, -30px); } }

@media (prefers-reduced-motion: reduce) {
  .logo-anim__arm, .logo-anim__sparks, .logo-anim__rest, .logo-anim__glow,
  .icon__gauge, .icon__needle, .icon__page, .icon__spin,
  .billing-switch.is-yearly .billing-switch__forge { animation: none; }
  .billing-switch__ingot, .billing-switch__forge { transition: none; }
  .billing-switch__spark { display: none; }
  /* Progress ring: no filling motion; a waiting ring shows just its track (a still arc would look like a percent) */
  .progress-ring__fill { transition: none; }
  .progress-ring--waiting .progress-ring__svg { animation: none; }
  .progress-ring--waiting .progress-ring__fill { display: none; }
}


/* =============================================================================
   10. The style guide page (StyleGuide.dc.html) and canvas-only helpers
   ============================================================================= */
.sg { background: var(--white); color: var(--ink); }
.sg__main { max-width: var(--page-max); margin: 0 auto; padding: 48px var(--gutter) 96px; display: flex; flex-direction: column; gap: 56px; }
.sg__intro { display: flex; flex-direction: column; gap: 12px; max-width: 52em; }
.sg__status { align-self: flex-start; padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: 700; background: var(--success-bg); color: var(--success-text); }
.sg-section { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line-light); }
.sg-section__head { display: flex; flex-direction: column; gap: 6px; max-width: 52em; }
.sg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.sg-table th, .sg-table td { text-align: left; vertical-align: middle; padding: 14px 12px; border-top: 1px solid var(--line-light); }
.sg-table thead th { border-top: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.sg-table__specimen { min-width: 300px; }
.code-inline, .sg-code, .sg-table code { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--navy-800); background: var(--paper); padding: 2px 6px; border-radius: var(--radius); }
.sg-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.sg-swatch { border: 1px solid var(--line-light); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.sg-swatch__chip { height: 72px; display: flex; align-items: flex-end; padding: 8px 12px; font-size: var(--fs-caption); font-weight: 700; }
.sg-swatch__info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-caption); }
.sg-swatch__name { font-size: var(--fs-small); font-weight: 700; color: var(--navy-800); }
.sg-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 24px; border: 1px solid var(--line-light); border-radius: var(--radius-card); }
.sg-demo--dark { background: var(--navy-950); border-color: var(--navy-950); color: var(--text-on-dark); }
.sg-demo--stack { flex-direction: column; align-items: stretch; max-width: 560px; }
.sg-radius { width: 120px; height: 72px; background: var(--paper-2); border: 2px solid var(--line-strong); display: grid; place-items: center; text-align: center; font-size: var(--fs-caption); font-weight: 700; color: var(--navy-800); }
.sg-radius--6 { border-radius: var(--radius); }
.sg-radius--8 { border-radius: var(--radius-control); }
.sg-radius--10 { border-radius: var(--radius-card); }
.sg-radius--14 { border-radius: var(--radius-panel); }
.sg-radius--pill { border-radius: var(--radius-pill); }
.sg-rules { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-body); max-width: 52em; }

/* Color swatches: one class per named color */
.sg-c-navy-950 { background: var(--navy-950); color: var(--white); }
.sg-c-navy-900 { background: var(--navy-900); color: var(--white); }
.sg-c-navy-800 { background: var(--navy-800); color: var(--white); }
.sg-c-line-dark { background: var(--line-dark); color: var(--white); }
.sg-c-outline-on-dark { background: var(--outline-on-dark); color: var(--navy-800); }
.sg-c-text-on-dark { background: var(--text-on-dark); color: var(--navy-800); }
.sg-c-text-on-dark-soft { background: var(--text-on-dark-soft); color: var(--navy-800); }
.sg-c-muted-on-dark { background: var(--muted-on-dark); color: var(--navy-800); }
.sg-c-ember { background: var(--ember); color: var(--navy-800); }
.sg-c-ember-button { background: var(--ember-button); color: var(--white); }
.sg-c-ember-on-light { background: var(--ember-on-light); color: var(--white); }
.sg-c-ember-on-light-hover { background: var(--ember-on-light-hover); color: var(--white); }
.sg-c-ember-on-dark { background: var(--ember-on-dark); color: var(--navy-800); }
.sg-c-ember-on-dark-hover { background: var(--ember-on-dark-hover); color: var(--navy-800); }
.sg-c-ember-numeral { background: var(--ember-numeral); color: var(--white); }
.sg-c-steel { background: var(--steel); color: var(--navy-800); }
.sg-c-white { background: var(--white); color: var(--navy-800); }
.sg-c-paper { background: var(--paper); color: var(--navy-800); }
.sg-c-paper-2 { background: var(--paper-2); color: var(--navy-800); }
.sg-c-line-light { background: var(--line-light); color: var(--navy-800); }
.sg-c-line-strong { background: var(--line-strong); color: var(--navy-800); }
.sg-c-ink { background: var(--ink); color: var(--white); }
.sg-c-ink-muted { background: var(--ink-muted); color: var(--white); }
.sg-c-disabled-bg { background: var(--disabled-bg); color: var(--disabled-text); }
.sg-c-success-text { background: var(--success-text); color: var(--white); }
.sg-c-success-bg { background: var(--success-bg); color: var(--success-text); }
.sg-c-success { background: var(--success); color: var(--white); }
.sg-c-warning-text { background: var(--warning-text); color: var(--white); }
.sg-c-warning-bg { background: var(--warning-bg); color: var(--warning-text); }
.sg-c-warning { background: var(--warning); color: var(--navy-800); }
.sg-c-danger-text { background: var(--danger-text); color: var(--white); }
.sg-c-danger-bg { background: var(--danger-bg); color: var(--danger-text); }
.sg-c-danger { background: var(--danger); color: var(--white); }
.sg-c-neutral-text { background: var(--neutral-text); color: var(--white); }
.sg-c-neutral-bg { background: var(--neutral-bg); color: var(--neutral-text); }
.sg-c-neutral { background: var(--neutral); color: var(--navy-800); }
.sg-c-art-banner { background: var(--art-banner); color: var(--white); }
.sg-c-art-navy-2 { background: var(--art-navy-2); color: var(--white); }
.sg-c-art-navy-3 { background: var(--art-navy-3); color: var(--white); }
.sg-c-art-navy-4 { background: var(--art-navy-4); color: var(--white); }
.sg-c-art-glow-1 { background: var(--art-glow-1); color: var(--navy-800); }
.sg-c-art-glow-2 { background: var(--art-glow-2); color: var(--navy-800); }
.sg-c-art-glow-3 { background: var(--art-glow-3); color: var(--navy-800); }
.sg-c-art-steel-light { background: var(--art-steel-light); color: var(--navy-800); }
.sg-c-art-steel-dark { background: var(--art-steel-dark); color: var(--white); }

/* Design preview bar: switches a design between its states on the canvas. Never on a real page. */
.design-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-caption); }
.design-preview__label { font-weight: 700; }
.design-preview__btn { min-height: 36px; padding: 6px 12px; font-family: var(--font-body); font-size: var(--fs-caption); border-radius: var(--radius); border: 1px solid var(--warning); background: transparent; color: var(--warning-text); cursor: pointer; }
.design-preview__btn.is-current { background: var(--warning-text); color: var(--warning-bg); }
/* Canvas only: shows a dialog already open on a design board (real pages open it with showModal()). */
.design-dialog-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: var(--backdrop); }
.dialog--preview { position: static; display: block; }