/* Your Glorious Future CYOA: the induction packet.
   One continuous aged-paper document (the .container sheet) lying on a dark
   desk (the body). Modeled on the Imperial Infantryman's Uplifting Primer:
   two-ink letterpress (black ink + red stamp ink on paper), Didone display
   caps, boxed official-use panels, plate-mounted images with captions,
   running section headers with form numbers, foot litanies, rubber stamps.
   Gold exists only on the desk chrome (footer) and inside the paintings.

   Deliberate motif note: uppercase + letterspacing is confined to the
   document furniture: section titles, eyebrows/captions/labels, stamps, and
   the rebirth trigger. Body text and group titles stay regular case.

   Contrast floors (WCAG, computed): ink/paper 11.85, ink-soft/paper 6.72,
   stamp/paper 6.59, paper-bright/stamp 7.58, paper-bright/stamp-block 12.20,
   ink/flimsy 12.01, stamp/flimsy 6.68, desk-muted/desk 7.05. Keep any new
   text/bg pair at 4.5:1 or better; no large-text exemptions used. */

:root {
    --desk: #0f0c09;
    --desk-raised: #171310;
    --desk-border: #3b3222;
    --desk-muted: #a89a7e;
    --desk-link: #d4ad5e;
    --paper: #e3d8ba;
    --paper-bright: #f0e9d6;
    --paper-shade: #d6c9a4;
    --paper-select: #dbcfa9;
    --flimsy: #ecd6c6;
    --ink: #241c11;
    --ink-soft: #4f4430;
    --stamp: #8c1710;
    --stamp-deep: #7a130d;
    --stamp-block: #4f0d09;
    --font-display: 'Bodoni MT', 'Didot', Georgia, 'Times New Roman', serif;
    --font-body: Georgia, 'Times New Roman', serif;
    --font-mono: 'Courier New', Courier, monospace;
    --font-stamp: 'Haettenschweiler', Impact, 'Arial Narrow', sans-serif;
    --font-script: 'Segoe Script', 'Bradley Hand', cursive;
}

/* The desk: near-black with a faint grain (tiled inline SVG, not a flat
   color and not a gradient). Only site chrome lives out here. */
body {
    background-color: var(--desk);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190'><g fill='%23c9b98a' fill-opacity='0.05'><circle cx='11' cy='27' r='0.9'/><circle cx='43' cy='9' r='0.6'/><circle cx='71' cy='38' r='1.1'/><circle cx='102' cy='14' r='0.7'/><circle cx='137' cy='31' r='0.9'/><circle cx='168' cy='7' r='0.6'/><circle cx='23' cy='66' r='0.7'/><circle cx='58' cy='81' r='1'/><circle cx='94' cy='59' r='0.6'/><circle cx='126' cy='84' r='0.8'/><circle cx='161' cy='63' r='1.1'/><circle cx='183' cy='96' r='0.6'/><circle cx='8' cy='113' r='1'/><circle cx='39' cy='131' r='0.6'/><circle cx='76' cy='119' r='0.8'/><circle cx='112' cy='142' r='1'/><circle cx='147' cy='121' r='0.6'/><circle cx='172' cy='149' r='0.9'/><circle cx='19' cy='166' r='0.7'/><circle cx='55' cy='182' r='0.9'/><circle cx='91' cy='171' r='0.6'/><circle cx='129' cy='186' r='0.8'/><circle cx='158' cy='176' r='0.7'/><circle cx='185' cy='55' r='0.7'/></g><g fill='%23ffffff' fill-opacity='0.016'><rect x='24' y='48' width='84' height='1'/><rect x='96' y='104' width='68' height='1'/><rect x='10' y='152' width='58' height='1'/><rect x='128' y='22' width='48' height='1'/></g></svg>");
    background-repeat: repeat;
    background-attachment: fixed;
    color: var(--desk-muted);
    font-family: var(--font-body);
    line-height: 1.7;
}

::selection { background: var(--stamp); color: var(--paper-bright); }

/* The sheet: one continuous paper document. Fiber flecks tiled as inline
   SVG so the paper is not a flat cream slab; the inset shadow is the aged
   toning at the edges. Base reserves 350px of bottom padding for the
   character-sheet bar, which fortyk hides entirely; 60px reclaims the dead
   scroll. */
