/* =====================================================================================================================
   MURMUR SITE · THE WIKI, HOW IT WORKS (wiki.css), used by how-it-works.html only.
   Built on site.css: tokens, type, buttons, chips, cards, callouts, kv lists, icon badges, avatars and bubbles.
   Everything else this page needs is defined here, with its own names, so a change in site.css cannot break it.

   1. Page and layout ........ .wiki (main) · .wiki-layout (grid) · .wiki-hero · .wiki-start · .wiki-side · .wiki-skip
                               · .wiki-main (container "wiki")
   2. Table of contents ...... details.toc#contents · .toc__search · .toc__group · .toc__link[aria-current] · .toc-pill
   3. Groups and articles .... .wiki-group > .wiki-title--group > h2 · article.wiki-article > .wiki-title > h3
                               (the "#" .self-link sits beside the heading, not in it) · .wiki-summary · .wiki-body
                               · details.wiki-tech (Technical notes, closed by default) · .wiki-related
                               · flash on arrival (.is-flash, :target without JS)
   4. Building blocks ........ lists · duo cards · report lists (.w-reports, .w-go "Read the report") · tables (.w-table,
                               .mt data table, .pl ledger) · numbered cards · pull quote · samples (security code,
                               Recovery Key, chat lines) · glossary · counters. Steps ("How to check"): .steps from site.css
   5. Demo: the live seal .... .seal-* (ported from the v1 home page)
   6. Demo: the recovery explorer .rx-* (ported from the v1 security page)
   7. Without JavaScript, reduced motion, forced colors, print

   Layout inside the article column answers to the column's own width (container queries on "wiki"):
   about 880 px at 1280 px and up, 624 px at 1024 px, the full container below 1024 px. Text always fills that
   column: no measure narrows a paragraph, a list, a card or a table under the full-width blocks around it.
   Spacing: the 4-pt scale from site.css. Groups: 96 px before each heading (72 below 768). Articles: 64 px (48).
   ===================================================================================================================== */


/* =====================================================================================================================
   1. PAGE AND LAYOUT
   ===================================================================================================================== */
html { scroll-padding-top: calc(var(--header-h, 64px) + var(--s-6)); }

.wiki {
  --wiki-top: calc(var(--header-h, 64px) + var(--s-6));   /* sticky table of contents: 88 px from the top */
  display: block;
  background: var(--hero-bg);
  background-repeat: no-repeat;
  background-size: 100% 640px;
  background-color: var(--bg);
}

.wiki-layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s-24); }
.wiki-hero { padding-top: var(--s-10); }
.wiki-side { margin-top: var(--s-10); }
.wiki-main { container: wiki / inline-size; min-width: 0; }

@media (min-width: 768px) {
  .wiki-hero { padding-top: var(--s-12); }
}
@media (min-width: 1024px) {
  .wiki-layout { grid-template-columns: 272px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--s-12); }
  .wiki-hero { grid-column: 2; grid-row: 1; }
  .wiki-side { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; padding-top: var(--s-12); }
  .wiki-main { grid-column: 2; grid-row: 2; }
}

/* Hero: compact, aligned with the article column */
.wiki-hero__title { margin-top: var(--s-4); }
.wiki-hero__lead { margin-top: var(--s-5); }
.wiki-start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-6); }
.wiki-start__label { margin-right: var(--s-1); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.w-chiplink {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-chip);
  background: var(--container); color: var(--text); font-size: 14px; line-height: 1; font-weight: 500;
  white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.w-chiplink:hover { background: var(--container-2); }
.w-chiplink:focus-visible { border-radius: var(--r-chip); }
.w-chiplink__go { display: none; }
/* Phones: the label on its own line, then the three links as full-width pills (44 px touch targets), one per line */
@media (max-width: 599px) {
  .wiki-start { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .wiki-start__label { margin: 0 0 var(--s-1); }
  .wiki-start .w-chiplink { justify-content: space-between; gap: var(--s-3); height: 44px; padding: 0 14px 0 var(--s-5); font-size: 15px; }
  .wiki-start .w-chiplink > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .w-chiplink__go { display: block; width: 16px; height: 16px; color: var(--text-3); }
}

/* Skip to the articles: the first stop in the table of contents column, shown only when it has keyboard focus */
.wiki-side { position: relative; }
.wiki-skip {
  position: absolute; z-index: 5; left: 0; top: 6px;
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--r-chip);
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-2);
  font-size: 14px; line-height: 1; font-weight: 600; white-space: nowrap; text-decoration: none;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.wiki-skip:focus { opacity: 1; pointer-events: auto; transform: none; }
.wiki-skip:focus-visible { border-radius: var(--r-chip); }
@media (max-width: 1023px) { .wiki-skip { top: auto; bottom: calc(100% + 4px); height: 32px; padding: 0 14px; font-size: 13px; } }  /* centered in the 40 px gap above the Contents card */


/* =====================================================================================================================
   2. TABLE OF CONTENTS
   Desktop (≥ 1024): sticky column, always open (the summary is hidden), its own scroll with fade masks.
   Below: a "Contents" card at the top of the body, closed by default; the pill brings the reader back to it.
   The details is open in the HTML (so it works without JavaScript); on small screens it stays hidden until
   wiki.js has closed it and added .is-ready, so it never flashes open.
   ===================================================================================================================== */
.toc { position: relative; }
.toc > summary { list-style: none; }
.toc > summary::-webkit-details-marker { display: none; }
.toc__summary {
  display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-4) 0 var(--s-5);
  border-radius: var(--r-card); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.toc__summary > .i { width: 20px; height: 20px; color: var(--seal); }
.toc__count { margin-left: auto; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.toc__summary > .toc__caret { width: 18px; height: 18px; color: var(--text-3); transition: transform var(--dur-md) var(--ease); }
.toc[open].is-ready .toc__caret { transform: rotate(180deg); }
.toc__summary:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }

.toc__nav { display: block; }
.toc__scroll { position: relative; }

/* Find a topic */
.toc__search {
  position: relative; display: flex; align-items: center; height: 44px; border-radius: var(--r-input);
  background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--input-border); transition: box-shadow var(--dur-sm) var(--ease);
}
.toc__search:focus-within { box-shadow: inset 0 0 0 2px var(--input-focus); }
.toc__search > .i { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--text-3); pointer-events: none; }
.toc__input {
  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 44px 0 40px; border: 0; border-radius: inherit;
  background: transparent; color: var(--text); font-size: 16px; line-height: 20px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.toc__input:focus-visible { outline: none; }
.toc__input::placeholder { color: var(--text-3); opacity: 1; }
.toc__input::-webkit-search-decoration, .toc__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.toc__clear {
  position: absolute; right: 6px; top: 50%; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px;
  padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--text-2);
}
.toc__clear:hover { background: var(--overlay-strong); color: var(--text); }
.toc__clear .i { width: 16px; height: 16px; }
.toc__clear:focus-visible { border-radius: 9px; }
.toc__kbd {
  position: absolute; right: 10px; top: 50%; display: none; min-width: 22px; height: 22px; margin-top: -11px; padding: 0 6px;
  border-radius: 6px; box-shadow: inset 0 0 0 1px var(--outline-soft); color: var(--text-3);
  font-family: var(--font-mono); font-size: 12px; line-height: 22px; text-align: center; pointer-events: none;
}
@media (pointer: fine) { .toc__kbd { display: block; } }
.toc__search.has-text .toc__kbd, .toc__search:focus-within .toc__kbd { display: none; }

