:root {
  --fg: #1a1a1a; --muted: #666; --bg: #fdfdfc; --line: #ddd;
  --accent: #0b6; --flag: #b45; --panel: #f5f5f3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8e8e6; --muted: #999; --bg: #1a1a19; --line: #333;
    --accent: #3d9; --flag: #e88; --panel: #242423;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header, footer, main { max-width: 62rem; margin: 0 auto; padding: 1rem; }
header { display: flex; justify-content: space-between; align-items: baseline;
         border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--fg); }
nav a { margin-left: 1rem; }
a { color: var(--accent); }
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
         margin-top: 3rem; }
h1 { font-size: 1.6rem; margin-bottom: .3rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }
.lede { color: var(--muted); max-width: 44rem; }
.muted { color: var(--muted); font-size: .9rem; }
code { background: var(--panel); padding: 0 .25em; border-radius: 3px; }

form { background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
       padding: 1.25rem; margin: 1.5rem 0; }
form label { display: block; font-weight: 600; margin-bottom: .5rem; }
input[type=file] { display: block; margin-bottom: 1rem; max-width: 100%; }
button { background: var(--accent); color: #fff; border: 0; border-radius: 6px;
         padding: .6rem 1.4rem; font-size: 1rem; cursor: pointer; }
.notice { background: var(--panel); border-left: 3px solid var(--muted);
          padding: .7rem 1rem; max-width: 44rem; }
.notice.kept { border-left-color: var(--accent); }

table { border-collapse: collapse; width: 100%; margin: .5rem 0 1rem;
        font-size: .88rem; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { font-weight: 600; color: var(--muted); }
.kv { max-width: 44rem; } .kv th { width: 10rem; }
/* Summary rows carry a second line: the reading, then how it was arrived at. */
.summary th { width: 14rem; font-weight: 600; }
.summary td { font-variant-numeric: tabular-nums; }
.summary .detail { display: block; color: var(--muted); font-size: .8rem;
                   font-variant-numeric: normal; }
.types td { font-variant-numeric: tabular-nums; }

/* Headline figures: one tile each, as many to a row as fit. */
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
          gap: .6rem; margin: 1.5rem 0 1rem; max-width: 44rem; }
.glance div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
              padding: .55rem .75rem; }
.glance dt { color: var(--muted); font-size: .8rem; }
.glance dd { margin: .1rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.glance dd.when { margin-top: .15rem; font-weight: 400; color: var(--muted); font-size: .75rem; }

.toc { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem;
       max-width: 44rem; margin: .5rem 0; }
.toc a { margin: 0; }
section { scroll-margin-top: 1rem; }
details > summary { cursor: pointer; color: var(--accent); margin: .3rem 0; }
.results { list-style: none; padding: 0; }
.results li { padding: .5rem 0; border-bottom: 1px solid var(--line); }

/* Wide tables scroll rather than breaking the page on a phone. */
@media (max-width: 40rem) {
  .entries, .types { display: block; overflow-x: auto; white-space: nowrap; }
  .kv th, .summary th { width: 40%; }
}

/* Printing. A report gets printed to be handed to somebody -- a dealer, an
   insurer, a forum thread -- so the page has to survive leaving the screen. */
@media print {
  /* No page margin, and the padding below supplies the visual one instead.
     This is what keeps the result address off the paper: browsers print their
     own header and footer in the page margin, and that header is the full URL,
     token and all. Removing the margin leaves nowhere to put it. The cost is
     the browser's page numbers, which go with it.

     It is a preference, not a guarantee -- a viewer who has headers switched on
     explicitly may still get them, and the print dialog's own "Headers and
     footers" checkbox is the certain fix. */
  @page { margin: 0; }
  body { padding: 14mm 12mm; }

  /* Dark mode would print a black page: costly, and usually unreadable. Paper
     is always light, so the tokens are forced regardless of the viewer's
     scheme. */
  :root {
    --fg: #000; --muted: #444; --bg: #fff; --line: #999;
    --accent: #000; --panel: #f2f2f2;
  }
  body { font-size: 11pt; }
  header, footer, main { max-width: none; padding: 0; }

  /* Controls that do nothing on paper: the revoke link is an action, and the
     contents are links. */
  nav, form, .revoke-offer { display: none; }

  /* A folded list has no way to be unfolded on paper, so it prints open. */
  details > summary { display: none; }
  details::details-content { content-visibility: visible; display: contents; }
  .glance div { break-inside: avoid; }

  /* The disclaimer is the one piece of chrome worth keeping: a printout gets
     read away from the site that qualified it. */
  footer { margin-top: 1.5rem; border-top: 1px solid var(--line); }

  /* Keep a heading with the table it introduces, and never split a reading
     from the line explaining how it was arrived at. */
  /* break-after on a heading is widely ignored, which left "Contactors and DC
     bus" alone at the foot of a page. Keeping each section whole is the rule
     browsers actually honour. */
  section { break-inside: avoid; page-break-inside: avoid; }
  h2 { break-after: avoid; page-break-after: avoid; margin-top: 1.2rem; }
  tr, .notice { break-inside: avoid; page-break-inside: avoid; }
  table { break-inside: auto; }

  /* Off-site links are spelled out, since the text alone is not an address.
     Only absolute ones: the result and revoke links are relative,
     and printing those would put the token on the paper. */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em; color: var(--muted); word-break: break-all;
  }
}