.container {
    background-color: var(--paper);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='%235a4c33' fill-opacity='0.045'><rect x='14' y='23' width='9' height='1'/><rect x='61' y='9' width='6' height='1' transform='rotate(8 64 9)'/><rect x='118' y='31' width='11' height='1' transform='rotate(-6 123 31)'/><rect x='176' y='14' width='7' height='1' transform='rotate(3 179 14)'/><rect x='33' y='72' width='8' height='1' transform='rotate(-9 37 72)'/><rect x='92' y='58' width='5' height='1'/><rect x='149' y='79' width='10' height='1' transform='rotate(7 154 79)'/><rect x='201' y='63' width='6' height='1' transform='rotate(-4 204 63)'/><rect x='9' y='118' width='7' height='1' transform='rotate(5 12 118)'/><rect x='70' y='131' width='9' height='1' transform='rotate(-7 74 131)'/><rect x='133' y='112' width='6' height='1'/><rect x='187' y='138' width='8' height='1' transform='rotate(9 191 138)'/><rect x='26' y='169' width='10' height='1' transform='rotate(-5 31 169)'/><rect x='87' y='184' width='6' height='1' transform='rotate(4 90 184)'/><rect x='142' y='176' width='9' height='1' transform='rotate(-8 146 176)'/><rect x='196' y='192' width='7' height='1'/></g><g fill='%23463a26' fill-opacity='0.05'><circle cx='47' cy='41' r='0.7'/><circle cx='104' cy='22' r='0.5'/><circle cx='163' cy='49' r='0.6'/><circle cx='22' cy='94' r='0.5'/><circle cx='81' cy='103' r='0.7'/><circle cx='139' cy='91' r='0.5'/><circle cx='208' cy='101' r='0.6'/><circle cx='54' cy='147' r='0.6'/><circle cx='116' cy='156' r='0.5'/><circle cx='171' cy='143' r='0.7'/><circle cx='38' cy='203' r='0.5'/><circle cx='97' cy='211' r='0.6'/><circle cx='158' cy='198' r='0.5'/><circle cx='211' cy='174' r='0.6'/></g></svg>");
    background-repeat: repeat;
    color: var(--ink);
    padding: 30px 38px 60px 38px;
    box-shadow:
        inset 0 0 90px rgba(90, 76, 51, 0.16),
        0 0 0 1px #000,
        0 18px 60px rgba(0, 0, 0, 0.85);
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--desk); }
::-webkit-scrollbar-thumb { background: var(--desk-border); }
::-webkit-scrollbar-thumb:hover { background: #6b5a35; }

/* Ink links on the paper; desk links are scoped to the footer below. */
a { color: var(--stamp); }
a:hover { color: var(--stamp-deep); }

/* Clerk's margin note at the top of the sheet. */
.back-link {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--ink-soft);
    opacity: 1;
}
.back-link:hover { color: var(--stamp); }

/* Every interactive element gets a visible focus ring (red ink). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.choice-item:focus-visible,
.option-item:focus-visible {
    outline: 2px solid var(--stamp);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Sections: parts of one document                                     */
/* ------------------------------------------------------------------ */

/* Running-header rule between the packet's parts. The intro is the cover
   and gets no rule. */
.section {
    background: transparent;
    border: none;
    border-top: 3px double var(--ink);
    padding: 22px 0 14px 0;
    margin-bottom: 10px;
}
[data-section-id="introduction"] { border-top: none; padding-top: 0; }

/* Section titles: centered Didone caps, ink. Header flex centers the title
   (its buttons are hidden). */
.section-header { justify-content: center; }
.section-title {
    font-family: var(--font-display);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    font-size: 1.55rem;
    text-align: center;
    border-bottom: none;
    padding-bottom: 0.2rem;
    margin-bottom: 0.6rem;
}

/* Form-number eyebrows over each section title. Mono form-speak; the
   sequence is real (the packet's parts), so the numbering is honest. */
