/* ---------------------------------------------------------------------------
   Personality test skin — "Direction B"
   ---------------------------------------------------------------------------
   ONE stylesheet for all 38 personality tools. Loaded by tools/show.blade.php
   AFTER the per-tool style.css, gated on PersonalityRegistry, so the cascade
   (not specificity hacks) is what makes these win.

   WHY THIS FILE EXISTS. The 38 personality tools ship 38 copies of 4 distinct
   stylesheets, all built on a violet palette (#6d28d9 / #8b5cf6 / #4C1D95 /
   #f5f3ff) that appears in NO token file — not tool-page.css, not
   rt-tokens.css. The quiz was the only part of the site off the design system.
   Editing 38 files to fix that would have re-created the same duplication, so
   the overrides live here once.

   TOKENS USED (resolved values, from public/assets/css/rt-tokens.css and
   tool-page.css — quoted literally because the per-tool sheets do not import
   either and cannot be relied on to have the custom properties in scope):
     navy    #0D1B2A   --rt-brand-navy / --text-dark
     accent  #E8472F   --accent          (NOT --rt-brand-orange #E8622A;
                                          the two-orange split is a known
                                          inconsistency, unresolved — this
                                          file follows tool-page.css)
     paper   #F6F4EF   --rt-brand-paper
     slate ramp #94A3B8 #B6C0CC #D3DAE2

   NOT DONE HERE: the navy result header band. It needs a wrapper element that
   the app.js result renderers do not emit, so it is a markup change, not a
   skin change. Deliberately left out rather than faked with fragile
   :first-child chains.
--------------------------------------------------------------------------- */

/* --- 1. The card ---------------------------------------------------------- */

#bf-quiz {
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 8px 24px rgba(13, 27, 42, .06);
}

/* --- 2. Intro ------------------------------------------------------------- */

.bf-meta-pills li {
    background: #F4F1EE;
    border-color: transparent;
    color: #475569;
}

/* --- 3. Primary call to action -------------------------------------------- */

