/* ========================================================================
   reference-figures.css — References page: SFUT conversion ladder and the
   TIDR concept diagrams (EAD, deliberately SITE-SPECIFIC one-off per owner
   ruling 2026-08-29; do NOT port framework-wide).
   Theme-token driven throughout, same doctrine as solar-map.css. The SVG
   diagrams are styled entirely from these classes; the markup carries no
   inline styles. Pairs with private/pages/references.php.
   ======================================================================== */

/* ---------- figure chrome ---------- */

.reffig { margin: var(--spacing-md, 1rem) 0 1.6rem; }

.reffig__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
}
.reffig__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-on-dark);
}
.reffig__badge {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding: 0.12rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--accent-orange) 55%, transparent);
    border-radius: 999px;
    color: var(--accent-orange);
}

.reffig__stage {
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, var(--surface-base), var(--bg-base));
}
.reffig__stage svg { display: block; width: 100%; height: auto; }

.reffig__note {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--text-on-dark-secondary);
}

/* ---------- shared SVG vocabulary ---------- */

.fx-t        { fill: var(--text-on-dark); font-size: 14px; }
.fx-t--dim   { fill: var(--text-on-dark-secondary); font-size: 12.5px; }
.fx-t--small { fill: var(--text-on-dark-secondary); font-size: 11px; }
.fx-t--accent{ fill: var(--accent-yellow); font-size: 13px; font-weight: 600; }
.fx-t--onmass{ fill: var(--accent-yellow-text); font-size: 13px; font-weight: 600; }

.fx-grid      { stroke: color-mix(in srgb, var(--accent-blue) 20%, transparent); stroke-width: 1; fill: none; }
.fx-grid--pull{ stroke: color-mix(in srgb, var(--accent-blue) 50%, transparent); stroke-width: 1.2; fill: none; }
.fx-ring      { fill: none; stroke: color-mix(in srgb, var(--accent-blue) 38%, transparent); }
.fx-void      { fill: var(--bg-base); }

.fx-mass      { fill: var(--accent-yellow); }
.fx-mass-glow { fill: color-mix(in srgb, var(--accent-yellow) 22%, transparent); }

.fx-traj  { stroke: var(--primary-bright); stroke-width: 2.5; fill: none; }
.fx-traj--ghost { stroke: color-mix(in srgb, var(--primary-bright) 35%, transparent); stroke-width: 1.8; stroke-dasharray: 6 5; fill: none; }
.fx-traj--thin { stroke: var(--primary-bright); stroke-width: 1.6; fill: none; }
.fx-arrowhead { fill: var(--primary-bright); }
.fx-arrowhead--dim { fill: var(--text-on-dark-secondary); }
.fx-arrowhead--ray { fill: var(--accent-yellow); }
.fx-lead  { stroke: var(--text-on-dark-secondary); stroke-width: 1; fill: none; }

.fx-wave       { stroke: var(--text-on-dark); stroke-width: 2.2; stroke-linecap: round; }
.fx-wave--slow { stroke: var(--accent-orange); }