.section-title::before {
    display: block;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
[data-section-id="postings"] .section-title::before { content: 'SECTION I · FORM 40K/POST/6'; }
[data-section-id="circumstances"] .section-title::before { content: 'SECTION II · FORM 40K/DUTY/18'; }
[data-section-id="fate"] .section-title::before { content: 'SECTION III · FORM 40K/FATE/1'; }
[data-section-id="aftermath"] .section-title::before { content: 'APPENDIX · STANDARD CORRESPONDENCE'; }

/* Foot litanies closing the three choice sections (verbatim canon litanies;
   the Primer prints one at every page foot). */
[data-section-id="postings"]::after,
[data-section-id="circumstances"]::after,
[data-section-id="fate"]::after {
    display: block;
    text-align: center;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-top: 26px;
}
[data-section-id="postings"]::after { content: 'Hope is the first step on the road to disappointment.'; }
[data-section-id="circumstances"]::after { content: 'Even a man who has nothing can still offer his life.'; }
[data-section-id="fate"]::after { content: 'Only in death does duty end.'; }

/* Sheet colophon under the appendix. */
[data-section-id="aftermath"]::after {
    content: '40K/OBIT/105 · POPULI CUSTODES IMPERIALUM · M41';
    display: block;
    text-align: center;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    margin-top: 30px;
}

/* The cover masthead. */
[data-section-id="introduction"] .section-title {
    font-size: clamp(2rem, 5.5vw, 3.2rem);
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
/* Edition stamp under the masthead (inverted ink block, slightly askew). */
[data-section-id="introduction"] .section-title::after {
    content: 'M41 STANDARD ISSUE';
    display: block;
    width: fit-content;
    margin: 10px auto 0 auto;
    background: var(--ink);
    color: var(--paper-bright);
    font-family: var(--font-stamp);
    font-weight: normal;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    padding: 3px 14px 2px 14px;
    transform: rotate(-2deg);
}

/* Section descriptions render inside .info-box (engine markup). Printed
   column: justified with hyphenation on desktop only (left-aligned on
   phones, media rule below). Direct children only, so form inserts keep
   their own alignment; .venn-sig keeps its right-set attribution. */
.section > .info-box,
.section-content > .info-box {
    color: var(--ink);
    font-size: 1.02rem;
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 769px) {
    .section > .info-box > p:not(.venn-sig),
    .section-content > .info-box > p:not(.venn-sig) {
        text-align: justify;
        hyphens: auto;
    }
}

/* Plates: every image is mounted with a double keyline. */
.section-image { margin: 0.5em 0 1em 0; }
.section-image img {
    width: 100%;
    max-height: none;
    box-sizing: border-box;
    border: 1px solid var(--ink);
    outline: 1px solid var(--ink-soft);
    outline-offset: 3px;
    box-shadow: none;
}

/* The saint's portrait plate, floated beside the cover text. */
.venn-portrait {
    float: right;
    width: 330px;
    max-width: 45%;
    margin: 0.3rem 0 1rem 1.5rem;
    background: var(--paper-bright);
    border: 1px solid var(--ink-soft);
    padding: 7px;
}
.venn-portrait img {
    width: 100%;
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--ink);
}
.venn-caption {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    padding-top: 7px;
}
.section-content .info-box { overflow: visible; }
.element-group { clear: both; }

/* Attribution lines under quotes (cover and appendix). */
.venn-sig {
    font-family: var(--font-script);
    font-style: normal;
    font-size: 1.15rem;
    color: var(--ink);
    text-align: right;
    margin-top: 0.8em;
}

/* Hide minimize/collapse chrome; this is a one-page document. */
.section-minimize-toggle,
.section-bottom-controls { display: none !important; }

/* ------------------------------------------------------------------ */
/* Groups and entries: printed items on the sheet                      */
/* ------------------------------------------------------------------ */

.element-group h3 {
    font-family: var(--font-display);
    font-weight: bold;
    color: var(--ink);
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    border-bottom: 3px double var(--ink-soft);
    padding-bottom: 0.25rem;
}

.group-description {
    color: var(--ink-soft);
    font-style: italic;
}

/* Entries sit directly on the paper: no card surfaces, no glow. */
.choice-item,
.option-item {
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: background-color 0.1s ease;
}
.choice-item:hover,
.option-item:hover {
    background: var(--paper-bright);
    border: none;
}
.choice-item.selected,
.option-item.selected {
    background: var(--paper-select);
    border: none;
    box-shadow: none;
}

/* No costs, no resources: the metadata strip only ever carries structural
   "Unlocks:" chips here, which leak the gating. Hide it. */
.entry-metadata { display: none !important; }

/* Rubber-stamped ASSIGNED marker on selected postings/circumstances.
   Bright backing plate keeps it legible over any plate image. */
.choice-item.selected::after {
    content: 'ASSIGNED';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-stamp);
    font-weight: normal;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--stamp);
    background: var(--paper-bright);
    border: 2px double var(--stamp);
    padding: 3px 9px 2px 9px;
    transform: rotate(6deg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Entry titles: the .element-group h3 double rule is the GROUP level; keep
   it off entry h3s (ties on specificity, this block loads later). */
.choice-item h3,
.option-item h3 {
    font-family: var(--font-display);
    font-weight: bold;
    color: var(--ink);
    font-size: 1.08rem;
    border-bottom: none;
}

.choice-item p,
.option-item p {
    color: var(--ink);
    font-size: 0.92rem;
}

/* Plate mats on entry images. */
.entry-image {
    background: var(--paper-bright);
    border: 1px solid var(--ink-soft);
    padding: 7px;
    transition: box-shadow 0.1s ease;
}
.entry-image img {
    width: 100%;
    max-height: none;
    display: block;
    object-fit: cover;
    border: 1px solid var(--ink);
    box-sizing: border-box;
}
.choice-item:hover .entry-image,
.choice-item.selected .entry-image { box-shadow: 0 0 0 2px var(--ink); }

/* Unavailable items fade like unstamped carbons but stay legible. */
.disabled-choice,
.choice-item.disabled-choice,
.option-item.disabled-choice {
    opacity: 0.65;
    filter: grayscale(0.55);
    cursor: not-allowed;
}

/* A selected card that is disabled is locked in, not unavailable; keep it
   fully readable next to its dimmed neighbors. */
.choice-item.selected.disabled-choice,
.option-item.selected.disabled-choice {
    opacity: 1;
    filter: none;
}

/* Wax-seal chip on locked selections (stock emoji hidden). */
.locked-indicator {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--stamp);
    border: 2px double var(--stamp);
    background: var(--paper-bright);
    padding: 3px 9px;
}
.locked-indicator .lock-icon { display: none; }

