/* ============================================================
   RAR PHYSIOLOGY · Forced Spirogram (Mode C) + Dynamic & Disease
   reference / matrix helpers. Scoped under .rar-topic-content and
   .lvc-fs. Compact, dense — mirrors Arcanium conventions and reuses
   the shared .spg-readout box + the Determinants matrix styles.
   ============================================================ */

.lvc-fs { display: block; margin-top: 6px; }

/* ---- controls ---- */
.lvc-fs-controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.lvc-fs-states { display: inline-flex; gap: 7px; flex-wrap: wrap; }
.lvc-fs-btn {
    appearance: none; cursor: pointer;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    background: var(--surface-strong, #fff); color: var(--text, #111318);
    font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lvc-fs-btn:hover:not(:disabled) { border-color: var(--accent, #0a84ff); color: var(--accent-strong, #0066cc); }
.lvc-fs-btn.is-on { background: var(--accent, #0a84ff); border-color: var(--accent, #0a84ff); color: #fff; }
.lvc-fs-btn:disabled { opacity: 0.45; cursor: default; }
.lvc-fs-compare {
    appearance: none; cursor: pointer;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    background: var(--surface-strong, #fff); color: var(--muted-strong, #475467);
    font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.lvc-fs-compare:hover { border-color: var(--accent, #0a84ff); }
.lvc-fs-compare.is-on { background: var(--text, #111318); border-color: var(--text, #111318); color: #fff; }

/* ---- plot ---- */
.lvc-fs-stage {
    border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
    border-radius: var(--radius-sm, 14px);
    background: var(--surface-strong, rgba(255, 255, 255, 0.92));
    padding: 8px 10px;
}
/* wide/short viewBox + capped width keeps the chart from eating the page */
.lvc-fs-svg { width: 100%; max-width: 660px; height: auto; display: block; margin: 0 auto; }

.lvc-fs-grid { stroke: rgba(15, 23, 42, 0.07); stroke-width: 1; }
.lvc-fs-axnum { fill: var(--muted, #667085); font-size: 10px; font-weight: 600; }
.lvc-fs-axtitle { fill: var(--muted-strong, #475467); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; }

.lvc-fs-curve { fill: none; stroke: #1d2433; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lvc-fs-ghost { fill: none; stroke: rgba(15, 23, 42, 0.26); stroke-width: 1.4; stroke-dasharray: 4 4; }

/* FVC bracket */
.lvc-fs-fvc-bar, .lvc-fs-fvc-cap { stroke: #0e9488; stroke-width: 1.6; }
.lvc-fs-fvc-label { fill: #0e9488; font-size: 10.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.lvc-fs-fvc-val { fill: var(--text, #111318); font-size: 10px; font-weight: 700; }

/* FEV1 marker at t = 1 s (name over value, sitting to the right of the line) */
.lvc-fs-fev-line { stroke: rgba(15, 23, 42, 0.28); stroke-width: 1; stroke-dasharray: 3 3; }
.lvc-fs-fev-bar { stroke: var(--accent-strong, #0066cc); stroke-width: 2; }
.lvc-fs-fev-cap { stroke: var(--accent-strong, #0066cc); stroke-width: 1.6; }
.lvc-fs-fev-name { fill: var(--accent-strong, #0066cc); font-size: 10.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.lvc-fs-fev-val { fill: var(--accent-strong, #0066cc); font-size: 10px; font-weight: 700; }

/* compare-all-three overlay (hidden in single mode) */
.lvc-fs-cmp { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lvc-fs-compare-layer { display: none; }
.lvc-fs.is-comparing .lvc-fs-compare-layer { display: block; }
.lvc-fs.is-comparing .lvc-fs-curve,
.lvc-fs.is-comparing .lvc-fs-ghost,
.lvc-fs.is-comparing .lvc-fs-fvc,
.lvc-fs.is-comparing .lvc-fs-fev { display: none; }

/* ---- FEV1/FVC money display ---- */
.lvc-fs-ratio { margin-top: 12px; }
.lvc-fs-ratio-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lvc-fs-ratio-name { font-size: 13px; font-weight: 800; color: var(--text, #111318); }
.lvc-fs-ratio-pct { font-size: 22px; font-weight: 800; line-height: 1; }
.lvc-fs-ratio-pct.is-ok { color: #1f8f43; }
.lvc-fs-ratio-pct.is-no { color: var(--danger, #ff453a); }
.lvc-fs-ratio-flag { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.02em; }
.lvc-fs-ratio-flag.is-ok { background: rgba(52, 199, 89, 0.14); color: #1f8f43; }
.lvc-fs-ratio-flag.is-no { background: rgba(255, 69, 58, 0.14); color: var(--danger, #ff453a); }

.lvc-fs-gauge {
    position: relative; height: 10px; margin-top: 9px; border-radius: 999px;
    background: rgba(15, 23, 42, 0.08); overflow: visible;
}
.lvc-fs-gauge-fill { height: 100%; border-radius: 999px; transition: width 0.2s ease, background 0.2s ease; }
.lvc-fs-gauge-fill.is-ok { background: #34c759; }
.lvc-fs-gauge-fill.is-no { background: var(--danger, #ff453a); }
.lvc-fs-gauge-thresh { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed rgba(15, 23, 42, 0.55); }
.lvc-fs-gauge-thresh span {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 800; color: var(--muted-strong, #475467); white-space: nowrap;
}

/* ---- readout (shared .spg-readout box) ---- */
.lvc-fs-readout { margin-top: 14px; }
.lvc-fs-vals { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 6px; }
.lvc-fs-val { font-size: 13px; color: var(--text, #111318); }
.lvc-fs-val b { font-weight: 800; }
.lvc-fs-verdict { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text, #111318); }
.lvc-fs-verdict strong { font-weight: 800; }
.lvc-fs-slope { margin: 8px 2px 0; font-size: 11.5px; font-weight: 600; color: var(--muted-strong, #475467); }

/* compare legend */
.lvc-fs-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.lvc-fs-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--text, #111318); }
.lvc-fs-leg-dot { width: 12px; height: 3px; border-radius: 2px; }

/* ============================================================
   Card 3 — four-measurement reference cards. Reuses the Foundations
   .lvc-vtable/.lvc-vrow structure; adds a "money" star modifier for
   the FEV1/FVC row.
   ============================================================ */
.rar-topic-content .lvc-vrow--star {
    border-color: rgba(255, 159, 10, 0.55);
    background: rgba(255, 159, 10, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.3);
}
.rar-topic-content .lvc-vstar {
    display: inline-block; margin-left: 5px; color: #d98500; font-size: 12px; vertical-align: 1px;
}
.rar-topic-content .lvc-vflag {
    display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800;
    color: var(--danger, #ff453a);
}

/* ============================================================
   Card 4 — obstructive/restrictive matrix. Reuses .lvc-det-matrix*
   (from lvc-determinants.css); emphasizes the FEV1/FVC splitter
   column and carries the mental-hook rows (no icons).
   ============================================================ */
.rar-topic-content .lvc-fs-matrix td,
.rar-topic-content .lvc-fs-matrix th { text-align: center; }
/* column headers a few ticks larger than the shared default */
.rar-topic-content .lvc-fs-matrix thead th { font-size: 14px; }
/* row-title (pattern) column: stronger, color-keyed to the mental hooks */
.rar-topic-content .lvc-fs-matrix th[scope="row"] {
    text-align: left; font-weight: 800; font-size: 14.5px;
    border-left: 3px solid transparent; padding-left: 9px;
}
.rar-topic-content .lvc-fs-matrix .row-norm { color: var(--text, #111318); border-left-color: #8e8e93; }
.rar-topic-content .lvc-fs-matrix .row-obs  { color: #d1541f; border-left-color: #d1541f; }
.rar-topic-content .lvc-fs-matrix .row-res  { color: #2f6fd0; border-left-color: #2f6fd0; }

.rar-topic-content .lvc-fs-matrix .is-splitter {
    background: rgba(255, 159, 10, 0.12);
    box-shadow: inset 1px 0 0 rgba(255, 159, 10, 0.5), inset -1px 0 0 rgba(255, 159, 10, 0.5);
    font-weight: 800;
}
.rar-topic-content .lvc-fs-matrix .cell-low { color: var(--danger, #ff453a); font-weight: 800; }
.rar-topic-content .lvc-fs-matrix .cell-norm { color: var(--muted-strong, #475467); font-weight: 600; }
/* highlight the key threshold numbers so the eye lands on them */
.rar-topic-content .lvc-fs-matrix .num {
    display: inline-block; padding: 1px 6px; border-radius: 6px;
    background: #fff; box-shadow: inset 0 0 0 1px rgba(217, 133, 0, 0.45);
    font-weight: 800; color: var(--text, #111318);
}
.rar-topic-content .lvc-fs-matrix .num.num-low { color: var(--danger, #ff453a); box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.45); }

/* Card 3 value column — give the numbers a soft pill so they read as data */
.rar-topic-content .lvc-fs-measures .lvc-vval {
    background: rgba(15, 23, 42, 0.05); border-radius: 999px; padding: 2px 10px;
}
.rar-topic-content .lvc-fs-measures .lvc-vrow--star .lvc-vval {
    background: rgba(255, 159, 10, 0.16); color: #a35e00;
}

/* "why is this highlighted?" caption under the starred row / boxed column */
.rar-topic-content .lvc-fs-why {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 10px 13px;
    border: 1px solid rgba(255, 159, 10, 0.45);
    border-radius: var(--radius-sm, 12px);
    background: rgba(255, 159, 10, 0.09);
    font-size: 12.5px; line-height: 1.5; color: var(--text, #111318);
}
.rar-topic-content .lvc-fs-why strong { font-weight: 800; }
.rar-topic-content .lvc-fs-why .lvc-fs-why-star { color: #d98500; font-size: 14px; line-height: 1.3; flex-shrink: 0; }

.rar-topic-content .lvc-fs-hooks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.rar-topic-content .lvc-fs-hook {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
    border-radius: var(--radius-sm, 12px); background: var(--surface-soft, rgba(255, 255, 255, 0.58));
    font-size: 12.5px; line-height: 1.45; color: var(--text, #111318);
}
/* matched static disease icons (both same size so they read as a pair) */
.rar-topic-content .lvc-fs-hook-icon {
    width: 46px; height: 46px; flex-shrink: 0; object-fit: contain;
}
.rar-topic-content .lvc-fs-hook strong { font-weight: 800; }
.rar-topic-content .lvc-fs-hook--obs { border-left: 3px solid #d1541f; }
.rar-topic-content .lvc-fs-hook--res { border-left: 3px solid #2f6fd0; }

/* hy-callout: widen the tag column and let each pill hug its label so the
   longer tags ("Counterintuitive", "Earliest marker") sit inside the bubble.
   Scoped to this page's callout so shared usages are untouched. */
.rar-topic-content .lvc-fs-callout .hy-callout__item { grid-template-columns: 130px minmax(0, 1fr); }
.rar-topic-content .lvc-fs-callout .hy-tag {
    width: max-content; max-width: 100%; justify-self: start;
    font-size: 9.5px; letter-spacing: 0.02em; padding: 3px 9px;
}

@media (max-width: 560px) {
    .rar-topic-content .lvc-fs-hooks { grid-template-columns: 1fr; }
    .lvc-fs-controls { flex-direction: column; align-items: stretch; }
    .lvc-fs-compare { width: 100%; }
    .rar-topic-content .lvc-fs-callout .hy-callout__item { grid-template-columns: 1fr; }
}