/* Tokens, body, header and footer come from the site stylesheet (assets/site.css). */
.warn-text { color: var(--warn); }
.ok { color: var(--ok); font-size: 12px; }

.upload { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.upload button { background: var(--accent); color: #fff; border-color: transparent; }
/* File picker styled as a button; choosing a file submits the form. */
.pick { position: relative; display: inline-block; cursor: pointer; padding: 5px 12px; border-radius: 6px; background: var(--accent); color: #fff; }
.pick input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.export { margin-left: auto; }
.export + .upload { margin-left: 0; }

.intro h1 { font-size: 22px; margin: 0 0 12px; }

/* Drop zone styles live in the site stylesheet. */

.paths { margin: 8px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; }

.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; padding: 16px; }
.toc {
  position: sticky; top: calc(var(--top-h, 45px) + 16px); align-self: start;
  max-height: calc(100vh - var(--top-h, 45px) - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px;
}
.toc input[type="search"] { width: 100%; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.toc-actions { display: flex; gap: 6px; margin: 8px 0; }
.toc-actions button { flex: 1; padding: 3px 6px; font-size: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li a { display: block; padding: 3px 6px; border-radius: 4px; text-decoration: none; color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.toc li a:hover { background: var(--head); }
.toc li a { padding: 4px 6px; }
.toc-key { display: block; }
.toc-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 1px;
}
.toc li.hidden { display: none; }
.zero-toggle { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin: 8px 0; cursor: pointer; }
.zero-toggle + .zero-toggle { margin-top: -4px; }

/* Caveat next to the Readable view checkbox. */
.readable-warn { color: var(--warn); }

/* Field names: readable form by default, raw JSON key when "Readable field names" is off. */
.k-r { display: none; }
.k-h { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.raw-keys .k-h { display: none; }
body.raw-keys .k-r { display: inline; }

/* Coded values ("I") shown as their label from the description ("Individual"). */
.v-r { display: none; }
.dec { border-bottom: 1px dotted var(--muted); cursor: help; }
body.raw-values .v-h { display: none; }
body.raw-values .v-r { display: inline; }
body.raw-values .dec { border-bottom: 0; cursor: auto; }

/* Thousands grouping (10,000,000), off when "Comma-separate numbers" is unticked. */
.n-r { display: none; }
body.raw-numbers .n-h { display: none; }
body.raw-numbers .n-r { display: inline; }

/* Zero values: rendered and verified, hidden unless "Show zero values" is ticked. */
body:not(.show-zero) .zero { display: none; }


.summary { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.summary h1 { font-size: 18px; margin: 0 0 4px; overflow-wrap: anywhere; }
.crumbs { margin: 0 0 10px; font-family: var(--mono); font-size: 13px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; }

.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; scroll-margin-top: 64px; }
.sec > details > summary {
  cursor: pointer; padding: 10px 14px; list-style-position: inside;
  border-bottom: 1px solid transparent;
}
.sec > details[open] > summary { border-bottom-color: var(--line); }
.sec-key { font-weight: 650; font-family: var(--mono); }
.sec-desc { display: block; color: var(--muted); font-size: 13px; margin: 2px 0 0 18px; }

.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 5px 10px; border-bottom: 1px solid var(--line); }
thead th { background: var(--head); font-size: 12px; font-weight: 600; color: var(--muted); position: sticky; top: 0; }
table.kv { table-layout: fixed; }
table.kv th.f, table.kv td.f { width: 30%; }
table.kv th.v, table.kv td.v { width: 25%; }
td.f { padding-left: calc(10px + var(--depth, 0) * 18px); font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
td.d { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.tip {
  all: unset; cursor: pointer; display: inline-block;
  padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--accent); font-size: 12px; white-space: nowrap;
}
.tip:hover { background: var(--head); }
.tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tip-pop { cursor: pointer; }
.tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tip-pop {
  margin: 0; inset: auto; position: fixed;
  width: min(560px, calc(100vw - 32px)); max-height: min(420px, 70vh); overflow: auto;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.5;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
td.v { overflow-wrap: anywhere; }
tr.grp > td { background: var(--grp); }
tr.grp .key { font-weight: 650; }
td.meta { color: var(--muted); font-size: 12px; }
.idx { color: var(--muted); }
tr.grid-row > td { padding-left: calc(10px + var(--depth, 0) * 18px); background: var(--grp); }

.s { white-space: pre-wrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.bool { font-family: var(--mono); color: var(--accent); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.chips li { background: var(--head); border-radius: 4px; padding: 0 6px; }

table.grid { width: auto; min-width: 100%; background: var(--panel); border: 1px solid var(--line); }
table.grid th { vertical-align: bottom; min-width: 110px; max-width: 260px; }
table.grid th .key { font-family: var(--mono); color: var(--text); }
.gdesc { display: block; font-weight: 400; margin-top: 2px; overflow-wrap: anywhere; }
table.grid td, table.grid th { border-right: 1px solid var(--line); }
table.grid .n { width: 1%; color: var(--muted); text-align: right; min-width: 0; }
td.absent { background: repeating-linear-gradient(45deg, transparent 0 6px, var(--head) 6px 7px); }

.badge { font-family: system-ui, sans-serif; font-size: 11px; padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }

tr.hidden, .sec.hidden { display: none; }
tr.match > td { box-shadow: inset 3px 0 0 var(--accent); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: 12px; }
  .toc { position: static; max-height: 260px; }
  table.kv th.f, table.kv td.f, table.kv th.v, table.kv td.v { width: auto; }
}
/* Column descriptions for grids: shown in the headers on screen, as a legend under the table in print. */
.grid-legend { display: none; }

@media print {
  /* Landscape throughout: wide grids (e.g. Schedule 112A) need the width, and every page matches. */
  @page { size: A4 landscape; margin: 10mm; }

  body { background: #fff; font-size: 9.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top, .toc, .foot, .tip { display: none !important; }
  .layout { display: block; padding: 0; }
  .summary, .sec { border: 0; border-radius: 0; margin-bottom: 10px; box-shadow: none; }
  .sec > details > summary { padding: 6px 0; list-style: none; break-after: avoid; }
  .sec-key { font-size: 12pt; }
  .sec-desc { font-size: 9pt; margin-left: 0; }
  .sec > details > summary::-webkit-details-marker { display: none; }
  .tbl-wrap { overflow: visible; }
  thead { display: table-header-group; } /* repeat column headings on each page */
  thead th { position: static; font-size: 8.5pt; }
  tr { break-inside: avoid; }
  tr.grid-row { break-inside: auto; } /* a whole grid sits in this one row; let it split across pages */
  th, td { padding: 3px 6px; }
  td.f, td.d, td.v { font-size: 9pt; }

  /* Break text at word boundaries only, and never inside a number or code. */
  td.f, td.d, td.v, .gdesc { overflow-wrap: break-word; }
  .num, td.n { white-space: nowrap; }

  table.grid { width: 100%; min-width: 0; font-size: 8.5pt; }
  table.grid th { min-width: 0; max-width: none; }
  table.grid td.v { font-size: 8.5pt; }
  table.grid .gdesc { display: none; }
  .grid-legend { display: block; columns: 2; column-gap: 20px; margin: 6px 0 4px; font-size: 8pt; color: var(--muted); }
  .grid-legend div { break-inside: avoid; margin-bottom: 3px; }
  .grid-legend dt { display: inline; font-weight: 600; color: var(--text); }
  .grid-legend dt::after { content: " — "; font-weight: 400; color: var(--muted); }
  .grid-legend dd { display: inline; margin: 0; }

  a { color: inherit; text-decoration: none; }
}