/* ============================================================================
   COSMIC BUSINESS — Design System
   Light-first for readability and ad performance, with a full dark theme.
   Single stylesheet on purpose: one request, no build step.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
    /* Brand */
    --gold-50:  #fdf9ed;
    --gold-100: #f8eecd;
    --gold-200: #f0dc9d;
    --gold-300: #e4c469;
    --gold-400: #d4af37;
    --gold-500: #b8912a;
    --gold-600: #96731f;
    --gold-700: #74581a;

    --violet-50:  #f4f1fe;
    --violet-100: #e8e2fd;
    --violet-200: #d2c6fb;
    --violet-300: #b4a1f7;
    --violet-400: #8f74f0;
    --violet-500: #6d4ae4;
    --violet-600: #5733c4;
    --violet-700: #46299d;

    /* Neutrals — warm indigo-tinted greys */
    --ink-900: #0c0916;
    --ink-800: #141024;
    --ink-700: #1e1834;
    --ink-600: #2e2749;
    --ink-500: #4a4165;
    --ink-400: #6b6285;
    --ink-300: #948ca9;
    --ink-200: #c3bdd2;
    --ink-100: #e4e0ec;
    --ink-50:  #f2f0f7;
    --paper:   #faf8f5;
    --white:   #ffffff;

    /* Semantic */
    --positive-bg: #e8f6ee; --positive: #1f7a4d; --positive-strong: #16603b;
    --caution-bg:  #fdf3e0; --caution:  #9a6b12; --caution-strong:  #7a5410;
    --negative-bg: #fdeceb; --negative: #b03d2e; --negative-strong: #8d3025;
    --info-bg:     #e9f0fb; --info:     #2b5f9e; --info-strong:     #1f4a7e;

    /* Surfaces */
    --bg:          var(--paper);
    --bg-elevated: var(--white);
    --bg-sunken:   var(--ink-50);
    --bg-inverse:  var(--ink-900);
    --text:        var(--ink-800);
    --text-muted:  var(--ink-400);
    --text-subtle: var(--ink-300);
    --text-inverse:#f1eefa;
    --border:      var(--ink-100);
    --border-strong: var(--ink-200);
    --accent:      var(--gold-500);
    --accent-text: var(--gold-600);
    --accent-soft: var(--gold-50);
    --link:        var(--violet-600);

    /* Type */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
    --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
    --step-0:  clamp(0.97rem, 0.94rem + 0.18vw, 1.06rem);
    --step-1:  clamp(1.14rem, 1.08rem + 0.30vw, 1.32rem);
    --step-2:  clamp(1.36rem, 1.25rem + 0.55vw, 1.72rem);
    --step-3:  clamp(1.62rem, 1.43rem + 0.95vw, 2.24rem);
    --step-4:  clamp(1.94rem, 1.62rem + 1.60vw, 2.95rem);
    --step-5:  clamp(2.30rem, 1.80rem + 2.50vw, 3.90rem);

    /* Space */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
    --sp-9: 6rem;    --sp-10: 8rem;

    /* Shape */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

    --shadow-xs: 0 1px 2px rgba(20, 16, 36, .05);
    --shadow-sm: 0 1px 3px rgba(20, 16, 36, .07), 0 1px 2px rgba(20, 16, 36, .04);
    --shadow-md: 0 4px 12px rgba(20, 16, 36, .08), 0 2px 4px rgba(20, 16, 36, .04);
    --shadow-lg: 0 12px 32px rgba(20, 16, 36, .10), 0 4px 8px rgba(20, 16, 36, .04);
    --shadow-xl: 0 24px 60px rgba(20, 16, 36, .14), 0 8px 16px rgba(20, 16, 36, .06);
    --ring: 0 0 0 3px rgba(109, 74, 228, .28);

    --container: 76rem;
    --container-narrow: 46rem;
    --container-wide: 88rem;

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
    --bg:          var(--ink-900);
    --bg-elevated: var(--ink-800);
    --bg-sunken:   #090713;
    --bg-inverse:  var(--ink-50);
    --text:        #eae6f5;
    --text-muted:  var(--ink-300);
    --text-subtle: var(--ink-400);
    --text-inverse:var(--ink-900);
    --border:      #2a2340;
    --border-strong: #3a3155;
    --accent:      var(--gold-400);
    --accent-text: var(--gold-300);
    --accent-soft: rgba(212, 175, 55, .10);
    --link:        var(--violet-300);

    --positive-bg: rgba(31, 122, 77, .16);  --positive: #5ed49b; --positive-strong: #7fe3b3;
    --caution-bg:  rgba(154, 107, 18, .18); --caution:  #ecc369; --caution-strong:  #f3d68f;
    --negative-bg: rgba(176, 61, 46, .16);  --negative: #f08d7e; --negative-strong: #f5a99d;
    --info-bg:     rgba(43, 95, 158, .16);  --info:     #85b4ec; --info-strong:     #a6c9f3;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, .6);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: var(--ink-900); --bg-elevated: var(--ink-800); --bg-sunken: #090713;
        --bg-inverse: var(--ink-50); --text: #eae6f5; --text-muted: var(--ink-300);
        --text-subtle: var(--ink-400); --text-inverse: var(--ink-900);
        --border: #2a2340; --border-strong: #3a3155;
        --accent: var(--gold-400); --accent-text: var(--gold-300);
        --accent-soft: rgba(212, 175, 55, .10); --link: var(--violet-300);
        --positive-bg: rgba(31,122,77,.16); --positive: #5ed49b; --positive-strong: #7fe3b3;
        --caution-bg: rgba(154,107,18,.18); --caution: #ecc369; --caution-strong: #f3d68f;
        --negative-bg: rgba(176,61,46,.16); --negative: #f08d7e; --negative-strong: #f5a99d;
        --info-bg: rgba(43,95,158,.16); --info: #85b4ec; --info-strong: #a6c9f3;
        --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 4px 12px rgba(0,0,0,.5);
        --shadow-lg: 0 12px 32px rgba(0,0,0,.55); --shadow-xl: 0 24px 60px rgba(0,0,0,.6);
        color-scheme: dark;
    }
}

