/* Appendix data page. Extends assets/style.css; no external dependencies.

   The tables here are much longer than anything on the overview page --
   52 ranks across five populations, three times over -- so the additions
   are about staying oriented in a long table rather than about decoration:
   a sticky header, a phase banner that survives scrolling past its
   caption, and zebra striping tuned to still show the banner. */

/* Page width. The per-OS tables run to thirteen columns, which the site's
   usual 62rem column can only show by scrolling them sideways. Here the
   page widens with the window, up to a point, so a wide window shows them
   whole. Reading text, the contents box and the figures keep the site's
   normal measure; only the tables use the extra room. The header widens
   with the page so its left edge stays aligned with the content. */
.site-header .wrap,
main.wrap {
  max-width: 110rem;
}
.appendix-toc,
.scope-box,
.not-in-paper,
.appendix-figure,
.paper-section-body > h3,
.paper-section-body > h4 {
  max-width: var(--measure);
}
/* Tables are as wide as their content needs, never narrower than the
   measure, and only scroll once the window cannot fit them. */
.data-table {
  width: auto;
  min-width: min(100%, var(--measure));
}

.appendix-toc {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0 2rem;
}
.appendix-toc strong {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--fg-soft);
  margin-bottom: 0.4rem;
}
.appendix-toc ul { margin: 0; padding-left: 1.1rem; }
.appendix-toc li { margin: 0.15rem 0; }

/* Long tables. The header sticks so the operating-system columns stay
   identifiable 40 rows down, which is most of the value of the grid. */
.table-scroll { max-height: none; }
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--border);
}
/* Two header rows, operating system over measure: the head sticks as a
   whole, since sticky cells would stack both rows at the same offset. */
.data-table thead.grouped {
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table thead.grouped th { position: static; }
.data-table th.group {
  text-align: center;
  color: var(--fg);
}
.data-table th[rowspan] { vertical-align: bottom; }
/* Rules between operating systems, carried down through the body. */
.data-table .group-start { border-left: 1px solid var(--fg-faint); }

.data-table tbody tr:nth-child(even of :not(.phase-row)) {
  background: var(--bg-soft);
}

/* The phase banner. In the paper this is a black row across the table
   marking where one deployment phase ends and the next begins; the rows
   between two banners are one phase. Kept because the chain is not
   meaningful without it -- the order is a deployment history, not a
   ranking. Inverted colours rather than literal black, so it still stands
   out in dark mode. */
.data-table tr.phase-row td {
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
}
.data-table tr.phase-row td strong { font-weight: 700; }
/* The protection chains centre the phase, as the paper does; the
   techniques table puts the deployed versions flush right. */
.data-table.is-improvement tr.phase-row td { text-align: center; }
.data-table tr.phase-row td + td { text-align: right; }

/* Collapsed per-population detail. */
.appendix-detail {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0.6rem 0;
  background: var(--bg);
}
.appendix-detail > summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  list-style-position: inside;
}
.appendix-detail > summary:hover { background: var(--bg-soft); }
.appendix-detail[open] > summary { border-bottom: 1px solid var(--border); }
.appendix-detail .table-scroll { padding: 0 0.9rem 0.6rem; }

/* Figures. Shown at page width, linking to the full-resolution file --
   the rebuilt versions are several thousand pixels across and would
   otherwise force a horizontal scroll on every screen. */
.appendix-figure {
  margin: 1.75rem 0 2.25rem;
  padding: 0;
}
/* Shown at two thirds of the column and centred, opening the
   print-resolution file in a new window. Sized by width rather than
   capped by height so every figure occupies the same measure, and the
   tall stacked-panel ones simply run longer. */
.figure-zoom {
  display: block;
  width: 66%;
  margin: 0 auto;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
}
.figure-zoom img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-zoom-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(22, 25, 29, 0.82);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.5rem;
  border-top-left-radius: 6px;
}
.figure-zoom:hover { border-color: var(--accent); }
.figure-zoom:hover .figure-zoom-hint { background: var(--accent); }
.figure-zoom:focus-visible { outline: 2px solid var(--accent); }
@media (max-width: 720px) {
  .figure-zoom { width: 100%; }
}
.appendix-figure figcaption {
  font-size: 0.88rem;
  color: var(--fg-soft);
  margin: 0.55rem auto 0;
  line-height: 1.5;
  width: 66%;
}
@media (max-width: 720px) {
  .appendix-figure figcaption { width: 100%; }
}

@media (prefers-color-scheme: dark) {
  .data-table thead th { background: var(--bg); }
}

