/* ===========================================================================
   Undercount. - municipal operations styling
   Reference: GOV.UK Design System, Ontario Design System.

   TYPE SCALE. Everything used to sit within 4px of everything else - 24 / 15 /
   14 / 12 - so the page read as one undifferentiated block and the reader had
   nothing to navigate by. The scale below is roughly 1.25 and the steps are
   meant to be obvious at a glance: a title is not a heading, a heading is not
   body, apparatus is not body.

   MEASURE. Prose is capped at 34rem, about 66-68 characters. Running body text
   the full 1440px is the single thing that made this look like a 2000s intranet.
   Tables are data and still run full width; that contrast is the layout.

   Two accents exist and they are not interchangeable:
     --accent  #9a3412  the interface accent. At most two persistent uses per
                        page: the current nav tab, and the one thing on the page
                        that most needs noticing. Everything else that wants
                        emphasis gets weight, size or a rule - never colour.
                        :hover and :focus are transient and do not count.
     --period  #c67139  the identity accent, used ONLY for the full stop in the
                        Undercount. wordmark (per the brand tokens).

   The synthetic-text chip repeats on hundreds of rows, so it is INK on an ink
   border: an accent used 300 times stops being an accent.
   =========================================================================== */

:root {
  --ink:        #1a1a1a;
  --ground:     #f7f6f3;
  --rule:       #d4d0c8;
  --accent:     #9a3412;
  --period:     #c67139;
  --muted:      #5b5751;
  --ground-alt: #efece7;

  --u: 8px;                       /* every margin and padding is a multiple */
  --measure: 34rem;               /* ~66-68 characters at the body size */

  --sans: "Public Sans", -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --brand: "Bricolage Grotesque", var(--sans);

  /* type scale - size / line-height */
  --t-figure:    56px;  --lh-figure:    56px;   /* the three landing numbers */
  --t-stat:      32px;  --lh-stat:      40px;   /* stat-row numerals */
  --t-title:     34px;  --lh-title:     40px;   /* h1 */
  --t-lede:      19px;  --lh-lede:      32px;
  --t-section:   22px;  --lh-section:   32px;   /* h2 */
  --t-eyebrow:   12px;  --lh-eyebrow:   16px;   /* small tracked labels */
  --t-sub:       17px;  --lh-sub:       24px;   /* h3 */
  --t-body:      16px;  --lh-body:      28px;
  --t-small:     14px;  --lh-small:     24px;
  --t-table:     13px;  --lh-table:     20px;
  --t-caption:   13px;  --lh-caption:   20px;
  --t-apparatus: 12px;  --lh-apparatus: 18px;   /* sources, footnotes, footer */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

/* desktop only, 1440px, as specified */
.shell { width: 1440px; margin: 0 auto; padding: 0 64px 128px; }

/* --- header --------------------------------------------------------------
   No hero. A rule, a wordmark, and the navigation.                        */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; padding: 32px 0 16px; border-bottom: 2px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand svg { display: block; height: 32px; width: auto; }
.undercount {
  font-family: var(--brand); font-weight: 700; letter-spacing: -0.035em;
  color: var(--ink); white-space: nowrap; font-size: 28px; line-height: 1;
}
.undercount i { font-style: normal; }
.undercount i:nth-of-type(1) { opacity: .72; }
.undercount i:nth-of-type(2) { opacity: .50; }
.undercount i:nth-of-type(3) { opacity: .30; }
.undercount i:nth-of-type(4) { opacity: .14; }
.undercount b { font-weight: inherit; color: var(--period); font-size: 1.18em; line-height: 0; }

.strap {
  font-size: var(--t-apparatus); line-height: var(--lh-apparatus);
  color: var(--muted); max-width: 42ch; padding-bottom: 0; margin: 0;
}

nav.tabs { display: flex; gap: 0; margin: 0 0 64px; border-bottom: 1px solid var(--rule); }
nav.tabs a {
  display: block; padding: 16px 24px 16px 0; margin-right: 24px;
  text-decoration: none; color: var(--muted);
  font-size: var(--t-small); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
nav.tabs a:hover { color: var(--ink); }
nav.tabs a[aria-current="page"] {
  border-bottom-color: var(--accent); font-weight: 700; color: var(--ink);
}
/* the -1px above is rule alignment, not spacing: it pulls each tab's 2px
   underline down onto the container's 1px border so the two share a line.
   Everything that IS spacing in this file is a multiple of 8. */

/* --- structure: rules and space, never cards -----------------------------
   Sections are separated by a full rule and a lot of air. Previously every
   section ran into the next and the page read as one block.               */
section { margin: 0 0 80px; }
section + section { padding-top: 64px; border-top: 1px solid var(--rule); }

h1 {
  font-size: var(--t-title); line-height: var(--lh-title); font-weight: 700;
  margin: 0 0 24px; letter-spacing: -0.02em; max-width: 28ch;
}
h2 {
  font-size: var(--t-section); line-height: var(--lh-section); font-weight: 700;
  margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid var(--ink);
  letter-spacing: -0.015em; color: var(--ink);
}
h2 > span, h2 { max-width: none; }
section + section > h2:first-child { margin-top: 0; }
h3 {
  font-size: var(--t-sub); line-height: var(--lh-sub); font-weight: 700;
  margin: 48px 0 16px; letter-spacing: -0.01em;
}
p  { margin: 0 0 16px; max-width: var(--measure); }
.lede {
  font-size: var(--t-lede); line-height: var(--lh-lede); max-width: 38rem;
  margin-bottom: 24px; color: var(--ink);
}
.lede-block { margin-bottom: 80px; }

/* apparatus: sources, caveats, footnotes. Smaller and lighter so it reads as
   annotation rather than as body copy. */
.note, .source, caption, footer.foot {
  font-size: var(--t-apparatus); line-height: var(--lh-apparatus);
  color: var(--muted); max-width: 44rem;
}
.note { margin: 0 0 16px; }
.note + .note { margin-top: 8px; }
.source { margin: 8px 0 0; }
.source code, .note code { font-family: var(--mono); font-size: 11px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }

.claim {
  font-size: 21px; line-height: 32px; font-weight: 700; max-width: 36rem;
  margin: 0 0 24px; padding-left: 24px; border-left: 3px solid var(--ink);
  letter-spacing: -0.01em;
}

/* --- landing figures ------------------------------------------------------ */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
.figure { border-top: 2px solid var(--ink); padding-top: 16px; }
.figure-n {
  font-family: var(--mono); font-size: var(--t-figure); line-height: var(--lh-figure);
  font-weight: 600; letter-spacing: -0.03em; margin: 0 0 16px; max-width: none;
}
.figure-u { font-size: 32px; letter-spacing: 0; }
.figure-l {
  font-size: var(--t-small); line-height: var(--lh-small); margin: 0 0 8px;
  max-width: 32ch;
}
.figure-s {
  font-size: var(--t-apparatus); line-height: var(--lh-apparatus);
  color: var(--muted); margin: 0; max-width: 34ch;
}

.nav-list { display: grid; grid-template-columns: 14rem 1fr; gap: 0 32px; margin: 0; max-width: 56rem; }
.nav-list dt { padding: 16px 0 16px; border-top: 1px solid var(--rule); font-weight: 700; }
.nav-list dd { padding: 16px 0 16px; border-top: 1px solid var(--rule); margin: 0;
               font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); }
.nav-list dt a { font-size: var(--t-body); }

/* --- tables: 1px bottom rules, no vertical borders, no zebra, 32px rows --- */
table { border-collapse: collapse; width: 100%; margin: 0 0 8px; font-size: var(--t-table); }
caption {
  caption-side: top; text-align: left; padding: 0 0 16px; max-width: 44rem;
}
th, td {
  height: 32px; padding: 0 24px 0 0; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--rule); font-weight: 400;
  line-height: var(--lh-table);
}
thead th {
  font-size: 11px; line-height: 16px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); border-bottom: 1px solid var(--ink);
  height: 32px; vertical-align: bottom; padding-bottom: 8px;
}
tbody tr:hover { background: var(--ground-alt); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
thead th.num { text-align: right; }
td.mono, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.id { font-family: var(--mono); }
table.tight td, table.tight th { padding-right: 16px; }
tfoot td { border-bottom: none; border-top: 1px solid var(--ink); font-weight: 700; }

/* --- progressive disclosure for the long ward tables ---------------------- */
details.more { margin: 0 0 8px; }
details.more > summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: var(--t-apparatus);
  color: var(--ink); text-decoration: underline; padding: 16px 0 0;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { color: var(--accent); }
details.more[open] > summary { padding-bottom: 16px; }
details.more > summary .more-open { display: inline; }
details.more[open] > summary .more-open { display: none; }
details.more > summary .more-close { display: none; }
details.more[open] > summary .more-close { display: inline; }
.rows-rest { border-top: 1px solid var(--rule); }

/* --- the synthetic-text marker, visible wherever synthetic text appears --- */
.synthetic {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--ink); padding: 0 8px;
  margin-right: 8px; vertical-align: 1px;
}
.synthetic-note {
  font-size: var(--t-small); line-height: var(--lh-small); color: var(--accent);
  border-left: 3px solid var(--accent); padding: 8px 0 8px 24px; margin: 0 0 24px;
  max-width: 40rem;
}

