/* =============================================================================
   AI-Safe Careers — shared design system (single source of truth).

   Loaded after Bootstrap 5.3 on every page via includes/head-assets.php, so the
   canonical chrome (includes/layout.php) and the homepage / formerly-bespoke pages
   all share one set of tokens, one nav, one footer, and one set of mobile-first
   hardening rules. Page-specific styling (e.g. the homepage hero) stays inline on
   that page; anything cross-page lives here.

   Conventions: mobile-first (base = phone, min-width media queries scale up).
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */
:root {
    --primary:        #2563eb;   /* trust blue */
    --primary-700:    #1d4ed8;
    --primary-050:    #eef2ff;
    --ink:            #0f172a;   /* body text */
    --muted:          #64748b;   /* secondary text (use for >=14px) */
    --muted-strong:   #475569;   /* accessible muted for small/legal text (AA on white) */
    --line:           #e5e7eb;
    --surface:        #f8fafc;
    --soft:           #f8fafc;   /* alias used by homepage components */
    --success:        #10b981;
    --radius:         12px;
    --radius-lg:      18px;
    --shadow-sm:      0 1px 3px rgba(2,6,23,.08);
    --shadow-md:      0 18px 50px rgba(2,6,23,.08);
    --nav-h:          64px;      /* fixed navbar height, used for anchor offset */
}

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { line-height: 1.2; text-wrap: balance; }
p { line-height: 1.65; }
a { color: var(--primary); }
a:hover { color: var(--primary-700); }