/* Requirement chips are noise here: a visible gated entry has, by
   construction, already met its requirement. */
.requirements-indicator,
.group-requirements-banner { display: none !important; }

/* ------------------------------------------------------------------ */
/* Postings: the plate sheet (Plates I-VI)                             */
/* ------------------------------------------------------------------ */

[data-section-id="postings"] .choices-container { counter-reset: plate; }
[data-section-id="postings"] .choice-item {
    counter-increment: plate;
    flex: 0 0 calc(33.33% - 15px);
    max-width: calc(33.33% - 15px);
    padding: 10px;
    text-align: center;
}
[data-section-id="postings"] .choice-item h3 {
    border-top: 1px solid var(--ink-soft);
    border-bottom: 1px solid var(--ink-soft);
    padding: 7px 0;
    margin: 12px 6px 8px 6px;
    font-size: 1.08rem;
    letter-spacing: 0.02em;
}
[data-section-id="postings"] .choice-item h3::before {
    content: 'PLATE ' counter(plate, upper-roman);
    display: block;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
[data-section-id="postings"] .choice-item p {
    text-align: left;
    padding: 0 6px 4px 6px;
}
/* World cards open with an .ob-row gazetteer line (content reuses the form
   row inside the description). In a card column a long label ("Last
   recorded translation") would squeeze the value into a sliver; let the
   value drop to its own full-width line instead. */
[data-section-id="postings"] .choice-item .ob-row { flex-wrap: wrap; }
[data-section-id="postings"] .choice-item .ob-value { flex: 1 1 12em; }

/* ------------------------------------------------------------------ */
/* Circumstances: the duty dossier (full-width file rows)              */
/* ------------------------------------------------------------------ */

[data-section-id="circumstances"] .choice-item {
    flex: 0 0 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: 236px 1fr;
    column-gap: 18px;
    align-items: start;
    padding: 14px 10px;
    border-bottom: 1px dotted var(--ink-soft);
    text-align: left;
}
[data-section-id="circumstances"] .choice-item:last-child { border-bottom: none; }
[data-section-id="circumstances"] .choice-item .entry-image {
    grid-column: 1;
    grid-row: 1 / span 6;
    margin: 0;
}
[data-section-id="circumstances"] .choice-item h3 {
    grid-column: 2;
    margin: 0 0 6px 0;
    border-bottom: 1px solid var(--ink-soft);
    padding-bottom: 4px;
}
[data-section-id="circumstances"] .choice-item p {
    grid-column: 2;
    margin: 0;
    font-size: 0.95rem;
}
[data-section-id="circumstances"] .choice-item .locked-indicator {
    grid-column: 2;
    width: fit-content;
    margin-top: 8px;
}
/* Selected rows get symmetric ledger rails, not a single accent stripe. */
[data-section-id="circumstances"] .choice-item.selected {
    border-left: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
}

/* Empty gated sections read as unprocessed form areas; a standby field
   signals that picks upstream summon the content. The chip vanishes as
   soon as the section grows a visible entry (:has), including in the
   show-all-choices debug view. */
[data-section-id="circumstances"]:not(:has(.choice-item)) .info-box::after,
[data-section-id="fate"]:not(:has(.option-item)) .info-box::after {
    display: block;
    width: fit-content;
    margin: 16px auto 0 auto;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    border: 1px dashed var(--ink-soft);
    padding: 10px 16px;
}
[data-section-id="circumstances"]:not(:has(.choice-item)) .info-box::after {
    content: 'AWAITING YOUR WORLD';
}
[data-section-id="fate"]:not(:has(.option-item)) .info-box::after {
    content: 'AWAITING YOUR LIFE';
}

/* ------------------------------------------------------------------ */
/* Fate: the adjudication box and the rebirth stamp                    */
/* ------------------------------------------------------------------ */

/* The section body is the form's official-use box (legend-break border). */
[data-section-id="fate"] .section-content {
    position: relative;
    border: 2px solid var(--ink);
    padding: 24px 18px 18px 18px;
    margin-top: 24px;
}
[data-section-id="fate"] .section-content::before {
    content: 'OFFICIAL USE ONLY';
    position: absolute;
    top: -0.75em;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    padding: 0 12px;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--ink);
    white-space: nowrap;
}

