/* RECATOOLS — Personality cluster shared stylesheet (Batch 8B).
   One canonical file copied to every personality tool dir (cluster
   convention). Covers: quiz UI (bf-*), 16-type axis bars (stt-*),
   ranked-profile additions (as-*), server-rendered result pages (pr-*),
   primary buttons, and hub-page helpers. Mobile-first (375px). */

/* ── Primary action buttons ── */
.calc-btn {
    display: inline-block; width: 100%; margin: .25rem 0 0; padding: .9rem 1.25rem;
    background: #E8472F; color: #fff; border: none; border-radius: 10px;
    font-size: 1.02rem; font-weight: 700; cursor: pointer; font-family: inherit;
    text-align: center; transition: background .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.calc-btn:hover { background: #c8391f; }
.calc-btn:active { transform: scale(.99); }
.calc-btn:disabled { background: #f3a896; cursor: progress; }
.calc-btn + .calc-btn { margin-top: .6rem; background: #fff; color: #b91c1c; border: 1.5px solid #fca5a5; }
.calc-btn + .calc-btn:hover { background: #fef2f2; }

a.pt-cta-btn {
    display: inline-block; padding: .8rem 1.4rem; margin-top: .35rem;
    background: #E8472F; color: #fff !important; border-radius: 10px;
    font-size: .95rem; font-weight: 700; text-decoration: none;
}
a.pt-cta-btn:hover { background: #c8391f; }

/* ── Quiz intro ── */
.bf-intro-lede { font-size: .95rem; color: var(--t2, #475569); margin: 0 0 1rem; line-height: 1.6; }
.bf-meta-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.bf-meta-pills li {
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    background: var(--rt-bg-inset, #f1f5f9); color: var(--t2, #475569);
    border-radius: 999px; padding: .3rem .65rem;
}

/* ── Quiz stage ── */
.bf-progress { height: 6px; border-radius: 999px; overflow: hidden; background: var(--rt-bg-inset, #eef2f7); margin-bottom: .5rem; }
.bf-progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6d28d9, #8b5cf6); transition: width .25s ease; }
.bf-count { font-size: .78rem; font-weight: 600; color: var(--t2, #64748b); margin: 0 0 1rem; }
.bf-prompt { font-size: .8rem; color: var(--t2, #64748b); margin: 0 0 .35rem; }
.bf-statement { font-size: 1.25rem; line-height: 1.45; font-weight: 700; color: var(--t1, #0f172a); margin: 0 0 1.25rem; min-height: 3.6em; }
.bf-scale { display: grid; gap: .5rem; }
.bf-scale-btn {
    display: block; width: 100%; text-align: left; font-size: .92rem; font-weight: 600;
    color: var(--t1, #1e293b); background: #fff; border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 10px; padding: .8rem 1rem; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.bf-scale-btn:hover { border-color: #8b5cf6; }
.bf-scale-btn:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.bf-scale-btn.is-selected { border-color: #6d28d9; background: #f5f3ff; color: #4c1d95; transform: scale(.99); }
.bf-nav { margin-top: 1.1rem; min-height: 1.5rem; }
.bf-back { background: none; border: 0; cursor: pointer; padding: .25rem 0; font-size: .85rem; font-weight: 600; color: var(--t2, #64748b); }
.bf-back:hover { color: var(--t1, #0f172a); }
.bf-error { color: #b91c1c; font-size: .9rem; margin-top: .75rem; }

/* ── Quiz end state (shared) ── */
#bf-results:focus { outline: none; }
.bf-results-title { font-size: 1.3rem; margin: 0 0 .3rem; color: var(--t1, #0f172a); }
.bf-results-sub { font-size: .82rem; color: var(--t2, #64748b); margin: 0 0 1.4rem; line-height: 1.55; }
.bf-trait-row { margin-bottom: 1.05rem; }
.bf-trait-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.bf-trait-name { font-weight: 700; font-size: .95rem; color: var(--t1, #0f172a); text-decoration: none; }
a.bf-trait-name { color: #6d28d9; text-decoration: underline; text-decoration-color: #ddd6fe; text-underline-offset: 3px; }
a.bf-trait-name:hover { text-decoration-color: #6d28d9; }
.bf-trait-score { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; color: var(--t2, #475569); }
.bf-trait-bar { height: 12px; border-radius: 999px; overflow: hidden; background: var(--rt-bg-inset, #eef2f7); }
.bf-trait-fill { height: 100%; border-radius: inherit; transition: width .7s cubic-bezier(.22, 1, .36, 1); }
.bf-trait-fill--openness          { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.bf-trait-fill--conscientiousness { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.bf-trait-fill--extraversion      { background: linear-gradient(90deg, #ea580c, #fb923c); }
.bf-trait-fill--agreeableness     { background: linear-gradient(90deg, #16a34a, #4ade80); }
.bf-trait-fill--neuroticism       { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.as-fill-0 { background: linear-gradient(90deg, #be185d, #f472b6); }
.as-fill-1 { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.as-fill-2 { background: linear-gradient(90deg, #0d9488, #2dd4bf); }
.as-fill-3 { background: linear-gradient(90deg, #ea580c, #fb923c); }
.as-fill-4 { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.bf-trait-row--top .bf-trait-name { font-size: 1.05rem; }
.bf-trait-row--top { background: #faf7ff; border: 1px solid #e9e2f8; border-radius: 12px; padding: .65rem .75rem .8rem; }
.bf-results-hint { font-size: .85rem; color: var(--t2, #64748b); margin: 1.2rem 0 1rem; line-height: 1.55; }
.bf-share-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.bf-share-btn, .bf-retake { font-size: .88rem; font-weight: 700; border-radius: 999px; padding: .6rem 1.15rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bf-share-btn { background: #6d28d9; color: #fff; border: 1.5px solid #6d28d9; }
.bf-share-btn:hover { background: #5b21b6; }
.bf-retake { background: #fff; color: var(--t1, #1e293b); border: 1.5px solid var(--border, #e2e8f0); }
.bf-retake:hover { border-color: #94a3b8; }

/* ── 16-type axis end state ── */
.stt-code { font-size: 3rem; font-weight: 800; letter-spacing: .12em; color: #4C1D95; margin: .2rem 0 .1rem; font-variant-numeric: tabular-nums; }
.stt-coinage { font-size: 1.05rem; font-weight: 700; color: var(--t2, #475569); margin: 0 0 1.2rem; }
.stt-axis-row { margin-bottom: 1.05rem; }
.stt-axis-labels { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: var(--t2, #64748b); margin-bottom: .3rem; }
.stt-axis-labels .is-side { color: #4C1D95; }
.stt-axis-track { position: relative; height: 12px; border-radius: 999px; background: var(--rt-bg-inset, #eef2f7); }
.stt-axis-marker { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #6d28d9; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(15,23,42,.35); transform: translate(-50%, -50%); transition: left .7s cubic-bezier(.22,1,.36,1); }
.stt-axis-note { font-size: .72rem; color: var(--t2, #94a3b8); margin-top: .25rem; }
.stt-border-note { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: .6rem .8rem; font-size: .8rem; color: #92400e; margin: .8rem 0 0; line-height: 1.5; }

/* ── Type/style overview grid + hub indexes ── */
.type-overview-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1rem; }
.bf-type-card { display: block; background: #fff; border: 1px solid var(--border, #e8e8e8); border-radius: 14px; padding: 1rem; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
a.bf-type-card:hover { border-color: #8b5cf6; transform: translateY(-2px); }
.bf-type-card--soon { opacity: .62; }
.bf-type-glyph { width: 38px; height: 38px; margin-bottom: .55rem; }
.bf-type-card h3 { font-size: .98rem; margin: 0 0 .25rem; color: var(--t1, #0f172a); }
.bf-type-card p { font-size: .8rem; line-height: 1.5; color: var(--t2, #64748b); margin: 0; }
.bf-type-soon-pill { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 999px; padding: .15rem .5rem; margin-top: .5rem; }

/* ── Citation card ── */
.instrument-citation { background: var(--rt-bg-inset, #f8fafc); border: 1px solid var(--border, #e8e8e8); border-left: 4px solid #6d28d9; border-radius: 10px; padding: .85rem 1rem; margin: 1.1rem 0; font-size: .82rem; line-height: 1.6; color: var(--t2, #475569); }

/* ── Server-rendered result pages (pr-*) — reading experience ── */
.pr-hero { text-align: left; background: linear-gradient(135deg, #faf7ff 0%, #fff 55%); border: 1px solid #e9e2f8; }
.pr-hero-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #6d28d9; margin: 0 0 .45rem; }
.pr-hero-title { font-size: 1.7rem; line-height: 1.22; margin: 0 0 .5rem; color: var(--t1, #0f172a); font-family: 'DM Serif Display', serif; }
.pr-hero-updated { display: inline-block; font-size: .72rem; font-weight: 600; color: #6d28d9; background: #f5f3ff; border-radius: 999px; padding: .25rem .7rem; margin: 0; }

/* On this page — TOC */
.pr-toc { background: #fff; border: 1px solid var(--border, #e8e8e8); border-radius: 14px; padding: 1.05rem 1.25rem; margin: 1rem 0 1.4rem; }
.pr-toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t2, #64748b); margin: 0 0 .55rem; }
.pr-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: prtoc; }
.pr-toc-list li { counter-increment: prtoc; margin: 0; }
.pr-toc-list li + li { margin-top: .15rem; }
.pr-toc-list a {
    display: flex; align-items: baseline; gap: .6rem; padding: .34rem .5rem; border-radius: 8px;
    font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--t1, #1e293b); text-decoration: none;
}
.pr-toc-list a::before { content: counter(prtoc, decimal-leading-zero); font-size: .72rem; font-weight: 700; color: #a78bfa; font-variant-numeric: tabular-nums; }
.pr-toc-list a:hover { background: #f5f3ff; color: #4c1d95; }

/* Article typography */
.pr-content { font-size: 1.04rem; line-height: 1.85; color: #2a2e37; }
.pr-content > p:first-of-type { font-size: 1.13rem; line-height: 1.8; color: #404656; }
.pr-content p { margin: 0 0 1.15rem; }
.pr-content a { color: #6d28d9; text-decoration: underline; text-decoration-color: #ddd6fe; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pr-content a:hover { text-decoration-color: #6d28d9; }
.pr-content h2 {
    font-size: 1.42rem; line-height: 1.3; margin: 2.6rem 0 .9rem; padding-top: 1.4rem; color: var(--t1, #0f172a);
    font-family: 'DM Serif Display', serif; font-weight: 400; border-top: 1px solid #efeaf9;
    scroll-margin-top: 90px;
}
.pr-content h2::before { content: ''; display: block; width: 44px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #6d28d9, #c4b5fd); margin-bottom: .8rem; }
.pr-content h2:first-child { margin-top: .4rem; border-top: 0; padding-top: 0; }
.pr-content h3 { font-size: 1.12rem; margin: 1.7rem 0 .6rem; color: var(--t1, #0f172a); scroll-margin-top: 90px; }

/* The **Bold lead.** paragraph pattern (strengths / traps / figures) */
.pr-content p > strong:first-child { color: #4c1d95; }

/* Callouts (blockquotes: speculative lines, honesty notes) */
.pr-content blockquote {
    background: #fffbeb; border: 1px solid #fde68a; border-left: 5px solid #f59e0b; border-radius: 0 12px 12px 0;
    padding: .95rem 1.2rem; margin: 0 0 1.3rem; font-size: .92rem; line-height: 1.7; color: #713f12;
}
.pr-content blockquote p { margin: 0; }
.pr-content blockquote p + p { margin-top: .6rem; }

/* Lists — bullets and the numbered growth-move pattern */
.pr-content ul { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.pr-content ul li { margin: 0 0 .5rem; padding-left: .25rem; }
.pr-content ul li::marker { color: #8b5cf6; }
.pr-content ol { list-style: none; counter-reset: prsteps; margin: 0 0 1.3rem; padding: 0; }
.pr-content ol li {
    counter-increment: prsteps; position: relative; margin: 0 0 .85rem; padding: .85rem 1.05rem .85rem 3.3rem;
    background: #fff; border: 1px solid var(--border, #e8e8e8); border-radius: 12px; line-height: 1.7;
}
.pr-content ol li::before {
    content: counter(prsteps); position: absolute; left: .95rem; top: .95rem;
    width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #f5f3ff; border: 1.5px solid #ddd6fe;
    color: #6d28d9; font-size: .85rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* Tables (matrix/profile pages that use them) */
.pr-content table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 0 0 1.3rem; display: block; overflow-x: auto; }
.pr-content th, .pr-content td { border: 1px solid var(--border, #e5e7eb); padding: .6rem .75rem; text-align: left; vertical-align: top; line-height: 1.6; }
.pr-content th { background: #faf7ff; font-weight: 700; color: #4c1d95; }

/* The closing italic instrument line */
.pr-content > p:last-child { margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px dashed #ddd6fe; font-size: .82rem; line-height: 1.65; color: var(--t2, #6b7280); }

/* Page chrome below the article */
.pr-citation h3, .pr-cta h3, .pr-related h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--t1, #0f172a); }
.pr-citation { background: var(--rt-bg-inset, #f8fafc); border: 1px solid var(--border, #e8e8e8); border-left: 4px solid #6d28d9; border-radius: 10px; padding: 1rem 1.1rem; margin: 1.4rem 0; font-size: .85rem; line-height: 1.6; color: var(--t2, #475569); }
.pr-cta { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 14px; padding: 1.2rem 1.3rem; margin: 1.4rem 0; }
.pr-cta p { font-size: .88rem; line-height: 1.6; color: var(--t2, #4b5563); margin: 0 0 .9rem; }
.pr-cta-button { display: inline-block; padding: .8rem 1.4rem; background: #E8472F; color: #fff !important; border-radius: 10px; font-size: .95rem; font-weight: 700; text-decoration: none; }
.pr-cta-button:hover { background: #c8391f; }
.pr-related { margin: 1.4rem 0; }
.pr-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-related-list a { display: inline-block; background: #fff; border: 1.5px solid var(--border, #e2e8f0); border-radius: 999px; padding: .45rem .95rem; font-size: .85rem; font-weight: 600; color: #6d28d9; text-decoration: none; }
.pr-related-list a:hover { border-color: #8b5cf6; }

@media (min-width: 640px) {
    .bf-scale { grid-template-columns: repeat(5, 1fr); }
    .bf-scale-btn { text-align: center; font-size: .8rem; padding: .7rem .5rem; }
    .type-overview-grid { grid-template-columns: repeat(2, 1fr); }
    .calc-btn { width: auto; min-width: 260px; }
    .pr-hero-title { font-size: 2.1rem; }
    .pr-toc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.1rem; }
    .pr-content h2 { font-size: 1.55rem; }
}
@media (min-width: 960px) {
    .type-overview-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .bf-progress-bar, .bf-trait-fill, .bf-scale-btn, .bf-type-card, .stt-axis-marker { transition: none; }
}