/* ==========================================================================
   SpectraPulse — shared stylesheet
   One place for colours, fonts, the nav and the breadcrumb trail.
   Every template loads this through templates/_head.html, BEFORE its own
   <style> block, so a page's own rules can still adjust its layout.
   Colour values come from the App Design Channel log (Oct 2026).
   ========================================================================== */

:root {
    /* Backgrounds */
    --bg: #0F0B18;            /* page background (near-black, violet-tinted) */
    --surface: #19132A;       /* cards, panels */
    --raised: #221A38;        /* active nav item, hovered rows */
    --line: #2C2444;          /* borders and dividers */

    /* Text */
    --ink: #EEEAF7;           /* main text and headings */
    --ink-soft: #C4BCD8;      /* secondary text (lifted for readability) */
    --ink-faint: #A49CBB;     /* hints, captions — old pages also use it for real content */
    --ink-dim: #857D9F;       /* placeholders, very quiet labels */

    /* Brand violet */
    --accent: #B197FF;        /* accent text, borders, highlights */
    --accent-strong: #8E5CFF; /* deeper violet for fills */
    --link: #C3AEFF;          /* links */
    --primary-grad: linear-gradient(135deg, #9D74FF, #7A4DE0);
    --primary-glow: 0 0 0 1px rgba(196,170,255,0.35), 0 10px 30px -8px rgba(142,92,255,0.75);

    /* Severity — ONE set used everywhere. Kept clearly apart from the violet.
       Violet is the brand, never a severity. */
    --sev-crit: #FF5C7A;      /* Critical (rare: CVE digest, older registers) */
    --sev-high: #FF8A6B;      /* High / Elevated / errors / destructive */
    --sev-med:  #F2B755;      /* Medium / warnings */
    --sev-low:  #6FD3B0;      /* Low / success / done */

    /* Type */
    --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-label: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Base size. The older pages size their text in rem (relative to this), so
   raising it scales all of their text up together. Nav/breadcrumb use px. */
html { color-scheme: dark; font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    /* Safety net for phones: nothing may make the page wider than the screen
       (that is what exposed the area beside the top bar when pinch-zooming).
       'clip' (not 'hidden') so the sticky top bar keeps working. Long words
       and URLs wrap instead of pushing the page wider. */
    overflow-x: clip;
    overflow-wrap: break-word;
}
/* The soft violet light behind every page (as in the mockups). Sits behind content. */
body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    top: -260px; right: -200px; width: 720px; height: 720px; border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, rgba(178,140,255,0.42), rgba(142,92,255,0.20) 38%, rgba(126,140,255,0.07) 62%, rgba(15,11,24,0) 72%);
    filter: blur(70px);
}
/* Form labels: bold, sentence case, full-brightness.
   Our users aren't technical and often read on a phone; all-caps, letter-spaced
   grey labels are harder to read, so the labels now read like normal words. */
body label, body .form-label, body .demo-title {
    text-transform: none; letter-spacing: 0;
    font-family: var(--font-body); font-weight: 700;
    font-size: 0.9rem; color: var(--ink);
}
body label span[style] { color: var(--ink-faint) !important; font-weight: 500; }

/* "Try a sample business" box: a visible panel, not an invisible dashed line. */
body .demo-box {
    background: var(--surface);
    border: 1px dashed rgba(177,151,255,0.4);
    border-radius: 16px; padding: 18px 20px;
}
body .demo-btn {
    background: var(--raised); color: var(--ink);
    border: 1px solid rgba(177,151,255,0.28);
    min-height: 40px; border-radius: 10px;
}
body .demo-btn:hover { border-color: var(--accent); color: var(--ink); }

/* Big headline values stay tight even with the roomier body line-height. */
body .risk-level-value, body .complexity-value, body .threat-level-label, body .page-title, body h1 { line-height: 1.12; }
/* Depth on the panels that carry the headline answer. */
.profile-card, .one-thing-card, .threat-banner {
    box-shadow: 0 24px 60px -30px rgba(142,92,255,0.65);
}
h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; }
h1 strong { font-weight: 500; color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
    outline: 2.5px solid var(--accent);
    outline-offset: 2px;
}
::selection { background: rgba(177,151,255,0.35); }

/* --------------------------------------------------------------------------
   Navigation (templates/nav.html)
   Prefixed sp- so nothing left in a page's own CSS can collide with it.
   -------------------------------------------------------------------------- */