/* --- operations queue ----------------------------------------------------
   Fixed layout, single-line cells, 32px rows. A dense queue is scanned down a
   column, and a wrapping cell destroys that. Anything too long is clipped with
   an ellipsis and carries the full string in a title attribute; the complete
   text is in the expanded panel, so nothing is only available on hover. */
.queue { table-layout: fixed; }
.queue col.c-id     { width:  56px; }
.queue col.c-type   { width: 208px; }
.queue col.c-div    { width: 176px; }
.queue col.c-int    { width: 192px; }
.queue col.c-ward   { width: 136px; }
.queue col.c-age    { width:  64px; }
.queue col.c-dup    { width:  72px; }
.queue > tbody > tr > td, .queue > thead > tr > th {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue .parent > td { font-weight: 500; }
.queue tr.expanded > td { white-space: normal; overflow: visible; }
.queue tr.child td { color: var(--muted); }
.queue tr.child td.indent { padding-left: 24px; }
details.dupe summary {
  cursor: pointer; list-style: none; font-family: var(--mono);
  font-size: var(--t-apparatus); color: var(--ink); text-decoration: underline;
}
details.dupe summary::-webkit-details-marker { display: none; }
details.dupe summary:hover { color: var(--accent); }

.count-pill {
  font-family: var(--mono); font-size: var(--t-apparatus);
  border: 1px solid var(--rule); padding: 0 8px;
}

/* --- forms --------------------------------------------------------------- */
form.intake { max-width: 40rem; }
label { display: block; font-size: var(--t-apparatus); font-weight: 700;
        margin: 24px 0 8px; text-transform: uppercase; letter-spacing: 0.08em; }
select {
  font-family: var(--sans); font-size: var(--t-small); line-height: var(--lh-small);
  color: var(--ink); background: #fff; border: 1px solid var(--ink);
  border-radius: 0; padding: 16px; width: 100%; max-width: 40rem;
}
select:focus { outline: 2px solid var(--accent); outline-offset: 0; }

textarea, input[type=text] {
  width: 100%; font-family: var(--sans); font-size: var(--t-small);
  line-height: var(--lh-small); color: var(--ink); background: #fff;
  border: 1px solid var(--ink); border-radius: 0; padding: 16px;
}
textarea { min-height: 112px; resize: vertical; }
input#when { width: 176px; font-family: var(--mono); }
textarea:focus, input[type=text]:focus { outline: 2px solid var(--accent); outline-offset: 0; }
button {
  font-family: var(--sans); font-size: var(--t-small); font-weight: 700; color: #fff;
  background: var(--ink); border: 1px solid var(--ink); border-radius: 0;
  padding: 16px 32px; margin-top: 24px; cursor: pointer;
}
button:hover { background: var(--accent); border-color: var(--accent); }
.examples { margin: 16px 0 0; padding: 0; list-style: none; max-width: 56rem; }
.examples li { margin: 0 0 8px; }
.examples button.link {
  background: none; border: none; color: var(--ink); padding: 0; margin: 0;
  font-weight: 400; font-size: var(--t-apparatus); text-align: left;
  text-decoration: underline; cursor: pointer; font-family: var(--mono);
}
.examples button.link:hover { background: none; color: var(--accent); }

/* --- decision block ------------------------------------------------------ */
.decision { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
            padding: 24px 0; margin: 32px 0; max-width: 56rem; }
.decision .verdict {
  font-family: var(--mono); font-size: 26px; line-height: 32px; font-weight: 600;
  letter-spacing: 0.01em; margin: 0 0 16px; max-width: none;
}
.decision .verdict.dup    { color: var(--accent); }
.decision .rationale { font-size: var(--t-small); line-height: var(--lh-small);
                       max-width: 44rem; margin: 0; }

.kv { display: grid; grid-template-columns: 15rem 1fr; gap: 0 32px;
      margin: 0 0 24px; max-width: 60rem; }
.kv dt { font-size: var(--t-apparatus); color: var(--muted); text-transform: uppercase;
         letter-spacing: 0.08em; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.kv dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--rule);
         font-size: var(--t-small); line-height: var(--lh-small); }