.toc__empty { padding: var(--s-2) 0 var(--s-1); font-size: 15px; line-height: 22px; color: var(--text-2); }

/* Groups and links */
.toc__groups { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.toc__group-label {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; border-radius: 4px;
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-sm) var(--ease);
}
.toc__group-label:hover, .toc__group-label[aria-current="true"] { color: var(--text); }
.toc__list { margin-top: var(--s-2); border-left: 1px solid var(--divider); }
.toc__link {
  position: relative; display: block; padding: 5px 8px 5px 15px; border-radius: 0 8px 8px 0;
  color: var(--text-2); font-size: 15px; line-height: 22px; font-weight: 400; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-sm) var(--ease);
}
.toc__link:hover { color: var(--text); }
.toc__link[aria-current="true"] { color: var(--text); }
.toc__link[aria-current="true"]::before {
  content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--seal);
}
.toc__link:focus-visible { border-radius: 6px; }

/* Back to top, at the foot of the desktop table of contents */
.toc__top { display: none; }

/* ---------------------------------------------------------------- Small screens: the Contents card */
@media (max-width: 1023px) {
  .toc { background: var(--surface); border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
  .toc__nav { padding: var(--s-1) var(--s-5) var(--s-6); border-top: 1px solid var(--divider); }
  .toc__nav > .toc__search { margin-top: var(--s-4); }
  html.js .toc:not(.is-ready) > :not(summary) { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .toc__groups { display: block; columns: 2; column-gap: var(--s-8); }
  .toc__group { break-inside: avoid; padding-bottom: var(--s-5); }
}

/* ---------------------------------------------------------------- Desktop: sticky column */
@media (min-width: 1024px) {
  .toc { position: sticky; top: var(--wiki-top); }
  .toc > summary { display: none; }
  .toc__nav { display: flex; flex-direction: column; max-height: calc(100vh - var(--wiki-top) - var(--s-6)); }
  .toc__search { flex: none; }
  .toc__input { font-size: 15px; }
  .toc__scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* no scroll bar: site.css, base */
    margin: var(--s-2) -6px 0; padding: 0 6px var(--s-2);    /* room for focus rings */
  }
  .toc__groups { margin-top: var(--s-3); }
  .toc__scroll.can-up { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
  .toc__scroll.can-down { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%); }
  .toc__scroll.can-up.can-down {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 36px), transparent 100%);
  }
  .toc__top {
    display: flex; flex: none; align-items: center; gap: var(--s-2); width: fit-content; margin-top: var(--s-2); padding: 6px 0;
    border-radius: 6px; color: var(--text-2); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: color var(--dur-sm) var(--ease), opacity var(--dur-md) var(--ease), visibility 0s linear 0s;
  }
  .toc__top .i { width: 16px; height: 16px; }
  .toc__top:hover { color: var(--text); }
  html.js .toc__top:not(.is-shown) { opacity: 0; visibility: hidden; transition: opacity var(--dur-md) var(--ease), visibility 0s linear var(--dur-md); }
}

/* ---------------------------------------------------------------- The Contents pill (small screens) */
.toc-pill {
  position: fixed; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: 80;
  display: inline-flex; align-items: center; gap: var(--s-2); height: 44px; padding: 0 18px 0 14px;
  border-radius: var(--r-chip); background: var(--header-bg); color: var(--text);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2);
  font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility 0s linear var(--dur-md);
}
.toc-pill .i { width: 20px; height: 20px; color: var(--seal); }
.toc-pill.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-md) var(--ease), transform var(--dur-md) var(--ease), visibility 0s; }
.toc-pill:focus-visible { border-radius: var(--r-chip); }
@media (min-width: 1024px) { .toc-pill { display: none; } }


/* =====================================================================================================================
   3. GROUPS AND ARTICLES
   ===================================================================================================================== */
.wiki-group { margin-top: 72px; }
@media (min-width: 768px) { .wiki-group { margin-top: var(--s-24); } }
/* Below 1024 px the first group follows the Contents card, not the hero: a shorter step */
@media (max-width: 1023px) { .wiki-main > .wiki-group:first-child { margin-top: var(--s-14); } }
@media (min-width: 768px) and (max-width: 1023px) { .wiki-main > .wiki-group:first-child { margin-top: var(--s-16); } }
/* Titles. The heading and its "#" self-link sit side by side in .wiki-title, so a screen reader reads the heading
   alone; the heading is inline, so the "#" still follows its last word. The type is set on .wiki-title and the
   heading inherits it (one font per line, so the line box never grows). */
.wiki-title { width: fit-content; max-width: 100%; border-radius: 6px; color: var(--text); text-wrap: balance; }
.wiki-title > h2, .wiki-title > h3 {
  display: inline; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit;
  letter-spacing: inherit; font-variation-settings: inherit; color: inherit;
}
.wiki-title--group {
  font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600;
  font-size: 28px; line-height: 34px; letter-spacing: -0.015em;
}
@media (min-width: 768px) { .wiki-title--group { font-size: 32px; line-height: 40px; } }
@media (min-width: 1280px) { .wiki-title--group { font-size: 36px; line-height: 44px; } }
.wiki-title--group + * { margin-top: var(--s-8); }
@media (min-width: 768px) { .wiki-title--group + * { margin-top: var(--s-10); } }

.wiki-article + .wiki-article { margin-top: var(--s-12); }
@media (min-width: 768px) { .wiki-article + .wiki-article { margin-top: var(--s-16); } }

.wiki-article > .wiki-title { font-family: var(--font-ui); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 768px) { .wiki-article > .wiki-title { font-size: 22px; line-height: 28px; } }
.wiki-article > * + *, .wiki-group--single > * + * { margin-top: var(--s-6); }
.wiki-article > .wiki-title + *, .wiki-group--single > .wiki-title--group + * { margin-top: var(--s-4); }
.wiki-article > .wiki-tech { margin-top: var(--s-6); }

/* Headings, table rows and glossary terms take focus only from the script (after a jump), never from Tab: the arrival
   flash marks them, so no focus ring on top of it. */
.wiki-title > h2:focus, .wiki-title > h3:focus, .mt tbody tr:focus, .gloss > div:focus { outline: none; }

