/* ==========================================================================
   Network layer — everything the reader pages add on top of style.css.

   style.css stays the design system: topbar, hero, dropzone, buttons, modals,
   type scale. This file adds three things:
     1. the skin motif (a quotation of the failure screen), .sk-*
     2. the report renderer's components, which every tool shares
     3. the "all readers" switcher
   Skins themselves live in /themes/<skin>.css and only override tokens.
   ========================================================================== */

/* There is no skin system and no motif. Every reader page is the DumpReader
   page — same blue, same topbar, same hero, same drop zone in the same place.
   Only the copy and the parser differ. This file adds two things on top of
   style.css: the report renderer's components, and the "all readers" popup. */

/* ---------- report layout ----------
   These two were used in the generated markup and never styled, so reports
   rendered flush to both edges of the viewport. */

#resultsView { padding-bottom: 4rem; }

.wrap {
  width: min(1060px, 100% - 2.5rem);
  margin-inline: auto;
}

/* The reader results header is style.css's .results-head band, unchanged —
   same toolbar, same face slot, same chips, same headline. Nothing is defined
   here for it on purpose: one definition, one look, eleven readers. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- report ---------- */

/* Format notes sit inside the blue band with the rest of the summary, so they
   take the on-accent ink, never the page ink. */
.fmt-note {
  font-family: var(--mono); font-size: .78rem;
  color: var(--on-accent-dim); margin: .6rem 0 0;
}

/* Named .rchip, not .chip. style.css already owns .chip for the chips inside
   the blue results band, both files load on every page, and network.css loads
   second — so a shared name silently restyled the homepage's stop-code chip.
   The report's chips are a different component that happens to be chip-shaped. */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.rchip {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .22em .6em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
}
.rchip--mono { font-family: var(--mono); text-transform: none; letter-spacing: 0; font-weight: 500; }
.rchip--notable { background: var(--accent-soft); color: var(--accent-deep); }
.rchip--context { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }
.rchip--routine { background: var(--paper); color: var(--ink-faint); border: 1px solid var(--line); }
.rchip--warn { background: var(--warn-soft); color: var(--warn); }

.obs {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line-strong, var(--line));
  border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: .7rem;
}
.obs--notable { border-left-color: var(--accent); }
.obs--context { border-left-color: var(--ink-faint); }
.obs--routine { border-left-color: var(--line); }
.obs h4 { margin: .45rem 0 .35rem; font-size: 1rem; }
.obs p { margin: 0 0 .55rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }

.basis { margin: .4rem 0 0; padding: 0; list-style: none; }
.basis li {
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line); margin-bottom: .35rem;
  word-break: break-word;
}
.basis .src { color: var(--accent-deep); }

h3.sec {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin: 2.2rem 0 .7rem;
}