/* Anchor targets (#scan, #report, …) must clear the fixed navbar when jumped to. */
:target, [id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* Accessible focus ring for keyboard users (Bootstrap removes outlines). */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible {
    outline: 3px solid rgba(37,99,235,.45);
    outline-offset: 2px;
}

/* Legal / disclosure microcopy must stay legible (FTC "clear & conspicuous"). */
.text-fineprint { font-size: .8rem; color: var(--muted-strong); }

/* --- Mobile-first input hardening ---------------------------------------- */
/* iOS Safari auto-zooms when a focused field renders < 16px. Force >= 16px on
   phones for ALL controls, including Bootstrap's -sm variants. Desktop keeps
   Bootstrap's sizing. */
@media (max-width: 575.98px) {
    .form-control, .form-select, .form-control-sm, .form-select-sm,
    input, select, textarea { font-size: 16px !important; }
}

/* --- Touch targets (Apple HIG / WCAG 2.5.5: >= 44px) --------------------- */
/* On touch-class widths, every button/CTA gets a 44px minimum hit area without
   changing its label size. Applies on phones + small tablets. */
@media (max-width: 991.98px) {
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm { min-height: 44px; padding-top: .35rem; padding-bottom: .35rem; }
    /* Icon-only buttons (incl. the nav hamburger) need a full 44px hit area. */
    .btn-icon, .navbar-toggler { min-width: 44px; min-height: 44px; }
    /* Standalone text links used as nav/footer actions get vertical breathing room. */
    .nav-link, footer a, .tap { display: inline-block; min-height: 24px; padding-block: 6px; }
}

/* --- Navbar (shared chrome) ---------------------------------------------- */
.navbar { background: #fff !important; box-shadow: var(--shadow-sm); min-height: var(--nav-h); }
.navbar-brand { font-weight: 800; color: var(--ink) !important; letter-spacing: -.01em; }
.navbar .nav-link { color: var(--ink); font-weight: 500; }
.navbar .nav-link:hover { color: var(--primary); }
main { padding-top: var(--nav-h); min-height: 60vh; }

/* --- Footer (shared chrome) ---------------------------------------------- */
footer.site-footer { background: var(--ink); color: #cbd5e1; padding: 2.75rem 0; margin-top: 4rem; }
footer.site-footer a { color: #c2ccd9; text-decoration: none; }  /* lifted from #94a3b8 for AA */
footer.site-footer a:hover { color: #fff; }

/* --- Career map (current role → safer adjacent roles) -------------------- */
/* Row on desktop, stacks vertically on phones so it never forces overflow
   (the old inline min-width:160/240px pushed past narrow viewports in Firefox). */
.career-map { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 1rem 0; }
.career-map .cm-node { border-radius: 10px; padding: 10px 14px; min-width: 160px; max-width: 100%; }
.career-map .cm-label { font-size: .7rem; color: var(--muted); letter-spacing: .05em; }
.career-map .cm-arrow { font-size: 1.6rem; color: #94a3b8; line-height: 1; }
.career-map .cm-col { display: flex; flex-direction: column; gap: 8px; flex: 1 1 240px; min-width: 0; }
.career-map .cm-pivot { text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; justify-content: space-between; gap: 10px; align-items: center; min-width: 0; }
.career-map .cm-overlap { color: var(--muted); font-size: .78rem; }
@media (max-width: 575.98px) {
    .career-map { flex-direction: column; align-items: stretch; }
    .career-map .cm-arrow { transform: rotate(90deg); }
    .career-map .cm-node, .career-map .cm-col { width: 100%; }
}

/* --- Chip: a wrapping pill link for related roles / skills (replaces tiny,
   non-wrapping badge links that overflowed on long titles + were poor tap targets) -- */
.chip {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-size: .875rem;
    line-height: 1.35;
    text-decoration: none;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 991.98px) { .chip { min-height: 44px; display: inline-flex; align-items: center; } }

/* --- Rendered AI/markdown output ----------------------------------------- */
.md-output > :first-child { margin-top: 0; }
.md-output ul, .md-output ol { padding-left: 1.25rem; }
.md-output p:last-child { margin-bottom: 0; }
.md-output code { background: var(--surface); padding: .1rem .3rem; border-radius: 4px; }

/* --- Shared components ---------------------------------------------------- */
.card { border-radius: var(--radius); }
.badge { font-weight: 600; }
.disclaimer {
    background: #f1f5f9;
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    color: #334155;
    font-size: .92rem;
}

/* Score-gauge — the brand motif (includes/gauge.php). UX pass 2026-07-03: the number row is
   BASELINE-aligned typography (the old vertical-centring floated the band pill mid-cap-height and
   mashed a bold "/100" straight into the score — "72/100High exposure"). Hierarchy: uppercase kicker →
   role → score line → gradient band with the triangle pointer (same motif as the share card) → sub. */
.score-gauge{background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:16px;padding:20px 22px 18px;box-shadow:0 8px 30px rgba(2,6,23,.06);max-width:400px}
.score-gauge .sg-eyebrow{font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#64748b);margin-bottom:.2rem}
.score-gauge .sg-cap{font-size:.95rem;font-weight:600;line-height:1.35;color:var(--ink,#0f172a);margin-bottom:.75rem}
.score-gauge .sg-row{display:flex;align-items:baseline;column-gap:.8rem;flex-wrap:wrap}
.score-gauge .sg-num{font-size:2.75rem;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.score-gauge .sg-den{font-size:1rem;color:var(--muted,#64748b);font-weight:500;margin-left:.3rem;letter-spacing:0}
.score-gauge .sg-badge{color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .65rem;border-radius:999px;white-space:nowrap}
.score-gauge .sg-bar{margin-top:.9rem;height:10px;border-radius:6px;background:linear-gradient(90deg,#22c55e,#84cc16,#eab308,#f97316,#ef4444);position:relative}
.score-gauge .sg-marker{position:absolute;top:-9px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--ink,#0f172a);filter:drop-shadow(0 1px 1px rgba(2,6,23,.3))}
.score-gauge .sg-sub{font-size:.8125rem;color:var(--muted,#64748b);margin-top:.65rem}
.score-gauge .sg-sub .sg-sep{display:none} /* the link gets its own line — no dangling mid-dot */
.score-gauge .sg-sub a{display:block;margin-top:.2rem;font-weight:600;text-decoration:none;white-space:nowrap}
.score-gauge .sg-sub a:hover,.score-gauge .sg-sub a:focus{text-decoration:underline}