/* BD Dungeon Interior Design Token Layer — Phase 233 painterly substrate.
   Additive over the existing --fp-pp-* / --fp-lb-* arcade tokens.
   Scoped to :root so interior components can reference them without a wrapper class. */
:root {
    --fp-int-void:        oklch(0.11 0.015 270);
    --fp-int-void-2:      oklch(0.15 0.018 270);
    --fp-int-panel:       oklch(0.17 0.020 270);
    --fp-int-panel-2:     oklch(0.20 0.022 270);
    --fp-int-line:        oklch(0.28 0.025 270);
    --fp-int-line-soft:   oklch(0.22 0.02 270);
    --fp-int-bone:        oklch(0.93 0.015 85);
    --fp-int-parchment:   oklch(0.82 0.025 80);
    --fp-int-mute:        oklch(0.55 0.020 270);
    --fp-int-brass:       oklch(0.74 0.13 78);
    --fp-int-brass-dim:   oklch(0.60 0.09 78);
    --fp-int-cyan:        oklch(0.70 0.15 210);
    --fp-int-magenta:     oklch(0.65 0.20 350);
    --fp-int-row-hover:   oklch(0.20 0.025 270 / 0.6);
    --fp-int-row-you:     linear-gradient(90deg, oklch(0.25 0.05 75 / 0.45), transparent 70%);
    --fp-int-podium-gold: var(--fp-int-brass);
    --fp-int-podium-silv: oklch(0.78 0.01 270);
    --fp-int-podium-bron: oklch(0.62 0.10 45);
    --fp-int-f-display:   'Cinzel', Georgia, serif;
    --fp-int-f-body:      'Spectral', Georgia, serif;
    --fp-int-f-mono:      'JetBrains Mono', monospace;
    --fp-int-r-card:      4px;
    --fp-int-r-portrait:  6px;
    --fp-int-r-thumb:     5px;
}

/* Shared interior utility — mono section label with trailing hairline.
   Slice 3 layout cleanup lifted the font from 0.6rem mute to 0.8rem bone
   so the eyebrows are scannable; the trailing hairline still gives the
   section header its band feel. */
.fp-int-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--fp-int-f-mono);
    font-size: 0.8rem;
    color: var(--fp-int-bone);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    white-space: nowrap;
}
.fp-int-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fp-int-line);
    min-width: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Slice 3 layout system — additive, minimal, token-only.

   The Dungeon should use the full available screen width through
   intentional multi-column composition (Lee's hard layout rule). These
   utilities give every Dungeon page a consistent vocabulary for that:

     .fp-int-band      — horizontal slice of the page (a row of cards)
     .fp-int-band--2   — 2-up
     .fp-int-band--3   — 3-up
     .fp-int-band--4   — 4-up
     .fp-int-band--2-1 — two-third main + one-third rail
     .fp-int-card      — padded panel surface (use inside a band slot)
     .fp-int-rail      — sticky narrow column for context content
     .fp-int-readable  — caps inner text width so feed/table rows stop
                         stretching to unreadable line lengths even when
                         the surrounding band is full-width

   Each page mixes these as needed. The utilities do NOT replace the
   existing scoped .fp-pp-* / .fp-dd-* / .fp-lb-* CSS; they sit beside
   it and are used selectively where the layout cleanup applies them.
   See docs/reports/dungeon-crawl-investigation/layout-grid-recommendations.md
   for the full reasoning.
   ───────────────────────────────────────────────────────────────────── */

:root {
    --fp-int-band-gap: 1.25rem;
    --fp-int-card-pad: 1.1rem;
    --fp-int-rail-width: clamp(280px, 24vw, 360px);
    --fp-int-max-readable: 72ch;
}

.fp-int-band {
    display: grid;
    gap: var(--fp-int-band-gap);
    margin-bottom: var(--fp-int-band-gap);
    align-items: stretch;
}

.fp-int-band--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-int-band--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-int-band--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-int-band--2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* Reflow rules — drop column count gracefully as viewport narrows. */
@media (max-width: 1200px) {
    .fp-int-band--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .fp-int-band--2,
    .fp-int-band--3,
    .fp-int-band--2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .fp-int-band--4 { grid-template-columns: minmax(0, 1fr); }
}

.fp-int-card {
    background: linear-gradient(160deg, var(--fp-int-panel-2), var(--fp-int-panel));
    border: 1px solid var(--fp-int-line);
    border-radius: var(--fp-int-r-card);
    padding: var(--fp-int-card-pad);
    color: var(--fp-int-bone);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    min-width: 0;
}

.fp-int-rail {
    position: sticky;
    top: 1.5rem;
    min-width: 0;
}

/* Read-constrained inner lane — keep prose / feed rows / table rows
   inside a readable max line length even when the parent card is wide.
   Marker class consumers add to the inner element, not the card itself. */
.fp-int-readable {
    max-width: var(--fp-int-max-readable);
    margin-left: auto;
    margin-right: auto;
}