/* ==========================================================================
   ETALYN — institutional layer
   Loaded last on every page. It sets the register the whole document reads
   in: a published technical standard, not a health site and not a product
   comparison. Everything here is subtractive or structural. It adds no
   decoration, and it removes the devices that read as marketing.

   Rules it enforces, in the order the brief states them:
     type      one serif for prose, one grotesque for tables and metadata
     measure   65-75 characters for prose; tables run full width
     leading   1.6 in prose, 1.3 in tables
     colour    near-monochrome, exactly one accent, reserved for interaction
     tables    horizontal hairlines only, no zebra, no shadow, no radius
     chrome    document strip, bordered notice, footnote-style sources
     print     a clean stylesheet, because people will want to cite this
   ========================================================================== */

/* ---------------------------------------------------------------- 1. purge
   No rounded corners, no lifted surfaces, no zebra. A rounded shadowed card
   is the single strongest signal that a page is selling something. */
*,
*::before,
*::after { border-radius: 0 !important; }

.card,
.ucard,
.panel,
.box,
.tile,
.sect,
button,
input,
select,
textarea { box-shadow: none; }

.ucard:nth-child(even) { background: transparent; }
.ucard { border-bottom: 1px solid var(--rule); }

/* Focus is the one place the accent is allowed to appear as a field. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#q:focus { box-shadow: none; border-color: var(--accent); }

/* ----------------------------------------------------------- 2. the measure
   Prose is capped so a line never exceeds a comfortable saccade. Tables,
   figures and the search results are explicitly exempt: they are data, and
   data wants the full column width. */
p,
li,
blockquote,
dd,
.note,
.fine,
.lead { max-width: 72ch; }

p, li, dd { line-height: 1.6; }

table p,
td p,
th p,
figure p,
.tabwrap p,
.full p { max-width: none; }

.full,
table,
figure,
.tabwrap { max-width: none; width: 100%; }

/* ------------------------------------------------------------- 3. the type
   Serif carries argument. The grotesque carries anything that is looked up
   rather than read: table cells, labels, metadata, marks. */
th,
td,
caption,
.lbl,
.tag,
.mk,
.pill,
.badge,
.meta,
figcaption { font-family: var(--sans); }

.num,
.tnum,
td.num,
th.num,
.figure,
time,
.docstrip,
.recid { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------------------- 4. tables
   Horizontal rules only, hairline weight, and a heavier rule under the head
   to mark the boundary. Nothing vertical: column separation is done with
   space, which is how a typeset table has always done it. */
table {
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.3;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 7px 14px 7px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}

tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); }

td.num,
th.num,
td[align="right"] { text-align: right; padding-right: 0; }

caption {
  caption-side: top;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
}

.tabwrap { overflow-x: auto; margin: 18px 0 26px; }

/* An expanded record is indented prose under its row, not a nested card. */
.expanded,
.rec-detail,
.ent-detail {
  border: 0;
  border-left: 1px solid var(--rule-strong);
  background: transparent;
  padding: 4px 0 10px 20px;
  margin: 2px 0 14px;
  max-width: 72ch;
}

/* --------------------------------------------------------- 5. document strip
   Number, revision and status, held at the top of the viewport. A reader
   should never have to scroll to find out what they are looking at or how
   provisional it is. */
.docstrip {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 18px;
  padding: 6px 24px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
}

.docstrip b { font-weight: 600; }
.docstrip .sep { opacity: 0.45; }
.docstrip .status { margin-left: auto; opacity: 0.85; }
.docstrip a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(244, 242, 237, 0.4); }
.docstrip a:hover { border-bottom-color: var(--paper); }

