@import url('tokens.css');

/* =============================================================
   TRANSPORT VALUES — styled to the Reclaim design system
   Dark-first. Barlow Condensed display / Barlow body / Space Mono data.
   ============================================================= */

* { box-sizing: border-box; }

html {
    background-color: var(--surface-base);
    scroll-behavior: smooth;
}

body {
    max-width: var(--layout-content-max);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 var(--layout-gutter) var(--gap-2xl);
    background-color: var(--surface-base);
    color: var(--text-primary);
    font-family: var(--font-body);
}

@media (max-width: 640px) {
    body { padding: 0 var(--layout-gutter-sm) var(--gap-xl); }
}

a { font-family: inherit; color: var(--magenta); }

::selection { background: var(--magenta); color: var(--white); }

:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) 0;
}
.site-header img {
    height: 28px;
    width: auto;
}
.site-header .wordmark {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-primary);
}

/* ── Type ───────────────────────────────────────────────── */
h1, h2, h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    margin: 0;
}
h1 {
    font-weight: var(--weight-black);
    font-size: clamp(2.75rem, 7vw, var(--text-5xl));
}
h2 {
    font-weight: var(--weight-bold);
    font-size: clamp(1.75rem, 4vw, var(--text-3xl));
    margin-top: var(--gap-xl);
    margin-bottom: var(--space-4);
}
p {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    margin: var(--space-2) 0;
}
li {
    color: var(--text-secondary);
    font-size: var(--text-base);
}
b, strong { color: var(--text-primary); }

.overline {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--grey-300);
    margin: 0 0 var(--space-2);
}

/* ── Divider ────────────────────────────────────────────── */
.divider { border: none; height: 1px; background: var(--border-subtle); margin: var(--gap-lg) 0; }
.divider-spectrum { height: 2px; background: var(--gradient-spectrum); border: none; margin: var(--gap-lg) 0; }
hr { border: none; height: 1px; background: var(--border-subtle); margin: var(--gap-lg) 0; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: var(--gap-md) 0 var(--gap-lg); text-align: center; }
.hero .overline { text-align: center; }
.hero h1 { margin-bottom: var(--space-5); }
.hero-sub {
    max-width: var(--layout-text-max);
    margin: 0 auto var(--gap-md);
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* ── Axis tag strip ─────────────────────────────────────── */
.center, .axis-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    background: none;
    width: auto;
    margin: var(--gap-md) auto;
    padding: 0;
}
div.axis_name, .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
}
.tag svg.lucide {
    width: 14px;
    height: 14px;
    stroke-width: 2.5px;
    flex-shrink: 0;
}
div.quadcolumn, img.quadcolumn { display: none; }

/* axis accent colors, cycled across the nine axes */
.axis-1 { --axis-color: var(--magenta); }
.axis-2 { --axis-color: var(--violet); }
.axis-3 { --axis-color: var(--blue); }
.axis-4 { --axis-color: var(--cyan); }
.axis-5 { --axis-color: var(--teal); }
.axis-6 { --axis-color: var(--magenta-light); }
.axis-7 { --axis-color: var(--violet-light); }
.axis-8 { --axis-color: var(--blue-light); }
.axis-9 { --axis-color: var(--cyan-light); }

.axis-tags .tag { border-color: var(--axis-color); color: var(--axis-color); }

/* ── Buttons ────────────────────────────────────────────── */
.button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-normal);
    font-size: var(--text-md);
    border: none;
    border-radius: var(--radius-md);
    color: var(--white);
    background: var(--magenta);
    padding: var(--space-4) var(--space-6);
    text-align: center;
    text-decoration: none;
    margin: var(--space-2) 0;
    cursor: pointer;
    transition: box-shadow var(--duration-default) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.button:hover, .button:focus-visible { box-shadow: var(--shadow-glow-magenta); transform: scale(1.01); }
.button:active { transform: scale(0.97); }

.btn-lg { font-size: var(--text-lg); padding: var(--space-5) var(--space-8); }
.btn-secondary { background: var(--violet); }
.btn-secondary:hover, .btn-secondary:focus-visible { box-shadow: var(--shadow-glow-violet); }
.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255,255,255,0.08); box-shadow: none; }
.btn-outline {
    background: transparent;
    color: var(--magenta);
    border: 1px solid var(--magenta);
}
.btn-outline:hover, .btn-outline:focus-visible { background: rgba(212,40,212,0.08); box-shadow: none; }