.calc-btn,
a.pt-cta-btn {
    min-height: 52px;
    border-radius: 16px;
    background: var(--rt-accent-fill, #C24F14);
}

.calc-btn:hover,
a.pt-cta-btn:hover { background: var(--rt-accent-fill-hover, #A63B0E); }

.calc-btn:disabled { background: #F3A896; }

/* The secondary "resume" button that follows a .calc-btn. */
.calc-btn + .calc-btn {
    background: #FFFFFF;
    color: #0D1B2A;
    border: 1.5px solid #E2E4E8;
}

.calc-btn + .calc-btn:hover { background: #FBF9F7; border-color: #B6C0CC; }

/* --- 4. Progress ---------------------------------------------------------- */

.bf-progress { background: #F0EDEA; }
.bf-progress-bar { background: #0D1B2A; }

/* --- 5. The question ------------------------------------------------------ */

.bf-statement { color: #0D1B2A; }

.bf-scale-btn {
    display: flex;
    align-items: center;
    min-height: 56px;
    border-radius: 16px;
    background: #F4F1EE;
    border-color: transparent;
    color: #0D1B2A;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bf-scale-btn:hover {
    background: #EDE7E1;
    border-color: transparent;
}

.bf-scale-btn:focus-visible {
    outline: 3px solid #FBD9CE;
    outline-offset: 2px;
}

.bf-scale-btn.is-selected {
    background: #0D1B2A;
    border-color: #0D1B2A;
    color: #FFFFFF;
    transform: none;
}

/* The selection dot. A pseudo-element, so no renderer emits extra markup. */
.bf-scale-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: .7rem;
    border-radius: 50%;
    border: 2px solid #C9D0D8;
    background: transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.bf-scale-btn.is-selected::before {
    background: #E8472F;
    border-color: #E8472F;
    box-shadow: inset 0 0 0 3px #0D1B2A;
}

/* --- 6. Desktop: lay an exactly-5-point scale out as columns --------------
   :has() counts the options, so a 4-, 7- or 2-option bank is untouched and
   keeps the stacked layout. Browsers without :has() (older in-app webviews)
   also keep the stacked layout — this is an enhancement, never a dependency.
------------------------------------------------------------------------- */

@media (min-width: 720px) {
    .bf-scale:has(> .bf-scale-btn:nth-child(5):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .6rem;
    }

    .bf-scale:has(> .bf-scale-btn:nth-child(5):last-child) .bf-scale-btn {
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
        min-height: 104px;
        padding: .85rem .5rem;
        font-size: .82rem;
        line-height: 1.35;
    }

    .bf-scale:has(> .bf-scale-btn:nth-child(5):last-child) .bf-scale-btn::before {
        margin: 0 0 .5rem;
    }
}

/* --- 7. Results ----------------------------------------------------------- */

.bf-results-title { color: #0D1B2A; }

a.bf-trait-name:any-link {
    color: var(--accent-text, #AE3F10);
    text-decoration-color: #FBD9CE;
}

a.bf-trait-name:any-link:hover { text-decoration-color: #E8472F; }

.bf-trait-bar { background: #F0EDEA; }

/* Flat fills, and they encode RANK, not trait identity. The ten
   trait-specific gradients this replaces implied that each trait was its own
   category; on a ranked profile the only thing worth colour is which one came
   top, and on a dimensional profile (big-five) nothing should be singled out
   at all — which is what the radar is for. */
.bf-trait-fill,
.bf-trait-fill--openness,
.bf-trait-fill--conscientiousness,
.bf-trait-fill--extraversion,
.bf-trait-fill--agreeableness,
.bf-trait-fill--neuroticism,
.as-fill-0, .as-fill-1, .as-fill-2, .as-fill-3, .as-fill-4 {
    background: #0D1B2A;
}

.bf-trait-row--top .bf-trait-fill { background: #E8472F; }

.bf-trait-row--top {
    background: #FFF5F2;
    border-color: #FBD9CE;
    border-radius: 16px;
}

.bf-share-btn {
    background: var(--rt-accent-fill, #C24F14);
    border-color: var(--rt-accent-fill, #C24F14);
}

.bf-share-btn:hover { background: var(--rt-accent-fill-hover, #A63B0E); border-color: var(--rt-accent-fill-hover, #A63B0E); }

.bf-retake:hover { border-color: #B6C0CC; }

/* --- 8. Dichotomy / axis results (16-type, attachment, chronotype) --------- */

.stt-code { color: #0D1B2A; }
.stt-axis-labels .is-side { color: var(--accent-text, #AE3F10); }
.stt-axis-track { background: #F0EDEA; }
.stt-axis-marker { background: #0D1B2A; }

/* --- 9. Profile pages ----------------------------------------------------- */

.instrument-citation { border-left-color: #0D1B2A; }

.pr-hero {
    background: #FBF9F7;
    border-color: #E2E4E8;
}

.pr-hero-eyebrow { color: var(--accent-text, #AE3F10); }

/* DM Serif Display is NOT self-hosted — no face for it exists under
   public/assets/fonts/, so all 38 sheets were falling back to the browser's
   default serif. IBM Plex Serif is the site's actual serif and IS subsetted. */
.pr-hero-title {
    font-family: 'IBM Plex Serif', Georgia, serif;
    color: #0D1B2A;
}

.pr-hero-updated {
    color: #E8472F;
    background: #FFF5F2;
}

a.bf-type-card:hover { border-color: #0D1B2A; }

/* --- 10. Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .bf-progress-bar,
    .bf-scale-btn,
    .bf-scale-btn::before,
    .bf-trait-fill,
    .stt-axis-marker,
    a.bf-type-card {
        transition: none !important;
    }
}

/* --- 11. The result header band ------------------------------------------
   .bf-result-head is created at runtime by
   public/tools/_kernel/personality-result-head.js, which wraps the leading
   run of head elements the renderer appended into #bf-results. No renderer
   emits it, so if that module is absent the results simply render unbanded
   and correct.

   Colours are the RESULT tokens, not ad-hoc hexes: values take
   --rt-result-ink and labels --rt-result-muted on --rt-result-bg, per
   docs/contrast-conventions.md. Nothing in here may use --rt-ink* or a dark
   hex — this is a navy surface.

   ADAPTATION FROM THE ARTBOARD: B drew the band full-bleed to the card
   edges. It is contained here instead. A bleed needs negative margins equal
   to the card's padding, and .tool-card's padding is not a value this
   stylesheet owns or can read — three of the four personality stylesheets
   could change it independently. A contained band survives that; a bled one
   would show a white sliver on any card whose padding drifted.
------------------------------------------------------------------------- */

.bf-result-head {
    /* The colour is the FLOOR, not the decoration: if the texture 404s, is
       blocked, or never decodes, the band is still the solid navy surface the
       contrast figures were computed against. */
    background-color: var(--rt-result-bg, #0D1B2A);

    /* Scrim over texture. The scrim is load-bearing, not styling — see the
       contrast note below and textures/MANIFEST.md. It bottoms out at .68,
       which is the LIGHTEST scrim at which every colour used on this band
       still passes AA over the texture's brightest pixel (rgb 143,172,192):
       full-opacity ink 8.98:1, ink at .70 opacity 5.09:1. Lighten it further
       and the secondary text fails — .62 is the cliff. */
    background-image:
        linear-gradient(105deg,
            rgba(13, 27, 42, .96) 0%,
            rgba(13, 27, 42, .90) 35%,
            rgba(13, 27, 42, .76) 68%,
            rgba(13, 27, 42, .68) 100%),
        url('/assets/textures/navy-bloom-02.webp');
    background-size: cover, cover;
    background-position: center, right center;
    background-repeat: no-repeat, no-repeat;

    border-radius: 20px;
    padding: 1.4rem 1.5rem 1.5rem;
    margin: 0 0 1.6rem;
}

/* Someone who has asked the OS for more contrast is not asking for atmosphere. */
@media (prefers-contrast: more) {
    .bf-result-head { background-image: none; }
}

.bf-result-head > *:last-child { margin-bottom: 0; }

/* The eyebrow — the first sub is a label ("Your attachment style"), not
   prose, so it reads as one. */
.bf-result-head > .bf-results-sub:first-child {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* NOT --rt-result-muted. See the contrast note at the end of this section. */
    color: var(--rt-result-ink, #F6F4EF);
    opacity: .70;
    margin: 0 0 .5rem;
}

/* The result itself. */
.bf-result-head .stt-code,
.bf-result-head .bf-results-title {
    color: var(--rt-result-ink, #F6F4EF);
    margin: 0 0 .45rem;
}

.bf-result-head .stt-code { letter-spacing: .04em; }

.bf-result-head .stt-coinage {
    color: var(--rt-result-ink, #F6F4EF);
    opacity: .92;
    margin: 0 0 .5rem;
}

/* Any remaining prose in the band. */
.bf-result-head .bf-results-sub {
    color: var(--rt-result-ink, #F6F4EF);
    opacity: .70;
    margin: 0;
}

/* The eyebrow rule above is more specific, so restore its own spacing. */
.bf-result-head > .bf-results-sub:first-child { margin: 0 0 .5rem; }

/* ---- WHY THE SECONDARY TEXT IS NOT --rt-result-muted --------------------
   docs/contrast-conventions.md says labels on a result surface take
   --rt-result-muted. That rule was written for a FLAT navy, and this surface
   is no longer flat.

   #7E8B9C is 5.02:1 on plain #0D1B2A — barely over AA — so any lightening of
   the ground breaks it. Measured against the brightest pixel of the texture
   (rgb 143,172,192) it FAILS at every scrim opacity worth using, and only
   recovers at .94, by which point the texture is invisible and there was no
   reason to add it.

   --rt-result-ink at .70 introduces no new colour and, because opacity
   composites with whatever is behind it, gets brighter over the bloom exactly
   where it needs to. At the scrim's lightest point (.68) it measures 5.09:1
   over the brightest bloom and 8.64:1 on plain navy. The title and code keep
   full-opacity ink: 15.82:1 on navy, 8.98:1 over the bloom.
------------------------------------------------------------------------- */

/* Links inside the band cannot use the accent — #E8472F on #0D1B2A is not a
   pass. Ink with an underline carries it instead. */
.bf-result-head a:any-link {
    color: var(--rt-result-ink, #F6F4EF);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 12. The big-five radar ----------------------------------------------
   The radar already shipped on brand — but on the OTHER orange. It draws in
   --rt-brand-orange #E8622A while everything on a tool page, this skin
   included, uses --accent #E8472F. Two oranges eleven hex points apart, in
   one result view, read as a rendering fault rather than a palette.

   ⚠️ The site-wide two-orange split is NOT resolved here and is not mine to
   resolve — --accent (tool-page.css) and --rt-brand-orange (rt-tokens.css)
   are both live and both used deliberately elsewhere. This only makes the
   personality result view internally consistent, by following the token its
   own page already sets.

   CSS beats the SVG presentation attribute, so no markup changes.
------------------------------------------------------------------------- */

.bf-radar-data {
    fill: rgba(232, 71, 47, .18);
    stroke: #E8472F;
}

/* --- 13. Profile pages ---------------------------------------------------
   The per-result pages (/attachment-style-test/secure/, /16-type-.../isfj/).
   Section 9 above converted their hero; these are the body. Leaving them out
   would have been worse than not touching them at all — a navy hero over
   violet links, violet table headers and a violet TOC is a page that looks
   broken rather than a page that looks old.
------------------------------------------------------------------------- */

.pr-content a:any-link {
    color: var(--accent-text, #AE3F10);
    text-decoration-color: #FBD9CE;
}

.pr-content a:any-link:hover { text-decoration-color: #E8472F; }

/* The rule under an h2 — flat accent, matching the no-gradient decision in
   section 7. */
.pr-content h2::before { background: #E8472F; }

.pr-content p > strong:first-child { color: #0D1B2A; }

.pr-content th {
    background: #F4F1EE;
    color: #0D1B2A;
}

.pr-content ul li::marker { color: var(--accent-text, #AE3F10); }

.pr-content > p:last-child { border-top-color: #E2E4E8; }

.pr-citation { border-left-color: #0D1B2A; }

.pr-cta {
    background: #FFF5F2;
    border-color: #FBD9CE;
    border-radius: 16px;
}

.pr-related-list a:any-link { color: #0D1B2A; }
.pr-related-list a:any-link:hover { border-color: #0D1B2A; }

.pr-toc-list a::before { color: var(--accent-text, #AE3F10); }

.pr-toc-list a:hover {
    background: #F4F1EE;
    color: #0D1B2A;
}

.stt-band-pill {
    color: #0D1B2A;
    background: #F4F1EE;
    border-color: #E2E4E8;
}

/* --- 14. Why the anchor rules above carry :any-link ----------------------
   ⚠️ CORRECTED. An earlier version of this note said the Vite bundle's
   `.rt-theme-v2 a { color: inherit }` was (0,2,0) and won on specificity. That
   was WRONG, and the wrong reason would send the next reader hunting the wrong
   thing. It is (0,1,1) — the SAME as `.pr-content a` — and it won on SOURCE
   ORDER, because @stack('head') renders before the bundle. 296 anchor rules
   across 72 stylesheets sat at or below it and were silently suppressed
   site-wide; profile-page prose links had neither colour NOR underline.

   That root cause is now fixed at source: the rule is `:where(.rt-theme-v2) a`,
   which contributes zero specificity, so any rule that names something beats
   it. See resources/css/recatools-design.css.

   :any-link is kept here as belt-and-braces. It takes these to (0,2,1), so they
   hold regardless of stylesheet order — which matters because this file is
   loaded from two different parents (tools/show and layouts/embed) whose head
   ordering is not guaranteed to stay identical.
------------------------------------------------------------------------- */