/* ============================================================
   RAR PHYSIOLOGY · Lung Volumes & Capacities (LVC) styles
   SCAFFOLD pass — only the placeholder-marker styling lives here
   for now. Real page styles (spirogram engine, determinant cards,
   discrimination matrices) arrive with their content prompts.
   Scoped to .rar-topic-content so it never leaks into other pages.
   ============================================================ */

/* The outer .topic-workspace-page grid only spaces its DIRECT children, so
   the <article> cards nested inside this mount get no gap by default. Make
   the mount an 18px-gap grid (matches the page-level gap) so every card has
   equal breathing room. The [hidden] guard keeps display:grid from
   overriding the hidden attribute (same pattern CAV topic divs use). */
.rar-topic-content {
    display: grid;
    /* single column that FILLS the width but can't be inflated past it by wide
       content (e.g. a horizontal card slider). Without minmax(0,…) the implicit
       `auto` column grows to a flex row's max-content → whole-page h-overflow. */
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
.rar-topic-content[hidden] {
    display: none;
}

.rar-topic-content .lvc-page-intent {
    margin: 0 0 4px;
    color: var(--text, #111318);
    font-size: 0.95rem;
    font-style: italic;
}

/* Acronyms / terms use the shared .cav-term hover convention (blue dotted
   underline + tooltip), loaded globally — no RAR-specific term style. */

/* "What spirometry can't measure" lead-in beats */
.rar-topic-content .lvc-beats {
    margin: 6px 0 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rar-topic-content .lvc-beats li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text, #111318);
}
/* the bolded lead of each beat is a little larger than the rest */
.rar-topic-content .lvc-beats li strong { color: var(--text, #111318); font-weight: 800; font-size: 15.5px; }

/* shared solid-text-card body copy → black inside Foundations (no grey) */
.rar-topic-content .solid-text-card p { color: var(--text, #111318); }

.rar-topic-content .lvc-aside {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
    border-radius: var(--radius-sm, 14px);
    background: var(--surface-soft, rgba(255, 255, 255, 0.58));
    font-size: 13px;
}
.rar-topic-content .lvc-aside summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text, #111318);
}
.rar-topic-content .lvc-aside p {
    margin: 8px 0 2px;
    line-height: 1.55;
    color: var(--text, #111318);
}

.rar-topic-content .lvc-leadin {
    margin: 14px 0 2px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text, #111318);
}

.rar-topic-content .lvc-footnote {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text, #111318);
}

/* plain body lines + verbatim definitions for the reference sections */
.rar-topic-content .lvc-line {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text, #111318);
}
.rar-topic-content .lvc-line:first-of-type { margin-top: 2px; }
.rar-topic-content .lvc-line--note {
    margin-top: 12px;
    font-size: 13px;
    font-style: italic;
    color: var(--text, #111318);
}
.rar-topic-content .lvc-muted { color: var(--text, #111318); }
.rar-topic-content .lvc-def {
    margin: 6px 0 2px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text, #111318);
}

.rar-topic-content .lvc-aside-list {
    margin: 8px 0 2px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rar-topic-content .lvc-aside-list li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text, #111318);
}
.rar-topic-content .lvc-aside-list li strong { color: var(--text, #111318); }

/* compact reference rows for the 4 volumes / 4 capacities */
.rar-topic-content .lvc-ref {
    margin-top: 10px;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
    border-radius: var(--radius-sm, 14px);
    overflow: hidden;
}
.rar-topic-content .lvc-ref-row {
    display: grid;
    grid-template-columns: 16px minmax(150px, 230px) 84px minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    padding: 10px 12px;
}
.rar-topic-content .lvc-ref-row + .lvc-ref-row { border-top: 1px solid var(--line, rgba(15, 23, 42, 0.08)); }
.rar-topic-content .lvc-ref--cap .lvc-ref-row {
    grid-template-columns: 16px minmax(150px, 215px) minmax(108px, 150px) 84px minmax(0, 1fr);
}
.rar-topic-content .lvc-ref-row.is-locked { background: rgba(148, 163, 184, 0.06); }
.rar-topic-content .lvc-ref-dot { width: 10px; height: 10px; border-radius: 50%; }
.rar-topic-content .lvc-ref-term {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--text, #111318);
}
.rar-topic-content .lvc-ref-abbr { font-weight: 600; color: var(--text, #111318); }
.rar-topic-content .lvc-ref-sum { font-size: 12px; font-weight: 700; color: var(--text, #111318); }
.rar-topic-content .lvc-ref-val { font-size: 13.5px; font-weight: 800; color: var(--text, #111318); white-space: nowrap; }
.rar-topic-content .lvc-ref-mean { font-size: 12.5px; line-height: 1.45; color: var(--text, #111318); }

/* lock — same glyph + muted tone as the spirogram engine */
.rar-topic-content .lvc-locktag { display: inline-flex; cursor: help; }
.rar-topic-content .lvc-lock { width: 13px; height: 13px; color: var(--text, #111318); }

/* volumes / capacities reference rows — three visual tiers:
   prominent colored abbreviation pill · small name + plain-English
   meaning · prominent value. Capacity sums render as color-coded
   component chips. All colors match the spirogram engine. */
.rar-topic-content .lvc-vtable {
    margin-top: 9px;
    border-top: 1px solid var(--line, rgba(15, 23, 42, 0.09));
}
.rar-topic-content .lvc-vrow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.09));
}
.rar-topic-content .lvc-vhead { display: inline-flex; align-items: center; gap: 5px; }
.rar-topic-content .lvc-vabbr {
    display: inline-block;
    min-width: 34px;
    text-align: center;
    padding: 4px 10px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--c, #111318);
    background: color-mix(in srgb, var(--c, #8e8e93) 15%, transparent);
}
.rar-topic-content .lvc-vbody { min-width: 0; }
.rar-topic-content .lvc-vtop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.rar-topic-content .lvc-vname { font-size: 12.5px; font-weight: 700; color: var(--text, #111318); }
.rar-topic-content .lvc-vmean { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text, #111318); }
.rar-topic-content .lvc-vmean strong { color: var(--text, #111318); font-weight: 800; }
.rar-topic-content .lvc-vval { justify-self: end; font-size: 15px; font-weight: 800; color: var(--text, #111318); white-space: nowrap; }
.rar-topic-content .lvc-vsum { display: inline-flex; align-items: center; gap: 4px; }
.rar-topic-content .lvc-chip {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--cc, #8e8e93);
}
.rar-topic-content .lvc-plus { color: var(--text, #111318); font-weight: 800; font-size: 11px; }

@media (max-width: 560px) {
    .rar-topic-content .lvc-vval { font-size: 14px; }
}

@media (max-width: 560px) {
    .rar-topic-content .lvc-ref-row,
    .rar-topic-content .lvc-ref--cap .lvc-ref-row { grid-template-columns: 16px 1fr auto; }
    .rar-topic-content .lvc-ref-sum,
    .rar-topic-content .lvc-ref-mean { grid-column: 2 / -1; }
}

/* Muted "content TBD" marker that sits under every scaffold section. */
.rar-topic-content .lvc-tbd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 12px;
    background: var(--surface-muted, rgba(148, 163, 184, 0.08));
    color: var(--text, #111318);
    font-size: 0.9rem;
}

.rar-topic-content .lvc-tbd-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Larger placeholder for an interactive / figure mount point. */
.rar-topic-content .lvc-mount-placeholder {
    margin-top: 12px;
    padding: 32px 20px;
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 14px;
    background: var(--surface-muted, rgba(148, 163, 184, 0.08));
    color: var(--text, #111318);
    text-align: center;
    font-size: 0.92rem;
}

.rar-topic-content .lvc-mount-placeholder strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text, #334155);
}