/* ===== page-wide layout override =====
   This page wants the data table to use the full viewport width, while the
   prose sections (intro, columns, summaries) stay at the comfortable reading
   width.  body padding and main's max-width are removed; main gets the full
   width and we re-pad main instead. */
body.viz { padding: 0; }
body.viz main { max-width: none; padding: 2.5rem 1.5rem 3rem; }
body.viz main > h1,
body.viz main > h2,
body.viz main > p.crumbs,
body.viz main > p.sub { max-width: 60rem; }
body.viz main > .meta-row { max-width: 60rem; }
body.viz .card { max-width: none; }
body.viz .table-wrap { max-width: none; }

.col-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem; }
.col-card {
  border: 1px solid #1d2a39;
  background: #0a1726aa;
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
}
.col-card .cname { color: #d8e4ee; font-weight: 500; word-break: break-all; }
.col-card .ctype { color: #7dd3fc; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem; }
.col-card .cstats { color: #9fb3c5; font-size: 0.75rem; margin-top: 0.25rem; }
.col-card.numeric { border-color: #1e3a8a66; }
.col-card.numeric .ctype { color: #93c5fd; }

.table-controls {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-bottom: 0.6rem; font-size: 0.85rem; color: #9fb3c5;
}
.table-controls input, .table-controls select {
  background: #0a1726; color: #d8e4ee; border: 1px solid #1d2a39;
  border-radius: 0.4rem; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.85rem;
}
.table-controls input { min-width: 16rem; }
.table-controls .status { margin-left: auto; }

.table-wrap { max-height: 80vh; overflow: auto; border: 1px solid #1d2a39; border-radius: 0.5rem; }
table#data { border-collapse: collapse; width: 100%; font-size: 0.82rem; font-family: ui-monospace, monospace; }
table#data th, table#data td { padding: 0.35rem 0.55rem; border-bottom: 1px solid #1d2a3955; white-space: nowrap; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
table#data th { position: sticky; top: 0; background: #0a1726; color: #7dd3fc; cursor: pointer; user-select: none; text-align: left; }
table#data th .sort { color: #6b8298; margin-left: 0.25rem; font-size: 0.7rem; }
table#data th.sorted .sort { color: #6ee7b7; }
table#data td.num { text-align: right; color: #d8e4ee; }
table#data tr:hover td { background: #0d1f30; }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 0.6rem; font-size: 0.85rem; color: #9fb3c5; }
.pager button { background: #0a1726; color: #d8e4ee; border: 1px solid #1d2a39; border-radius: 0.4rem; padding: 0.3rem 0.7rem; cursor: pointer; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

.dist-card { margin: 0.6rem 0; }
.dist-card .dist-bar { font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.55; color: #d8e4ee; }
.dist-card .dist-bar .lbl { display: inline-block; width: 10ch; color: #7dd3fc; }
.dist-card .dist-bar .bar { color: #6ee7b7; }
.dist-card .dist-bar .val { color: #9fb3c5; margin-left: 0.5rem; }
.dist-empty { color: #6b8298; font-style: italic; font-size: 0.85rem; }

#title .fname { color: #7dd3fc; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 0.8rem; }
.chart-card { display: flex; flex-direction: column; }
.chart-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.chart-head .ctype { color: #7dd3fc; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.chart-kinds { margin-left: auto; display: inline-flex; gap: 0.25rem; }
.kind-btn {
  background: #0a1726; color: #9fb3c5; border: 1px solid #1d2a39;
  border-radius: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.7rem; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit;
}
.kind-btn:hover { color: #d8e4ee; border-color: #2d3a49; }
.kind-btn.active { color: #061a2b; background: #7dd3fc; border-color: #7dd3fc; }