/* The rebirth trigger: an inverted stamp panel. The one loud element. */
.option-item.triggers-roll,
.option-item.has-execute {
    flex: 1 1 100% !important;
    max-width: 660px !important;
    margin: 10px auto;
    background: var(--stamp-block);
    border: 3px double var(--flimsy);
    text-align: center;
    padding: 22px 26px;
    transform: rotate(-0.6deg);
}
.option-item.triggers-roll:hover,
.option-item.has-execute:hover {
    background: var(--stamp);
    border-color: var(--paper-bright);
    transform: rotate(0deg);
}
.option-item.triggers-roll h3,
.option-item.has-execute h3 {
    font-family: var(--font-stamp);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1.4rem;
    color: var(--paper-bright);
}
.option-item.triggers-roll p,
.option-item.has-execute p {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.8rem;
    color: var(--flimsy);
}
.option-item.triggers-roll.selected,
.option-item.has-execute.selected {
    background: var(--stamp-block);
    border-style: solid;
    border-color: var(--flimsy);
    transform: rotate(0deg);
}
.option-item.triggers-roll.selected::after,
.option-item.has-execute.selected::after { content: none; }

/* ------------------------------------------------------------------ */
/* Roll interface: the adjudication block on the form                  */
/* ------------------------------------------------------------------ */

.roll-container {
    box-sizing: border-box;
    background: var(--paper-bright);
    border: 2px solid var(--ink);
    max-width: 660px;
    margin: 14px auto;
    font-family: var(--font-mono);
}

.roll-container h3 {
    font-family: var(--font-mono);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--ink);
    font-size: 0.9rem;
    letter-spacing: 0.14em;
}

.roll-container p { color: var(--ink-soft); font-size: 0.85rem; }

.entity-test-info {
    font-family: var(--font-mono);
    font-weight: bold;
    color: var(--ink);
    background: var(--paper);
    border: 1px dashed var(--ink-soft);
    font-size: 0.85rem;
}

/* The money click: the Saint's stamp. Scoped under .roll-container so it
   outranks the generic button/.btn repaint further down (equal specificity
   loses by file order, which left the crimson visible only on hover). Also
   unclamps .btn's 32px height. */
.roll-container .roll-button {
    background: var(--stamp);
    color: var(--paper-bright);
    border: 3px double var(--paper-bright);
    outline: 2px solid var(--stamp);
    font-family: var(--font-stamp);
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1.15rem;
    letter-spacing: 0.16em;
    padding: 13px 36px;
    height: auto;
    min-height: 48px;
    min-width: 240px;
    max-width: 100%;
}
.roll-container .roll-button:hover:not(:disabled) { background: var(--stamp-deep); outline-color: var(--stamp-deep); }
.roll-container .roll-button:active:not(:disabled) { transform: translateY(2px); }
.roll-container .roll-button:disabled { opacity: 0.55; }

