/* Record explorer (home page): family switch, atlas of problems, specimen viewer, record table, charts. */
.fams { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.fam { font: 600 14px/1 var(--f-body); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline }
.fam .k { font-weight: 400; color: var(--muted); font-size: 12.5px }
.fam[aria-selected="true"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent) }
.atlas { display: grid; gap: 14px }
.atlas h2 { font: 600 17px/1.2 var(--f-display); margin: 4px 0 0; color: var(--muted) }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 8px }
.tile { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 10px 6px 6px; border: 1px solid var(--rule); border-radius: 9px; background: var(--sheet); color: var(--ink); text-align: left; cursor: pointer; font: 13px/1.3 var(--f-body); min-width: 0 }
.tile canvas { width: 64px; height: 64px; display: block }
.tile .t { font-weight: 500; overflow-wrap: anywhere }
.tile .m { color: var(--muted); font-size: 12px; margin-top: 2px }
.tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)) }
.tile[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--sheet)) }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px }
.record-page { max-width: none }
tbody tr { cursor: pointer }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent) }
tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--accent) 13%, transparent) }
td.n { color: var(--muted) }
td.s { font-weight: 600 }
td.cf { font-family: var(--f-display); font-size: 16px; color: var(--exact) }
td.mut { color: var(--muted) }
td.pending { color: var(--muted); font-style: italic }
.litline { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline }
.litline b { color: var(--ink); font-weight: 500 }
.viewer { container-type: inline-size; display: grid; grid-template-columns: min(90svh, calc(100% - 360px)) minmax(0, 1fr); align-items: start; overflow: hidden }
.stage { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; min-width: 0; touch-action: none; cursor: grab }
.stage:active { cursor: grabbing }
.stage canvas { width: 100%; height: 100%; display: block; border-radius: 10px 0 0 10px }
.hint { position: absolute; left: 12px; bottom: 10px; right: 12px; font: 12px/1.3 var(--f-body); color: var(--muted); pointer-events: none }
.views { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px }
.caption { padding: 16px 18px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; min-height: 0; height: min(90svh, calc(100cqw - 360px)); overflow: auto; border-left: 1px solid var(--rule); scrollbar-gutter: stable }
.caption .capcol { display: grid; gap: 12px; min-width: 0 }
.caption .big { font: 600 22px/1.2 var(--f-display); overflow-wrap: anywhere }
.caption .big .cf { color: var(--exact); font-weight: 400; font-style: italic }
.stepper { display: flex; gap: 6px; align-items: center }
.stepper .nnow { font: 500 13px/1 var(--f-body); color: var(--muted); min-width: 4.5em; text-align: center }
.meta { font: 12px/1.5 var(--f-mono); color: var(--muted); margin: 0; overflow-wrap: anywhere; white-space: pre-wrap }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; font-size: 13px; margin: 0 }
.facts dt { color: var(--muted) } .facts dd { margin: 0; overflow-wrap: anywhere }
.tools { display: grid; gap: 10px; font-size: 13px; color: var(--muted) }
.trow { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center }
.trow .lab { font: 500 12.5px/1 var(--f-body); color: var(--ink); min-width: 52px }
label.inl { display: inline-flex; gap: 6px; align-items: center }
input[type=range] { accent-color: var(--accent); width: 140px; max-width: 40vw }
input[type=checkbox] { accent-color: var(--accent) }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px }
.legend span { display: inline-flex; gap: 5px; align-items: center }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block }
.pick { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px }
.pick b { font-weight: 600; color: var(--ink) }
.links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; align-items: center }
.charts { display: grid; gap: 24px }
.records-panel, .charts > .panel { height: 90vh; height: 90svh; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden }
.records-body { display: grid; grid-template-columns: minmax(0, 1fr) 28px; min-height: 0; padding-right: 4px }
.record-table-scroll { min-height: 0; overflow: auto; scrollbar-gutter: stable; scrollbar-color: var(--muted) var(--chipbg) }
.table-slider { min-height: 0; padding: 10px 2px; display: flex; justify-content: center }
#table-scroll { writing-mode: vertical-lr; direction: ltr; width: 22px; height: 100%; max-width: none; margin: 0 }
.edge-controls output { color: var(--ink); font-variant-numeric: tabular-nums }
.chart { padding: 6px 12px 12px; min-height: 0; min-width: 0 }
.chartbox { width: 100%; height: 100%; min-height: 0; max-width: 100% }
.chartbox svg { width: 100%; height: 100%; display: block }
.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 28px; border-top: 1px solid var(--rule); padding-top: 22px }
.next div { display: grid; gap: 6px; align-content: start }
.next h3 { font: 600 18px/1.25 var(--f-display); margin: 0 }
.next h3 a { color: var(--ink); text-decoration-color: var(--accent) }
.next p { margin: 0; color: var(--muted); font-size: 14px; max-width: 60ch }
@media (max-width: 760px) {
  .viewer { grid-template-columns: minmax(0, 1fr) }
  .stage canvas { border-radius: 10px 10px 0 0 }
  .caption { height: auto; border-left: 0; border-top: 1px solid var(--rule); overflow: visible }
  .views { flex-wrap: wrap; max-width: calc(100% - 20px) }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
  .tile { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px }
  .tile canvas { width: 44px; height: 44px }
  .tile .t { font-size: 12.5px }
}