/* ----------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); }

:focus-visible {
    outline: 2px solid var(--violet-500);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold-200); color: var(--ink-900); }
[data-theme="dark"] ::selection { background: var(--violet-600); color: #fff; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--ink-900); color: #fff; padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.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;
}

/* ------------------------------------------------------------ 3. Typography */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--text);
    font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-sans); font-weight: 650; letter-spacing: -0.01em; }
h5, h6 { font-family: var(--font-sans); font-weight: 650; font-size: var(--step-0); }

.display {
    font-size: var(--step-5);
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144;
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    display: block;
}

.lede { font-size: var(--step-1); line-height: 1.6; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
.small { font-size: var(--step--1); }
.tiny  { font-size: var(--step--2); }
.tnum  { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mono  { font-family: var(--font-mono); }
.center{ text-align: center; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition); }
a:hover { color: var(--violet-500); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { font-weight: 650; color: var(--text); }
.prose blockquote {
    border-left: 3px solid var(--accent);
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
    font-style: italic;
    color: var(--text-muted);
}
.prose code {
    font-family: var(--font-mono); font-size: .88em;
    background: var(--bg-sunken); padding: .15em .4em; border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------- 4. Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.section { padding-block: var(--sp-8); }
.section-lg { padding-block: var(--sp-9); }
.section-sm { padding-block: var(--sp-6); }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }
.stack-sm { --flow: var(--sp-2); }
.stack-lg { --flow: var(--sp-6); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.cluster-between { justify-content: space-between; }
.cluster-center { justify-content: center; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grid-sidebar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
    .grid-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-7); align-items: start; }
    .grid-sidebar-left { grid-template-columns: 17rem minmax(0, 1fr); }
}
.sticky-side { position: sticky; top: 5.5rem; }

.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--sp-6); }

/* --------------------------------------------------------------- 5. Cosmic  */
.cosmos {
    position: relative;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(109, 74, 228, .30), transparent 60%),
        radial-gradient(900px 500px at 85% 0%, rgba(212, 175, 55, .16), transparent 55%),
        linear-gradient(175deg, #14102a 0%, #0c0916 55%, #0a0813 100%);
    color: var(--text-inverse);
    overflow: hidden;
    isolation: isolate;
}
.cosmos::before {
    content: '';
    position: absolute; inset: 0; z-index: -1; opacity: .55;
    background-image:
        radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9), transparent),
        radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.65), transparent),
        radial-gradient(1.6px 1.6px at 46% 18%, rgba(255,244,214,.85), transparent),
        radial-gradient(1px 1px at 62% 48%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.3px 1.3px at 77% 28%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 88% 70%, rgba(214,199,255,.7), transparent),
        radial-gradient(1.2px 1.2px at 36% 84%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 68% 88%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 8% 76%, rgba(255,232,180,.7), transparent),
        radial-gradient(1px 1px at 94% 44%, rgba(255,255,255,.55), transparent);
}
.cosmos h1, .cosmos h2, .cosmos h3, .cosmos h4 { color: #fff; }
.cosmos .muted, .cosmos p { color: #b9b1d4; }
.cosmos .eyebrow { color: var(--gold-300); }
.cosmos a:not(.btn) { color: var(--gold-200); }

/* Slow orbital glow behind hero content */
.orbit {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
    border: 1px solid rgba(212, 175, 55, .14);
}
.orbit-1 { width: 32rem; height: 32rem; top: -8rem; right: -6rem; }
.orbit-2 { width: 46rem; height: 46rem; top: -14rem; right: -12rem; border-color: rgba(109, 74, 228, .16); }
.orbit-3 { width: 60rem; height: 60rem; top: -20rem; right: -20rem; border-color: rgba(255, 255, 255, .05); }

/* --------------------------------------------------------------- 6. Buttons */
.btn {
    --btn-bg: var(--ink-800);
    --btn-fg: #fff;
    --btn-border: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    padding: 0.72rem 1.35rem;
    font-size: var(--step-0); font-weight: 600; line-height: 1.2;
    background: var(--btn-bg); color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--r-full);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
    box-shadow: var(--shadow-xs);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.btn-primary {
    --btn-bg: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    --btn-fg: #24190a;
}
.btn-primary:hover { --btn-bg: linear-gradient(135deg, var(--gold-300), var(--gold-400)); }

.btn-violet { --btn-bg: linear-gradient(135deg, var(--violet-500), var(--violet-600)); --btn-fg: #fff; }
.btn-dark   { --btn-bg: var(--ink-800); --btn-fg: #fff; }

.btn-outline {
    --btn-bg: transparent; --btn-fg: var(--text); --btn-border: var(--border-strong);
    box-shadow: none;
}
.btn-outline:hover { --btn-bg: var(--bg-sunken); --btn-border: var(--ink-300); }

.cosmos .btn-outline { --btn-fg: #fff; --btn-border: rgba(255,255,255,.28); }
.cosmos .btn-outline:hover { --btn-bg: rgba(255,255,255,.09); --btn-border: rgba(255,255,255,.5); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-muted); box-shadow: none; padding-inline: var(--sp-3); }
.btn-ghost:hover { --btn-bg: var(--bg-sunken); --btn-fg: var(--text); }

.btn-sm { padding: 0.45rem 0.95rem; font-size: var(--step--1); }
.btn-lg { padding: 0.95rem 1.9rem; font-size: var(--step-1); }
.btn-block { width: 100%; }
.btn-icon { padding: 0.6rem; aspect-ratio: 1; border-radius: var(--r-full); }

/* ----------------------------------------------------------------- 7. Cards */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}
.card-pad-lg { padding: var(--sp-6); }
.card-flush  { padding: 0; overflow: hidden; }
.card-quiet  { box-shadow: none; background: transparent; }
.card-sunken { background: var(--bg-sunken); box-shadow: none; }

a.card, .card-link { display: block; text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
a.card:hover, .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }

.card-accent { border-top: 3px solid var(--accent); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.card-title  { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 650; letter-spacing: -.01em; }

/* Feature tile used on the tools index */
.tile { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.tile-icon {
    width: 2.75rem; height: 2.75rem; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--gold-100), var(--gold-50));
    color: var(--gold-600); flex-shrink: 0;
}
[data-theme="dark"] .tile-icon { background: rgba(212,175,55,.14); color: var(--gold-300); }
.tile-icon svg { width: 1.4rem; height: 1.4rem; }
.tile-body { flex: 1; }
.tile-cta { font-size: var(--step--1); font-weight: 600; color: var(--link); }

/* ---------------------------------------------------------------- 8. Badges */
.badge {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .22em .7em; border-radius: var(--r-full);
    font-size: var(--step--2); font-weight: 650; letter-spacing: .02em;
    background: var(--bg-sunken); color: var(--text-muted);
    border: 1px solid transparent; white-space: nowrap;
}
.badge-gold     { background: var(--accent-soft); color: var(--accent-text); border-color: rgba(184,145,42,.22); }
.badge-positive { background: var(--positive-bg); color: var(--positive-strong); }
.badge-caution  { background: var(--caution-bg);  color: var(--caution-strong); }
.badge-negative { background: var(--negative-bg); color: var(--negative-strong); }
.badge-info     { background: var(--info-bg);     color: var(--info-strong); }
.badge-violet   { background: var(--violet-50);   color: var(--violet-700); }
[data-theme="dark"] .badge-violet { background: rgba(109,74,228,.18); color: var(--violet-300); }
.badge-dot::before { content: ''; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }

/* ----------------------------------------------------------------- 9. Forms */
.field { display: block; margin-bottom: var(--sp-4); }
.label {
    display: block; font-size: var(--step--1); font-weight: 600;
    margin-bottom: var(--sp-2); color: var(--text);
}
.label .req { color: var(--negative); margin-left: .15em; }
.hint { display: block; font-size: var(--step--2); color: var(--text-muted); margin-top: var(--sp-2); }

.input, .select, .textarea {
    width: 100%;
    padding: 0.68rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
    appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--violet-500); box-shadow: var(--ring);
}
.input[aria-invalid="true"], .has-error .input, .has-error .select {
    border-color: var(--negative);
}
.textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6285' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.4rem;
    cursor: pointer;
}

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .btn { border-radius: 0 var(--r-md) var(--r-md) 0; }

.field-error { display: block; font-size: var(--step--2); color: var(--negative); margin-top: var(--sp-2); font-weight: 500; }

.checkbox, .radio { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; font-size: var(--step--1); }
.checkbox input, .radio input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--violet-500); flex-shrink: 0; cursor: pointer; }