/* The self-link: shows on hover and focus of the title (always, softly, on touch screens) */
.self-link {
  position: relative; display: inline-block; margin-left: 0.32em; padding: 0 3px; border-radius: 4px;
  color: var(--text-3); font-family: var(--font-ui); font-size: 0.86em; font-weight: 500; line-height: 1;
  letter-spacing: 0; font-variation-settings: normal;
  text-decoration: none; opacity: 0; transition: opacity var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.wiki-article > .wiki-title > .self-link { font-size: 0.82em; }
.wiki-title--group > .self-link { font-size: 0.6em; vertical-align: 0.18em; }
.wiki-title:hover > .self-link, .self-link:focus-visible, .self-link.is-copied { opacity: 1; }
.self-link:hover { color: var(--link); }
@media (hover: none) { .self-link { opacity: 0.55; } }
.copied-tip {
  position: absolute; right: -6px; top: calc(100% + 8px); z-index: 3; padding: 5px 10px; border-radius: 8px;
  background: var(--primary); color: var(--on-primary); font-family: var(--font-ui); font-size: 13px; line-height: 18px;
  font-weight: 600; letter-spacing: 0; white-space: nowrap; pointer-events: none;
  animation: w-tip 1.6s var(--ease) forwards;
}
@keyframes w-tip { 0% { opacity: 0; transform: translateY(-4px); } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* In short */
.wiki-summary {
  padding: var(--s-5) var(--s-6); border-radius: var(--r-card);
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--card-edge);
}
.wiki-label {
  margin-bottom: var(--s-2); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.wiki-summary > p:not(.wiki-label) { font-size: 17px; line-height: 26px; color: var(--text); }
@media (min-width: 768px) { .wiki-summary > p:not(.wiki-label) { font-size: 18px; line-height: 28px; } }
.wiki-summary a { color: var(--link); }

/* Details */
.wiki-body > * + * { margin-top: var(--s-4); }
.wiki-body > .w-wide, .wiki-body > .w-wide + * { margin-top: var(--s-6); }
.wiki-body > h4:not(:first-child) { margin-top: var(--s-8); }
.wiki-body > h4 + *, .wiki-body > h4 + .w-wide { margin-top: var(--s-3); }
.wiki-body a:not([class]), .wiki-tech a:not([class]), .wiki-related a, .wiki-end a, .w-note a, .gloss a:not([class]) {
  color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent); transition: text-decoration-color var(--dur-sm) var(--ease);
}
.wiki-body a:not([class]):hover, .wiki-tech a:not([class]):hover, .wiki-related a:hover, .wiki-end a:hover, .w-note a:hover, .gloss a:not([class]):hover { text-decoration-color: currentColor; }
.w-h4 { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.w-note { font-size: 15px; line-height: 22px; color: var(--text-2); }
.wiki-body .callout { font-size: 16px; line-height: 24px; }
.wiki-body .callout .w-h4 + p, .callout__title + p { margin-top: var(--s-1); }
.callout__title { font-weight: 600; }
.callout__sub { color: var(--text-2); }
.wiki-body .mono, .wiki-tech .mono { font-family: var(--font-mono); font-size: 0.94em; }

/* Technical notes: closed by default (a details, so it works without JavaScript and the browser's find-in-page
   still opens it); a quiet pill, then the site's kv card once open. */
.wiki-tech > summary { list-style: none; }
.wiki-tech > summary::-webkit-details-marker { display: none; }
.wiki-tech__summary {
  display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 12px 0 14px; border-radius: var(--r-chip);
  background: var(--container); color: var(--text); font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-sm) var(--ease);
}
.wiki-tech__summary:hover { background: var(--container-2); }
.wiki-tech__summary:focus-visible { border-radius: var(--r-chip); }
.wiki-tech__summary > .i { width: 16px; height: 16px; color: var(--text-2); }
.wiki-tech__summary > .wiki-tech__caret { margin-left: 2px; color: var(--text-3); transition: transform var(--dur-md) var(--ease); }
.wiki-tech[open] > .wiki-tech__summary > .wiki-tech__caret { transform: rotate(180deg); }
.wiki-tech > .kv { margin-top: var(--s-3); }
.wiki-tech[open] > .kv { animation: w-state-in var(--dur-md) var(--ease); }
.wiki-related { font-size: 15px; line-height: 24px; color: var(--text-3); }
.wiki-related > span:first-child { margin-right: 6px; font-weight: 600; color: var(--text-2); }
.wiki-related a { white-space: nowrap; }

/* Arrival: the title of the article you jumped to flashes the highlight for 2 seconds */
.wiki-article.is-flash > .wiki-title, .wiki-group.is-flash > .wiki-title { animation: w-flash 2s var(--ease) 1; }
html:not(.js) .wiki-article:target > .wiki-title, html:not(.js) .wiki-group:target > .wiki-title { animation: w-flash 2s var(--ease) 1; }
@keyframes w-flash {
  0%, 30% { background-color: var(--highlight); box-shadow: 0 0 0 6px var(--highlight); }
  100% { background-color: transparent; box-shadow: 0 0 0 6px transparent; }
}

/* End of the wiki */
.wiki-end { margin-top: var(--s-24); padding-top: var(--s-8); border-top: 1px solid var(--divider); font-size: 17px; line-height: 28px; color: var(--text-2); }
.wiki-backtop { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); color: var(--link); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 4px; }
.wiki-backtop .i { width: 18px; height: 18px; }
.wiki-backtop:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }


/* =====================================================================================================================
   4. BUILDING BLOCKS
   ===================================================================================================================== */

/* ---------------------------------------------------------------- Lists */
.w-dots { display: grid; gap: var(--s-2); }
.w-dots > li { position: relative; padding-left: 20px; }
.w-dots > li::before {
  content: ""; position: absolute; left: 3px; top: 0.72em; top: calc((1lh - 5px) / 2);
  width: 5px; height: 5px; border-radius: 50%; background: var(--seal);
}
.w-dots--grey > li::before { background: var(--text-3); }
.w-icons { display: grid; gap: var(--s-3); }
.w-icons > li { display: flex; gap: var(--s-3); align-items: flex-start; }
.w-icons > li > .i { width: 20px; height: 20px; margin-top: 4px; color: var(--seal); }
.w-icons--sage > li > .i { color: var(--verified); }
.w-icons--neutral > li > .i { color: var(--text-3); }
/* Things we will never build: one column, one line per item wherever the column has room (two columns made every
   long item wrap), in a card like the page's tables: even rows, 13 pt above and below, a hairline between them that
   starts under the text, as in a grouped list. */
.w-never {
  display: block; border-radius: var(--r-card); background: var(--surface);
  box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1);
}
.w-never > li { position: relative; padding: 13px 20px; font-size: 16px; line-height: 24px; color: var(--text); }
.w-never > li > .i { margin-top: 2px; }
.w-never > li + li::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; height: 1px; background: var(--divider); }
@media (max-width: 479px) { .w-never > li { padding: 12px 16px; } .w-never > li + li::before { left: 48px; } }
.w-sub { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-2); }

/* ---------------------------------------------------------------- Duo cards (two cards side by side) */
.w-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container wiki (min-width: 600px) { .w-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.w-card { min-width: 0; padding: var(--s-6); border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.w-card__head { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-4); margin-bottom: var(--s-5); border-bottom: 1px solid var(--divider); }
.w-card__title { font-size: 18px; line-height: 24px; }
.w-card__sub { font-size: 14px; line-height: 20px; color: var(--text-2); }
.w-card .w-dots > li, .w-card .w-icons > li { font-size: 16px; line-height: 24px; }
.w-card--sage { background: var(--success-container); color: var(--on-success-container); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verified) 25%, transparent); }

