/* Science page */

.two-col { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.table-wrap { overflow-x: auto; margin: 1.5rem 0 .75rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font: 650 .75rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
tbody th { font-weight: 600; }
td.warn { color: var(--warn); font-weight: 600; }
.ratio-table td:nth-child(n+2):nth-child(-n+4) { font-family: var(--mono); font-size: .95rem; }
table.mini { font-size: .92rem; }
table.mini caption { text-align: left; font-size: .85rem; color: var(--ink-3); margin-bottom: .3rem; }
td .btn-sm { min-height: 2rem; padding: .2rem .7rem; font-size: .85rem; }
td .btn-row { flex-wrap: nowrap; gap: .4rem; }

.beat-viz { background: var(--surface-2); border-radius: var(--r-sm); height: 5rem; margin: 1rem 0; overflow: hidden; }
.beat-viz svg { width: 100%; height: 100%; display: block; }
.beat-viz path { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

.spiral-box { background: var(--surface-2); border-radius: var(--r-sm); padding: .5rem; }
#sp-svg { display: block; width: 100%; max-height: 22rem; }
#sp-svg .ring { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 4; }
#sp-svg .arm { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
#sp-svg .pt { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
#sp-svg .pt.start { fill: var(--ink); stroke: var(--ink); }
#sp-svg text { fill: var(--ink-2); font: 600 11px var(--sans); text-anchor: middle; dominant-baseline: middle; }
#sp-svg .gap { stroke: var(--bad); stroke-width: 3; }
#sp-svg .gap-label { fill: var(--bad); font-size: 12px; }

.formula { display: flex; align-items: center; gap: .5rem; font: italic 600 clamp(1.6rem, 4vw, 2.2rem)/1 var(--serif); margin: 1rem 0 1.5rem; color: var(--accent); }
.frac { display: inline-grid; text-align: center; font-size: .8em; }
.frac > :first-child { border-bottom: 2px solid currentColor; padding: 0 .2em .1em; }
.frac > :last-child { padding-top: .1em; }
.physics { margin-top: 1.5rem; }
.physics .card p { color: var(--ink-2); }
.big-tension { font: 700 2rem/1.1 var(--mono); color: var(--accent); margin: .5rem 0; }
.big-tension span { font-variant-numeric: tabular-nums; }