.sp-nav-outer {
    position: sticky; top: 0; z-index: 100;
    background: rgba(15,11,24,0.78);
    backdrop-filter: saturate(1.2) blur(14px);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--line);
}
.sp-nav {
    max-width: 1180px; margin: 0 auto;
    padding: 10px 24px; min-height: 64px;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px 20px;
    font-family: var(--font-body);
}
.sp-logo {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink); text-decoration: none;
    font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
}
.sp-logo svg { display: block; }
.sp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.sp-links a {
    color: var(--ink-soft); text-decoration: none;
    font-size: 15px; font-weight: 500;
    padding: 9px 13px; border-radius: 10px;
    transition: color .15s ease, background .15s ease;
}
.sp-links a:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.sp-links a.is-active { color: var(--ink); background: var(--raised); font-weight: 600; }
.sp-links a.is-quiet { color: var(--ink-faint); }
.sp-divider { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.sp-right { display: flex; align-items: center; gap: 8px; }
.sp-project {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 14px; border-radius: 11px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); text-decoration: none;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.sp-project:hover { border-color: rgba(177,151,255,0.5); }
.sp-project .sp-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-project svg { flex: 0 0 auto; }
.sp-project .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.sp-project.is-empty { color: var(--ink-soft); font-weight: 500; }
.sp-project.is-empty .sp-dot { background: var(--ink-dim); }
.sp-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: var(--raised);
    color: var(--ink); text-decoration: none;
    font-weight: 700; font-size: 14px; text-transform: uppercase;
}
.sp-avatar:hover, .sp-avatar.is-active { border-color: var(--accent); }
.sp-logout { color: var(--ink-faint); text-decoration: none; font-size: 14px; padding: 8px 6px; }
.sp-logout:hover { color: var(--ink); }
.sp-login {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border-radius: 999px; background: var(--primary-grad); box-shadow: var(--primary-glow);
    color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap;
}

.sp-logout-mobile { display: none; }
@media (max-width: 760px) {
    /* Phone: row 1 = logo + project + account; row 2 = the journey links.
       The bar scrolls away with the page here (not pinned): it is tall on a
       phone, and pinned bars misbehave when pinch-zooming on mobile Safari. */
    .sp-nav-outer { position: relative; }
    .sp-nav { padding: 10px 16px; gap: 6px 12px; }
    .sp-links { order: 3; width: 100%; gap: 2px 0; margin: 0 -10px; }
    .sp-links a { padding: 8px 10px; font-size: 14px; white-space: nowrap; }
    .sp-divider { display: none; }
    .sp-project { max-width: 130px; min-height: 40px; padding: 0 12px; }
    .sp-avatar { width: 40px; height: 40px; }
    .sp-logout { display: none; }
    .sp-links a.sp-logout-mobile { display: inline-block; color: var(--ink-faint); }
}

/* --------------------------------------------------------------------------
   Breadcrumb trail (templates/_breadcrumb.html) — doubles as a back button
   -------------------------------------------------------------------------- */
.sp-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0 0 22px; padding: 0; list-style: none;
    font-family: var(--font-body); font-size: 14px; color: var(--ink-faint);
}
.sp-crumbs a {
    color: var(--ink-soft); text-decoration: none;
    padding: 6px 2px; border-radius: 6px;
}
.sp-crumbs a:hover { color: var(--ink); }
.sp-crumbs .sp-sep { color: var(--ink-dim); }
.sp-crumbs [aria-current="page"] { color: var(--ink-faint); }
.sp-crumbs .sp-arrow { display: none; }
@media (max-width: 600px) {
    /* On a phone: just "← Previous page", a proper back button. */
    .sp-crumbs .is-far, .sp-crumbs .is-current, .sp-crumbs .sp-sep { display: none; }
    .sp-crumbs .sp-arrow { display: inline; margin-right: 6px; }
    .sp-crumbs .is-parent a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Shared primary button look (the glowing pill) — used by page buttons via
   the --primary-grad / --primary-glow tokens above.
   -------------------------------------------------------------------------- */
.sp-btn-primary {
    background: var(--primary-grad); color: #fff; border: 0;
    box-shadow: var(--primary-glow);
}
/* The existing main action buttons on each page. "body" in front makes these
   win over the page's own (older) button colours without editing every page. */
body .btn, body .btn-generate, body .btn-submit, body .btn-create,
body .btn-save, body .btn-check, body .btn-verify, body .hub-cta {
    background: var(--primary-grad); color: #fff; border: 0;
    border-radius: 999px; box-shadow: var(--primary-glow);
    font-weight: 700;
}
body .btn:hover, body .btn-generate:hover, body .btn-submit:hover, body .btn-create:hover,
body .btn-save:hover, body .btn-check:hover, body .btn-verify:hover, body .hub-cta:hover {
    background: var(--primary-grad); filter: brightness(1.08);
}
body .btn:disabled, body .btn-generate:disabled { filter: saturate(0.4) brightness(0.8); cursor: wait; }

/* Page titles use the serif display face, like the mockups. */
.page-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}