/* ---------------------------------------------------------------- Report lists (independent reviews and audits)
   Inside a duo card: what was checked, then "Read the report", which never wraps. */
.w-reports { display: grid; gap: var(--s-4); }
.w-reports > li + li { padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.w-reports p { font-size: 16px; line-height: 24px; color: var(--text); }
.w-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-1); border-radius: 4px;
  color: var(--link); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.w-go .i { width: 16px; height: 16px; transition: transform var(--dur-md) var(--ease); }
.w-go:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.w-go:hover .i { transform: translateX(3px); }

/* ---------------------------------------------------------------- Small two-column tables (pairs on narrow columns) */
.w-table {
  width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--r-card);
  background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); font-size: 15px; line-height: 22px;
}
.w-table th[scope="col"] {
  padding: 12px 20px; border-bottom: 1px solid var(--divider); text-align: left; white-space: nowrap;
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2);
}
.w-table tbody th, .w-table td { padding: 13px 20px; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
.w-table tbody th { width: 38%; font-weight: 500; color: var(--text); }
.w-table td { color: var(--text-2); }
.w-table td b { color: var(--text); font-weight: 600; }
.w-table tbody tr:last-child > * { border-bottom: 0; }
@container wiki (max-width: 519px) {
  .w-table, .w-table tbody, .w-table tr, .w-table tbody th, .w-table td { display: block; width: auto; }
  .w-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .w-table tbody tr { padding: 12px 18px; border-bottom: 1px solid var(--divider); }
  .w-table tbody tr:last-child { border-bottom: 0; }
  .w-table tbody th, .w-table td { padding: 0; border: 0; }
  .w-table td { margin-top: 2px; }
}

/* ---------------------------------------------------------------- The full table (22 rows) */
.w-pull { position: relative; padding-left: 44px; }
@media (min-width: 768px) { .w-pull { padding-left: 52px; } }
.w-pull::before {
  content: "\201C"; position: absolute; left: -2px; top: -12px; color: var(--seal);
  font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-size: 72px; line-height: 72px;
}
@media (min-width: 768px) { .w-pull::before { font-size: 84px; line-height: 84px; top: -16px; } }
.w-pull p {
  font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600;
  font-size: 22px; line-height: 30px; letter-spacing: -0.01em; color: var(--text);
}
@media (min-width: 768px) { .w-pull p { font-size: 26px; line-height: 34px; } }
/* the note under the quote takes the whole column, from its left edge */

.mt-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.mt-count { font-size: 14px; line-height: 20px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

.w-seg {
  --idx: 0; --count: 3;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; padding: 3px;
  border-radius: 12px; background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--card-edge); isolation: isolate;
}
.w-seg::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--count));
  border-radius: 9px; background: var(--seg-active); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px rgb(60 42 24 / 0.08);
  transform: translateX(calc(var(--idx) * 100%)); transition: transform var(--dur-md) var(--ease);
}
.w-seg [role="radio"] {
  position: relative; height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-2); font-size: 14px; line-height: 1; font-weight: 500; white-space: nowrap; transition: color var(--dur-sm) var(--ease);
}
.w-seg [role="radio"]:hover { color: var(--text); }
.w-seg [role="radio"][aria-checked="true"] { color: var(--text); font-weight: 600; }
.w-seg [role="radio"]:focus-visible { border-radius: 9px; }
@media (min-width: 400px) { .w-seg [role="radio"] { padding: 0 18px; } }

.mt-wrap { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.mt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.mt thead th {
  position: sticky; top: var(--header-h, 64px); z-index: 2; padding: 14px 16px; background: var(--surface);
  border-bottom: 1px solid var(--divider); text-align: left; white-space: nowrap;
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2);
}
.mt thead th:first-child { border-top-left-radius: 20px; }
.mt thead th:last-child { border-top-right-radius: 20px; }
.mt tbody td, .mt tbody th { padding: 16px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--divider); color: var(--text-2); font-weight: 400; }
.mt tbody tr:last-child > * { border-bottom: 0; }
.mt tbody tr:last-child > :first-child { border-bottom-left-radius: 20px; }
.mt tbody tr:last-child > :last-child { border-bottom-right-radius: 20px; }
.mt tbody tr { scroll-margin-top: 52px; }
.mt .mt-num { width: 60px; padding-left: 20px; }
.mt thead th:last-child, .mt tbody td:last-child { padding-right: 20px; }
.mt-n {
  display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 8px;
  background: var(--container); color: var(--text); font-family: var(--font-mono); font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums;
}
.mt .mt-what { width: 24%; color: var(--text); font-weight: 500; }
.mt-can { width: 23%; }
.mt tbody td:nth-child(4) { width: 26%; }
.mt-can__in { display: flex; align-items: flex-start; gap: 10px; }
.mt-see { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; background: var(--container); color: var(--text-2); }
.mt-see .i { width: 14px; height: 14px; }
.mt-see--no { background: var(--accent-container); color: var(--seal); }
.mt b { color: var(--text); font-weight: 600; }
.mt tbody tr.is-flash > * { animation: w-row-flash 2s var(--ease) 1; }
html:not(.js) .mt tbody tr:target > * { animation: w-row-flash 2s var(--ease) 1; }
@keyframes w-row-flash { 0%, 30% { background-color: var(--highlight); } 100% { background-color: transparent; } }

