/* condensed.css: Condensed content mode (.cond-*) and the progression fold. */
/* ===== Condensed content mode: shared page shell for a page's "_condensed"
   template variant (UserPreferences.content_mode == 'condensed'). One namespace,
   appended once, same "promote/retire as one contiguous block" convention as
   .ib2-*/.sq2-*. Distinct from .breeding-help-* (the full-detail explainer shell):
   a condensed page leads with the answer and leans on heading-weight contrast
   instead of prose, so it needs its own, plainer shell rather than reusing that
   one. Headline/body/eyebrow weights are deliberately far apart (700 / 400 / 600
   for the lede) so the hierarchy reads without colour or size doing all the work. */
.cond-page { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
.cond-header { margin-bottom: 24px; }
.cond-header h1 { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
.cond-lede { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); line-height: 1.5; margin: 0 0 16px; }
.cond-nav { font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; }
.cond-nav a { color: var(--text-muted); }
@media (hover: hover) { .cond-nav a:hover { color: var(--text-primary); } }
.cond-nav a:focus-visible { color: var(--text-primary); }
/* Start-here actions under a facts-first header: wrap, never overflow, 44px tall. */
.cond-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cond-actions .btn { min-height: 44px; }
/* A disclosure inside a panel or card (the Progression panel's Rested/budget/notes):
   summary carries the figure so nothing load-bearing is hidden; the row layout mirrors
   .progression-xp-row so folded and unfolded readouts line up. */
.progression-fold { margin-top: 10px; }
/* The caret and the summary text stay together on the left; only a figure
   (.progression-xp-value) is pushed to the right edge. */
.progression-fold > summary { justify-content: flex-start; }
.progression-fold > summary::before { order: -1; }
.progression-fold > summary .progression-xp-value { margin-left: auto; }
.trait-card.progression-fold > summary { padding: 0; }
.progression-fold > summary .panel-title { margin: 0; font-size: 1rem; }
.progression-fold > summary .state-chip { margin-left: 8px; }
/* A standing notice under the header (a catalog that isn't published, a feature that's
   switched off): visible prose, never a title= tooltip, per docs/ux-rules.md. */
.cond-note {
    margin: 12px 0 0; padding: 10px 14px; font-size: 0.88rem; line-height: 1.5;
    color: var(--text-secondary); background: var(--bg-surface);
    border: 1px solid var(--border-subtle); border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);
}
.cond-sections { display: flex; flex-direction: column; gap: 16px; }
.cond-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    scroll-margin-top: 16px;
}
.cond-section h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 10px; }
.cond-section p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin: 0 0 8px; }
.cond-section p:last-child { margin-bottom: 0; }
.cond-terms { margin: 0; display: grid; gap: 10px; }
.cond-terms dt { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.cond-terms dd { margin: 2px 0 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
/* A subheading inside a .cond-section, one notch below the section's own h2: for splitting
   a section into named sub-groups (e.g. "Earn" / "Spend") without introducing a second h2. */
.cond-subhead {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-secondary); margin: 16px 0 8px;
}
.cond-subhead:first-of-type { margin-top: 0; }
.cond-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cond-table th {
    text-align: left; padding: 6px 8px; color: var(--text-secondary);
    font-weight: 700; border-bottom: 1px solid var(--border-subtle);
}
.cond-table td { padding: 8px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; color: var(--text-secondary); }
/* The global `th, td { white-space: nowrap }` suits data grids; a reference table here
   carries sentences, which must wrap rather than run off the right edge (measured: a
   stacked card clipped "Celestial Markings, Twins." at 375px). */
.cond-table th, .cond-table td { white-space: normal; }
.cond-table tr:last-child td { border-bottom: none; }
.cond-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--text-secondary); }
.cond-list strong { color: var(--text-primary); }
/* Progressive disclosure on a facts-first page: native <details>, so it works with JS off
   and is keyboard-native. A cost, odds, cooldown, consequence or irreversible sentence is
   never placed inside one (guard: game/test_accessibility_markup.py::DisclosureContentTests);
   the summary names what it hides ("Marking layer order"), never a bare "More". */
.cond-details { margin: 6px 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.cond-details > summary {
    cursor: pointer; font-weight: 600; color: var(--text-primary);
    padding: 4px 0; min-height: 28px; display: flex; align-items: center; gap: 6px;
}
.cond-details > summary::before { content: "▸"; font-size: 0.75em; color: var(--text-muted); }
.cond-details[open] > summary::before { content: "▾"; }
.cond-details > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.cond-details > summary::-webkit-details-marker { display: none; }
.cond-details > summary { list-style: none; }
@media (pointer: coarse) { .cond-details > summary { min-height: 44px; } }
.cond-details > :not(summary) { margin-top: 6px; }
.cond-details p { margin: 0 0 6px; line-height: 1.5; }
.cond-details p:last-child { margin-bottom: 0; }
/* A reference table never widens the page: it scrolls in its own box (docs/ux-rules.md).
   Below 640px a small table stacks each row into a card, with the header echoed from the
   cell's data-label so the column meaning survives the stacking. */
.cond-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (width < 640px) {
    .cond-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .cond-table--stack, .cond-table--stack tbody, .cond-table--stack tr, .cond-table--stack td { display: block; width: 100%; }
    .cond-table--stack tr { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 6px 10px; margin-bottom: 8px; }
    .cond-table--stack td { border-bottom: none; padding: 4px 0; }
    .cond-table--stack td::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
    .cond-table--stack td:empty { display: none; }
}
.cond-footer { margin-top: 20px; font-size: 0.85rem; color: var(--text-muted); }