.dice-roll {
    font-family: var(--font-mono);
    font-weight: bold;
    background: var(--paper);
    border: 1px solid var(--ink-soft);
    color: var(--ink);
}
.dice-roll.selected-roll { border-color: var(--ink); background: var(--paper-select); }
.dice-result { color: var(--stamp); }

.select-message, .selection-message { color: var(--ink-soft); }

/* ------------------------------------------------------------------ */
/* Roll result: the printed output                                     */
/* ------------------------------------------------------------------ */

/* The result card is not a panel; the obituary below is the artifact. */
.roll-result-item {
    box-sizing: border-box;
    background: transparent;
    border: none;
    max-width: 660px;
    margin: 6px auto;
    padding: 0;
}

.roll-effects { padding: 4px 0; }
/* The result title line gets the same treatment as the console h3 above it:
   one concept, one look (ink uppercase mono). */
.roll-effects p {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.9rem;
}
.roll-effects p b {
    color: var(--ink);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.roll-details-container { background: rgba(36, 28, 17, 0.05); }
.roll-details-container .roll-details {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.78rem;
    color: var(--ink-soft);
    border-bottom: 1px dashed var(--ink-soft);
    padding-bottom: 8px;
    margin-bottom: 6px;
}
.roll-details-container .roll-description { color: var(--ink-soft); font-style: italic; }

.roll-result-item .description-effect { font-style: normal; color: var(--ink); }
.roll-result-item .effect-item { display: block; max-width: 100%; min-width: 0; }
/* The base .effects-list is flex; a lone parchment card overflows its flex
   slot at phone widths. Block layout lets it fill the column instead. */
.roll-result-item .result-effects-list { display: block; padding: 5px 0; }

/* ------------------------------------------------------------------ */
/* The Administratum paper: obituary flimsy and the condolence letter  */
/* ------------------------------------------------------------------ */

/* The obituary prints on the pink carbon-copy flimsy (the Primer keeps its
   benedictions on pink pages); the condolence letter is the bright
   pre-printed sheet. Both are pinned onto the packet slightly askew. */
.obituary-card,
.condolence-form {
    color: var(--ink);
    padding: 18px 22px;
    max-width: 560px;
    margin: 14px auto;
    font-family: var(--font-body);
    text-align: left;
    box-shadow:
        inset 0 0 46px rgba(96, 74, 34, 0.14),
        0 2px 0 rgba(0, 0, 0, 0.15),
        0 10px 26px rgba(0, 0, 0, 0.25);
}
.obituary-card {
    background: var(--flimsy);
    border: 1px solid #b89a86;
    transform: rotate(0.8deg);
}
.condolence-form {
    background: var(--paper-bright);
    border: 1px solid var(--ink-soft);
    max-width: 640px;
    transform: rotate(-0.3deg);
}

.ob-stamp,
.cf-stamp {
    display: inline-block;
    font-family: var(--font-stamp);
    font-weight: normal;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--stamp);
    border: 2px double var(--stamp);
    padding: 4px 10px 3px 10px;
    transform: rotate(-1.4deg);
    margin-bottom: 14px;
    opacity: 0.94;
}

.ob-row {
    display: flex;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    border-bottom: 1px dotted var(--ink-soft);
    padding: 3px 0;
}

.ob-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    font-weight: bold;
    min-width: 88px;
    flex-shrink: 0;
}

.ob-value { color: var(--ink); font-weight: bold; }

.ob-body {
    margin-top: 12px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ink);
}

.ob-seal {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--stamp);
    text-align: right;
    margin-top: 14px;
    /* If a seal ever wraps, break at a balanced space instead of stranding
       a parenthetical fragment. */
    text-wrap: balance;
}

/* Condolence letter details. */
.condolence-form p { margin: 0.55em 0; font-size: 0.95rem; }
.cf-line { font-family: var(--font-mono); font-weight: bold; font-size: 0.85rem; }
.cf-blank {
    display: inline-block;
    min-width: 150px;
    border-bottom: 1px solid var(--ink-soft);
    vertical-align: bottom;
}
.cf-note { font-style: italic; font-size: 0.8rem; color: var(--ink-soft); }
.cf-name {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    border: 1px dashed var(--ink-soft);
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.4);
}
.cf-box { font-size: 1.05rem; margin-left: 0.4em; }
.cf-box:first-child { margin-left: 0; }
.cf-motto {
    text-align: center;
    font-family: var(--font-stamp);
    font-weight: normal;
    letter-spacing: 0.26em;
    font-size: 1.05rem;
    color: var(--stamp);
    margin-top: 1em;
}
.cf-footer {
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 0.7rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--ink-soft);
    margin-top: 12px;
    padding-top: 6px;
}

