/* ============================================================
   BURNOUT — concept 19
   Theme: cold ash (#3D4A52) · slow ember amber (#E8A053) ·
   dawn cream (#F4EDD8) · quiet teal (#5A8A8E) · ink (#1F2628)
   Pattern: every input → tailored recovery reading.
   Following the lessons from concept 18 — the hero is always dark,
   so its text uses HARDCODED light values, never theme-flipping vars.
   ============================================================ */

.page-burnout {
    --bo-dawn:       #F4EDD8;
    --bo-dawn-2:     #E8DEC0;
    --bo-amber:      #E8A053;
    --bo-amber-d:    #C9803A;
    --bo-ember:      #F4C572;
    --bo-ash:        #3D4A52;
    --bo-ash-d:      #1F2628;
    --bo-teal:       #5A8A8E;
    --bo-teal-d:     #406366;
    --bo-ink:        #1F2628;
    --bo-mute:       #6E767A;

    --c-gold:    var(--bo-amber);
    --c-bg:      var(--bo-dawn);
    --c-ink:     var(--bo-ink);
    --c-mute:    var(--bo-mute);
    --c-accent:  var(--bo-teal);

    background: var(--bo-dawn);
    color: var(--bo-ink);
}

[data-theme="dark"] .page-burnout,
[data-theme="dark"].page-burnout {
    --bo-dawn:       #0F1416;
    --bo-dawn-2:     #161D20;
    --bo-amber:      #F4B568;
    --bo-amber-d:    #D69549;
    --bo-ember:      #F8CF85;
    --bo-ash:        #B0BAC0;
    --bo-ash-d:      #E4DEC8;
    --bo-teal:       #7FB0B4;
    --bo-teal-d:     #5A8A8E;
    --bo-ink:        #E4DEC8;
    --bo-mute:       #A0A8AC;
    --c-bg:          #0F1416;
    --c-ink:         #E4DEC8;
    --c-mute:        #A0A8AC;
    background: #0F1416;
    color: #E4DEC8;
}

/* shared ---------------------------- */
.bo-section { padding: var(--s-10, 4rem) 0; position: relative; }
.bo-section-head { max-width: 820px; margin: 0 auto var(--s-7, 2.5rem); text-align: center; }
.bo-eyebrow {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bo-amber-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.bo-h2 {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    color: var(--bo-ink);
    margin-bottom: var(--s-4, 1rem);
    font-weight: 600;
}
.bo-h2 em { font-style: italic; color: var(--bo-teal); font-weight: 500; }
.bo-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--bo-mute);
    max-width: 70ch;
    margin: 0 auto;
}
.bo-sub em { color: var(--bo-amber-d); font-style: italic; }
.bo-sub b  { color: var(--bo-ink); }

.bo-field { display: block; margin-bottom: var(--s-3, 0.75rem); }
.bo-field-label {
    display: block;
    font-size: 0.92rem;
    color: var(--bo-ink);
    font-weight: 600;
    margin-bottom: 4px;
}
.bo-input-text,
.bo-textarea,
.bo-field input[type=text],
.bo-field input[type=number],
.bo-field select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(61, 74, 82, 0.3);
    border-radius: 4px;
    background: var(--bo-dawn-2);
    color: var(--bo-ink);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
.bo-textarea { resize: vertical; line-height: 1.55; font-family: var(--f-serif, serif); font-size: 1.05rem; }
.bo-input-text:focus,
.bo-textarea:focus,
.bo-field select:focus { outline: none; border-color: var(--bo-amber); }
[data-theme="dark"] .bo-input-text,
[data-theme="dark"] .bo-textarea,
[data-theme="dark"] .bo-field input,
[data-theme="dark"] .bo-field select { background: #0A0F11; color: #E4DEC8; }
.bo-field select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23E8A053'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 10px 6px;
    padding-right: 2rem;
}

.bo-form { max-width: 720px; margin: 0 auto; }
.bo-form .calc-btn { margin-top: var(--s-3, 0.75rem); }

