/* =================================================================
   WIKI HELP
   The (i) button in a panel header, and the handbook modal it opens.
   See frontend/game/js/wikiHelp.js.

   This is the only surface in the game that renders long-form prose, so
   it is held to a stricter bar than the rest of docs/TYPE-LEGIBILITY.md
   asks for — the same one the wiki was brought to:

     - body text past 7:1, not merely past 4.5:1 (see .wh-modal's
       background, which is why it changed);
     - a measure inside the 45-75 character band (see .wh-body p);
     - nothing below --text-xs / 12px, which caught .wh-title (11.5px),
       .note-label (10.9px) and the table headers (11.2px).
   ================================================================= */

/* The button.

   Sits in .hp-header immediately left of .hp-close, so across every panel the
   two corner controls are always in the same order and the close button keeps
   the outermost position a thumb reaches for.

   Same 44x44 touch target as .hp-close (WCAG 2.5.5) around a much smaller
   glyph — the ring is sized for the finger, the circle for the eye. */
.hp-help {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}

.hp-help::before {
    content: 'i';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    /* The glyph is a lowercase i, which is visually top-heavy inside a circle. */
    padding-bottom: 1px;
}

/* The text node is only there so the button is not empty for assistive tech
   that ignores ::before; the visible mark is the pseudo-element.

   font-size: 0 renders zero glyphs, so this is not "text below 12px" — it
   is a label with no visual form at all, the standard way to keep an
   accessible name on an icon button. A type audit that measures rendered
   px will still list `button.hp-help` at 0px; that row is a false positive
   and the accessible name is the reason to leave it alone. The mark the
   player actually sees is ::before, which is at the 12px floor. */
.hp-help { font-size: 0; }

.hp-help:hover,
.hp-help:focus-visible { color: var(--color-accent-gold); }

.hp-help:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

/* =================================================================
   THE MODAL
   ================================================================= */

.wh-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 15, 26, 0.82);
    backdrop-filter: blur(3px);
}

.wh-overlay.hidden { display: none; }

.wh-modal {
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    /* Never taller than the viewport: the handbook sections include tables,
       and a modal that grows past the screen puts its close button somewhere
       the player cannot reach. */
    max-height: min(80vh, 720px);
    /* Was --color-primary-800 (#111827). This is the one surface in the game
       carrying long-form prose, so it is held to the stricter bar the wiki
       lane set — body text past 7:1, not merely past 4.5:1. On #111827
       --color-text-secondary lands at 6.92:1, just under; on
       --color-primary-900 it is 7.47:1 and every other colour the handbook
       uses (gold 9.0, gold-light, green-light 7.6, cyan 7.9, primary 19.8)
       clears 7 as well. A token swap, not a hand-mixed near-duplicate. */
    background: var(--color-primary-900);
    border: 1px solid var(--color-primary-700);
    border-radius: 6px;
    overflow: hidden;
}

.wh-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-primary-700);
    background: rgba(26, 39, 68, 0.4);
    flex-shrink: 0;
}

.wh-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 1.5px;
    color: var(--color-accent-gold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wh-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.wh-close:hover { color: var(--color-text-primary); }

.wh-close:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

.wh-body {
    padding: 14px 16px 18px;
    overflow-y: auto;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-primary);
}

.wh-loading {
    color: var(--color-text-secondary);
    font-style: italic;
}

/* --- Handbook content, restyled for the in-game surface ---------------
   The markup arrives from /wiki/ with its own class names and none of that
   stylesheet, so everything it can contain is given a rule here. Anything
   missed would fall back to browser defaults, which on a dark panel means
   black-on-dark text. */

.wh-body h2,
.wh-body h3 {
    font-family: var(--font-display);
    color: var(--color-accent-gold);
    letter-spacing: 1px;
    margin: 0 0 8px;
}
.wh-body h2 { font-size: 0.95rem; }
.wh-body h3 { font-size: 0.82rem; margin-top: 16px; }

/* MEASURE
   The modal is 680px wide, which at 0.9rem Exo 2 put running prose at
   roughly 90 characters a line — well past the 45-75 band, and the one
   legibility failure a contrast tool cannot see.

   `ch` under-delivers here and the size of the shortfall matters: ch is the
   advance width of "0", which is much wider than the average lowercase
   letter, so a cap of Nch holds about 1.26 x N real characters (measured by
   the wiki lane against this same typeface). 50ch therefore lands at ~63
   characters, inside the band. Do not "correct" this to 63ch.

   Capped on the prose blocks rather than on .wh-body, so tables, formulas
   and screenshots keep the full 680px they need. */
.wh-body p,
.wh-body li,
.wh-body caption,
.wh-body figcaption { max-width: 50ch; }

/* `color` on .wh-body reaches a paragraph only by inheritance, and base.css
   has a bare `p { color: var(--color-text-secondary) }` — a direct element
   match, which beats an inherited value whatever the specificity. So every
   handbook paragraph in this modal was two tiers dimmer than the list item
   next to it, and the declaration meant to prevent that was inert. */
.wh-body p { margin: 0 0 10px; color: inherit; }

/* base.css sets `list-style: none` on the bare `ul, ol` selector, and
   wiki.css is not loaded in the game — so the handbook's primary scanning
   device arrived here as unmarked indented text. Every bullet, every step
   number, gone. Restored explicitly rather than by loosening base.css, which
   the HUD's own lists depend on. */
.wh-body ul { list-style: disc; }
.wh-body ol { list-style: decimal; }
.wh-body ul,
.wh-body ol { margin: 0 0 12px; padding-left: 22px; }
.wh-body li { margin-bottom: 5px; }