/* Segmented control for methodology switching */
.segmented {
    display: inline-flex; padding: 3px; gap: 2px;
    background: var(--bg-sunken); border-radius: var(--r-full); border: 1px solid var(--border);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
    padding: .4rem 1rem; border-radius: var(--r-full); cursor: pointer;
    font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
    transition: all var(--transition); white-space: nowrap;
}
.segmented input:checked + label { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-xs); }
.segmented input:focus-visible + label { outline: 2px solid var(--violet-500); outline-offset: 1px; }

.fieldset { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); }
.fieldset > legend { padding-inline: var(--sp-3); font-weight: 650; font-size: var(--step--1); color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; }

.form-grid { display: grid; gap: 0 var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.form-grid .field-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------- 10. Score visuals */
.score-ring { position: relative; display: inline-grid; place-items: center; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-track { fill: none; stroke: var(--border); }
.score-ring-value { fill: none; stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 900ms cubic-bezier(.22,.9,.28,1); }
.score-ring-label { position: absolute; text-align: center; line-height: 1.1; }
.score-ring-num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; font-variant-numeric: tabular-nums; display: block; }
.score-ring-cap { font-size: var(--step--2); color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }

.tone-excellent { --accent: var(--positive); color: var(--positive-strong); }
.tone-strong    { --accent: var(--gold-500); color: var(--accent-text); }
.tone-moderate  { --accent: var(--info);     color: var(--info-strong); }
.tone-weak      { --accent: var(--caution);  color: var(--caution-strong); }
.tone-poor      { --accent: var(--negative); color: var(--negative-strong); }

.meter { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); align-items: center; }
.meter-label { font-size: var(--step--1); font-weight: 550; }
.meter-value { font-size: var(--step--1); font-weight: 700; font-variant-numeric: tabular-nums; }
.meter-track { grid-column: 1 / -1; height: 7px; background: var(--bg-sunken); border-radius: var(--r-full); overflow: hidden; }
.meter-fill  { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--accent), var(--gold-300)); transition: width 900ms cubic-bezier(.22,.9,.28,1); }
.meter + .meter { margin-top: var(--sp-4); }