@media (max-width: 640px) {
  .docstrip { font-size: 9.5px; gap: 0 10px; padding: 5px 16px; }
  .docstrip .status { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------ 6. provisional box
   A bordered box, not a coloured alert. The rule weight does the work that a
   warning colour would otherwise do, and it survives monochrome print. */
.provisional,
.notice {
  border: 1px solid var(--ink);
  border-left-width: 4px;
  background: transparent;
  padding: 14px 18px;
  margin: 22px 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.55;
}

.provisional > :first-child,
.notice > :first-child { margin-top: 0; }
.provisional > :last-child,
.notice > :last-child { margin-bottom: 0; }

.provisional .hd,
.notice .hd {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Some notices are full-bleed bands wrapping a content column. In that case
   the box belongs on the inner column, not on the band, or the rule runs off
   the edge of the viewport. */
.provisional:has(> .wrap),
.notice:has(> .wrap) {
  border: 0;
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}

.provisional > .wrap,
.notice > .wrap {
  border: 1px solid var(--ink);
  border-left-width: 4px;
  padding: 15px 20px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.provisional > .wrap > :first-child { margin-top: 0; }
.provisional > .wrap > :last-child { margin-bottom: 0; }

/* the label column of the grid keeps its own type; leave it alone */

/* The illustrative bar predates this layer; hold it to the same rules. */
.illus-bar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 7px 0;
}

/* ----------------------------------------------------------- 7. footnotes
   Source links are set as footnote references, not as inline blue text. The
   marker is a superscript numeral; the target is listed at the foot. */
.fn,
a.fn {
  font-family: var(--mono);
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  border-bottom: 0;
  padding-left: 1px;
  color: var(--ink);
}

.fn:hover { color: var(--accent); }

.sources,
.footnotes {
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.sources ol,
.footnotes ol {
  margin: 0;
  padding-left: 22px;
  font-family: var(--sans);
}

.sources li,
.footnotes li { margin-bottom: 6px; max-width: 88ch; }

.sources a,
.footnotes a { word-break: break-word; }

.sources h2,
.footnotes h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ------------------------------------------------- 8. band and tier, no hue
   Rank is carried by the numeral and by its fixed slot. Nothing is coloured,
   so nothing reads as approval or warning. */
.band .dot,
.dot { display: none !important; }

.band {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
}

.band .bn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid var(--rule-strong);
  padding: 1px 5px;
  white-space: nowrap;
}

.mk.tier,
.tA, .tB, .tC, .tD, .tE {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
}

/* -------------------------------------------------------------- 9. print
   The output people will cite. Ink on white, no interface, URLs spelled out
   after their link text, and no element allowed to break across a page. */
@media print {
  @page { margin: 18mm 16mm; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.5;
  }

  .docstrip {
    position: static;
    background: transparent;
    color: #000;
    border-bottom: 1pt solid #000;
    padding: 0 0 4pt;
    margin-bottom: 10pt;
  }

  .docstrip a { color: #000; border: 0; }

  nav,
  .enc-nav,
  .filters,
  #filters,
  .searchwrap,
  .morebar,
  .morebtn,
  .skip,
  .pill,
  button,
  select,
  input,
  .illus-bar { display: none !important; }

  a { color: #000; text-decoration: none; }

  /* Spell the target out, because a printed link is otherwise a dead end. */
  main a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: var(--mono);
    font-size: 8pt;
    word-break: break-all;
  }

  .fn::after { content: none; }

  table { page-break-inside: auto; font-size: 9pt; }
  tr, .ent, .rec, .provisional, .notice, figure { page-break-inside: avoid; }
  thead { display: table-header-group; }
  h1, h2, h3 { page-break-after: avoid; }

  .provisional,
  .notice { border: 1pt solid #000; border-left-width: 3pt; }

  th, td { border-bottom: 0.5pt solid #666; }
  thead th { border-bottom: 1pt solid #000; }
}

/* ------------------------------------------------------------- print, part 2
   Horizontal scroll containers print as one clipped block, which is how a
   26-page register ended up with a blank page where its 80 rows should be.
   On paper nothing scrolls, so nothing needs to be a scroll container. */
@media print {
  .reg-wrap,
  .table-scroll,
  .rt-wrap,
  .scroller { overflow: visible !important; max-height: none !important; }

  table { page-break-inside: auto; }
  tr, .row { page-break-inside: avoid; }
  thead { display: table-header-group; }

  /* The strip is screen chrome. On paper the document metadata table says
     the same thing, in full, and says it better. */
  .docstrip { display: none !important; }

  /* Expanded records should print open; a collapsed record on paper is a
     record the reader cannot check. */
  details { display: block; }
  details > summary { list-style: none; }
  details[open] > *, details > * { display: revert; }
}