.fx-rain      { stroke: color-mix(in srgb, var(--accent-blue) 55%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.fx-rain--hit { stroke: var(--accent-yellow); stroke-width: 2; stroke-linecap: round; }
.fx-swath     { fill: color-mix(in srgb, var(--accent-yellow) 12%, transparent); stroke: color-mix(in srgb, var(--accent-yellow) 35%, transparent); stroke-dasharray: 5 4; }

.fx-body { stroke: var(--text-on-dark); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.fx-head { fill: var(--text-on-dark); }

.fx-lip   { stroke: var(--accent-yellow); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.fx-slit  { fill: var(--bg-base); stroke: var(--accent-yellow); stroke-width: 1.4; }
.fx-join  { stroke: color-mix(in srgb, var(--accent-yellow) 45%, transparent); stroke-width: 1.4; stroke-dasharray: 3 6; fill: none; }

.fx-inf   { stroke: color-mix(in srgb, var(--accent-purple) 50%, transparent); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.fx-matter    { fill: color-mix(in srgb, var(--accent-blue) 14%, transparent); }
.fx-antimatter{ fill: color-mix(in srgb, var(--accent-red) 12%, transparent); }
.fx-part  { fill: var(--accent-blue); }
.fx-anti  { fill: none; stroke: var(--accent-red); stroke-width: 1.6; }
.fx-seam  { stroke: var(--accent-yellow); stroke-width: 3; stroke-linecap: round; }
.fx-seam-glow { stroke: color-mix(in srgb, var(--accent-yellow) 25%, transparent); stroke-width: 9; stroke-linecap: round; }
.fx-rim   { fill: none; stroke: color-mix(in srgb, var(--accent-green) 65%, transparent); stroke-width: 2; }
.fx-rim--old { fill: none; stroke: color-mix(in srgb, var(--accent-green) 30%, transparent); stroke-width: 1.2; stroke-dasharray: 5 5; }
.fx-front { stroke: var(--accent-green); stroke-width: 2; stroke-linecap: round; }
.fx-fronthead { fill: var(--accent-green); }

.fx-panel { fill: color-mix(in srgb, var(--surface-base) 60%, transparent); stroke: var(--border); }
.fx-dust  { fill: color-mix(in srgb, var(--accent-blue) 65%, transparent); }
.fx-orbit { fill: none; stroke: color-mix(in srgb, var(--text-on-dark) 40%, transparent); stroke-width: 1.2; stroke-dasharray: 4 4; }

/* medium-bridge time-rate strip */
.fx-tb-1 { fill: color-mix(in srgb, var(--accent-blue) 25%, transparent); }
.fx-tb-2 { fill: color-mix(in srgb, var(--accent-blue) 55%, transparent); }
.fx-tb-3 { fill: var(--text-on-dark); }

/* refraction inset */
.fx-water { fill: color-mix(in srgb, var(--accent-blue) 18%, transparent); }
.fx-ray   { stroke: var(--accent-yellow); stroke-width: 2; fill: none; }

/* ---------- SFUT conversion ladder ---------- */

.sfut { display: grid; gap: 0.55rem; margin: var(--spacing-md, 1rem) 0; }

.sfut__row {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.15rem 1rem;
    align-items: center;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--surface-base) 60%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
}
.sfut__unit { font-weight: 700; color: var(--text-on-dark-accent); line-height: 1.2; }
.sfut__role { display: block; font-size: 0.68rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-dark-secondary); }
.sfut__rule { font-size: 0.8rem; color: var(--text-on-dark-secondary); }

.sfut__bars { display: grid; gap: 0.28rem; }
.sfut__barrow { display: flex; align-items: center; gap: 0.55rem; font-size: 0.72rem; color: var(--text-on-dark-secondary); }
.sfut__blabel { flex: 0 0 10.5rem; text-align: right; }
.sfut__btrack { flex: 1; }
.sfut__bar { display: block; height: 0.55rem; border-radius: 0.3rem; background: var(--primary-bright); }
.sfut__bar--earth { background: color-mix(in srgb, var(--text-on-dark-secondary) 55%, transparent); }

/* per-row proportional widths (longer of the pair = 100%) */
.sfut__bar--full  { width: 100%; }
.sfut__bar--day   { width: 86.4%; }  /* 24 h vs a 27.78 h Cycle   */
.sfut__bar--min   { width: 60%; }    /* 60 s vs a 100 s Hundredth */
.sfut__bar--hour  { width: 36%; }    /* 1 h vs a 2.78 h Tenth     */
.sfut__bar--dex   { width: 38%; }    /* 11.57 d Dex vs a 30.4 d month  */
.sfut__bar--week  { width: 23%; }    /* 7 d week on the same month=100% scale */
.sfut__bar--syear { width: 31.7%; }  /* 115.7 d Year vs a 365.25 d year */

@media (max-width: 620px) {
    .sfut__row { grid-template-columns: 1fr; }
    .sfut__blabel { flex-basis: 8.5rem; font-size: 0.66rem; }
}