table.rows {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; font-size: .88rem;
}
table.rows th {
  text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding: .55rem .8rem; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
table.rows td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.rows tr:last-child td { border-bottom: 0; }
table.rows td.k { font-weight: 600; width: 34%; }
table.rows td.v { font-family: var(--mono); font-size: .82rem; word-break: break-word; }
tr.row--absent td { color: var(--ink-faint); }
.prov { display: block; font-size: .7rem; color: var(--ink-faint); font-family: var(--mono); margin-top: .2rem; }
.note { display: block; font-size: .78rem; color: var(--ink-soft); font-family: var(--sans); margin-top: .25rem; }
.cf {
  font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .1em .4em; border-radius: 4px; margin-left: .4em; vertical-align: .1em;
}
.cf--observed { background: var(--ok-soft); color: var(--ok); }
.cf--derived { background: var(--accent-soft); color: var(--accent-deep); }
.cf--absent { background: var(--paper); color: var(--ink-faint); border: 1px solid var(--line); }

.cov { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.cov__bar { height: 9px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); overflow: hidden; margin: .4rem 0 .7rem; }
.cov__fill { height: 100%; background: var(--ok); }
.cov__stats { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .84rem; color: var(--ink-soft); }
.cov__stats b { color: var(--ink); }
.cov__un { margin: .8rem 0 0; padding: 0; list-style: none; }
.cov__un li { font-size: .82rem; color: var(--ink-soft); padding: .35rem 0; border-top: 1px solid var(--line); }
.cov__un code { font-family: var(--mono); font-size: .78rem; color: var(--danger); }

.limits { margin: 0; padding: 0; list-style: none; }
.limits li {
  font-size: .9rem; line-height: 1.5; color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .85rem; margin-bottom: .4rem;
}

.fwd { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fwd__head {
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.fwd__head span { font-size: .84rem; color: var(--ink-soft); }
.fwd pre {
  margin: 0; padding: 1.1rem; font-family: var(--mono); font-size: .8rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; background: var(--paper); color: var(--ink);
  max-height: 460px; overflow: auto;
}

.warn-list { margin: 0; padding: 0; list-style: none; }
.warn-list li {
  font-size: .86rem; color: var(--warn); background: var(--warn-soft);
  border-radius: var(--radius-sm); padding: .55rem .8rem; margin-bottom: .4rem;
}

/* ---------- artifact vocabulary table ----------
   Documents the literal strings a file emits. The token is the thing someone
   searches; the line under it is the context they actually paste, so the two
   are styled as one unit with the token leading. */

table.facts.vocab td:first-child { width: 46%; }
.tok {
  font-family: var(--mono); font-size: .82rem; font-weight: 600;
  color: var(--accent-deep); word-break: break-word;
}
.tok-line {
  display: block; margin-top: .35rem;
  font-family: var(--mono); font-size: .74rem; line-height: 1.5;
  color: var(--ink-soft); word-break: break-word;
}

/* ---------- all readers switcher ---------- */

/* Centred in the viewport rather than pinned near the top: the panel is short
   enough now that a top margin left it sitting high with dead space below. */
.sw {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
/* Wider screens get real gutters rather than a panel pressed to both edges. */
@media (min-width: 1200px) { .sw { padding: 2rem; } }
.sw[hidden] { display: none; }
.sw__scrim { position: absolute; inset: 0; background: rgba(12, 20, 36, .55); }
.sw__panel {
  /* Wide enough for four tiles across inside a family box; 900px only ever
     fitted three, which is what broke the rectangle. Everything inside is
     sized so all twelve tiles clear a laptop viewport without scrolling —
     the whole point of the popup is to be taken in at a glance. */
  position: relative; margin: 0; width: min(1480px, 100%);
  /* dvh, not vh: on a phone vh is the tallest the viewport ever gets, so a
     94vh panel is taller than the screen while the URL bar is showing. */
  max-height: 94dvh; overflow: auto; background: var(--card);
  /* Top padding clears the close button, which no longer has a heading to
     sit beside. */
  border-radius: var(--radius); padding: 2rem 1.1rem 1.1rem;
  box-shadow: 0 30px 70px -20px rgba(0, 20, 80, .6);
}
/* The heading now stands alone — it carries the gap the old subtitle held. */
.sw__panel h3 { margin: 0 0 .7rem; font-size: 1rem; }
.sw__panel > p { margin: 0 0 1rem; color: var(--ink-soft); font-size: .9rem; }
.sw__grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sw__item {
  display: flex; gap: .55rem; align-items: flex-start; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .5rem;
}
.sw__item:hover { border-color: var(--accent); }
.sw__item.is-current { border-color: var(--accent); background: var(--accent-wash); }
/* Each reader's mark is the token that identifies its artifact — CHK, SRT,
   CBS, IPS. Set in the mono face the reports already use, so it reads as the
   file's own vocabulary rather than as an invented icon. */
.sw__mark {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--bsod); color: #fff;
  font: 600 11px/1 var(--mono); letter-spacing: .02em;
}
.sw__item.is-current .sw__mark { background: var(--accent-deep); }
table.facts td:first-child:has(.sw__mark) { width: 56px; }
.sw__text { min-width: 0; }
.sw__item strong { display: block; font-size: .88rem; }
.sw__tag { display: block; font-size: .74rem; color: var(--ink-soft); line-height: 1.3; margin: .1rem 0 .15rem; }
/* One line, clipped. The path is an orientation cue here, not the content —
   the reader's own page prints it in full, and the tile carries the whole
   string in its title attribute. Wrapping it cost two lines on half the
   tiles, which is what pushed the popup past the viewport. */
.sw__item code {
  display: block; font-family: var(--mono); font-size: .66rem; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Same ghost-on-accent pill as .tb__support next to it — the two sit together in
   the topbar, so they share geometry and the transparent fill. */
.tb__all {
  height: 34px; padding: 0 15px; border-radius: 999px;
  display: inline-flex; align-items: center; line-height: 1;
  background: transparent; border: 1.5px solid var(--on-accent-line); color: #fff;
  font-size: 13.5px; font-weight: 600; font-family: var(--sans); cursor: pointer;
}
.tb__all:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------- all tools popup ----------
   The four-site switcher, built by network.js on first open so no cross-domain
   link is ever part of the served HTML. It borrows the .sw shell (scrim, panel,
   close) and brings only its own contents. These rules are identical on all
   four sites in the network; only the token values behind them differ. */

/* The .sw panel is 1480px wide because it has to fit twelve reader tiles.
   Four product cards do not, and the same popup is 620px on the other three
   sites — so the panel itself is narrowed here rather than the content inside
   it, which is what left the switcher looking like a different component. */
#alltools .sw__panel { width: min(620px, 100%); }

.nx { width: 100%; }

.nx__title { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--ink); }
.nx__lead { margin: 0 0 1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.nx__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.nx__item {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: inherit; text-decoration: none;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.nx__item:hover { border-color: var(--accent); background: var(--accent-wash); transform: translateY(-1px); }
/* The card for the site you are already on: dimmed, and not a link. */
.nx__item.is-current { opacity: .62; }
.nx__mark { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.nx__mark svg { width: 22px; height: 22px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nx__text { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.nx__name { font-weight: 700; font-size: .95rem; color: var(--ink); }
.nx__tag { font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }
.nx__host { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.nx__here { font-size: .72rem; font-weight: 700; color: var(--accent-deep); }
@media (max-width: 560px) { .nx__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .nx__item { transition: none; }
  .nx__item:hover { transform: none; }
}

/* ---------- generated body copy ---------- */

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding: 0 0 1rem 2.4rem;
  color: var(--ink-soft); line-height: 1.6;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  font: 700 .8rem/1.65rem var(--mono); text-align: center;
}
.steps b { color: var(--ink); }

.copy-block {
  font-family: var(--mono); font-size: .82rem; line-height: 1.7;
  /* Fixed dark surface, never var(--ink): --ink inverts to near-white in dark
     mode, which turned this block into white text on a white box. A background
     and its foreground must come from the same side of the theme, or neither. */
  background: #0d1626; color: #e8eefc; border: 1px solid #223252;
  border-radius: var(--radius-sm);
  padding: .9rem 1rem; overflow-x: auto; white-space: pre;
}

table.facts { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: .6rem; }
table.facts th, table.facts td {
  text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
  /* Cells hold registry paths and command fragments: single tokens longer than
     a phone is wide. Unbroken, they pushed the table past the screen with no
     way to scroll to the rest — the end of the path was simply gone. */
  overflow-wrap: anywhere;
}
/* The rules between rows are internal; the last row must not draw one. Where a
   table ended a section its final rule sat 38px above the next section's own
   border-top, which read as a doubled edge under the table. The report's
   table.rows already closes itself this way — this makes the page tables agree
   with it. */
table.facts tbody tr:last-child td { border-bottom: 0; }
table.facts th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
table.facts td:first-child { font-family: var(--mono); font-size: .82rem; width: 34%; }

.related { display: flex; flex-wrap: wrap; gap: .8rem; }
.related a {
  display: block; flex: 1 1 260px; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem .9rem;
}
.related a:hover { border-color: var(--accent); }
.related strong { display: block; color: var(--accent-deep); }
.related span { font-size: .86rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  table.rows td.k { width: 44%; }
}

/* ---------- cross-reader handoff ----------
   Shown when a file was dropped on one reader and recognised by another. It is
   information about provenance, not a warning, so it reads as a note. */
.handoff {
  background: var(--accent-soft); color: var(--accent-deep);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem;
  font-size: .9rem; line-height: 1.5;
}
.handoff a { color: inherit; font-weight: 600; }
.err-go { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- switcher, grouped by broken state ----------
   Three families of four readers each, drawn as bordered boxes stacked down
   the panel. Every box holds one row of four tiles, so the twelve together
   still read as a single rectangle — the shape the flat grid had — while the
   borders say which four belong to which problem. */
.sw__grid { display: block; }
/* No border of its own: the twelve tiles are the only boxes on screen, and a
   second frame around each four made the panel read as boxes-inside-boxes.
   The label and the gap below the row carry the grouping instead. */
.sw__group { margin-bottom: .9rem; }
.sw__group:last-child { margin-bottom: 0; }
/* The label and its line sit on one baseline, so each box spends a single
   line on saying what it is rather than three. */
.sw__family {
  margin: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.sw__note {
  margin: .1rem 0 .45rem; font-size: .76rem; color: var(--ink-soft); line-height: 1.35;
}
/* Narrow screens fill with as many tiles as fit; from the width where four
   fit, the count is PINNED to four. auto-fill alone would quietly add a fifth
   column on a wide monitor and break the rectangle the grouping is built on —
   the tiles must grow with the panel, not multiply. */
.sw__row {
  display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
@media (min-width: 1040px) {
  .sw__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A 1080p screen has room the laptop layout leaves empty, so above that width
   everything grows a step: the panel is already wider, and the type, the marks
   and the padding follow it. Nothing reflows — the same twelve tiles in the
   same three rows, just addressed to the screen actually in front of you. */
@media (min-width: 1500px) {
  .sw__panel { padding: 2.2rem 1.6rem 1.6rem; }
  .sw__group { margin-bottom: 1.3rem; }
  .sw__family { font-size: .78rem; }
  .sw__note { font-size: .88rem; margin: .2rem 0 .7rem; }
  .sw__row { gap: .7rem; }
  .sw__item { gap: .8rem; padding: .7rem .8rem; }
  .sw__mark { width: 40px; height: 40px; border-radius: 10px; font-size: 12px; }
  .sw__item strong { font-size: 1rem; }
  .sw__tag { font-size: .84rem; line-height: 1.4; }
  .sw__item code { font-size: .74rem; }
}