/* Improvement tables. Nine columns on the per-operating-system variant,
   which squeezes the technique names into four-line stacks if they are
   allowed to wrap. The table already scrolls horizontally, so keeping the
   names whole costs nothing and makes the column readable. Not applied to
   the rank grid, which has five name columns and has to wrap. */
.data-table.is-improvement td:first-child,
.data-table.is-improvement th:first-child {
  white-space: nowrap;
}

/* ---------- Converted from the paper's LaTeX ---------- */

/* The paper colours these tables to carry meaning that the column
   headings do not: which fingerprinters collect a measurement, and which
   measurements are sub-fields of a JSON parent. Reproduced as classes so
   the meaning survives, and so a dark theme can restate them. */
.c-red    { color: #b3261e; }
.c-blue   { color: #0b5fbf; }
.c-green  { color: #1a6b3c; }
.c-orange { color: #a8620a; }
.c-black  { color: var(--fg); }
.c-white  { color: #fff; }

/* A row that names the group of rows beneath it rather than holding
   data -- "Audio", "Browser", "CSS System Colors" in the measurements
   table, and the deployment phases in the protection chains. */
.data-table tr.group-row td {
  background: var(--bg-inset);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--fg-soft);
}

/* The parent measurement a sub-field was expanded from. */
.submeasure { font-size: 0.85em; color: var(--fg-soft); }

/* A citation or cross-reference the paper makes that this page cannot
   follow: shown, so the sentence still reads, but not as a dead link. */
.xref {
  font-size: 0.85em;
  color: var(--fg-faint);
  white-space: nowrap;
}

/* Said above a table that goes beyond what the paper printed. */
.not-in-paper {
  font-size: 0.88rem;
  color: var(--fg-soft);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 0.5rem 0.8rem;
  margin: 0.8rem 0;
  border-radius: 0 4px 4px 0;
}
.not-in-paper strong { color: var(--accent); }

/* A caption carried over from the paper, below its table. */
.figcaption {
  font-size: 0.88rem;
  color: var(--fg-soft);
  line-height: 1.5;
  margin: 0.4rem 0 1.5rem;
}

@media (prefers-color-scheme: dark) {
  .c-red    { color: #f2857c; }
  .c-blue   { color: #7fb4f5; }
  .c-green  { color: #6fc292; }
  .c-orange { color: #e0a565; }
}

/* A note running under the rows above it, rather than a heading
   introducing the rows below. Set as prose, not as a label. */
.data-table tr.note-row td {
  background: var(--bg);
  color: var(--fg-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  padding-top: 0.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}

/* Two-column scope box: what the paper printed, and what this page adds.
   Used where the difference is more than a sentence and the reader needs
   to know which is which before reading the tables. */
.scope-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.25rem 0 1.75rem;
}
.scope-part { background: var(--bg-soft); padding: 0.9rem 1.1rem; }
.scope-part.scope-added { background: var(--accent-soft); }
.scope-part h4 {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-soft);
}
.scope-part.scope-added h4 { color: var(--accent); }
.scope-part ul { margin: 0; padding-left: 1.1rem; }
.scope-part li {
  margin: 0.3rem 0;
  font-size: 0.89rem;
  line-height: 1.5;
  color: var(--fg);
}
@media (max-width: 720px) {
  .scope-box { grid-template-columns: 1fr; }
}

/* ---------- Collapsible top-level sections ---------- */

/* Each h2 section folds away. The heading keeps the look it had -- the
   only addition is a disclosure arrow to its left -- because the page is
   read as a document first and operated second. */
.paper-section {
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.5rem;
}
.paper-section > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
/* Safari and older Chrome draw their own triangle without this. */
.paper-section > summary::-webkit-details-marker { display: none; }
.paper-section > summary::marker { content: ""; }

.paper-section > summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-left: 0.42rem solid var(--fg-faint);
  border-top: 0.30rem solid transparent;
  border-bottom: 0.30rem solid transparent;
  transform: translateY(-0.12em);
  transition: transform 0.12s ease;
}
.paper-section[open] > summary::before {
  transform: translateY(-0.12em) rotate(90deg);
}
.paper-section > summary:hover::before { border-left-color: var(--accent); }

/* The h2 keeps its own styling; it just no longer owns the top margin,
   which now belongs to the summary row. */
.paper-section > summary > h2 {
  display: inline;
  border-bottom: none;
  margin: 0;
  padding: 0;
}
.paper-section > summary:hover > h2 { color: var(--accent); }
.paper-section > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.paper-section-body { padding-bottom: 0.5rem; }

/* A closed section should not leave a bare rule hanging under it. */
.paper-section:not([open]) { padding-bottom: 0.35rem; }