/* The handbook's numbered walkthroughs. Without these the research page's
   "recommended order" lost its numbers AND ran each project's name into the
   sentence after it — an ordered list with neither ordering nor headings. */
.wh-body .steps { list-style: decimal; }
.wh-body .step-title {
    display: block;
    font-weight: 700;
    color: var(--color-accent-gold-light);
}

.wh-body strong { color: var(--color-text-primary); }

/* A caption is already subordinate by colour; a bright <strong> inside one
   jumps two tiers mid-sentence and breaks it in half. */
.wh-body figcaption strong,
.wh-body caption strong { color: inherit; font-weight: 600; }

/* Underlined, not gold-only. On the page every link carries a border-bottom;
   this modal dropped it, leaving gold-on-grey at 1.23:1 — well under the 3:1
   WCAG asks for when colour is the only thing distinguishing a control. Every
   one of these opens a new tab, which is a second reason not to leave the
   affordance to hue alone. */
.wh-body a {
    color: var(--color-accent-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wh-body .num,
.wh-body .n {
    font-family: var(--font-display);
    color: var(--color-accent-gold-light);
}

.wh-body .formula {
    padding: 8px 10px;
    margin: 0 0 12px;
    background: rgba(10, 15, 26, 0.6);
    border-left: 2px solid var(--color-accent-gold-dark);
    font-family: var(--font-display);
    font-size: 0.78rem;
    color: var(--color-text-primary);
}

.wh-body .note {
    padding: 10px 12px;
    margin: 0 0 12px;
    background: rgba(26, 39, 68, 0.5);
    border-left: 2px solid var(--color-primary-700);
    border-radius: 3px;
}
.wh-body .note-label {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 1px;
    color: var(--color-accent-gold);
    margin-bottom: 4px;
}

/* Tables carry most of the handbook's value and are the thing most likely to
   overflow a 390px screen, so they scroll inside their own box rather than
   making the modal scroll sideways. */
.wh-body .table-wrap {
    overflow-x: auto;
    margin: 0 0 12px;
}
.wh-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.wh-body caption {
    caption-side: top;
    text-align: left;
    padding-bottom: 6px;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}
.wh-body th,
.wh-body td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--color-primary-700);
    text-align: left;
}
.wh-body th {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: var(--color-accent-gold);
}

.wh-body figure { margin: 0 0 12px; }
.wh-body img { max-width: 100%; height: auto; border-radius: 4px; }
.wh-body figcaption {
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.wh-more {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--color-primary-700);
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .wh-overlay { backdrop-filter: none; }
}

@media (max-width: 640px) {
    .wh-overlay { padding: 0; align-items: flex-end; }
    .wh-modal {
        width: 100%;
        max-height: 88vh;
        border-radius: 6px 6px 0 0;
        border-bottom: none;
    }
}

/* ---------------------------------------------------------------------------
   Everything below is a wiki.css rule the modal was missing.

   The handbook's stylesheet is NOT loaded into the game — these pages are
   fetched and transplanted, so any class wiki.css styles arrives here naked.
   The header comment above once claimed every element the body can contain had
   a rule; it did not, and the gaps were not cosmetic. Each block says which
   page it was breaking.
   --------------------------------------------------------------------------- */

/* Whole-page opens (the life panel, the research panel, the training panel)
   transplant the <h1> too, and with no rule here it fell through to base.css
   at 36px in the heading face — the same title the modal's own 12px gold bar
   already shows, three times larger, outranking every h2 beneath it. The
   hierarchy inside the modal came out inverted relative to the page. */
.wh-body h1 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--color-accent-gold-light);
    margin: 0 0 4px;
}

.wh-body .page-lede {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    margin: 0 0 14px;
}

/* Callout severity. The handbook has eleven warnings and ten tips, and without
   these a warning about losing troops when a tent lapses read exactly like a
   tip about build efficiency. The .note-label TEXT already carries the
   distinction, which is what makes this safe — the colour is reinforcement,
   not the signal. */
.wh-body .note.tip { border-left-color: var(--color-success, #10b981); }
.wh-body .note.warn { border-left-color: var(--color-warning, #f59e0b); }
.wh-body .note.gold { border-left-color: var(--color-accent-gold); }
.wh-body .note.tip .note-label { color: var(--color-success, #10b981); }
.wh-body .note.warn .note-label { color: var(--color-warning, #f59e0b); }

/* The classifier pill. Unstyled it inherits from whatever it sits in, so
   inside a heading "Gold Mine economy" rendered as one continuous gold string
   with no boundary between the name and the classification. */
.wh-body .tag {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--color-primary-700, #1a2744);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    vertical-align: middle;
}

/* The at-a-glance figure strip — the life page opens with one, and it is the
   exact block the life panel's (i) exists to answer. Without the grid it came
   out as eight identical lines in one colour, value and label typographically
   indistinguishable, two of the four values the literal string "-1%/hr". */
.wh-body .stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}

.wh-body .stat {
    border: 1px solid var(--color-primary-700, #1a2744);
    border-radius: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
}

.wh-body .stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-accent-gold-light);
}

.wh-body .stat-label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

/* A phone capture is 640px wide and up to 1385px tall. The modal body is about
   648px, so it rendered at full size — two modal-heights of screenshot before
   the first sentence of the section it illustrates. wiki.css caps these at
   340px on the page; the modal needs a tighter cap than the page, not none. */
.wh-body figure.phone { max-width: 260px; margin-left: auto; margin-right: auto; }
.wh-body figure.phone img { width: 100%; height: auto; }