@import url('https://fonts.cdnfonts.com/css/fontin');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');

:root {
    color-scheme: dark;
    --main-font: 'Fontin', sans-serif;
}

html {
    --font-scale: 1;
    font-size: calc(clamp(14px, 1.15vw + 10px, 19px) * var(--font-scale));
}

body {
    font-family: var(--main-font);
    background-color: #0b0f19;
    color: #e2e8f0;
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.75rem) clamp(0.75rem, 2.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-container {
    width: 100%;
    max-width: min(1680px, 100%);
    display: flex;
    flex-direction: column;
    gap: clamp(1.15rem, 2.8vw, 2.25rem);
}

.phase-section {
    background: linear-gradient(to bottom right, #111827 0%, #0f172a 100%);
    border: 1px solid #334155;
    box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.5);
    border-radius: clamp(8px, 1vw, 12px);
    padding: clamp(1.2rem, 3vw, 2.45rem);
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 1.04rem;
    line-height: 1.6;
}

.content-container[data-active-tab="ea"] .phase-section.tier-ea { display: flex; }
.content-container[data-active-tab="early"] .phase-section.tier-early { display: flex; }
.content-container[data-active-tab="mid"] .phase-section.tier-mid { display: flex; }
.content-container[data-active-tab="late"] .phase-section.tier-late { display: flex; }
.content-container[data-active-tab="crafting"] .phase-section.tier-crafting { display: flex; }

.phase-section.page-standalone {
    display: flex !important;
    flex-direction: column;
}

.tier-ea { border-top: clamp(3px, 0.4vw, 5px) solid #f97316; }
.tier-early { border-top: clamp(3px, 0.4vw, 5px) solid #3b82f6; }
.tier-mid { border-top: clamp(3px, 0.4vw, 5px) solid #10b981; }
.tier-late { border-top: clamp(3px, 0.4vw, 5px) solid #a855f7; }
.tier-crafting { border-top: clamp(3px, 0.4vw, 5px) solid #ec4899; }

/* TL;DR Crafting and Notes — vertical rhythm (no .req-box under title) + list gutters */
.phase-section.tier-crafting {
    gap: clamp(1.15rem, 2.4vw, 1.7rem);
}

.phase-section.tier-crafting > h2 {
    margin-bottom: 0;
}

.phase-section.tier-crafting > .grid-2col > div > h3:first-child {
    margin-top: 0;
}

.phase-section.tier-crafting ol.list-decimal {
    padding-left: 1.625rem;
    margin-top: 0.35rem;
    font-size: 1rem !important;
    line-height: 1.62;
}

.phase-section.tier-crafting .text-sm {
    font-size: 1rem !important;
    line-height: 1.62;
}

.phase-section.tier-crafting .text-xs {
    font-size: 0.93rem !important;
    line-height: 1.55;
}

.tab-btn {
    background: #1e293b;
    border: 1px solid #334155;
    padding: clamp(0.55rem, 1.2vw, 0.8rem) clamp(0.8rem, 2vw, 1.35rem);
    border-radius: 6px;
    color: #aeb8c7;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-size: clamp(0.8rem, 1.05vw + 0.52rem, 0.95rem);
    letter-spacing: 0.05em;
}

.tab-btn:hover { background: #334155; color: white; }
.tab-btn.active { background: #3b82f6; color: white; border-color: #60a5fa; }

.tab-btn[data-tab="ea"].active { background: #f97316; border-color: #fb923c; }
.tab-btn[data-tab="early"].active { background: #3b82f6; border-color: #60a5fa; }
.tab-btn[data-tab="mid"].active { background: #10b981; border-color: #34d399; }
.tab-btn[data-tab="late"].active { background: #a855f7; border-color: #c084fc; }
.tab-btn[data-tab="crafting"].active { background: #ec4899; border-color: #f472b6; }

.txt-unique { color: #af6025; font-weight: bold; }
.txt-rare { color: #facc15; font-weight: bold; }
.txt-gem { color: #2dd4bf; font-weight: bold; }
.txt-warn { color: #ef4444; font-weight: bold; }
.txt-stat { color: #60a5fa; font-weight: bold; }
.txt-oil { color: #cfb08c; font-weight: bold; }

/* Stat chips & matching inline emphasis (use with .stat-box or standalone <strong>) */
.stat-life { color: #f87171; font-weight: bold; }
.stat-res { color: #93c5fd; font-weight: bold; }
.stat-attr { color: #4ade80; font-weight: bold; }
/* Strength stacking (Shrapnel) — same red family as .txt-str-em, for chips & inline Strength */
.stat-str { color: #f87171; font-weight: bold; }
/* Cluster / passive notables */
.txt-notable { color: #fb923c; font-weight: bold; }
/* Essence names & similar craft callouts */
.txt-essence { color: #fdba74; font-weight: bold; }
/* Gear slot labels (Weapon:, Rings:, …) */
.lbl-slot { color: #fdba74; font-weight: bold; }
/* Buff keywords (e.g. Onslaught) */
.txt-buff { color: #facc15; font-weight: bold; }

/* Shrapnel strength numbers on rings/belt/baseline; same hue as former text-red-400 emphasis */
.txt-str-em { color: #f87171; font-weight: 700; }
/* Red topic labels (life flask row, pierce note, etc.) */
.lbl-red { color: #f87171; font-weight: bold; }

/* Cross-page inline topic labels (replaces Tailwind text-* on repeated <strong> patterns) */
.lbl-callout { color: #60a5fa; font-weight: bold; }
.lbl-wip { color: #fbbf24; font-weight: bold; text-transform: uppercase; letter-spacing: 0.08em; }
.lbl-flask-util { color: #60a5fa; font-weight: bold; }
.lbl-roll-head { color: #facc15; font-weight: bold; }
.lbl-mod-type { color: #93c5fd; font-weight: bold; }
/* Neutral field labels inside lists (Base:, Mandatory:, Body Armour:, …) */
.lbl-subfield { color: #e6eaef; font-weight: 600; }
.lbl-auto { color: #34d399; font-weight: bold; }
.lbl-prep { color: #2dd4bf; font-weight: bold; }
.lbl-scaling { color: #2dd4bf; font-weight: bold; }
.lbl-unique-row { color: #c084fc; font-weight: bold; }
.lbl-nice { color: #34d399; font-weight: bold; }
.lbl-mandatory { color: #fde68a; font-weight: bold; }
.lbl-note-soft { color: #fde68a; font-weight: bold; }
.lbl-budget { color: #fbbf24; font-weight: bold; }
.lbl-catalyst-topic { color: #93c5fd; font-weight: bold; }
.lbl-catalyst-name { color: #facc15; font-weight: bold; }
.lbl-shotgun { color: #fb923c; font-weight: bold; }
.lbl-transition { color: #fbbf24; font-weight: bold; }
.lbl-req-emerald { color: #34d399; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.lbl-req-blue { color: #60a5fa; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.lbl-req-red { color: #f87171; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.lbl-req-purple { color: #c084fc; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.lbl-eldritch-eater { color: #60a5fa; font-weight: bold; }
.lbl-eldritch-exarch { color: #f87171; font-weight: bold; }
.lbl-choice { color: #facc15; font-weight: bold; }
.lbl-tier-best { color: #6ee7b7; font-weight: bold; }
.lbl-tier-good { color: #4ade80; font-weight: bold; }
.lbl-tier-worst { color: #94a3b8; font-weight: bold; }
.lbl-warn-topic { color: #fcd34d; font-weight: bold; }
.lbl-jewel-swap { color: #d8b4fe; font-weight: bold; }
.lbl-pink-topic { color: #f472b6; font-weight: bold; }
/* Currency / high-value slam callouts */
.txt-currency-gold { color: #fde047; font-weight: bold; }

.item-icon { width: clamp(26px, 2.6vw + 12px, 38px); height: clamp(26px, 2.6vw + 12px, 38px); object-fit: contain; margin-right: clamp(6px, 1vw, 11px); flex-shrink: 0; filter: drop-shadow(0 0 2px rgba(255,255,255,0.2)); }
.oil-icon { width: clamp(14px, 1.5vw + 6px, 18px); height: clamp(14px, 1.5vw + 6px, 18px); object-fit: contain; vertical-align: middle; }

.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.45rem, 3.2vw, 2.75rem); }
@media (max-width: 1024px) { .grid-2col { grid-template-columns: 1fr; } }

ul.dash-list { padding-left: 0; margin: 0; list-style-type: none; font-size: 1.05rem; line-height: 1.58; }
ul.dash-list > li { display: flex; align-items: flex-start; margin-bottom: 0.95rem; }
ul.dash-list > li > span.bullet { color: #8b95a8; font-weight: bold; margin-right: 0.6rem; flex-shrink: 0; }

ul.inner-list { padding-left: 2rem; margin-top: 0.55rem; list-style-type: none; }
ul.inner-list > li { position: relative; margin-bottom: 0.5rem; color: #c5ccd6; font-size: 0.98rem; line-height: 1.52; }
ul.inner-list > li.arrow-bullet::before { content: "↳"; position: absolute; left: -1rem; color: #6b7b90; }

h2 { font-size: 1.95rem; font-weight: bold; margin: 0 0 1.15rem 0; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #374151; padding-bottom: 0.45rem; }
h3 { font-size: 1.32rem; font-weight: bold; color: #e2e8f0; margin: 0.95rem 0; display: flex; align-items: center; gap: 0.5rem; }

.req-box { background-color: rgba(0,0,0,0.3); border-left: clamp(3px, 0.4vw, 5px) solid; padding: clamp(0.7rem, 1.7vw, 1.25rem) clamp(0.95rem, 2.1vw, 1.7rem); border-radius: 4px; margin-bottom: 1.45rem; font-size: 1.05rem; line-height: 1.55; }
.stat-box { display: inline-block; background-color: rgba(0,0,0,0.4); border: 1px solid #475569; padding: clamp(0.2rem, 0.5vw, 0.3rem) clamp(0.4rem, 1vw, 0.6rem); border-radius: 4px; font-weight: bold; margin-right: 0.5rem; margin-bottom: 0.5rem;}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(55, 65, 81, 0.8);
}

.site-nav-link {
    display: inline-block;
    padding: clamp(0.5rem, 1vw, 0.65rem) clamp(0.7rem, 1.5vw, 1.05rem);
    border-radius: 6px;
    font-weight: bold;
    font-size: clamp(0.7rem, 0.9vw + 0.52rem, 0.88rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid #334155;
    background: #1e293b;
    color: #aeb8c7;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-align: center;
}

.site-nav-link:hover {
    background: #334155;
    color: #fff;
}

.site-nav-link.active {
    background: #6366f1;
    color: #fff;
    border-color: #818cf8;
    pointer-events: none;
}

/* Shrapnel page: tabs (Starting / Mid / End / TL;DR Crafting and Notes) */
.content-container[data-shrapnel-tab] .shrapnel-stage {
    display: none;
    flex-direction: column;
}

.content-container[data-shrapnel-tab="start"] .shrapnel-stage.shrapnel-start,
.content-container[data-shrapnel-tab="mid"] .shrapnel-stage.shrapnel-mid,
.content-container[data-shrapnel-tab="end"] .shrapnel-stage.shrapnel-end,
.content-container[data-shrapnel-tab="crafting"] .shrapnel-stage.shrapnel-crafting {
    display: flex;
}

.tab-btn[data-shrapnel="start"].active {
    background: #f97316;
    border-color: #fb923c;
    color: #fff;
}

.tab-btn[data-shrapnel="mid"].active {
    background: #10b981;
    border-color: #34d399;
    color: #fff;
}

.tab-btn[data-shrapnel="end"].active {
    background: #a855f7;
    border-color: #c084fc;
    color: #fff;
}

.tab-btn[data-shrapnel="crafting"].active {
    background: #ec4899;
    border-color: #f472b6;
    color: #fff;
}

/* Timeless Jewel Guide: build tabs (Siege / Shrapnel) */
.content-container[data-timeless-tab] .timeless-panel {
    display: none;
    flex-direction: column;
    gap: clamp(1rem, 2.2vw, 1.5rem);
}

.content-container[data-timeless-tab="siege"] .timeless-panel.timeless-siege,
.content-container[data-timeless-tab="shrapnel"] .timeless-panel.timeless-shrapnel {
    display: flex;
}

.tab-btn[data-timeless="siege"].active {
    background: #10b981;
    border-color: #34d399;
    color: #fff;
}

.tab-btn[data-timeless="shrapnel"].active {
    background: #f97316;
    border-color: #fb923c;
    color: #fff;
}

/* Method sub-tabs + full-width method stage */
.timeless-method-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.tab-btn.timeless-method-btn {
    padding: clamp(0.45rem, 1vw, 0.65rem) clamp(0.75rem, 1.8vw, 1.1rem);
    font-size: clamp(0.72rem, 0.85vw + 0.55rem, 0.82rem);
}

.content-container[data-timeless-tab="siege"] .timeless-method-btn.active {
    background: #059669;
    border-color: #34d399;
    color: #fff;
}

.content-container[data-timeless-tab="shrapnel"] .timeless-method-btn.active {
    background: #ea580c;
    border-color: #fb923c;
    color: #fff;
}

.content-container[data-timeless-tab] .timeless-method-panel {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.content-container[data-timeless-tab="siege"][data-timeless-method="pob"] .timeless-method-panel.timeless-siege.timeless-pob,
.content-container[data-timeless-tab="siege"][data-timeless-method="calc"] .timeless-method-panel.timeless-siege.timeless-calc,
.content-container[data-timeless-tab="shrapnel"][data-timeless-method="pob"] .timeless-method-panel.timeless-shrapnel.timeless-pob,
.content-container[data-timeless-tab="shrapnel"][data-timeless-method="calc"] .timeless-method-panel.timeless-shrapnel.timeless-calc {
    display: flex;
}

.timeless-method-stage {
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.timeless-method-layout {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    width: 100%;
}

@media (min-width: 1280px) {
    .timeless-method-layout.timeless-method-layout-split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr);
        align-items: start;
    }
}

.timeless-steps-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(71, 85, 105, 0.65);
    border-radius: 10px;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.timeless-media-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    min-height: 0;
}

figure.timeless-media-slot {
    margin: 0;
    width: 100%;
    min-height: clamp(180px, 28vw, 320px);
    border: 2px dashed rgba(71, 85, 105, 0.85);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 2vw, 1.25rem);
    box-sizing: border-box;
}

figure.timeless-media-slot img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.timeless-media-slot .timeless-media-placeholder {
    text-align: center;
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

figure.timeless-media-slot figcaption {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: #aeb8c7;
    text-align: center;
    width: 100%;
}

figure.timeless-step-shot {
    margin: 0.75rem 0 0.35rem;
    padding: 0.75rem;
    border: 1px dashed rgba(71, 85, 105, 0.85);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.35);
}

figure.timeless-step-shot img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
    cursor: zoom-in;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

figure.timeless-step-shot img:hover {
    opacity: 0.92;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.45);
}

figure.timeless-step-shot img:focus-visible {
    outline: 2px solid rgba(52, 211, 153, 0.8);
    outline-offset: 3px;
}

dialog.timeless-lightbox {
    margin: auto;
    padding: 0;
    border: 1px solid rgba(71, 85, 105, 0.9);
    border-radius: 12px;
    background: #0f172a;
    color: #e6eaef;
    max-width: 98vw;
    width: max-content;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}

dialog.timeless-lightbox::backdrop {
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(4px);
}

.timeless-lightbox-inner {
    position: relative;
    padding: 0.65rem 0.65rem 0.5rem;
}

.timeless-lightbox-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    border: 1px solid rgba(100, 116, 139, 0.8);
    background: rgba(15, 23, 42, 0.92);
    color: #e6eaef;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.timeless-lightbox-close:hover {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(52, 211, 153, 0.65);
}

.timeless-lightbox-img {
    display: block;
    max-width: 96vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    object-fit: contain;
}

.timeless-lightbox-caption {
    margin: 0.65rem 0 0;
    padding: 0 0.25rem 0.25rem;
    font-size: 0.85rem;
    color: #aeb8c7;
    text-align: center;
    max-width: 96vw;
}

.timeless-lightbox-caption:empty {
    display: none;
}

figure.timeless-step-shot figcaption {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #aeb8c7;
    text-align: center;
}

/* Main site title only (beats Tailwind text-* on the h1) */
.site-compendium-title {
    color: #C8A44D !important;
}

/* Readability: lift Tailwind gray copy toward white (CDN utilities load before site.css) */
.content-container .text-gray-600 { color: #9caab8 !important; }
.content-container .text-gray-500 { color: #b6beca !important; }
.content-container .text-gray-400 { color: #d0d6df !important; }
.content-container .text-gray-300 { color: #e6eaef !important; }
.content-container .text-gray-200 { color: #f0f2f6 !important; }

@media print {
    .phase-section { display: flex !important; page-break-inside: avoid; }
    .tab-nav { display: none !important; }
    .site-nav { display: none !important; }
    .content-container[data-shrapnel-tab] .shrapnel-stage { display: flex !important; }
    @page { size: letter landscape; margin: 0.3in; }
}