@container wiki (max-width: 759px) {
  .mt-wrap { background: none; box-shadow: none; border-radius: 0; }
  .mt, .mt tbody, .mt tr, .mt td, .mt th { display: block; width: auto !important; }
  .mt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mt tbody { display: grid; gap: var(--s-3); }
  .mt tbody tr {
    position: relative; padding: var(--s-5) var(--s-5) var(--s-2); border-radius: var(--r-card);
    background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); scroll-margin-top: 0;
  }
  .mt tbody td, .mt tbody th { padding: 0; border: 0; border-radius: 0 !important; }
  .mt tbody .mt-num { position: absolute; left: var(--s-5); top: calc(var(--s-5) + 1px); padding: 0; }
  .mt tbody .mt-what { padding: 1px 0 var(--s-3) 42px; font-size: 16px; line-height: 24px; }
  .mt tbody td[data-label] { padding: 10px 0; border-top: 1px solid var(--divider); }
  .mt tbody td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12px; line-height: 16px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3);
  }
  .mt tbody tr.is-flash > * { animation: none; }
  .mt tbody tr.is-flash { animation: w-card-flash 2s var(--ease) 1; }
  html:not(.js) .mt tbody tr:target > * { animation: none; }
  html:not(.js) .mt tbody tr:target { animation: w-card-flash 2s var(--ease) 1; }
}
@keyframes w-card-flash { 0%, 30% { background-color: var(--highlight); } 100% { background-color: var(--surface); } }
.w-never-stored { padding: var(--s-5) var(--s-6); border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.w-never-stored p { margin-top: var(--s-2); color: var(--text-2); }

/* ---------------------------------------------------------------- Proof ledger */
.pl-wrap { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.pl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.pl thead th {
  position: sticky; top: var(--header-h, 64px); z-index: 2; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--divider);
  text-align: left; white-space: nowrap; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2);
}
.pl thead th:first-child { border-top-left-radius: 20px; padding-left: 24px; }
.pl thead th:last-child { border-top-right-radius: 20px; }
.pl tbody th, .pl tbody td { padding: 16px 20px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--divider); }
.pl tbody tr:last-child > * { border-bottom: 0; }
.pl-claim { position: relative; width: 34%; padding-left: 54px !important; font-weight: 600; color: var(--text); }
.pl-n { position: absolute; left: 24px; top: 16px; display: block; width: 26px; line-height: 22px; font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pl-proof { color: var(--text-2); }
.pl-status { width: 196px; }
@container wiki (max-width: 759px) {
  .pl-wrap { background: none; box-shadow: none; border-radius: 0; }
  .pl, .pl tbody, .pl tr, .pl td, .pl th { display: block; width: auto !important; }
  .pl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pl tbody { display: grid; gap: var(--s-3); }
  .pl tbody tr { padding: var(--s-5); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
  .pl tbody th, .pl tbody td { padding: 0 !important; border: 0; }
  .pl tbody .pl-claim { display: block !important; padding: 0 0 0 30px !important; font-size: 16px; line-height: 24px; }
  .pl-n { left: 0; top: 0; width: 30px; line-height: 24px; }
  .pl tbody .pl-proof { margin-top: 4px; padding-left: 30px !important; }
  .pl-status { margin-top: var(--s-4); padding-top: var(--s-4) !important; margin-left: 30px; border-top: 1px solid var(--divider) !important; }
}

/* ---------------------------------------------------------------- Numbered cards (a compromised server) */
.w-caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container wiki (min-width: 760px) { .w-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.w-caps > ol { display: contents; }
.w-cap {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0 var(--s-4); padding: var(--s-6);
  border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1);
}
.w-cap__num {
  grid-row: span 2; min-width: 22px; font-family: var(--font-display); font-variation-settings: var(--display-variation);
  font-weight: 600; font-size: 34px; line-height: 34px; color: var(--seal);
}
.w-cap__title { font-size: 17px; line-height: 25px; font-weight: 600; color: var(--text); }
.w-cap__notice { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); font-size: 15px; line-height: 23px; color: var(--text-2); }
.w-cap__label {
  display: block; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}
.w-cap--safe { display: block; background: var(--success-container); color: var(--on-success-container); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verified) 25%, transparent); }
.w-cap--safe .w-h4 { display: flex; align-items: center; gap: var(--s-3); color: inherit; }
.w-cap--safe .w-h4 .i { width: 22px; height: 22px; color: var(--verified); }
.w-cap--safe .w-icons { margin-top: var(--s-4); }
.w-cap--safe .w-icons > li { font-size: 16px; line-height: 24px; font-weight: 500; }

/* ---------------------------------------------------------------- Pull line (where our servers are) */
.w-motto { padding-top: var(--s-2); }
.w-motto::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: var(--s-5); border-radius: 2px; background: var(--seal); }
.w-motto p {
  font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600;
  font-size: 28px; line-height: 34px; letter-spacing: -0.015em; color: var(--text);
}
@media (min-width: 768px) { .w-motto p { font-size: 34px; line-height: 40px; } }

/* ---------------------------------------------------------------- Chat lines and code samples */
/* The chat's own background, and each notice drawn as the app draws it (app.css .sys-row, .sys-pill): a 13/18 pill,
   4 pt by 12 pt, its 14 pt glyph inline, "Tap to verify." in the link colour, balanced lines, and at most the room
   the pill has on an iPhone (393 pt less 24 pt each side). Neutral, warning (seal-warning) and success (both sides
   confirmed) tones from the same tokens. The caption under each one is the site's own words, at the panel's width. */
.w-chat {
  display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); border-radius: var(--r-sheet);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--card-edge);
}
.w-chat > li { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.w-sys {
  display: inline-block; max-width: min(100%, 345px); padding: 4px 12px; border-radius: 13px;
  background: var(--system-bg); color: var(--system-text); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.003em;
  text-align: center;
}
.w-sys .i { display: inline-block; width: 14px; height: 14px; margin: 0 5px 0 -1px; vertical-align: -2.5px; }
.w-sys b { font-weight: 600; color: var(--link); }
.w-sys--warn { background: var(--warning-container); color: var(--on-warning-container); }
.w-sys--ok { background: var(--success-container); color: var(--on-success-container); }
.w-sys__caption { font-size: 13px; line-height: 18px; color: var(--text-2); }

.w-sample { padding: var(--s-5) var(--s-6) var(--s-6); border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.w-sample__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.w-sample__caption { margin-top: var(--s-4); font-size: 14px; line-height: 20px; color: var(--text-2); }
/* Codes drawn as the app's key cells (ui.css .key-grid, .key-cell): 4 to a row, 8 pt apart, 10 pt corners, the
   container tint, 17/22 monospaced digits at 0.08em, a 01 to 12 number above each group of the Recovery Key (three
   full rows; an older 13-group key would centre its last row); the grid as wide as on a phone (the code card's 361 pt less its padding). */
.w-keys { --cols: 4; --gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); width: min(100%, 332px); margin-top: var(--s-4); }
.w-key {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-height: 44px; padding: 8px 4px; border-radius: 10px;
  background: var(--container);
}
.w-keys--numbered .w-key { padding: 9px 4px 6px; }
.w-key__num { font-style: normal; font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.w-key__val { font-family: var(--font-mono); font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: 0.08em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 379px) { .w-key__val { font-size: 16px; letter-spacing: 0.06em; } }

/* ---------------------------------------------------------------- Not in Murmur */
.w-miss { display: grid; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.w-miss > li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-2); }
.w-miss > li > .i { width: 20px; height: 20px; margin-top: 4px; color: var(--text-3); }
.w-miss b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- Glossary */
.gloss { max-width: none; margin-top: var(--s-8); }
@container wiki (min-width: 760px) { .gloss { columns: 2; column-gap: var(--s-12); } }
.gloss > div { break-inside: avoid; padding: var(--s-4) 0; border-top: 1px solid var(--divider); border-radius: 2px; }
.gloss dt { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text); }
.gloss dd { margin-top: var(--s-1); color: var(--text-2); }
.gloss__to { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--link); text-decoration: none; }
.gloss__to .i { width: 16px; height: 16px; transition: transform var(--dur-md) var(--ease); }
.gloss__to:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gloss__to:hover .i { transform: translateX(3px); }
.gloss > div.is-flash { animation: w-term-flash 2s var(--ease) 1; }
html:not(.js) .gloss > div:target { animation: w-term-flash 2s var(--ease) 1; }
@keyframes w-term-flash { 0%, 30% { background-color: var(--highlight); box-shadow: 0 0 0 8px var(--highlight); } 100% { background-color: transparent; box-shadow: 0 0 0 8px transparent; } }