pre.sql {
  font-family: var(--mono); font-size: 11px; line-height: 18px;
  background: var(--ground-alt); border-left: 3px solid var(--rule);
  padding: 24px; overflow-x: auto; margin: 0 0 24px; max-width: 100%;
}
details.sql-wrap summary { cursor: pointer; font-size: var(--t-apparatus);
                           font-family: var(--mono); color: var(--ink);
                           text-decoration: underline; margin-bottom: 16px; }
details.sql-wrap summary:hover { color: var(--accent); }

/* --- the coverage bar ----------------------------------------------------- */
.bar { display: flex; width: 100%; height: 64px; border: 1px solid var(--ink); margin: 0 0 8px; }
.bar .seg { display: flex; align-items: center; padding: 0 16px; font-family: var(--mono);
            font-size: var(--t-apparatus); overflow: hidden; white-space: nowrap; }
.bar .seg.coarse { background: var(--ground-alt); color: var(--ink); }
.bar .seg.fine   { background: var(--ink); color: var(--ground); }
.barkey { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 48px; max-width: 64rem; font-size: var(--t-apparatus);
          line-height: var(--lh-apparatus); color: var(--muted); margin-bottom: 32px; }
.barkey span { max-width: 36ch; }

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px 48px; margin: 0 0 32px; max-width: 64rem;
}
.stat { border-top: 2px solid var(--ink); padding-top: 16px; }
.stat .n { font-family: var(--mono); font-size: var(--t-stat); line-height: var(--lh-stat);
           font-weight: 600; letter-spacing: -0.02em; }
.stat .l { font-size: var(--t-small); line-height: var(--lh-small); margin-top: 8px;
           max-width: 26ch; }
.stat .s { font-size: var(--t-apparatus); line-height: var(--lh-apparatus);
           color: var(--muted); margin-top: 8px; max-width: 30ch; }

/* emphasis by weight and a rule, not by colour - see the accent note above */
.moved td { font-weight: 700; }
.moved td.delta { font-weight: 700; }
.moved > td:first-child { box-shadow: inset 3px 0 0 var(--ink); }

footer.foot { border-top: 1px solid var(--rule); margin-top: 80px; padding-top: 32px; }
footer.foot p { max-width: 48rem; margin-bottom: 16px;
                font-size: var(--t-apparatus); line-height: var(--lh-apparatus); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }