/* localgovdata.ai — the trust-ledger aesthetic.
 *
 * DO NOT DELETE. This is not superseded by site.css, and it is not dead code.
 * All 13 delivered per-parcel reports, the shortlist memo, and the generated
 * /terms and /privacy pages link /style.css. Those reports are frozen artifacts
 * at URLs already sent to clients: removing this file would break every one of
 * them. site.css is the marketing-site design system and they coexist by
 * design until the report renderer moves into this repo (charter queue 4).
 *
 * Understatement IS the brand: the site should look like it was designed by
 * people who check their work. Paper-white ground, deep ink slate, one
 * restrained accent, serif display for headline numbers, tabular figures
 * everywhere digits align, and citations treated as design elements rather
 * than hidden in footnotes.
 *
 * Self-hosted stack only — no CDN, no webfont request, nothing that phones
 * anywhere. A trust brand that leaks its readers to a font host is telling on
 * itself.
 */

:root {
  --paper:      #fbfaf7;
  --paper-sunk: #f3f1ec;
  --rule:       #ddd8ce;
  --rule-soft:  #eae6de;
  --ink:        #1c2321;
  --ink-soft:   #4a5450;
  /* 3.80:1 on paper failed AA; this token carries report meta and
   * card-meta. Darkened to 4.56:1, same hue. */
  --ink-faint:  #6c7570;
  /* Verdigris — the accent from the scale report. Used for citations and
   * structure, never for decoration. */
  --accent:     #2f6b5e;
  --accent-dim: #e6efec;
  --refused:    #8c3b2f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;

  --measure: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.prose { max-width: var(--measure); }

/* ---- masthead ------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 0;
  margin-bottom: 3rem;
}
.masthead .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark b { font-weight: 600; }
.wordmark span { color: var(--accent); }
.masthead .meta {
  font-size: 0.8rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- type ------------------------------------------------------------ */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.2rem; margin: 0 0 0.4rem; letter-spacing: -0.01em; }
h2 {
  font-size: 1.35rem;
  margin: 3rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule-soft);
}
h3 { font-size: 1.05rem; margin: 2rem 0 0.6rem; }

p { margin: 0 0 1rem; }
a { color: var(--accent); text-underline-offset: 2px; }

.lede {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.5rem;
}

/* ---- the headline number -------------------------------------------- */

.figure {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.figure-note { color: var(--ink-soft); font-size: 0.95rem; }

/* ---- tables: the ledger --------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 1.5rem; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
th {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td:first-child { white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Outcomes carry weight, not colour-as-decoration. A refusal is the rarest
 * and most consequential value in the corpus, so it is the one that differs. */
.outcome { font-weight: 600; }
.outcome-refused { color: var(--refused); }
.outcome-none { color: var(--ink-faint); font-weight: 400; font-style: italic; }

/* ---- citations as design elements ------------------------------------ */

.cite {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  white-space: nowrap;
}
.cite:hover { border-bottom-color: var(--accent); }

/* ---- panels ---------------------------------------------------------- */

.panel {
  background: var(--paper-sunk);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
}
.panel h3 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

.panel-bound {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
}

/* ---- shortlist cards ------------------------------------------------- */

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.5rem 0; }
@media (min-width: 46rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  background: #fff;
}
.card h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.card .card-meta { font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 0.7rem; }
.card ul { margin: 0 0 0.9rem; padding-left: 1.1rem; font-size: 0.9rem; }
.card li { margin-bottom: 0.25rem; }

/* ---- footer / disclaimer -------------------------------------------- */

.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.site-footer p { margin-bottom: 0.6rem; max-width: 46rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer strong { color: var(--ink-soft); }

/* ---- print: the report leaves the screen -----------------------------
 *
 * A per-parcel report is not a web page that someone might print. It is a
 * document that gets printed, stapled, and carried into a room where a
 * decision is made, and the person holding it cannot click anything. Every
 * rule below exists because paper takes something away that the product
 * promises.
 */
@media print {
  @page { margin: 16mm 14mm 18mm; }

  /* Screen greys go washy on paper, and on a report the muted text is the
   * dated, sourced detail a reader is checking. Darkened, not flattened. */
  :root { --ink-soft: #1a1a1a; --ink-faint: #3d3d3d; --rule: #ccc; --rule-soft: #ddd; }

  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  .wrap { max-width: none; padding: 0; }

  /* The masthead identifies the document: who made it and as of when. Both
   * matter more on paper than on screen, because a printout has no URL bar and
   * a report is a dated snapshot — the prepared date is the reader's only clue
   * that a fresher one may exist. */
  .masthead { border-bottom: 1px solid #000; margin-bottom: 10mm; padding-bottom: 3mm; }
  .masthead .meta { color: #000; }

  h1 { font-size: 17pt; }
  h2 { font-size: 12.5pt; margin-top: 8mm; border-bottom: 1px solid #999; }
  /* A heading stranded at the foot of a page is a heading on the wrong page. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* THE CITATIONS ARE THE PRODUCT. On screen a citation is a link; on paper it
   * is nothing unless it prints where it points. A report whose sources cannot
   * be followed from the printout has lost the thing that distinguishes it
   * from someone's recollection. */
  a { color: #000; text-decoration: none; }
  .prose a[href^="http"]::after,
  td a[href^="http"]::after,
  .cite[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 7.5pt;
    color: #333;
    word-break: break-all;
  }
  .cite { color: #000; border-bottom: 0; white-space: normal; }

  /* Horizontal scroll is a screen affordance. On paper it silently crops
   * columns off the right edge, and nobody can tell a column is missing. */
  .table-scroll { overflow: visible !important; }
  table { width: 100%; font-size: 9pt; page-break-inside: auto; }
  thead { display: table-header-group; }   /* repeat headers across pages */
  tr { page-break-inside: avoid; }
  th, td { border-bottom: 1px solid #bbb; padding: 3pt 6pt 3pt 0; }
  th { border-bottom: 1px solid #000; }
  td:first-child { white-space: normal; }

  /* Outcomes must survive a monochrome laser printer. Colour alone carries no
   * information on the office printer this will actually come out of. */
  .outcome { font-weight: 700; }
  .outcome-refused { color: #000; text-decoration: underline; }
  .outcome-none { color: #000; font-style: italic; font-weight: 400; }

  .panel, .card { border: 1px solid #999; background: #fff; break-inside: avoid;
                  page-break-inside: avoid; }
  .panel-bound { border-left: 3px solid #000; }
  .cards { display: block; }
  .card { margin-bottom: 4mm; }

  .figure { font-size: 22pt; }

  /* The disclaimer is the reason this block is not optional. A printed report
   * circulates further than a URL does, and it must carry its own bounds. */
  .site-footer { border-top: 1px solid #000; margin-top: 10mm; padding-top: 4mm;
                 font-size: 8pt; color: #000; break-inside: avoid; }
  .site-footer a { color: #000; }
  .site-footer a[href^="http"]::after { content: ""; }  /* not a source; don't print it */
}