.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat-num { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-cap { font-size: var(--step--2); color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 600; }

/* The big number chip used everywhere numerology results appear */
.numeral {
    display: inline-grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: var(--r-md);
    font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1;
    background: linear-gradient(145deg, var(--ink-800), var(--ink-700));
    color: var(--gold-300);
    box-shadow: var(--shadow-sm);
    font-variant-numeric: lining-nums;
}
.numeral-lg { width: 4.5rem; height: 4.5rem; font-size: var(--step-4); border-radius: var(--r-lg); }
.numeral-sm { width: 2.1rem; height: 2.1rem; font-size: var(--step-0); border-radius: var(--r-sm); }
.numeral-gold { background: linear-gradient(145deg, var(--gold-400), var(--gold-600)); color: #221802; }
.numeral-quiet { background: var(--bg-sunken); color: var(--text); box-shadow: none; border: 1px solid var(--border); }

/* ---------------------------------------------------------------- 11. Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); -webkit-overflow-scrolling: touch; }
.table { font-size: var(--step--1); }
.table th, .table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--border); }
.table thead th {
    background: var(--bg-sunken); font-weight: 650; font-size: var(--step--2);
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-sunken); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-compact th, .table-compact td { padding: 0.45rem 0.65rem; }
.table-rank td:first-child { font-weight: 700; color: var(--text-muted); width: 3rem; }

/* --------------------------------------------------------------- 12. Alerts */
.alert {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-4); border-radius: var(--r-md);
    font-size: var(--step--1); border: 1px solid transparent;
}
.alert-icon { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: .12rem; }
.alert-success { background: var(--positive-bg); color: var(--positive-strong); border-color: rgba(31,122,77,.2); }
.alert-error   { background: var(--negative-bg); color: var(--negative-strong); border-color: rgba(176,61,46,.2); }
.alert-warning { background: var(--caution-bg);  color: var(--caution-strong);  border-color: rgba(154,107,18,.2); }
.alert-info    { background: var(--info-bg);     color: var(--info-strong);     border-color: rgba(43,95,158,.2); }

.toast-stack { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200; display: grid; gap: var(--sp-3); max-width: min(24rem, calc(100vw - 2rem)); }
.toast { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-lg); animation: toast-in 260ms cubic-bezier(.2,.9,.3,1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ 13. Navigation */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.site-header.on-cosmos { background: rgba(12, 9, 22, .72); border-bottom-color: rgba(255,255,255,.08); }
.nav { display: flex; align-items: center; gap: var(--sp-5); min-height: 4.25rem; }

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--text); min-width: 0; }
.brand-mark {
    width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0;
    background: radial-gradient(circle at 32% 30%, var(--gold-200), var(--gold-500) 55%, var(--gold-700));
    box-shadow: 0 0 0 3px rgba(212,175,55,.16), inset 0 -2px 6px rgba(0,0,0,.3);
    position: relative;
}
.brand-mark::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid rgba(212,175,55,.35); transform: rotate(-18deg) scaleY(.42);
}
.brand-name { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.brand-sub  { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* On a narrow phone the descriptor pushes the menu button off-screen and the
   whole document scrolls sideways. The mark and the name carry the identity
   on their own. */
@media (max-width: 26rem) {
    .brand-sub { display: none; }
    .brand-name { font-size: 1.05rem; }
    .brand { gap: var(--sp-2); }
}
.on-cosmos .brand-name { color: #fff; }
.on-cosmos .brand-sub  { color: rgba(255,255,255,.55); }

.nav-links { display: none; align-items: center; gap: var(--sp-1); margin-left: auto; }
@media (min-width: 62rem) { .nav-links { display: flex; } .nav-toggle { display: none; } }

.nav-link {
    padding: .5rem .8rem; border-radius: var(--r-md); text-decoration: none;
    font-size: var(--step--1); font-weight: 550; color: var(--text-muted);
    transition: color var(--transition), background var(--transition); white-space: nowrap;
}
.nav-link:hover, .nav-link.is-active { color: var(--text); background: var(--bg-sunken); }
.on-cosmos .nav-link { color: rgba(255,255,255,.72); }
.on-cosmos .nav-link:hover, .on-cosmos .nav-link.is-active { color: #fff; background: rgba(255,255,255,.1); }

.nav-toggle { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: auto; border-radius: var(--r-md); color: var(--text); flex-shrink: 0; }
.on-cosmos .nav-toggle { color: #fff; }

/* Dropdown */
.has-menu { position: relative; }
.menu-panel {
    position: absolute; top: calc(100% + .5rem); left: 0; min-width: 17rem;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-xl); padding: var(--sp-2); z-index: 110;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.has-menu:hover .menu-panel, .has-menu:focus-within .menu-panel, .menu-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.menu-item { display: block; padding: .55rem .7rem; border-radius: var(--r-md); text-decoration: none; color: var(--text); font-size: var(--step--1); }
.menu-item:hover { background: var(--bg-sunken); color: var(--text); }
.menu-item strong { display: block; font-weight: 600; }
.menu-item span { display: block; font-size: var(--step--2); color: var(--text-muted); }
.menu-sep { height: 1px; background: var(--border); margin: var(--sp-2) 0; }

/* Mobile drawer */
.mobile-nav {
    position: fixed; inset: 4.25rem 0 auto 0; z-index: 99;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    padding: var(--sp-4) 0 var(--sp-6); box-shadow: var(--shadow-xl);
    max-height: calc(100vh - 4.25rem); overflow-y: auto;
    display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav .nav-link { display: block; padding: .7rem var(--sp-5); border-radius: 0; font-size: var(--step-0); }

/* ---------------------------------------------------------------- 14. Footer */
.site-footer { margin-top: auto; background: var(--ink-900); color: #a9a1c4; padding-block: var(--sp-8) var(--sp-6); }
.site-footer h5 { color: #fff; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-4); }
.site-footer a { color: #a9a1c4; text-decoration: none; font-size: var(--step--1); }
.site-footer a:hover { color: var(--gold-300); }
.site-footer ul { display: grid; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.footer-bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.09); font-size: var(--step--2); }
.footer-disclaimer { color: #7a7296; font-size: var(--step--2); line-height: 1.6; max-width: 60ch; }

/* ------------------------------------------------------------- 15. Ad slots */
.ad-slot {
    display: block; margin-block: var(--sp-6); text-align: center;
    min-height: 90px; overflow: hidden;
}
.ad-slot[data-format="rect"] { min-height: 250px; }
.ad-slot-label {
    display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-subtle); margin-bottom: var(--sp-2);
}
.ad-slot ins { display: block; }
.no-ads .ad-slot { display: none; }

/* --------------------------------------------------------------- 16. Tabs */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: .7rem 1rem; font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
    text-decoration: none; transition: all var(--transition); background: none;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }
.tab-panel { display: none; padding-top: var(--sp-5); }
.tab-panel.is-active { display: block; }

/* Accordion */
.accordion { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); }
.accordion + .accordion { margin-top: var(--sp-3); }
.accordion summary {
    padding: var(--sp-4) var(--sp-5); cursor: pointer; font-weight: 600; font-size: var(--step-0);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: 1.3em; color: var(--text-muted); line-height: 1; transition: transform var(--transition); }
.accordion[open] summary::after { transform: rotate(45deg); }
.accordion summary:hover { background: var(--bg-sunken); }
.accordion-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); font-size: var(--step--1); }

/* ------------------------------------------------------------ 17. Utilities */
.hide { display: none !important; }
@media (max-width: 47.99rem) { .hide-mobile { display: none !important; } }
@media (min-width: 48rem)    { .hide-desktop { display: none !important; } }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.relative { position: relative; }
.nowrap { white-space: nowrap; }
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.text-positive { color: var(--positive-strong); }
.text-negative { color: var(--negative-strong); }
.text-caution  { color: var(--caution-strong); }
.text-accent   { color: var(--accent-text); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 620ms cubic-bezier(.2,.9,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.spinner {
    width: 1.1em; height: 1.1em; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border) 37%, var(--bg-sunken) 63%);
    background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------------- 18. Printing */
@media print {
    .site-header, .site-footer, .ad-slot, .nav, .btn, .no-print, .mobile-nav { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    .container { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: underline; }
    h1, h2, h3 { break-after: avoid; }
    table { break-inside: auto; }
    tr { break-inside: avoid; }
}

/* ================================================================================
   19. Asset analysers — phone / domain / address
   Added for the digit rail and pair strip on the phone analyser, the digit
   histogram, and the component rows shared by the domain and address pages.
   Nothing above this block depends on it.
   ============================================================================== */

/* Verdict palette, reused by the strip, the pair cards and the badges. */
.v-good    { background: var(--positive-bg); color: var(--positive-strong); }
.v-neutral { background: var(--info-bg);     color: var(--info-strong); }
.v-bad     { background: var(--negative-bg); color: var(--negative-strong); }
.v-void    { background: var(--bg-sunken);   color: var(--text-subtle); }

/* --- the digit rail: one column per digit, pairs bridging two columns ------- */
.digit-strip { --cols: 10; }
.digit-rail,
.pair-lane {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 3px;
}
.pair-lane { margin-top: 3px; }

.digit-chip {
    display: grid; place-items: center;
    aspect-ratio: 1 / 1; min-height: 2.1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    font-family: var(--font-display); font-weight: 600; font-size: var(--step-1);
    font-variant-numeric: lining-nums tabular-nums;
}
.digit-chip.is-last4 { background: var(--accent-soft); border-color: var(--gold-300); color: var(--accent-text); }
.digit-chip.is-zero  { color: var(--negative-strong); border-style: dashed; }

.pair-span {
    grid-column: span 2;
    border-radius: var(--r-sm);
    padding: 0.28rem 0.2rem;
    text-align: center;
    font-size: var(--step--2);
    font-weight: 650;
    line-height: 1.15;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pair-span[data-last4="1"] { box-shadow: inset 0 0 0 1px var(--gold-300); }

.rail-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--step--2); color: var(--text-muted); }
.rail-legend span::before {
    content: ""; display: inline-block; width: .7em; height: .7em;
    border-radius: 3px; margin-right: .4em; background: currentColor; opacity: .85;
}

/* --- one card per pair, the main reading on the phone page ------------------ */
.pair-card {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-4);
    border: 1px solid var(--border); border-left-width: 4px;
    border-radius: var(--r-md);
    background: var(--bg-elevated);
}
.pair-card + .pair-card { margin-top: var(--sp-3); }
.pair-card[data-verdict="good"]    { border-left-color: var(--positive); }
.pair-card[data-verdict="neutral"] { border-left-color: var(--info); }
.pair-card[data-verdict="bad"]     { border-left-color: var(--negative); }
.pair-card[data-verdict="void"]    { border-left-color: var(--border-strong); }
.pair-key {
    display: grid; place-items: center;
    width: 3.2rem; height: 3.2rem; border-radius: var(--r-md);
    font-family: var(--font-display); font-size: var(--step-2); font-weight: 600;
    font-variant-numeric: lining-nums;
}

/* --- digit histogram -------------------------------------------------------- */
.histogram { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--sp-2); }
.histogram-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.histogram-track {
    width: 100%; height: 4.5rem;
    display: flex; align-items: flex-end;
    background: var(--bg-sunken); border-radius: var(--r-sm);
}
.histogram-fill { width: 100%; min-height: 3px; border-radius: var(--r-sm); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.histogram-col[data-state="excess"] .histogram-fill { background: linear-gradient(180deg, var(--negative), var(--negative-strong)); }
.histogram-col[data-state="zero"]   .histogram-fill { background: linear-gradient(180deg, var(--caution), var(--caution-strong)); }
.histogram-label { font-size: var(--step--2); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --- shared component row (domain trace, address parts) --------------------- */
.asset-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
}
.asset-row:last-child { border-bottom: 0; }
@media (max-width: 34rem) {
    .asset-row { grid-template-columns: auto 1fr; }
    .asset-row > :last-child { grid-column: 1 / -1; }
    .histogram { gap: 2px; }
    .pair-card { grid-template-columns: 1fr; }
}

/* ============================================================================
   19. TIMING CALCULATORS
   Added for /tools/launch-date-finder and /tools/timing-dashboard. The base
   system has no month grid and no twelve-month strip, so these are genuinely
   new components rather than variants of existing ones. Everything else on
   those two pages uses the existing card / meter / table / numeral classes.
   ========================================================================== */

/* Shared score tint. Keys match score_band(), plus a `neutral` for months the
   source material treats as neither lifting nor dragging. */
[data-tint] {
    --tint-bg: var(--bg-sunken); --tint-line: var(--border); --tint-ink: var(--text-muted);
}
[data-tint="excellent"] { --tint-bg: var(--positive-bg); --tint-line: rgba(31, 122, 77, .30);  --tint-ink: var(--positive-strong); }
[data-tint="strong"]    { --tint-bg: var(--accent-soft); --tint-line: rgba(184, 145, 42, .32); --tint-ink: var(--accent-text); }
[data-tint="moderate"]  { --tint-bg: var(--info-bg);     --tint-line: rgba(43, 95, 158, .28);  --tint-ink: var(--info-strong); }
[data-tint="weak"]      { --tint-bg: var(--caution-bg);  --tint-line: rgba(154, 107, 18, .30); --tint-ink: var(--caution-strong); }
[data-tint="poor"]      { --tint-bg: var(--negative-bg); --tint-line: rgba(176, 61, 46, .28);  --tint-ink: var(--negative-strong); }
[data-tint="neutral"]   { --tint-bg: var(--bg-sunken);   --tint-line: var(--border);           --tint-ink: var(--text-muted); }

/* ------------------------------------------------------- 19.1 month calendar */
.cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: var(--sp-3);
    min-width: 40rem;               /* forces the .table-wrap to scroll on phones */
}
.cal-dow {
    font-size: var(--step--2); font-weight: 650; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
    text-align: center; padding-bottom: var(--sp-2);
}
.cal-day {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 4.6rem; padding: var(--sp-2);
    border: 1px solid var(--tint-line); border-radius: var(--r-sm);
    background: var(--tint-bg);
}
.cal-day.is-empty { background: transparent; border-color: transparent; }
.cal-day-num {
    font-family: var(--font-display); font-size: var(--step-1);
    font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.cal-day-score {
    font-size: var(--step--2); font-weight: 700;
    color: var(--tint-ink); font-variant-numeric: tabular-nums;
}
.cal-day-meta { font-size: var(--step--2); color: var(--text-muted); margin-top: auto; }
.cal-day.is-blocked { opacity: .72; }
.cal-day.is-blocked .cal-day-num { text-decoration: line-through; text-decoration-thickness: 2px; }
.cal-day.is-pick { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-rank {
    align-self: flex-start; font-size: .6rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--accent-text);
}
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.cal-legend-item { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--step--2); color: var(--text-muted); }
.cal-legend-swatch { width: .9rem; height: .9rem; border-radius: 3px; background: var(--tint-bg); border: 1px solid var(--tint-line); }

/* ------------------------------------------------- 19.2 twelve-month strip */
.mstrip {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 3px; list-style: none; padding: 0; margin: 0;
}
@media (max-width: 40rem) { .mstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mstrip-cell {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: var(--sp-2) 2px; border-radius: var(--r-sm);
    border: 1px solid var(--tint-line); background: var(--tint-bg);
}
.mstrip-m { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.mstrip-n {
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
    line-height: 1; color: var(--tint-ink); font-variant-numeric: tabular-nums;
}
.mstrip-cell.is-now { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------ 19.3 year timeline */
.yr-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.yr-card { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.yr-card.is-now { border-color: var(--accent); box-shadow: var(--shadow-md); }
.yr-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.yr-year { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1; }
.yr-list { list-style: none; padding: 0; margin: 0; font-size: var(--step--1); }
.yr-list li { position: relative; padding-left: 1.1em; margin-top: var(--sp-1); color: var(--text-muted); }
.yr-list li::before { content: '·'; position: absolute; left: .25em; color: var(--text-subtle); font-weight: 700; }

/* ------------------------------------------------------ 19.4 Lo Shu grid
   The 3x3 birth grid. One chip per occurrence of a number, so a cell holding
   three 9s shows three chips and an empty cell is visibly empty. Chips
   sourced from the driver, conductor or Kua are marked differently from the
   digits that came out of the date itself. */
.loshu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    max-width: 26rem;
}
.loshu-cell {
    position: relative;
    min-height: 6.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-elevated);
}
.loshu-cell.is-empty {
    border-style: dashed;
    background: transparent;
}
.loshu-slot {
    position: absolute; top: .35rem; left: .5rem;
    font-size: var(--step--2); font-weight: 600; letter-spacing: .08em;
    color: var(--text-subtle);
}
.loshu-digits { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.loshu-digit {
    display: inline-grid; place-items: center;
    min-width: 1.6rem; height: 1.9rem; padding: 0 .3rem;
    border-radius: var(--r-sm);
    font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
    background: var(--bg-sunken); color: var(--text);
    font-variant-numeric: tabular-nums;
}
.loshu-digit.is-aux {
    background: var(--accent-soft); color: var(--accent-text);
    box-shadow: inset 0 0 0 1px rgba(184, 145, 42, .35);
}
.loshu-empty-mark { font-size: var(--step-1); color: var(--text-subtle); line-height: 1; }
.loshu-tags { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; }
.loshu-tag {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
    color: var(--accent-text);
}
.loshu-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--step--2); color: var(--text-muted); }
.loshu-legend span { display: inline-flex; align-items: center; gap: .4em; }
.loshu-key { width: 1rem; height: 1rem; border-radius: var(--r-sm); background: var(--bg-sunken); }
.loshu-key.is-aux { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(184, 145, 42, .35); }
.loshu-key.is-empty { background: transparent; border: 1px dashed var(--border); }

/* Line list: the eight planes with their completion state. */
.plane { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: start; }
.plane + .plane { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.plane-nums { display: flex; gap: .25rem; }
.plane-num {
    display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
    border-radius: var(--r-sm); font-size: var(--step--1); font-weight: 700;
    background: var(--bg-sunken); color: var(--text-subtle);
    font-variant-numeric: tabular-nums;
}
.plane-num.is-present { background: var(--accent-soft); color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   Spacing scale gap — added with the score and compatibility calculators.
   The utility scale shipped with mt-0 and mt-4..7 but the views across the
   site were already written against mt-2 and mt-3, so those two steps were
   rendering as no-ops. Defined here rather than in the utilities block above
   so the addition stays visible.
   ------------------------------------------------------------------------- */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }

/* Verification pass: three more steps that views referenced but the scale
   never defined, so they were silently doing nothing —
   mt-1 (launch-date, timing-dashboard, core), mb-7 (home, tools,
   for-consultants) and gap-3 (the three report views). */
.mt-1 { margin-top: var(--sp-1); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-7 { margin-bottom: var(--sp-7); }
.gap-3 { gap: var(--sp-3); }

/* ============================================================================
   GUIDANCE LAYER — the decision analyzer and the guided consultation.
   Added for app/Views/tools/decision.php and app/Views/tools/consultant.php.
   Everything else on those pages uses the existing design system.
   ========================================================================== */

/* Question picker: a radio grid where the whole card is the control. */
.qpick { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.qpick > div { position: relative; }
.qpick input { position: absolute; opacity: 0; pointer-events: none; }
.qpick label {
    display: block; height: 100%; cursor: pointer;
    padding: var(--sp-4); border-radius: var(--r-md);
    border: 1px solid var(--border); background: var(--bg-elevated);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.qpick label:hover { border-color: var(--border-strong); }
.qpick input:checked + label {
    border-color: var(--accent); background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.qpick input:focus-visible + label { outline: 2px solid var(--violet-500); outline-offset: 2px; }
.qpick-group { font-size: var(--step--2); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--accent-text); }
.qpick-label { display: block; font-weight: 650; margin-top: var(--sp-2); }
.qpick-blurb { display: block; font-size: var(--step--2); color: var(--text-muted); margin-top: var(--sp-2); line-height: 1.45; }

/* Numbered reasoning steps. */
.reasoning { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.reason {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-5) 0; border-top: 1px solid var(--border);
}
.reason:first-child { border-top: 0; padding-top: var(--sp-3); }
.reason-n {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-full);
    font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
    background: var(--bg-sunken); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.reason.is-for      .reason-n { background: var(--positive-bg); color: var(--positive-strong); }
.reason.is-against  .reason-n { background: var(--negative-bg); color: var(--negative-strong); }
.reason.is-blocking .reason-n { background: var(--negative); color: #fff; }
.reason-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.reason-title { font-weight: 650; }
.reason-body { margin-top: var(--sp-2); line-height: 1.6; }
.reason-nums { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: var(--sp-3); }
.reason-num {
    font-size: var(--step--2); font-weight: 650; font-variant-numeric: tabular-nums;
    padding: .15em .55em; border-radius: var(--r-sm);
    background: var(--bg-sunken); color: var(--text-muted);
}
.reason-ref { font-size: var(--step--2); color: var(--text-subtle); font-family: var(--font-mono, monospace); }

/* Factors for / against, side by side. */
.ledger { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.ledger-col { padding: var(--sp-5); border-radius: var(--r-md); background: var(--bg-sunken); }
.ledger-col h4 { font-size: var(--step--1); font-weight: 700; letter-spacing: .01em; margin-bottom: var(--sp-3); }
.ledger-col.is-for h4     { color: var(--positive-strong); }
.ledger-col.is-against h4 { color: var(--negative-strong); }
.ledger-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.ledger-col li { font-size: var(--step--1); line-height: 1.55; padding-left: 1.1em; position: relative; }
.ledger-col li::before { content: '—'; position: absolute; left: 0; color: var(--text-subtle); }

/* Action list. */
.todo { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.todo li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.todo-mark {
    width: 1.15rem; height: 1.15rem; border-radius: var(--r-sm); margin-top: .15rem;
    border: 1.5px solid var(--border-strong); flex-shrink: 0;
}

/* Consultation thread: alternating question and answer cards. */
.thread { display: grid; gap: var(--sp-5); }
.thread-q {
    justify-self: end; max-width: min(100%, 34rem);
    padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
    background: var(--accent-soft); border: 1px solid rgba(184, 145, 42, .28);
    font-weight: 600;
}
.thread-a { border-left: 3px solid var(--accent); }
.thread-a p + p { margin-top: var(--sp-4); }
.thread-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }

/* Calibration checkpoint — the "does this match you?" prompt. */
.checkpoint {
    margin-top: var(--sp-4); padding: var(--sp-4);
    border-radius: var(--r-md); border: 1px dashed var(--border-strong);
    font-size: var(--step--1); color: var(--text-muted); line-height: 1.55;
}

/* Confidence strip. */
.confidence { display: grid; gap: var(--sp-2); }
.confidence-track { height: 6px; border-radius: var(--r-full); background: var(--bg-sunken); overflow: hidden; }
.confidence-fill { height: 100%; border-radius: var(--r-full); background: var(--violet-500); }

/* ============================================================================
   ADMIN & CONSULTANT PANEL
   Appended for the operator-facing screens (layouts/admin.php). These pages are
   noindex, carry no ads and use their own sidebar shell rather than the public
   header, so nothing here affects the marketing or calculator pages.
   ========================================================================== */
.panel { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; background: var(--bg); }
@media (min-width: 64rem) { .panel { grid-template-columns: 16.5rem minmax(0, 1fr); } }

.panel-side {
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 64rem) {
    .panel-side {
        border-bottom: 0; border-right: 1px solid var(--border);
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
    }
}

.panel-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.panel-brand .brand-mark { flex-shrink: 0; }
.panel-role { font-size: var(--step--2); color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 650; }

.panel-nav { display: grid; gap: 2px; }
.panel-nav-group { font-size: var(--step--2); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .09em; font-weight: 650; margin: var(--sp-4) 0 var(--sp-2) var(--sp-3); }
.panel-nav a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: .5rem var(--sp-3); border-radius: var(--r-md);
    font-size: var(--step--1); font-weight: 550; color: var(--text-muted); text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.panel-nav a:hover { background: var(--bg-sunken); color: var(--text); }
.panel-nav a.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.panel-nav .count { font-size: var(--step--2); font-variant-numeric: tabular-nums; color: var(--text-subtle); }

.panel-main { min-width: 0; display: flex; flex-direction: column; }
.panel-top {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border); background: var(--bg-elevated);
}
.panel-top h1 { font-size: var(--step-2); margin: 0; }
.panel-top .lede { font-size: var(--step--1); margin-top: var(--sp-1); }
.panel-body { padding: var(--sp-6); flex: 1; }
@media (max-width: 40rem) { .panel-top, .panel-body { padding: var(--sp-5) var(--sp-4); } }

/* Stat tiles on the panel dashboards */
.stat-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.stat-card { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); }
.stat-card .stat-num { font-size: var(--step-3); }
.stat-card .stat-sub { font-size: var(--step--2); color: var(--text-subtle); margin-top: var(--sp-2); display: block; }

/* Thirty-day activity table: a bar drawn inside the cell, no chart library */
.spark { display: block; height: .5rem; border-radius: var(--r-full); background: var(--violet-400); min-width: 2px; }
.spark-alt { background: var(--gold-400); }
.spark-cell { width: 40%; }

/* Filter bar above a listing table */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-5); }
.filters .field { margin-bottom: 0; }
.filters .input, .filters .select { min-width: 9rem; }

.pager { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; margin-top: var(--sp-5); font-size: var(--step--1); }
.pager-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Settings field help text sits under the label, above the control */
.help { display: block; font-size: var(--step--2); color: var(--text-muted); line-height: 1.5; margin-bottom: var(--sp-2); }
.setting-row { padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .field { margin-bottom: 0; }

/* Colour swatch + logo preview on the branding screen */
.swatch { width: 3rem; height: 2.4rem; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-elevated); cursor: pointer; }
.logo-preview { max-width: 12rem; max-height: 5rem; border-radius: var(--r-sm); background: var(--bg-sunken); padding: var(--sp-3); }

/* Empty state inside a card */
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-muted); }
.empty h3 { font-size: var(--step-1); color: var(--text); margin-bottom: var(--sp-2); }

/* Pinned note */
.note-item { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); }
.note-item.is-pinned { border-color: rgba(184, 145, 42, .45); background: var(--accent-soft); }

/* ============================================================================
   ACCOUNT AREA — the signed-in shell.
   Added for app/Views/account/* and partials/account-nav.php. Everything
   inside the panels reuses the existing card, table, badge and form classes;
   what is new here is only the two-column shell, its sidebar, the empty
   state, the pager and the auth card that login and registration sit in.
   ========================================================================== */

/* Two-column shell: sidebar left, content right, single column on mobile. */
.acct-shell { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
    .acct-shell { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
    .acct-nav { position: sticky; top: 5.5rem; }
}

.acct-nav {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-3);
    box-shadow: var(--shadow-sm);
}
.acct-me {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.acct-avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 2.4rem; height: 2.4rem; border-radius: var(--r-full);
    background: var(--accent-soft); color: var(--accent-text);
    font-family: var(--font-display); font-weight: 600; line-height: 1;
}
.acct-me-text { min-width: 0; }
.acct-me-text strong { display: block; font-weight: 650; font-size: var(--step--1); }
.acct-me-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acct-links { list-style: none; padding: 0; margin: 0; }
.acct-link {
    display: block; padding: .5rem .7rem; border-radius: var(--r-md);
    text-decoration: none; color: var(--text);
    transition: background var(--transition), color var(--transition);
}
.acct-link:hover { background: var(--bg-sunken); color: var(--text); }
.acct-link .acct-link-label { font-weight: 600; font-size: var(--step--1); }
.acct-link .badge { float: right; }
.acct-link .acct-link-blurb { display: block; font-size: var(--step--2); color: var(--text-muted); line-height: 1.4; }
.acct-link.is-current { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 2px 0 0 var(--accent); }
.acct-link.is-current .acct-link-blurb { color: var(--accent-text); opacity: .8; }
.acct-nav-foot { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }

/* Page header inside the content column. */
.acct-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-6);
}

/* Compact figure row for the overview. */
.acct-figures { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }

/* Empty states — a heading, a sentence and one action, never a shrug. */
.empty {
    text-align: center; padding: var(--sp-7) var(--sp-5);
    border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
    background: var(--bg-sunken);
}
.empty h3 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 650; }
.empty p { max-width: 34rem; margin-inline: auto; margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--step--1); }