/* ---------------------------------------------------------------- Live counters (this website) */
.w-count { padding: var(--s-6); border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.w-count__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@container wiki (min-width: 640px) { .w-count__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); } }
.w-count__item { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) 0; }
.w-count__item + .w-count__item { border-top: 1px dashed var(--outline-soft); }
@container wiki (min-width: 640px) {
  .w-count__item { flex-direction: column; justify-content: flex-start; gap: var(--s-2); padding: var(--s-2) var(--s-4); text-align: center; }
  .w-count__item + .w-count__item { border-top: 0; border-left: 1px dashed var(--outline-soft); }
}
.w-count__num {
  order: -1; min-width: 48px; font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600;
  font-size: 48px; line-height: 52px; color: var(--text); font-variant-numeric: tabular-nums; text-align: center;
}
.w-count__label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.w-count__sub { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text-2); }


/* =====================================================================================================================
   5. DEMO: THE LIVE SEAL (ported from the v1 home page; behavior in wiki.js)
   Three panels side by side when the article column is at least 870 px wide (it is 880 px on every desktop from 1280 px,
   and 870 to 975 px from 918 to 1023 px); stacked with a downward connector below. Narrower than that, the panel heads
   would not hold "One of Karim’s 2 devices" on one line.
   ===================================================================================================================== */
.wiki-demo { padding: var(--s-5) var(--s-4) var(--s-6); border-radius: var(--r-sheet); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
@container wiki (min-width: 600px) { .wiki-demo { padding: var(--s-8); } }
.wiki-demo__title { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text); }
.wiki-demo__sub { display: flex; align-items: center; gap: 8px; margin-top: var(--s-1); font-size: 15px; line-height: 22px; color: var(--text-2); }
.wiki-demo__sub .i { width: 18px; height: 18px; color: var(--seal); }

.seal-panels { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 600px; margin: var(--s-6) auto 0; }
@container wiki (min-width: 870px) {
  .seal-panels { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.08fr) 28px minmax(0, 1fr); align-items: stretch; max-width: none; }
}
.seal-panel { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2); }
.seal-panel__head { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--divider); }
.seal-panel__who { min-width: 0; }
.seal-panel__title { font-family: var(--font-ui); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--text); white-space: nowrap; }
.seal-panel__sub { font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
/* Safety net only (a larger default font, say): an ellipsis rather than text under the postmark or past the edge */
.seal-panel__title, .seal-panel__sub { overflow: hidden; text-overflow: ellipsis; }
@container wiki (min-width: 870px) { .seal-panel__head { gap: 10px; padding: 14px; } }
.seal-panel__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--container); color: var(--text-2); }
.seal-panel__icon .i { width: 22px; height: 22px; }
.seal-panel__body { flex: 1; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); min-width: 0; }

/* Panel A: the composer */
.seal-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); white-space: nowrap; }
.seal-input {
  display: block; width: 100%; min-height: 124px; max-height: 220px; resize: none; padding: 12px 14px; border: 0; border-radius: 14px;
  color: var(--text); font-size: 16px; line-height: 24px; box-shadow: inset 0 0 0 1px var(--input-border); background-color: var(--surface-2);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, color-mix(in srgb, var(--outline-soft) 55%, transparent) 23px 24px);
  background-position: 0 12px; background-attachment: local; background-clip: padding-box; transition: box-shadow var(--dur-sm) var(--ease);
}
.seal-input:focus, .seal-input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--input-focus); }
.seal-input::placeholder { color: var(--text-3); }
.seal-static { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--input-border); font-size: 16px; line-height: 24px; }
.seal-error { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 20px; color: var(--text); font-weight: 500; }
.seal-error .i { width: 18px; height: 18px; color: var(--seal); }
.seal-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-3); font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.seal-meta > :last-child { margin-left: auto; }
.seal-meta b { color: var(--text); font-weight: 600; }
.seal-send { margin-top: auto; }
.seal-send .i { width: 22px; height: 22px; }
.seal-send[aria-disabled="true"] { opacity: 0.72; }

/* Panel B: the envelope the server gets */
.seal-panel--server { background: var(--paper); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-3); }
.seal-panel--server::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--grain); }
.seal-panel--server::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; pointer-events: none; border-radius: 20px 20px 0 0; opacity: 0.55;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--outline-soft) 70%, transparent) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--outline-soft) 70%, transparent) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.seal-panel--server .seal-panel__head { padding-right: 120px; border-bottom-style: dashed; border-bottom-color: var(--outline-soft); }
.seal-panel--server .seal-panel__head, .seal-panel--server .seal-panel__body { position: relative; z-index: 1; }
.seal-postmark { position: absolute; z-index: 2; top: 10px; right: 12px; display: flex; align-items: center; gap: 4px; pointer-events: none; }
.seal-postmark__ring {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; transform: rotate(-12deg);
  border: 2px solid color-mix(in srgb, var(--seal) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--seal) 40%, transparent); outline-offset: -7px;
  color: color-mix(in srgb, var(--seal) 85%, var(--text)); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.seal-postmark__waves { order: -1; width: 46px; height: 26px; transform: rotate(-12deg); color: color-mix(in srgb, var(--seal) 45%, transparent); }
@container wiki (min-width: 870px) {
  .seal-postmark__waves { display: none; }
  .seal-panel--server .seal-panel__head { padding-right: 76px; }
}
@container wiki (max-width: 419px) {
  .seal-postmark__waves { display: none; }
  .seal-panel--server .seal-panel__head { padding-right: 76px; }
}
.seal-fields { display: grid; }
.seal-fields > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--divider) 80%, transparent); }
.seal-fields > div:first-child { padding-top: 0; }
.seal-fields dt { flex: none; font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.seal-fields dd { min-width: 0; text-align: right; font-size: 14px; line-height: 20px; color: var(--text); }
.seal-fields .mono { font-family: var(--font-mono); font-size: 13px; }
.seal-fields .is-new { animation: w-field-in var(--dur-lg) var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes w-field-in { from { opacity: 0; transform: translateY(4px); } }
.seal-contents { margin-top: var(--s-1); padding: var(--s-3) 14px; border-radius: 14px; background: var(--container); }
.seal-contents__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 24px; }
.seal-contents__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.seal-cipher { margin-top: 6px; font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--text-2); word-spacing: 2px; overflow-wrap: anywhere; }
html.js .seal-cipher:not(.is-open) { max-height: 120px; overflow: hidden; }
.seal-cipher .hex-flip { background: var(--highlight); color: var(--on-highlight); border-radius: 3px; transition: background-color 600ms linear; }
.seal-contents__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.w-textbtn {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; border-radius: 4px; background: none;
  color: var(--link); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent);
}
.w-textbtn:hover { text-decoration-color: currentColor; }
.seal-attempt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--overlay); color: var(--text-2); font-size: 14px; line-height: 20px; }
.seal-attempt .i { width: 18px; height: 18px; margin-top: 1px; color: var(--text-2); }
.seal-caption { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.seal-caption .i { width: 18px; height: 18px; margin-top: 1px; color: var(--seal); }
.seal-foot { margin-top: auto; font-size: 13px; line-height: 18px; color: var(--text-2); }
.w-rowchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-chip); vertical-align: 1px;
  background: var(--container); color: var(--link); font-size: 12px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-decoration: none; transition: background-color var(--dur-sm) var(--ease);
}
.w-rowchip:hover { background: var(--accent-container); }
.w-rowchip:focus-visible { border-radius: var(--r-chip); }
.seal-panel--server .seal-contents { background: color-mix(in srgb, var(--container) 86%, transparent); }