.bo-result {
    max-width: 740px;
    margin: var(--s-6, 2rem) auto 0;
    padding: var(--s-5, 1.5rem) var(--s-6, 2rem);
    background: var(--bo-dawn-2);
    border-left: 3px solid var(--bo-amber);
    border-radius: 4px;
}
[data-theme="dark"] .bo-result { background: #131A1D; }
.bo-result-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bo-amber-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.bo-result-body { font-family: var(--f-serif, serif); font-size: 1.05rem; line-height: 1.7; color: var(--bo-ink); }
.bo-result-body p { margin-bottom: var(--s-3, 0.75rem); }
.bo-result-body p:last-child { margin-bottom: 0; }
.bo-result-body b { color: var(--bo-teal-d); font-weight: 700; }
.bo-result-body em { color: var(--bo-amber-d); font-style: italic; }
[data-theme="dark"] .bo-result-body b { color: var(--bo-teal); }
[data-theme="dark"] .bo-result-body em { color: var(--bo-amber); }
.bo-result-body ul.bo-list { padding-left: 1.2rem; }
.bo-result-body ul.bo-list li { margin-bottom: var(--s-2, 0.5rem); }
.bo-result-body ul.bo-calendar { padding-left: 1rem; }
.bo-result-body ul.bo-calendar > li { margin-bottom: var(--s-4, 1rem); }
.bo-result-body ul.bo-calendar ul { padding-left: 1.2rem; margin-top: 0.25rem; }
.bo-result-body ul.bo-calendar ul li { font-size: 0.98rem; margin-bottom: 0.2rem; }

/* MBI bars in result */
.bo-bars { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--s-4, 1rem); }
.bo-bar { display: grid; grid-template-columns: 110px 1fr 80px; gap: var(--s-3, 0.75rem); align-items: center; }
.bo-bar-label { font-family: var(--f-mono, monospace); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bo-mute); }
.bo-bar-track { background: rgba(61, 74, 82, 0.15); height: 14px; border-radius: 7px; overflow: hidden; }
[data-theme="dark"] .bo-bar-track { background: rgba(228, 222, 200, 0.1); }
.bo-bar-fill { display: block; height: 100%; border-radius: 7px; transition: width 0.5s ease-out; }
.bo-bar-bad  { background: linear-gradient(90deg, var(--bo-teal) 0%, var(--bo-amber) 50%, #C7493D 100%); }
.bo-bar-good { background: linear-gradient(90deg, #C7493D 0%, var(--bo-amber) 50%, var(--bo-teal) 100%); }
.bo-bar-score { font-family: var(--f-mono, monospace); font-size: 0.92rem; color: var(--bo-ink); text-align: right; font-weight: 600; }

/* letter block */
.bo-result-body .bo-letter {
    background: var(--bo-dawn);
    padding: var(--s-5, 1.5rem) var(--s-6, 2rem);
    border: 1px solid var(--bo-amber);
    border-radius: 6px;
    margin-bottom: var(--s-4, 1rem);
    line-height: 1.7;
    font-family: var(--f-serif, serif);
}
[data-theme="dark"] .bo-result-body .bo-letter { background: #0A0F11; }
.bo-result-body .bo-letter p { margin-bottom: var(--s-3, 0.75rem); }
.bo-result-body .bo-letter p:last-child { margin-bottom: 0; }

/* ====== 1. HERO ====== */
.bo-hero {
    position: relative;
    overflow: hidden;
    background: #1F2628; /* always dark — pin */
    color: #F4EDD8;
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(5rem, 11vw, 8rem);
    isolation: isolate;
    min-height: 560px;
}
.bo-hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bo-hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-sun {
    transform-origin: 600px 600px;
    animation: boSunPulse 6s ease-in-out infinite;
}
@keyframes boSunPulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.04); }
}
.bo-script {
    position: absolute;
    top: 50%;
    right: -2vw;
    transform: translateY(-50%);
    font-family: serif;
    font-size: clamp(10rem, 26vw, 22rem);
    color: rgba(232, 160, 83, 0.08);
    pointer-events: none;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-shadow: 0 0 60px rgba(232, 160, 83, 0.15);
}
@media (max-width: 800px) {
    .bo-script { right: -8vw; font-size: 15rem; opacity: 0.6; }
}
.bo-hero-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.bo-hero .bo-eyebrow { color: #F4C572; }
.bo-hero-title {
    font-family: var(--f-serif, serif);
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: 1.08;
    color: #F4EDD8;
    margin-bottom: var(--s-5, 1.5rem);
    font-weight: 700;
}
.bo-hero-title .bo-hero-line-1 { display: block; }
.bo-hero-title em {
    display: block;
    font-style: italic;
    color: #E8A053;
    font-weight: 500;
}
.bo-hero-title .bo-hero-line-3 { display: block; color: #F4C572; font-style: italic; }
.bo-hero-sub,
.bo-hero-promise {
    font-size: 1.08rem;
    line-height: 1.75;
    color: rgba(244, 237, 216, 0.92);
    max-width: 68ch;
    margin-bottom: var(--s-4, 1rem);
}
.bo-hero-sub em,
.bo-hero-promise em { color: #F4C572; font-style: italic; }
.bo-hero-sub b,
.bo-hero-promise b { color: #FFFFFF; font-weight: 700; }
.bo-hero-cta { display: flex; gap: var(--s-3, 0.75rem); flex-wrap: wrap; margin-top: var(--s-5, 1.5rem); }

/* Hero button overrides — pin to hardcoded values */
.bo-hero .btn-primary {
    background: #E8A053;
    color: #1F2628;
    border-color: #E8A053;
}
.bo-hero .btn-primary:hover {
    background: #F4C572;
    color: #1F2628;
    box-shadow: 0 8px 24px -8px rgba(232, 160, 83, 0.5);
}
.bo-hero .btn-ghost {
    background: transparent;
    color: #F4EDD8;
    border-color: rgba(244, 237, 216, 0.35);
}
.bo-hero .btn-ghost:hover {
    color: #F4C572;
    border-color: #F4C572;
    background: rgba(232, 160, 83, 0.08);
}

/* ====== 2. MBI ====== */
.bo-mbi { background: var(--bo-dawn); }
[data-theme="dark"] .bo-mbi { background: #0F1416; }
.bo-mbi-form { max-width: 820px; margin: 0 auto; }
.bo-mbi-items { list-style: none; counter-reset: mbi; padding: 0; margin: 0; }
.bo-mbi-item {
    counter-increment: mbi;
    padding: var(--s-4, 1rem) var(--s-5, 1.5rem);
    margin-bottom: var(--s-3, 0.75rem);
    background: var(--bo-dawn-2);
    border-radius: 6px;
    border-left: 3px solid var(--bo-teal);
}
[data-theme="dark"] .bo-mbi-item { background: #131A1D; }
.bo-mbi-statement {
    font-family: var(--f-serif, serif);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--bo-ink);
    margin-bottom: var(--s-3, 0.75rem);
}
.bo-mbi-statement::before {
    content: counter(mbi) ". ";
    color: var(--bo-amber-d);
    font-family: var(--f-mono, monospace);
    font-size: 0.85rem;
    font-weight: 700;
    margin-right: 0.3rem;
}
.bo-mbi-scale { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bo-mbi-opt { position: relative; cursor: pointer; flex: 1; min-width: 38px; }
.bo-mbi-opt input { position: absolute; opacity: 0; }
.bo-mbi-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border: 1px solid rgba(61, 74, 82, 0.3);
    border-radius: 4px;
    background: var(--bo-dawn);
    color: var(--bo-mute);
    font-family: var(--f-mono, monospace);
    font-weight: 600;
    transition: all 0.15s;
}
[data-theme="dark"] .bo-mbi-mark { background: #0A0F11; }
.bo-mbi-opt:hover .bo-mbi-mark { border-color: var(--bo-amber); color: var(--bo-amber-d); }
.bo-mbi-opt input:checked + .bo-mbi-mark {
    background: var(--bo-amber);
    border-color: var(--bo-amber);
    color: var(--bo-ash-d);
    font-weight: 700;
}
[data-theme="dark"] .bo-mbi-opt input:checked + .bo-mbi-mark { color: #0F1416; }
.bo-mbi-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
    font-family: var(--f-mono, monospace);
    font-size: 0.72rem;
    color: var(--bo-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ====== 3. STRESS CYCLE / 4. CYNICISM / 5. JOY / 7. YES / 9. BOUNDARY / 10. SLEEP ====== */
.bo-cycle { background: var(--bo-dawn-2); }
.bo-cynicism { background: var(--bo-dawn); }
.bo-joy { background: var(--bo-dawn-2); }
.bo-yes { background: var(--bo-dawn); }
.bo-boundary { background: var(--bo-dawn); }
.bo-sleep { background: var(--bo-dawn); }
[data-theme="dark"] .bo-cycle,
[data-theme="dark"] .bo-joy { background: #161D20; }
[data-theme="dark"] .bo-cynicism,
[data-theme="dark"] .bo-yes,
[data-theme="dark"] .bo-boundary,
[data-theme="dark"] .bo-sleep { background: #0F1416; }

/* ====== 6. 168-HOUR ====== */
.bo-168 { background: var(--bo-dawn-2); }
[data-theme="dark"] .bo-168 { background: #161D20; }
.bo-168-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-4, 1rem);
}
.bo-168-row {
    display: grid;
    grid-template-columns: 1fr 90px auto;
    gap: var(--s-2, 0.5rem);
    align-items: center;
    padding: 0.5rem 0.85rem;
    background: var(--bo-dawn);
    border-radius: 4px;
    border-left: 2px solid var(--bo-teal);
}
[data-theme="dark"] .bo-168-row { background: #0A0F11; }
.bo-168-label { color: var(--bo-ink); font-size: 0.97rem; }
.bo-168-input {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(61, 74, 82, 0.3);
    border-radius: 4px;
    background: var(--bo-dawn-2);
    color: var(--bo-ink);
    font-family: var(--f-mono, monospace);
    text-align: right;
}
[data-theme="dark"] .bo-168-input { background: #131A1D; color: #E4DEC8; }
.bo-168-input:focus { outline: none; border-color: var(--bo-amber); }
.bo-168-unit { font-family: var(--f-mono, monospace); color: var(--bo-mute); font-size: 0.85rem; }

/* ====== 7. RECOVERY CALENDAR ====== */
.bo-recovery { background: var(--bo-dawn-2); }
[data-theme="dark"] .bo-recovery { background: #161D20; }
.bo-rec-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3, 0.75rem); }
@media (max-width: 600px) { .bo-rec-form { grid-template-columns: 1fr; } }
.bo-rec-form .calc-btn { grid-column: 1 / -1; }

/* ====== 11. RESTORATION STREAK ====== */
.bo-restoration { background: var(--bo-dawn-2); }
[data-theme="dark"] .bo-restoration { background: #161D20; }
.bo-restoration-stage {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-6, 2rem);
    align-items: start;
}
@media (max-width: 600px) {
    .bo-restoration-stage { grid-template-columns: 1fr; text-align: center; }
}
.bo-restoration-stat {
    padding: var(--s-5, 1.5rem) var(--s-6, 2rem);
    background: var(--bo-ash-d);
    color: var(--bo-dawn);
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--bo-amber-d);
}
.bo-restoration-num {
    font-family: var(--f-serif, serif);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--bo-amber);
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
}
.bo-restoration-label {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bo-ember);
}
.bo-restoration-form { margin: 0; flex: 1; }

.bo-recent {
    max-width: 760px;
    margin: var(--s-7, 2.5rem) auto 0;
    padding: var(--s-4, 1rem) var(--s-5, 1.5rem);
    background: var(--bo-dawn);
    border-radius: 4px;
}
[data-theme="dark"] .bo-recent { background: #0F1416; }
.bo-recent-h {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bo-amber-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.bo-recent-list { list-style: none; padding: 0; margin: 0; }
.bo-recent-list li {
    padding: 0.5rem 0;
    border-bottom: 1px dotted rgba(61, 74, 82, 0.15);
    display: flex;
    gap: var(--s-3, 0.75rem);
    flex-wrap: wrap;
    align-items: baseline;
    font-size: 0.94rem;
}
.bo-recent-list li:last-child { border-bottom: none; }
.bo-recent-date { font-family: var(--f-mono, monospace); color: var(--bo-amber-d); font-size: 0.84rem; min-width: 48px; }
.bo-recent-what { color: var(--bo-ink); flex: 1; }

/* ====== 12. REFERENCE ====== */
.bo-reference { background: linear-gradient(180deg, var(--bo-dawn) 0%, var(--bo-dawn-2) 100%); }
[data-theme="dark"] .bo-reference { background: linear-gradient(180deg, #0F1416 0%, #161D20 100%); }
.bo-ref-card {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-6, 2rem);
    background: var(--bo-dawn);
    border: 1px solid rgba(61, 74, 82, 0.2);
    border-radius: 6px;
}
[data-theme="dark"] .bo-ref-card { background: #0A0F11; }
.bo-ref-h {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bo-amber-d);
    margin: var(--s-4, 1rem) 0 var(--s-2, 0.5rem);
}
.bo-ref-h:first-child { margin-top: 0; }
.bo-ref-card p {
    font-family: var(--f-serif, serif);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--bo-ink);
    margin-bottom: 0;
}
.bo-ref-card blockquote {
    background: var(--bo-dawn-2);
    border-left: 3px solid var(--bo-teal);
    padding: var(--s-4, 1rem) var(--s-5, 1.5rem);
    margin: var(--s-3, 0.75rem) 0;
    font-family: var(--f-serif, serif);
    font-style: italic;
    color: var(--bo-ink);
    line-height: 1.6;
}
[data-theme="dark"] .bo-ref-card blockquote { background: #131A1D; }
.bo-ref-card blockquote b { color: var(--bo-teal-d); font-style: normal; }
[data-theme="dark"] .bo-ref-card blockquote b { color: var(--bo-teal); }

/* ====== 13. QUOTES ====== */
.bo-quotes { background: var(--bo-dawn); }
.bo-quote-card {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--s-7, 2.5rem) var(--s-6, 2rem);
    background: var(--bo-ash-d);
    color: var(--bo-dawn);
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--bo-amber-d);
}
.bo-quote-text {
    font-family: var(--f-serif, serif);
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    line-height: 1.55;
    color: var(--bo-dawn);
    margin-bottom: var(--s-4, 1rem);
}
.bo-quote-meta { color: rgba(244, 237, 216, 0.7); font-size: 0.95rem; margin-bottom: var(--s-4, 1rem); }
.bo-quote-author { font-weight: 700; color: var(--bo-amber); }
.bo-quote-source { font-style: italic; }
.bo-quote-actions { display: flex; gap: var(--s-3, 0.75rem); justify-content: center; flex-wrap: wrap; }
.bo-quote-actions .btn-ghost { color: var(--bo-dawn); border-color: rgba(244, 237, 216, 0.3); }
.bo-quote-actions .btn-ghost:hover { border-color: var(--bo-amber); color: var(--bo-amber); }
.bo-quote-actions button[aria-pressed="true"] { color: var(--bo-amber); font-weight: 700; }

/* fade-in animations ---------------------------- */
.fade-up { opacity: 0; transform: translateY(12px); animation: boFadeUp 0.6s 0.05s forwards; }
.fade-up.delay-1 { animation-delay: 0.15s; }
.fade-up.delay-2 { animation-delay: 0.3s; }
.fade-up.delay-3 { animation-delay: 0.45s; }
.fade-up.delay-4 { animation-delay: 0.6s; }
@keyframes boFadeUp { to { opacity: 1; transform: translateY(0); } }