/* A row that is really a link — used for saved calculations and profiles. */
.row-link {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--bg-elevated); text-decoration: none; color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.row-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); color: inherit; }
.row-link-main { min-width: 0; flex: 1; }
.row-link-main strong { display: block; font-weight: 650; }

/* Pager. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.pager a, .pager span {
    display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem;
    border-radius: var(--r-md); border: 1px solid var(--border);
    font-size: var(--step--1); font-variant-numeric: tabular-nums; text-decoration: none; color: var(--text);
}
.pager a:hover { border-color: var(--border-strong); background: var(--bg-sunken); color: var(--text); }
.pager .is-current { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 650; }
.pager .is-disabled { color: var(--text-subtle); border-style: dashed; }

/* Repeatable co-founder rows on the profile form. */
.repeat-row {
    display: grid; gap: 0 var(--sp-4); align-items: start;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-4); margin-bottom: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-sunken);
}
@media (min-width: 40rem) {
    .repeat-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); }
}
.repeat-row .field { margin-bottom: var(--sp-2); }

/* Signed-out pages: login, register, forgot, reset. */
.auth-wrap { max-width: 27rem; margin-inline: auto; }
.auth-wrap .card { padding: var(--sp-6); }
.auth-alt { text-align: center; font-size: var(--step--1); color: var(--text-muted); margin-top: var(--sp-5); }

