/* Shared reflow rules; tables retain independent, keyboard-focusable scrolling. */
:focus-visible { outline:2px solid #38bdf8; outline-offset:3px; }
[hidden] { display:none !important; }
main, .main, .content, .card, .afield, .stat, .lab-card, fieldset { min-width:0; }
/* break-word, not anywhere: a name may only split when it cannot fit whole —
   `anywhere` let tight columns shrink to one letter per line. */
main { overflow-wrap:break-word; }
input, select, textarea { max-width:100%; min-width:0; }
input, select, textarea, button { font-size:inherit; }
fieldset { border:1px solid var(--border,#526079); border-radius:10px; padding:16px; }
legend { font-weight:700; padding:0 6px; }
[data-guided-build] > fieldset { grid-column:1/-1; width:100%; display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-guided-build] legend, [data-review] { grid-column:1/-1; }
.build-progress { display:flex; flex-wrap:wrap; gap:8px; grid-column:1/-1; }
.build-progress button { width:auto; margin:0; }
.build-progress [aria-current="step"] { outline:2px solid var(--accent,#38bdf8); }
.build-actions { display:flex; flex-wrap:wrap; gap:12px; grid-column:1/-1; }
.build-actions button { width:auto; }
[data-review] dl { display:grid; grid-template-columns:minmax(5rem,1fr) minmax(0,2fr); gap:8px; }
[data-review] dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.table-scroll { max-width:100%; overflow:auto; }
.field-error { color:var(--down,#fca5a5); font-size:.9em; }
@media (max-width:800px) {
  .topbar, .card h2, .page-head, .acct-head, .lab-card, .filterbar { flex-wrap:wrap; height:auto; }
  .filterbar { position:relative; }
  .filterbar > label, .filterbar select, .filterbar input { min-width:0; max-width:100%; }
  .lab-duo, .acct-split, .ruin-row, [data-guided-build] > fieldset { grid-template-columns:minmax(0,1fr); }
  .lab-panel { height:auto; min-height:0; }
  #lab-shelf { max-height:60vh; }
  #lab-stats .value, .badge, .pill, h1, h2 { white-space:normal; overflow-wrap:break-word; }
  .pf-row { grid-template-columns:minmax(0,1fr) auto; }
  .build-actions { position:sticky; bottom:0; background:var(--panel,#101b31); padding:12px; z-index:5; }
  .aform, .stats, .statgrid { min-width:0; }
}
@media (max-width:430px) {
  .content { padding:16px 12px; }
  .card { padding:16px; }
  .aform { grid-template-columns:minmax(0,1fr); }
  .lab-card > * { max-width:100%; }
}
/* Filter groups use borderless role="group" containers in the templates. */
.filterbar, .filters { min-width:0; }
.filter-form { margin-bottom:16px; }
@media (max-width:800px) {
  .filters, .filters .f-range { display:flex; flex-wrap:wrap; }
  .filters > *, .filters .f-range > * { min-width:0; max-width:100%; }
  .filterbar { gap:12px; }
}
@media (max-width:800px) {
  .filterbar:focus-within { scroll-margin-top:80px; }
}
/* Reflow also applies when only text is enlarged, without media-query changes. */
button, .btn { max-width:100%; white-space:normal; overflow-wrap:break-word; }
.filters, .filters .f-range { flex-wrap:wrap; min-width:0; }
.filters > *, .filters .f-range > * { min-width:0; max-width:100%; }
.filterbar > label { min-width:0; max-width:100%; flex-wrap:wrap; }
.filterbar select { min-width:0; max-width:100%; }
.aform > *, .card h2 > *, .lab-actions > * { min-width:0; max-width:100%; }
.card h2, .topbar { flex-wrap:wrap; }
.nav, .nav-links { flex-wrap:wrap; }
.nav-links { min-width:0; }
.nav a { white-space:normal; overflow-wrap:break-word; }
.hero .beam, .hero .aura { max-width:100%; }