/* Panel C: the recipient */
.seal-recv { justify-content: center; min-height: 248px; }
.seal-recv__state { display: none; }
.seal-recv[data-state="waiting"] .seal-recv__waiting, .seal-recv[data-state="arrived"] .seal-recv__arrived,
.seal-recv[data-state="opened"] .seal-recv__opened, .seal-recv[data-state="refused"] .seal-recv__refused { display: flex; animation: w-state-in var(--dur-md) var(--ease); }
@keyframes w-state-in { from { opacity: 0; } }
.seal-recv__waiting {
  flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6);
  border: 2px dashed var(--outline-soft); border-radius: 16px; color: var(--text-2); text-align: center; font-size: 15px; line-height: 22px;
}
.seal-recv__waiting .i { width: 36px; height: 36px; color: var(--text-3); }
.seal-recv__arrived { flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.seal-recv__label { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text); }
.seal-env { position: relative; width: 184px; max-width: 100%; aspect-ratio: 200 / 128; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2); }
.seal-env::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--outline-soft) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--outline-soft) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.seal-env__wax { position: absolute; left: 50%; top: 58%; width: 46px; height: 46px; transform: translate(-50%, -50%); }
.seal-env__half { position: absolute; inset: 0; width: 46px; height: 46px; }
.seal-env__half--l { clip-path: inset(0 50% 0 0); }
.seal-env__half--r { clip-path: inset(0 0 0 50%); }
.seal-recv.is-breaking .seal-env__half--l { animation: w-break-l var(--dur-lg) var(--ease) forwards; }
.seal-recv.is-breaking .seal-env__half--r { animation: w-break-r var(--dur-lg) var(--ease) forwards; }
@keyframes w-break-l { to { transform: translate(-6px, 3px) rotate(-8deg); opacity: 0; } }
@keyframes w-break-r { to { transform: translate(6px, 3px) rotate(8deg); opacity: 0; } }
.seal-recv.is-arriving .seal-env { animation: w-land var(--dur-lg) var(--ease-spring); }
@keyframes w-land { from { transform: translateY(-6px) scale(0.97); opacity: 0.4; } }
.seal-recv__opened { flex-direction: column; gap: var(--s-3); }
.seal-recv__chat { padding: var(--s-4); border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--card-edge); }
/* Karim's laptop shows the message as the app draws it in a direct chat (app.css .bubble, .b-text, .meta): no sender
   line, 16/22 text, an 18 pt bubble with no tail, its corner on the photo's side 7.8 pt, the time at 11 pt and paler. */
.seal-recv__chat .bubble {
  max-width: 100%; padding: 6px 12px 7px; border-radius: 18px 18px 18px 7.8px;
  font-size: 16px; line-height: 22px; letter-spacing: -0.011em;
}
.seal-recv__chat .bubble__meta { margin: 8px -2px -3px 10px; font-size: 11px; line-height: 13px; letter-spacing: 0; }
.seal-recv__chat .bubble__meta { color: color-mix(in srgb, var(--bubble-in-meta) 68%, transparent); }
.seal-recv__ok { display: flex; gap: 8px; align-items: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text); }
.seal-recv__ok .i { width: 18px; height: 18px; color: var(--seal); }
.seal-refused {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-5); border-radius: 16px;
  background: var(--warning-container); color: var(--on-warning-container); font-size: 15px; line-height: 22px; font-weight: 500;
}
.seal-refused .i { width: 26px; height: 26px; color: var(--warning); flex: none; }
.seal-recv__refused { flex-direction: column; }

/* Connectors and the travelling envelope */
.seal-connector { position: relative; display: grid; place-items: center; height: 40px; }
.seal-connector__line { position: absolute; top: 4px; bottom: 4px; left: 50%; border-left: 2px dashed var(--outline-soft); }
.seal-connector__chev { position: relative; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); transform: rotate(90deg); box-shadow: 0 0 0 1px var(--divider); }
@container wiki (min-width: 870px) {
  .seal-connector { height: auto; }
  .seal-connector__line { top: 50%; bottom: auto; left: 4px; right: 4px; border-left: 0; border-top: 2px dashed var(--outline-soft); }
  .seal-connector__chev { transform: none; }
}
.seal-token { position: absolute; left: 0; top: 0; z-index: 5; width: 48px; height: 32px; border-radius: 6px; opacity: 0; pointer-events: none; background: var(--paper); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2); }
.seal-token::before {
  content: ""; position: absolute; inset: 0 0 40% 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--outline-soft) 50%, transparent calc(50% + 0.5px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.5px), var(--outline-soft) 50%, transparent calc(50% + 0.5px)) right / 50% 100% no-repeat;
}
.seal-token__wax { position: absolute; left: 50%; top: 60%; width: 13px; height: 13px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--wax-gradient); box-shadow: 0 1px 2px rgb(94 29 16 / 0.35); }

.seal-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
@container wiki (max-width: 559px) { .seal-controls { flex-direction: column; } .seal-controls .btn { width: 100%; } }
.seal-controls .btn { background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.seal-controls .btn:hover { background: color-mix(in srgb, var(--surface) 92%, var(--text)); }
.seal-need { margin-top: var(--s-2); text-align: center; font-size: 13px; line-height: 18px; color: var(--text-2); }
.seal-status { min-height: 22px; margin-top: var(--s-3); text-align: center; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--text-2); }
.seal-note { margin-top: var(--s-5); text-align: center; font-size: 15px; line-height: 22px; color: var(--text-2); }


/* =====================================================================================================================
   6. DEMO: THE RECOVERY EXPLORER (ported from the v1 security page; behavior in wiki.js)
   ===================================================================================================================== */