/* The saint's closing line: a handwritten margin note, not a card. */
.venn-signoff {
    max-width: 560px;
    margin: 22px auto 0 auto;
    background: transparent;
    border: none;
    padding: 0 22px;
    transform: rotate(-0.4deg);
    font-style: italic;
    color: var(--ink);
}
.venn-signoff p { margin: 0.5em 0; }

/* ------------------------------------------------------------------ */
/* Shared chrome                                                       */
/* ------------------------------------------------------------------ */

/* Floating nav menu defaults to near-white; repaint it as an index card
   clipped to the packet (needs !important against base load order). */
.navigation-menu {
    background: var(--paper-bright) !important;
    border: 1px solid var(--ink) !important;
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}
.navigation-menu .nav-header {
    background: var(--stamp-block);
    border-bottom: 1px solid var(--ink);
    color: var(--paper-bright);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.navigation-menu .nav-section-title { color: var(--ink); padding: 8px 12px; }
/* Engine emoji (music label) prints as gray ink like the rest of the card;
   the ink label text is near-neutral so only the glyph visibly changes.
   Reset Progress (.nav-danger) is excluded and keeps its red. */
.navigation-menu .nav-section-title:not(.nav-danger) { filter: grayscale(1); }
.navigation-menu .nav-section-title:hover,
.navigation-menu a:hover {
    background: var(--paper-shade);
    color: var(--ink);
}
/* Destructive action in red ink: 6.6:1 on the card. */
.navigation-menu .nav-section-title.nav-danger { color: var(--stamp); }
.navigation-menu .nav-section-title.nav-danger:hover { color: var(--stamp-deep); }

/* No economy: hide the fixed bottom character-sheet bar entirely,
   expand toggle included. */
.character-sheet { display: none !important; }

/* Utility buttons: ink outlines on paper. */
button, .btn {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
}
button:hover, .btn:hover {
    background: var(--paper-shade);
    border-color: var(--ink);
}

/* Footer in desk tones: site chrome, not part of the artifact. */
.footer-wrapper { color: var(--desk-muted); min-height: 56px; }
/* Base hides the toggled-off footer with opacity 0, which keeps its ~450px
   of layout space; on the cream sheet that reads as a blank paper tail.
   Collapse it entirely (the toggle itself is absolutely positioned and
   keeps working; min-height above reserves its room). */
.footer-hidden .footer-section { display: none; }
.footer-toggle {
    color: var(--desk-muted);
    background: var(--desk-raised);
    border: 1px solid var(--desk-border);
}
.footer-toggle:hover { background: #221c15; border-color: var(--desk-border); color: var(--desk-muted); }
.footer-section {
    background: var(--desk-raised);
    border-top: 1px solid var(--desk-border);
    color: var(--desk-muted);
}
.footer-section h3 { color: var(--desk-muted); font-family: var(--font-display); font-weight: bold; }
.footer-section a { color: var(--desk-link); }
.footer-section a:hover { color: #e6c98a; }
.changelog-entry .version { color: var(--desk-link); }
.changelog-copy-btn { color: var(--desk-muted); border-color: var(--desk-border); background: transparent; filter: grayscale(1); }
.changelog-copy-btn:hover { background: #221c15; color: var(--desk-muted); }

/* Engine modals (Save/Load, export, import, mobile tip) ship a stock light
   Bootstrap palette; repaint the full set as Administratum slips. Same-
   specificity overrides win by file order (project CSS loads after base). */
.export-popup-content {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65);
}
.export-popup-header {
    background: var(--stamp-block);
    border-bottom: 1px solid var(--ink);
}
.export-popup-header h2 {
    color: var(--paper-bright);
    font-family: var(--font-display);
    font-weight: bold;
    letter-spacing: 0.04em;
}
.export-popup-close { color: var(--flimsy); background: none; border: none; }
.export-popup-close:hover { color: var(--paper-bright); background: none; }
.export-popup-body { background: var(--paper); color: var(--ink); }
.summary-container, .summary-section h3, .summary-group h4 { color: var(--ink); }

.export-popup-copy,
.import-submit-btn,
.mobile-suggestion-btn {
    background: var(--stamp);
    color: var(--paper-bright);
    border: 1px solid var(--stamp-deep);
}
.export-popup-copy:hover,
.import-submit-btn:hover,
.mobile-suggestion-btn:hover { background: var(--stamp-deep); }
.export-download-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.export-download-btn:hover { background: var(--paper-shade); }

.save-load-modal-body { color: var(--ink); }
.save-slots-info { background: var(--paper-shade); color: var(--ink); }
.save-slot { background: var(--paper-bright); border: 1px solid var(--ink-soft); }
.save-slot-name { color: var(--ink); }
.save-slot-date { color: var(--ink-soft); opacity: 1; }
.save-slot-btn.save-btn { background: var(--stamp); color: var(--paper-bright); }
.save-slot-btn.save-btn:hover:not(:disabled) { background: var(--stamp-deep); }
.save-slot-btn.load-btn {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}
.save-slot-btn.load-btn:hover:not(:disabled) { background: var(--paper-shade); }
.save-slot-btn.delete-btn { background: var(--stamp-block); color: var(--paper-bright); }
.save-slot-btn.delete-btn:hover:not(:disabled) { background: var(--stamp); }
.save-slot-name-input {
    background: var(--paper-bright);
    color: var(--ink);
    border: 1px solid var(--ink-soft);
    font-family: var(--font-mono);
}
.import-export-section { border-top: 1px solid var(--ink-soft); }
.import-export-header { color: var(--ink); font-family: var(--font-display); }
.import-textarea {
    background: var(--paper-bright);
    color: var(--ink);
    border: 1px solid var(--ink-soft);
}
.import-warning { background: rgba(140, 23, 16, 0.12); color: var(--ink); border: 1px solid var(--stamp); }
.mobile-suggestion-content h3 { color: var(--ink); }
.mobile-suggestion-content p { color: var(--ink); }
.mobile-suggestion-note { color: var(--ink-soft); }

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .option-item.triggers-roll,
    .option-item.has-execute { transition: background-color 0.1s ease, transform 0.15s ease; }
    .roll-container .roll-button { transition: background-color 0.1s ease, transform 0.08s ease; }
}
@media (prefers-reduced-motion: reduce) {
    .roll-container .roll-button:active:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

/* Below ~1240px the sheet reaches the viewport edge and the fixed nav chip
   (40px + 5px offset) sits over the sheet's top-left corner, covering the
   back-link's arrow; shift the note right of the chip. */
@media (max-width: 1240px) {
    .back-link { margin-left: 44px; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    [data-section-id="postings"] .choice-item {
        flex: 0 0 calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
    [data-section-id="circumstances"] .choice-item {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 768px) {
    .container { padding: 18px 14px 40px 14px; }
    [data-section-id="postings"] .choice-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Dossier rows stack: plate above text. */
    [data-section-id="circumstances"] .choice-item {
        display: block;
        padding: 14px 4px;
    }
    [data-section-id="circumstances"] .choice-item .entry-image { margin-bottom: 10px; }
    [data-section-id="circumstances"] .choice-item h3 { margin: 0 0 6px 0; }
    .venn-portrait {
        float: none;
        margin: 0 auto 1rem auto;
        width: 100%;
        max-width: 420px;
    }
    [data-section-id="introduction"] .section-title { font-size: 1.8rem; }
    .option-item.triggers-roll,
    .option-item.has-execute { padding: 18px 14px; }
}

/* Phone widths: collapse the engine's nested result-card padding so the
   obituary fills the column instead of squeezing to ~4-word lines. */
@media (max-width: 480px) {
    .roll-result-item { padding: 0; }
    .roll-result-item .roll-effects { padding: 4px 0; }
    .roll-result-item .result-effects-list { padding: 2px 0; }
    .roll-result-item .effect-item { padding: 0; }
    .obituary-card, .condolence-form { padding: 14px 12px; }
    .ob-row { flex-wrap: wrap; }
    .ob-label { min-width: 70px; }
    /* The longest seal (37 chars) must hold one line in the 390px column so
       its parenthetical stays whole. */
    .ob-seal { font-size: 0.66rem; letter-spacing: 0.1em; }
    .venn-signoff { padding: 0 12px; }
}