/* The one destructive area in the account. Marked, not hidden. */
.danger-zone { border-color: var(--negative); }
.danger-zone .card-title { color: var(--negative-strong); }

/* On a narrow screen the sidebar becomes a scrolling strip above the content.
   Stacked at full height it would push the page itself below the fold. */
@media (max-width: 61.99rem) {
    .acct-nav { padding: var(--sp-2) var(--sp-3); }
    .acct-me { padding: var(--sp-2) var(--sp-1) var(--sp-3); }
    .acct-links,
    .acct-nav-foot {
        display: flex; gap: var(--sp-1);
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .acct-links::-webkit-scrollbar,
    .acct-nav-foot::-webkit-scrollbar { display: none; }
    .acct-links > li { flex: 0 0 auto; }
    .acct-nav-foot { margin-top: var(--sp-1); padding-top: var(--sp-2); }
    .acct-link { white-space: nowrap; }
    .acct-link .acct-link-blurb { display: none; }
    .acct-link .badge { float: none; margin-left: .4em; }
    .acct-link.is-current { box-shadow: inset 0 -2px 0 var(--accent); }
}

/* ── Article cover image ───────────────────────────────────────────────
   Fixed intrinsic ratio so the box is reserved before the bytes arrive.
   The image is the LCP element on an article page, so it is never lazy. */
.article-cover { margin: 0 0 var(--sp-5); }
.article-cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255, 255, 255, .07);
}