/* Likert response scale — data-positive to data-negative */
.stronglyAgree { background: var(--teal); color: var(--purple-900); }
.stronglyAgree:hover, .stronglyAgree:focus-visible { box-shadow: var(--shadow-glow-teal); }
.agree { background: var(--cyan); color: var(--purple-900); }
.agree:hover, .agree:focus-visible { box-shadow: 0 0 24px rgba(11,184,212,0.35); }
.neutral { background: var(--surface-overlay); color: var(--text-primary); border: 1px solid var(--border-default); }
.neutral:hover, .neutral:focus-visible { background: var(--grey-500); }
.disagree { background: var(--data-warning); color: var(--purple-900); }
.disagree:hover, .disagree:focus-visible { box-shadow: 0 0 24px rgba(245,166,35,0.35); }
.stronglyDisagree { background: var(--data-negative); color: var(--white); }
.stronglyDisagree:hover, .stronglyDisagree:focus-visible { box-shadow: 0 0 24px rgba(232,64,64,0.35); }

.small_button, .small_button_off {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-5);
    width: auto;
    min-width: 120px;
    text-align: center;
    text-decoration: none;
    font-size: var(--text-base);
    margin: var(--space-2) 0;
    cursor: pointer;
}
.small_button:hover, .small_button:focus-visible { background: rgba(255,255,255,0.08); }
.small_button_off {
    color: var(--text-disabled);
    border-color: var(--border-subtle);
    cursor: not-allowed;
    opacity: var(--opacity-disabled, 0.45);
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--pad-md, var(--space-6));
}
.card-accent { border-top: 2px solid var(--axis-color, var(--magenta)); }

p.question {
    margin: var(--gap-md) auto;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    width: 100%;
    min-height: 120px;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    padding: var(--space-8);
    border-radius: var(--radius-md);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* ── Quiz progress ──────────────────────────────────────── */
.progress-track {
    width: 100%;
    height: 4px;
    background: var(--surface-raised);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.progress-fill {
    height: 100%;
    background: var(--gradient-spectrum);
    transition: width var(--duration-default) var(--ease-out);
}
#question-number, h2#question-number {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 var(--space-4);
}
.quiz-actions { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.quiz-back-row { display: flex; justify-content: center; margin-top: var(--space-4); }

/* ── Value explanation rows (index.html) ───────────────────── */
.explanation_bg {
    background: none;
    border-radius: 0;
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.spacer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-top: 2px solid var(--axis-color, var(--magenta));
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-8);
}
div.explanation_blurb_left, div.explanation_blurb_right {
    width: auto;
    margin: 0;
}
div.explanation_blurb_right { text-align: right; }
div.explanation_axis {
    width: auto;
    text-align: center;
    color: var(--axis-color, var(--grey-300));
}
.axis-icon {
    display: block;
    margin: 0 auto var(--space-2);
    width: 28px;
    height: 28px;
    stroke-width: 1.75px;
    color: var(--axis-color, var(--grey-300));
}
p.value {
    margin: 0 0 var(--space-2);
    text-indent: 0;
    margin-left: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
}
p.value b { color: var(--axis-color, var(--text-primary)); font-weight: inherit; }
p.blurb-text { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
p.axis_name {
    margin: 0 0 var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-body);
    text-transform: uppercase;
}
.arrow-symbol {
    display: block;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--axis-color, var(--grey-300));
}
img.arrow { display: none; }

@media (max-width: 720px) {
    .spacer { grid-template-columns: 1fr; text-align: left !important; }
    div.explanation_blurb_right { text-align: left; }
    .explanation_axis { text-align: left; }
}

/* ── Results — axis rows ───────────────────────────────────── */
.axis-row {
    margin: var(--gap-md) 0;
    padding: var(--space-5) var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-top: 2px solid var(--axis-color, var(--magenta));
    border-radius: var(--radius-md);
}
.axis-row-header {
    margin-bottom: var(--space-3);
}
.axis-row-header .axis-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
}
.axis-name-icon.lucide {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
    color: var(--axis-color, var(--text-muted));
    flex-shrink: 0;
}
div.axis, .axis-track {
    width: 100%;
    height: 10px;
    background: var(--surface-overlay);
    border-radius: var(--radius-full);
    overflow: hidden;
    display: block;
}
div.bar, .axis-fill {
    height: 100%;
    background: var(--axis-color, var(--magenta));
    border: none;
    border-radius: var(--radius-full);
    transition: width var(--duration-default) var(--ease-out);
    display: block;
    margin: 0;
    padding: 0;
    width: 0;
}
.axis-row-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.axis-verdict {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.axis-score, span.mono {
    font-family: var(--font-mono);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}
.axis-score { font-size: var(--text-lg); }

.weight-300 { font-weight: var(--weight-medium); color: var(--axis-color, var(--magenta)); }

#banner {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin: var(--space-6) auto;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
    margin-top: var(--gap-2xl);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}