.rx { padding: var(--s-5); border-radius: var(--r-sheet); background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2); }
@container wiki (min-width: 600px) { .rx { padding: var(--s-8); } }
.rx__prompt { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.rx__toggles { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); }
@container wiki (min-width: 760px) { .rx__toggles { flex-direction: row; } .rx-toggle { flex: 1 1 auto; } }
.rx-toggle {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px 0 16px; border: 0; border-radius: 14px;
  background: var(--surface-2); color: var(--text); font-size: 16px; line-height: 20px; font-weight: 500; white-space: nowrap; text-align: left;
  box-shadow: inset 0 0 0 1px var(--outline-soft);
  transition: background-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.rx-toggle:hover { background: var(--container); }
.rx-toggle > .i { width: 22px; height: 22px; color: var(--text-2); }
.rx-toggle__box {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--outline); color: transparent; transition: background-color var(--dur-sm) var(--ease);
}
.rx-toggle__box .i { width: 14px; height: 14px; }
.rx-toggle[aria-pressed="true"] { background: var(--accent-container); color: var(--on-accent-container); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--seal) 60%, transparent); }
.rx-toggle[aria-pressed="true"] > .i { color: var(--seal); }
.rx-toggle[aria-pressed="true"] .rx-toggle__box { background: var(--seal); box-shadow: none; color: var(--on-brand); }
.rx-toggle:focus-visible { border-radius: 14px; }
.rx__result { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-5); padding: var(--s-5); border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
@container wiki (min-width: 600px) { .rx__result { flex-direction: row; gap: var(--s-5); padding: var(--s-6); } }
.rx__body { flex: 1; min-width: 0; }
.rx__title { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.rx__text { margin-top: var(--s-2); color: var(--text-2); }
.rx__body.is-swapping .rx__live { animation: w-rx-in var(--dur-md) var(--ease); }
@keyframes w-rx-in { from { opacity: 0; transform: translateY(4px); } }
.rx-static { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
@container wiki (min-width: 600px) { .rx-static { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-static > li { padding: var(--s-5); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.rx-static__title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
.rx-static__text { margin-top: var(--s-1); font-size: 15px; line-height: 22px; color: var(--text-2); }


/* =====================================================================================================================
   7. WITHOUT JAVASCRIPT, REDUCED MOTION, FORCED COLORS, PRINT
   ===================================================================================================================== */
html:not(.js) .wiki .js-only { display: none !important; }
html.js .wiki .no-js-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .toc-pill { transform: none; transition: opacity var(--dur-sm) linear, visibility 0s linear var(--dur-sm); }
  .toc-pill.is-shown { transform: none; transition: opacity var(--dur-sm) linear, visibility 0s; }
  .toc__caret, .w-seg::before, .gloss__to .i, .w-go .i, .wiki-tech__caret { transition: none; }
  .wiki-skip { transform: none; }
  .copied-tip { animation: w-tip-fade 1.6s linear forwards; }
  @keyframes w-tip-fade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
  /* Arrival highlight: no animation, a plain highlight that wiki.js removes after 2 seconds */
  .wiki-article.is-flash > .wiki-title, .wiki-group.is-flash > .wiki-title { animation: none; background-color: var(--highlight); box-shadow: 0 0 0 6px var(--highlight); }
  .mt tbody tr.is-flash > *, .gloss > div.is-flash { animation: none; background-color: var(--highlight); }
  .gloss > div.is-flash { box-shadow: 0 0 0 8px var(--highlight); }
  html:not(.js) .wiki-article:target > .wiki-title, html:not(.js) .wiki-group:target > .wiki-title,
  html:not(.js) .mt tbody tr:target > *, html:not(.js) .gloss > div:target { animation: none; background-color: var(--highlight); }
  .seal-fields .is-new, .seal-recv.is-arriving .seal-env, .rx__body.is-swapping .rx__live, .wiki-tech[open] > .kv { animation: none; }
}
@container wiki (max-width: 759px) {
  @media (prefers-reduced-motion: reduce) { .mt tbody tr.is-flash { animation: none; background-color: var(--highlight); } }
}

/* how-it-works-fr.html only (:root[lang^="fr"]): « Comment ça marche. » is about 1.5 times as wide as "How it works.",
   so on the narrowest phones its type steps down a little and the title stays on one line, as in English (40 px from
   about 440 px up; 35 px at 390, 32 px at 360). The English page never moves with this rule. */
@media (max-width: 479px) {
  :root[lang^="fr"] .page-how-it-works .wiki-hero__title { font-size: min(40px, calc((100vw - 2 * var(--gutter)) / 10.1)); }
}
/* French only, at every width: a long Contents title wraps onto a second line rather than run into the next column
   (600 to 690 px), past the card (« Ce que nous ne construirons jamais » at 320) or past the desktop column, where
   « Comment nous construisons Murmur » and « Ce que nous ne construirons jamais » are 14 and 4 px wider than their
   row (they would stretch the column and let it slide sideways, with the focus ring cut). Those two take two lines
   there; the French legal pages' Contents wraps the same way. */
:root[lang^="fr"] .toc__link { white-space: normal; }
/* French only, under 340 px: « Ma clé de récupération » and its check disk need 20 px more than the recovery
   explorer's toggle, so its label may take two balanced lines (the toggle keeps its 56 px and its 14 px of padding). */
@media (max-width: 339px) {
  :root[lang^="fr"] .rx-toggle { white-space: normal; text-wrap: balance; }
}
/* French only, under 360 px: « Essayer de l’ouvrir comme le serveur » is wider than its button, so the seal demo's
   buttons may take two lines; and « Serveur Murmur » (118 px) gets the room it needs beside the postmark, which moves
   2 px to the right: a tighter gap after the icon and 72 px kept for the stamp, still 6 px clear of its ring. */
@media (max-width: 359px) {
  :root[lang^="fr"] .seal-controls .btn { height: auto; min-height: var(--btn-h); padding-block: 12px; line-height: 22px; white-space: normal; text-wrap: balance; }
  :root[lang^="fr"] .seal-panel--server .seal-panel__head { gap: 8px; padding-right: 72px; }
  :root[lang^="fr"] .seal-postmark { right: 10px; }
}

@media (forced-colors: active) {
  .toc__link[aria-current="true"]::before { background: Highlight; }
  .w-dots > li::before { background: CanvasText; }
  .wiki-summary, .w-card, .w-cap, .mt-wrap, .pl-wrap, .w-table, .rx, .wiki-demo, .seal-panel { border: 1px solid CanvasText; }
  .w-chiplink, .wiki-tech__summary, .wiki-skip, .toc-pill { border: 1px solid ButtonText; }
}

@media print {
  .wiki { background: none; }
  .wiki-layout { display: block; padding-bottom: 0; }
  .wiki-side, .toc, .toc-pill, .wiki-start, .self-link, .wiki-backtop, .mt-controls, .seal-controls, .seal-status, .seal-need,
  .seal-input, .seal-send, .rx__toggles, .seal-contents__foot, .wiki-skip, .wiki-tech__summary > .i { display: none !important; }
  .wiki-tech__summary { height: auto; padding: 0; background: none; font-weight: 600; }
  .wiki-tech::details-content { content-visibility: visible; display: block; }   /* closed notes print too (wiki.js also opens them) */
  .wiki-group { margin-top: 32px; break-before: auto; }
  .wiki-article { break-inside: auto; }
  .wiki-title { break-after: avoid; }
  .wiki-summary, .w-card, .w-cap, .mt tbody tr, .pl tbody tr, .gloss > div { break-inside: avoid; }
  .mt tbody tr[hidden] { display: table-row !important; }
  .mt thead th, .pl thead th { position: static; }
  .seal-cipher { max-height: none !important; }
  .wiki-body a:not([class]), .wiki-tech a:not([class]), .wiki-related a { color: inherit; text-decoration: none; }
}