/* ============================================================================
   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); }
}