:root {
  /* The tokens (the visual audit, docs/visual-audit.md, as vista's): one value for each role, each named for it;
     web/tests/test_style.py holds the rest of the file to them. */
  /* Greys. */
  --ink: #111111;          /* text; a chosen thing's edge; the bar */
  --dark: #2b2b2b;         /* a control's text; the sliders */
  --muted: #6b6b6b;        /* secondary text: labels, headers, a switch's unchosen options */
  --mid: #8c8c8c;          /* drawn greys (G0's names and points, the zone's corners, a star's ring, a generator's dot); a
                              checkbox's edge; an edge under the pointer */
  --faint: #9e9e9e;        /* text switched off: a placeholder, an excluded pill, a failed row, a disabled step, a far part */
  --rule: #b5b5b5;         /* a control's edge; a table's rules; a group's box; Γ's block lines */
  --hairline: #e2e2e2;     /* a separator; a card's edge */
  --chosen: #d9d9d9;       /* what is chosen: an option, an operation, a part, a pill, the pager's page; a slider's track */
  --hover: #f6f6f6;        /* under the pointer, on white; a table's header row */
  --hover-panel: #e4e4e4;  /* under the pointer, on a panel */
  --light: #f2f2f2;        /* a panel's fill */
  --card: #fafafa;         /* a card's fill, and a hover card's */
  --page: #f7f7f7;
  --paper: #ffffff;        /* white: the page's body, the view, a control; text on the bar */
  --on-ink: #e6e6e6;       /* secondary text on the bar */
  /* Colours: the animation's red and blue (Q's and k's too), their tints behind the part being played; a response's
     verdicts; the checks' known difference; an alert; the moments' arrows; the busy bar; a swatch's edge; white over
     the view; a spinner's track; a text box's glow while typed in. */
  --red: #c62828;
  --blue: #1f62c9;
  --red-tint: #f7dddd;
  --blue-tint: #dbe5f6;
  --yes: #1b7f3b;
  --no: #b03a2e;
  --known: #9a6700;
  --alert: #fdecea;
  --moment: #1b1b1b;
  --busy: #f3e2ad;
  --busy-alt: #f8edc9;
  --busy-edge: #dcc98c;
  --edge: rgba(0, 0, 0, 0.3);
  --veil: rgba(255, 255, 255, 0.88);
  --track: rgba(0, 0, 0, 0.18);
  --glow: rgba(0, 0, 0, 0.08);
  --strip: rgba(255, 255, 255, 0.85);  /* an example card's name and facts over its thumbnail (vista's) */
  /* Shadows: whatever floats (menus, hover cards, Record's card, the player, the fit card, the busy bar); the tab
     shown, raised on its track; a phone's sheet. Text over the view, its halo; the operation's large symbol's. The
     keyboard's focus. */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-sheet: 0 -2px 14px rgba(0, 0, 0, 0.14);
  --halo: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
  --halo-large: 0 0 3px #fff, 0 0 6px #fff;
  --focus: 2px solid var(--ink);
  /* Corners: a control's (and a highlight's); a box's (a card, a panel, a group, a menu's list, a hover card, the example
     cards, the drop zone); a small mark's (a checkbox, a swatch, a track); a pill's and a chip's. */
  --radius: 3px;
  --radius-box: 4px;
  --radius-mark: 2px;
  --radius-round: 999px;
  /* The expanded views' sidebar (static/panes.js): its width, and the selection's share of a page's height; each a
     handle's to move. */
  --side-width: 336px;
  --selection-share: 0.4;
  color: var(--ink);
}
/* Type: the page's; the sidebar's text and its controls' and cards' (and the page's secondary text and narrower
   tables); small (switches, tabs, the view's tools, hover cards, footnotes, the sidebar's small notes); a phone's key
   over the view; headings (h2, the banner's Γ and k); a title (the drop card's, the paper's
   in the bar); Find Γ in the bar; the front page's title; an entry's name. Each the page's times its factor, so that
   print and its measuring (10pt) scale them all. Labels drawn over the view: names (atoms, angles, the zone's points
   and axes) and measurements (distances, lengths). */
:root, body.print-measure {
  --text-page: 17px;
  --text: calc(var(--text-page) * 0.9);
  --text-small: calc(var(--text-page) * 27 / 34);
  --text-tiny: calc(var(--text-page) * 0.6);
  --text-heading: calc(var(--text-page) * 1.3);
  --text-title: calc(var(--text-page) * 1.15);
  --text-brand: calc(var(--text-page) * 1.5);
  --text-hero: calc(var(--text-page) * 2);
  --text-entry: calc(var(--text-page) * 2.3);
  --label: 14px;
  --label-measure: 12.5px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); font-size: var(--text-page); line-height: 1.45; }
main { max-width: 1040px; margin: 0 auto; padding: 18px 16px 40px; background: var(--paper); }
a { color: inherit; }  /* a link is its text's colour, grey in grey notes; its underline marks it */
a:hover { color: var(--ink); }
/* The page font follows the mathematics renderer (see web/mathsetup.py). */
body.math-mathjax { font-family: "STIX Two Text", "Times New Roman", Times, "Nimbus Roman", serif; }
body.math-mathjax code, body.math-mathjax .mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.85em; }
body.math-katex { font-family: "KaTeX_Main", "Latin Modern Roman", "CMU Serif", "Computer Modern Serif", serif; }
body.math-katex code, body.math-katex .mono { font-family: "KaTeX_Typewriter", "Latin Modern Mono", "CMU Typewriter Text", monospace; font-size: 0.92em; }
.muted { color: var(--muted); }
.small { font-size: var(--text); }
/* KaTeX enlarges mathematics by 21% to suit other text fonts; with Computer Modern text the sizes should agree. */
.math-katex .katex { font-size: 1em; }
/* A formula never breaks inside itself; lists of formulas wrap between their entries. */
mjx-container[display="false"], .katex { white-space: nowrap; }

.topbar { background: var(--ink); color: var(--paper); padding: 10px 20px; }
.brand { color: var(--paper); font-size: var(--text-title); text-decoration: none; display: inline-flex; align-items: center; gap: 0.25em; }  /* the paper's title centred on Find Γ (the gap: the space flex drops) */
.brand b { margin-right: 0.45em; font-size: var(--text-brand); flex: none; white-space: nowrap; }  /* Find Γ, larger than the paper's title after it, never broken */
.brand:hover { color: var(--paper); }
footer { text-align: center; color: var(--muted); font-size: var(--text-small); padding: 18px; }

h1, h2, h3, h4 { color: var(--ink); }
h2 { font-size: var(--text-heading); margin: 28px 0 10px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }
/* A heading directly above a table needs no rule of its own: the table's top rule follows. */
h2.flush { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
h2.with-toggle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h2.with-toggle .toggle-group { margin-left: auto; align-self: center; }
h3 { font-size: var(--text-page); margin: 0 0 8px; }
h4 { font-size: var(--text-page); color: var(--dark); margin: 18px 0 6px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.after-heading { margin-top: 0; }

/* Front page */
.hero h1 { margin: 6px 0 4px; }
.card { background: var(--light); border-radius: var(--radius-box); padding: 16px 18px; margin: 16px 0; }
.card > h2:first-child { margin-top: 0; }
.upload { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.upload[hidden] { display: none; }  /* the in-browser form, until browser-upload.js finds the browser able to run it (and if a blocker stops it) */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 2px dashed var(--rule); border-radius: var(--radius-box); padding: 26px; background: var(--paper); cursor: pointer;
}
.drop.over { border-color: var(--dark); background: var(--card); }
.drop input { display: none; }
.drop-title { font-weight: bold; color: var(--ink); font-size: var(--text-title); }
.drop-hint { color: var(--muted); text-align: center; overflow-wrap: anywhere; }
/* Backend and the two tolerances side by side, the cross-check underneath, Analyse at the right. */
.options { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px 18px; align-items: end; }
.options button { grid-column: 4; justify-self: end; }
.upload .footnote { margin: 0; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: var(--text); color: var(--muted); }
.field > span { white-space: nowrap; }
.field sub { line-height: 0; }  /* keep μ_B from lowering its input box */
/* Text boxes as wide as their titles (size="1" keeps them from widening the column). */
.field input[type=text], .search-box input[type=text] {
  font: inherit; line-height: 1.45; color: var(--ink); width: 100%; padding: 4px 8px; margin: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); appearance: none; outline: none;
}
.field input[type=text]::placeholder, .search-box input[type=text]::placeholder { color: var(--faint); }
.field input[type=text]:hover, .search-box input[type=text]:hover { border-color: var(--mid); }
.field input[type=text]:focus, .search-box input[type=text]:focus { border-color: var(--ink); box-shadow: 0 0 0 2px var(--glow); }
/* Backend: a segmented switch like the Γ/U toggle of the report, built from radio buttons. */
.segmented { display: inline-flex; align-self: flex-start; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented label > span { display: block; line-height: 1.45; padding: 4px 12px; color: var(--muted); }
.segmented label + label > span { border-left: 1px solid var(--rule); }
.segmented label:hover > span { color: var(--ink); }
.segmented input:checked + span { background: var(--chosen); color: var(--ink); }
.segmented input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--ink); }
/* Cross-check: a plain black-and-white box. */
.options .check { grid-column: 1 / -1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-size: var(--text); cursor: pointer; }
.check input {
  appearance: none; width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer;
  border: 1px solid var(--mid); border-radius: var(--radius-mark); background: var(--paper) center / 11px 11px no-repeat;
}
.check input:checked {
  border-color: var(--ink); background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: var(--focus); outline-offset: 2px; }
/* Search: a text box with its button attached. */
.search-box { display: flex; width: 100%; }
.search-box input[type=text] { flex: 1; min-width: 0; border-radius: var(--radius) 0 0 var(--radius); }
.search-box .button { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; padding: 4px 14px; font-size: inherit; line-height: 1.45; }
.search-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.search-row .search-box { width: auto; flex: 1 1 240px; max-width: 380px; }  /* narrower before Browse All goes under it */
.search-row > .button { padding: 4px 14px; line-height: 1.45; border-radius: var(--radius); }  /* Browse All, as Search */
/* The box and its button one control (as vista's, e410f6a): the focus's ring around both, where the box's glow ran under
   the button; the box's ink border kept. */
.search-box input[type=text]:focus { box-shadow: none; }
.search-box:focus-within { box-shadow: 0 0 0 2px var(--glow); border-radius: var(--radius); }
.search-box .button:focus-visible { outline: none; }
.search-box:has(.button:focus-visible) { outline: var(--focus); outline-offset: 2px; }
/* MAGNDATA browser: filters, table and pages. */
.filters { display: flex; flex-direction: column; gap: 12px; }
.filter-row { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: flex-end; }
.filter-row .search { flex: 0 1 380px; }
/* Copy a link to the search shown (browse.html), in the filters' top right corner; the first row keeps clear of it. */
.filters { position: relative; }
.filters > .copy-link { position: absolute; top: 10px; right: 10px; }
.filters > .copy-link + .filter-row { padding-right: calc(1.3em + 20px); }  /* its width, less the card's padding, and a gap */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
/* A filter's title with a ? after it: its chips' definitions in a card (tips.js). */
.field-title { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.help-mark {
  font: inherit; font-size: var(--text-small); line-height: 1; width: 1.4em; height: 1.4em; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 50%;
  background: var(--paper); color: var(--muted); cursor: help;
}
.help-mark:hover, .help-mark[aria-expanded=true] { color: var(--ink); border-color: var(--mid); }
.help-mark:focus-visible { outline: var(--focus); outline-offset: 1px; }
@supports (text-box: trim-both cap alphabetic) { .help-mark > span { text-box: trim-both cap alphabetic; } }  /* (the ? on its capitals, the circle on the line's) */
.viewer-tip.class-tip { z-index: 30; max-width: min(24em, calc(100vw - 8px)); box-sizing: border-box; white-space: normal; }
.class-tip-row + .class-tip-row { margin-top: 4px; }
/* The front page's How It Works (tips.js, a ? with data-card, after the upload's one line): wider, its links followed. */
.viewer-tip.about-card { max-width: min(30em, calc(100vw - 8px)); pointer-events: auto; }
.about-card p { margin: 0; }
.about-card p + p { margin-top: 4px; }
/* Responses: each pill cycles between any, allowed (shaded) and forbidden (crossed out). */
.pill { font: inherit; font-weight: normal; line-height: inherit; color: inherit; background: none; border: 0; border-radius: var(--radius-round); padding: 0; cursor: pointer; }
.pill > span { position: relative; display: block; min-width: 2.6em; text-align: center; padding: 2px 10px; border: 1px solid var(--rule); border-radius: var(--radius-round); background: var(--paper); color: var(--ink); }
.pill:hover > span { border-color: var(--mid); }
.pill[data-state=required] > span { background: var(--chosen); border-color: var(--mid); }
.pill[data-state=excluded] > span { border-color: var(--mid); color: var(--faint); }
/* A square cross with fixed 45-degree strokes, centred on the pill whatever the symbol's width. */
.pill[data-state=excluded] > span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1.35em; height: 1.35em; transform: translate(-50%, -50%);
  pointer-events: none; background: var(--no);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2L14 14M14 2L2 14' stroke='%23000' stroke-width='1.05' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pill:focus-visible { outline: none; }
.pill:focus-visible > span { box-shadow: 0 0 0 2px var(--ink); }
/* Crystal system: pills that act as radio buttons, the chosen one shaded. */
label.pill { position: relative; }
.pill input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill input[type=radio]:checked + span { background: var(--chosen); border-color: var(--mid); }
.pill input[type=radio]:focus-visible + span { box-shadow: 0 0 0 2px var(--ink); }
.list-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 8px; }
.list-bar .count { margin: 0; }
.list-bar .pager { margin: 0 auto; }
.per-page { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* ⤓ CSV, after Per page: a button like the page sizes' boxes. */
.list-bar .download {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; color: var(--ink); text-decoration: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.list-bar .download:hover { background: var(--hover); }
.list-bar .download .icon { width: 14px; height: 14px; stroke-width: 1.8; }
.segments { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.segments a { padding: 1px 9px; color: var(--muted); text-decoration: none; }
.segments a + a { border-left: 1px solid var(--rule); }
.segments a:hover { color: var(--ink); background: var(--hover); }
.segments a.active { background: var(--chosen); color: var(--ink); }
/* Scroll boxes are positioned, so that what is absolutely positioned inside them (KaTeX's hidden copy of each
   formula, for screen readers) scrolls with them instead of widening the page. */
.table-scroll, .scroll, .multipoles { overflow-x: auto; position: relative; }
/* A table of class fit gives each column its share of the width (its col's), whatever its cells hold: a longer cell
   is cut short (max-width 0 lets the column narrow past its content), its end faded into an ellipsis (the browser's
   own leaves a formula's indices showing after it), and shown whole in a card over the cell while it is hovered or
   once it is tapped (fit.js marks the cells cut). A cell of class whole is never cut: its column is at least as wide
   as it, the others giving way. The cell's background is --cell, which the fade ends in. */
table.fit { width: 100%; }
table.fit :is(td, th) { max-width: 0; overflow: hidden; }
table.fit th { text-overflow: ellipsis; }  /* a heading wider than its column */
table.fit td { white-space: nowrap; position: relative; background: var(--cell, var(--paper)); }  /* (positioned, so KaTeX's hidden copy is cut with the rest) */
table.fit :is(td, th).whole { max-width: none; }
table.fit td.clipped::after {
  content: "…"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center;
  padding-left: 0.8em; padding-right: inherit; background: linear-gradient(to right, transparent, var(--cell, var(--paper)) 0.75em);
}
.fit-tip { position: absolute; z-index: 30; box-sizing: border-box; display: flex; align-items: center; white-space: nowrap; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); pointer-events: none; }
table.browse { font-size: var(--text); }
table.data.browse :is(td, th) { padding-left: 6px; padding-right: 6px; }
table.data.browse td { padding-top: 3px; padding-bottom: 3px; }
/* Its columns' shares, in proportion to their natural widths (about 98% of each column's entries fit; measured over
   the database on 2026-10-13): ID 3.9 : compound 9 : Crystal SG 5 : MSG 5.4 : Order 6.8 : Parent SG 5 : Γ 8.2 : k 5 :
   Allowed 9 (em), so that the table at 57.3em holds nearly everything and narrower it shrinks every column alike. ID
   and Γ are whole (the widest Γ, 0.90's B1g ⊕ B2g ⊕ B3g, is 7.42em). As the window narrows, a set of columns makes way
   once the rest would shrink below about 90% of their natural widths: Crystal SG and MSG (BNS) below 900 px, Order
   and Parent SG below 720 px; and on the narrowest phones, below 340 px, Allowed Responses. Their cols go 0 wide and
   their cells are kept, with nothing showing (a hidden cell would leave its column to the next one), the rest
   sharing the width in the same proportions. */
table.browse col.c-id { width: 6.8%; }
table.browse col.c-name { width: 15.7%; }
table.browse col.c-crystal { width: 8.7%; }
table.browse col.c-msg { width: 9.4%; }
table.browse col.c-order { width: 11.9%; }
table.browse col.c-parent { width: 8.7%; }
table.browse col.c-gamma { width: 14.3%; }
table.browse col.c-k { width: 8.7%; }
table.browse col.c-allowed { width: 15.7%; }
@media screen and (max-width: 900px) {
  table.browse col.hide-900 { width: 0; }
  table.data.browse :is(th, td).hide-900 { padding: 0; }
  table.browse col.c-id { width: 8.3%; }
  table.browse col.c-name { width: 19.2%; }
  table.browse col.c-order { width: 14.5%; }
  table.browse col.c-parent { width: 10.7%; }
  table.browse col.c-gamma { width: 17.5%; }
  table.browse col.c-k { width: 10.7%; }
  table.browse col.c-allowed { width: 19.2%; }
}
@media screen and (max-width: 720px) {
  table.browse col:is(.hide-900, .hide-720) { width: 0; }
  table.data.browse :is(th, td).hide-720 { padding: 0; }
  table.data.browse :is(td, th):not(.hide-900, .hide-720) { padding-left: 4px; padding-right: 4px; }
  table.browse col.c-id { width: 11.1%; }
  table.browse col.c-name { width: 25.6%; }
  table.browse col.c-gamma { width: 23.4%; }
  table.browse col.c-k { width: 14.2%; }
  table.browse col.c-allowed { width: 25.6%; }
}
@media screen and (max-width: 340px) {
  table.browse col.hide-340 { width: 0; }
  table.data.browse :is(th, td).hide-340 { padding: 0; }
  table.browse col.c-id { width: 14.9%; }
  table.browse col.c-name { width: 34.5%; }
  table.browse col.c-gamma { width: 31.4%; }
  table.browse col.c-k { width: 19.2%; }
}
table.browse tbody tr + tr td { border-top: 1px solid var(--hairline); }
table.browse tbody tr:hover td { --cell: var(--hover); }
table.browse tr.failed td, table.browse tr.failed a { color: var(--faint); }  /* could not be read or analysed */
/* Pages: ‹ Previous 1 2 … 5 6 [7] 8 9 … 47 Next › */
.pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 14px 0 4px; font-size: var(--text); }
.pager > * { min-width: 2.1em; text-align: center; padding: 2px 7px; border-radius: var(--radius); line-height: 1.45; }
.pager a { color: var(--ink); text-decoration: none; }
.pager a:hover { background: var(--hover); }
.pager .current { background: var(--chosen); font-weight: bold; }
.pager .gap { color: var(--muted); min-width: 1.4em; padding: 2px 2px; }
.pager .step { padding: 2px 10px; }
.pager .disabled { color: var(--faint); }
.list-notes { text-align: center; }
#results { transition: opacity 0.12s; }
#results.loading { opacity: 0.5; }  /* the next list is being fetched */
button, .button {
  font: inherit; font-weight: bold; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-box);
  padding: 7px 18px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.3;
}
.button:hover { color: var(--paper); background: var(--dark); }
button:disabled { opacity: 0.6; cursor: wait; }
.button.secondary { background: var(--paper); color: var(--ink); border-color: var(--rule); font-weight: normal; }
.button.secondary:hover { background: var(--hover); color: var(--ink); }
/* Print and Copy as icons: square, as tall as the switches beside them, the icon centred. */
.button.icon-button { display: inline-grid; place-items: center; width: calc(1.3em + 16px); height: calc(1.3em + 16px); padding: 0; }
.button.icon-button .icon { width: 17px; height: 17px; display: block; }
/* Copy buttons: both labels share one grid cell, so the width never changes. */
:is(.button, .viewer-tools button).copy { display: inline-grid; }
/* A section's copy button (report.html), at the right of its heading, after any switch there. */
.section-copy { margin-left: auto; align-self: center; font-size: var(--text-small); font-weight: normal; }
.toggle-group + .section-copy, .panel-head .viewer-tools + .viewer-tools.section-copy { margin-left: 0; }  /* (over .face.front .panel-head .viewer-tools) */
h2.with-copy { display: flex; align-items: center; gap: 12px; }
/* A heading's switches and buttons keep their size; the heading wraps instead (squeezed, their outline cut through them). */
.panel-head > :is(.viewer-tools, .toggle-group), .section-copy { flex: none; }
:is(.button, .viewer-tools button).copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
:is(.button, .viewer-tools button).copy :is(.done), :is(.button, .viewer-tools button).copy.copied .idle { visibility: hidden; }
:is(.button, .viewer-tools button).copy.copied .done { visibility: visible; }
.icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.examples { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-round); padding: 6px 12px 3px; text-decoration: none; color: var(--ink); }  /* as much room above the letters as the subscripts take below */
.chip:hover { border-color: var(--ink); }
.chip.loading { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* The front page's examples as cards, as vista's start page has them (5423a61): a thumbnail of the structure filling
   each, its Γ in its top right corner (in a white glow, to read over the picture), and on a mostly opaque white strip
   across its foot its name, on one line, and its order with its kind. Every card as wide as the longest name needs, and
   no wider (--example-width: Gd₃(Ru₀.₉₅Rh₀.₀₅)₄Al₁₂ is 178.7 px in Chromium; with the padding and borders 198.7 px;
   3 px more for other browsers' fonts); as tall as vista's are for their width. */
/* The static site's in-browser analysis (browser-upload.js): what it is doing, with a bar for the download (sliding where
   there is no measure of it: starting Python, analysing). */
.analysis-progress { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; font-size: var(--text); color: var(--muted); }
.analysis-progress[hidden] { display: none; }
.analysis-progress.failed .analysis-text { color: var(--no); }
.analysis-bar { position: relative; display: block; height: 4px; border-radius: var(--radius-mark); background: var(--hairline); overflow: hidden; }
.analysis-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); border-radius: var(--radius-mark); transition: width 0.15s; }
.analysis-progress.indeterminate .analysis-bar > span { width: 30%; transition: none; animation: analysis-slide 1.2s ease-in-out infinite; }
.analysis-progress.failed .analysis-bar { display: none; }
@keyframes analysis-slide { from { left: -30%; } to { left: 100%; } }
.example-cards { --example-width: 202px; display: grid; grid-template-columns: repeat(auto-fill, var(--example-width)); gap: 10px; }
.example-card {
  position: relative; display: block; height: 116px; color: var(--ink); text-decoration: none; background: var(--paper); isolation: isolate;
  border: 1px solid var(--rule); border-radius: var(--radius-box); overflow: hidden; line-height: 1.25;
}
.example-card:hover { border-color: var(--ink); }
.example-card.loading { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.example-thumb { position: absolute; inset: 0; display: block; background: var(--paper); }
.example-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.example-label { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 3px 9px 4px; background: var(--strip); }
.example-title { display: block; font-weight: bold; white-space: nowrap; }
.example-gamma {  /* on a white background whose edges are blurred away (::before), to read over the picture */
  position: absolute; top: 4px; right: 7px; white-space: nowrap; isolation: isolate;
}
.example-gamma::before { content: ""; position: absolute; inset: -2px -5px; z-index: -1; background: var(--paper); border-radius: var(--radius-box); filter: blur(4px); }
.example-facts { display: block; font-size: var(--text-small); color: var(--dark); }
/* Work in progress: a floating pill with moving stripes and a spinner, laid over the page so nothing shifts. */
.busy-bar {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; border-radius: var(--radius-round); font-weight: bold; color: var(--ink);
  background: repeating-linear-gradient(-45deg, var(--busy) 0 16px, var(--busy-alt) 16px 32px);
  background-size: 45.25px 45.25px;  /* one stripe period along x for 32px stripes at 45 degrees */
  border: 1px solid var(--busy-edge); box-shadow: var(--shadow);
  animation: busy-stripes 0.9s linear infinite;
}
.busy-bar[hidden] { display: none; }
.spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2.5px solid var(--track); border-top-color: var(--ink);
  animation: spin 0.7s linear infinite;
}
@keyframes busy-stripes { to { background-position: 45.25px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }

/* While MathJax typesets, the page is hidden; the bar appears only if that takes a noticeable time. */
main { transition: opacity 0.15s ease-in; }
body.typesetting main { opacity: 0; }
body.typesetting .topbar .m { visibility: hidden; }  /* the brand's Γ, until typeset */
.typeset-bar { display: none; }
body.typesetting .typeset-bar { display: flex; animation: busy-stripes 0.9s linear infinite, reveal 0.2s ease 0.35s both; }

@media (prefers-reduced-motion: reduce) {
  .busy-bar, .spinner, body.typesetting .typeset-bar { animation: none; }
  main { transition: none; }
}
.error p { font-size: var(--text-page); }

/* Report */
.banner {
  background: var(--ink); color: var(--paper); border-radius: var(--radius-box); padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.banner-main { min-width: 0; }  /* narrower than a long formula, which breaks (the breakable filter) */
.banner h1 { color: var(--paper); margin: 0; font-size: var(--text-entry); line-height: 1.05; }  /* with the line below, as tall as the corner beside it */
@media screen and (max-width: 600px) { .banner h1 { font-size: var(--text-hero); } }
.banner .variant { font-weight: normal; font-size: 0.75em; }
.banner .tag {
  display: inline-block; vertical-align: middle; margin-left: 0.4em; padding: 2px 10px 3px;
  font-size: var(--text); font-weight: normal; line-height: 1.3; border: 1px solid var(--paper); border-radius: var(--radius-round);
}
.banner .synopsis { margin: 4px 0 0; font-size: var(--text); color: var(--on-ink); }
.banner .dot { margin: 0 8px; opacity: 0.7; }
.banner .dot::before { content: "\2060"; }  /* never a line begun with a dot (a word joiner before it) */
.banner .dot::after { content: "\200B"; }  /* but a break after it */
/* Γ = … and k = … aligned on their equals signs. */
.banner-corner { display: grid; grid-template-columns: auto auto auto; column-gap: 0.3em; align-items: baseline; font-size: var(--text-heading); font-weight: bold; line-height: 1.5; }
.banner-corner .lhs { text-align: right; }
.banner-corner .rhs { text-align: left; }
.banner-corner > .corner-set { display: contents; }  /* each regime's Γ and k, in the corner's grid */
.actions { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.actions .buttons { display: flex; gap: 8px; margin-left: auto; }
.actions .nav { display: flex; gap: 8px; }  /* Back (Home on the static site) and Browse MAGNDATA, as buttons */
.alert { background: var(--alert); border-left: 4px solid var(--no); padding: 8px 12px; margin: 10px 0; }

/* Top of a report: structure | symmetry, then viewer | responses (on screen and in print); without a
   viewer, the responses run across. */
.overview {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px;
  grid-template-areas: "structure symmetry" "responses responses";
}
.overview > .structure { grid-area: structure; }
.overview > .symmetry { grid-area: symmetry; }
.overview > .viewer { grid-area: viewer; }
.overview > .responses-block { grid-area: responses; min-width: 0; }
.overview.has-viewer { grid-template-areas: "structure symmetry" "viewer responses"; row-gap: 12px; }
.overview.has-viewer .responses-block > h2:first-child, .overview.has-viewer .responses-block > .face.front > h2:first-child { margin-top: 0; }
.overview.has-viewer table.responses { font-size: var(--text); }
@media screen {
  body.report main { max-width: 1280px; }
}
@media screen and (max-width: 900px) {
  .overview.has-viewer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "structure" "symmetry" "viewer" "responses"; }
}
/* The viewer: a white stage in a grey panel, with view buttons above and the legend below. */
.viewer { min-height: 340px; }
/* Expanded: the viewer across the whole window, the stage taking the room, with a sidebar of controls
   (built by web/static/viewer.js); on a phone the sidebar runs below the stage. */
.viewer.expanded {
  position: fixed; inset: 0; z-index: 50; padding: 16px 20px; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px;
}
.viewer.expanded > .viewer-head { grid-column: 1; grid-row: 1; }
.viewer.expanded > .viewer-stage { grid-column: 1; grid-row: 2; min-height: 0; }
.viewer.expanded > .viewer-foot { grid-column: 1; grid-row: 3; }
.viewer.expanded > .viewer-side { grid-column: 2; grid-row: 1 / -1; display: block; }
body.viewer-expanded { overflow: hidden; }
.viewer-side {
  display: none; overflow-y: auto; min-height: 0; font-size: var(--text); line-height: 1.35;
  scrollbar-gutter: stable;  /* room for the scroll bar kept, so the pages do not shift between one that scrolls and one that does not */
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-box); padding: 2px 12px;
}
.side-section { border-bottom: 1px solid var(--hairline); padding: 6px 0 8px; }
.side-section:last-child { border-bottom: 0; }
.side-section > summary { font-weight: bold; cursor: pointer; padding: 3px 0; list-style-position: outside; margin-left: 14px; }
.side-row { display: flex; align-items: center; gap: 8px; min-height: 28px; flex-wrap: wrap; }
.side-label { flex: 0 0 118px; color: var(--muted); }
.side-label:empty { display: none; }
.side-row > :not(.side-label) { flex: 1; }
.side-row > .viewer-tools { flex: 0 1 auto; }
.side-slider { display: flex; align-items: center; gap: 6px; min-width: 0; }
.side-slider input { flex: 1; min-width: 0; accent-color: var(--dark); margin: 0; }
.side-slider output { flex: 0 0 54px; text-align: right; font-variant-numeric: tabular-nums; color: var(--dark); }  /* one width: the bars line up */
/* A slider with two heads (the bond sets' range of distances): two arrows of our own over a track (viewer.js,
   rangeSlider), the least ◀ reaching left from its value and the most ▶ right, the range between them dark as a native
   slider's progress. The track is inset by an arrow's width at either end. */
.side-range { position: relative; flex: 1; min-width: 0; height: 16px; }
.side-range::before { content: ""; position: absolute; left: 9px; right: 9px; top: 6px; height: 4px; border-radius: var(--radius-mark); background: var(--chosen); }
.side-range-fill { position: absolute; top: 6px; height: 4px; border-radius: var(--radius-mark); background: var(--dark); }
.side-range-head { position: absolute; top: 1px; width: 9px; height: 14px; color: var(--dark); cursor: ew-resize; touch-action: none; outline: none; }
.side-range-head svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.side-range-head:hover, .side-range-head:active { color: var(--ink); }
.side-range-head:focus-visible { outline: var(--focus); outline-offset: 1px; border-radius: var(--radius-mark); }
.side-range + output { flex: 0 0 auto; min-width: 46px; font-size: var(--text-small); }  /* least–most, wider than one value */
/* A bond set: its two species (and how many bonds each atom of the first gets), its range, its shells as chips; a set
   added, in a light gray outline of its own, its species and count in smaller type. */
.bond-set { padding: 6px 0 4px; }
.bond-sets .bond-set { border: 1px solid var(--hairline); border-radius: var(--radius-box); padding: 6px 8px; margin: 6px 0; }
.bond-sets .bond-pair { font-size: var(--text-small); }
.bond-pair { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 4px; }
/* A menu of our own (viewer.js, dropdown): the choice and a chevron in a button as the sidebar's, its list a card under it. */
.side-menu {  /* the sidebar's buttons' type and padding, so as tall as they are; the chevron at the right */
  position: relative; display: inline-block; min-width: 4.6em; white-space: nowrap;  /* (no overflow clip: Firefox would not trim it) */
  text-align: left; font: inherit; font-size: var(--text-small); line-height: 1.25; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 3px 26px 3px 10px; cursor: pointer;
}
.side-menu:hover { background: var(--hover); }
.side-menu[aria-expanded="true"] { border-color: var(--muted); }
.side-menu .icon { position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; stroke-width: 2; color: var(--muted); }
/* Their labels centred on their capitals, as the switches' are (the padding giving back what is trimmed): the menus,
   the shells' chips and Add Bonds. */
@supports (text-box: trim-both cap alphabetic) {  /* (.viewer-side: over the buttons' own padding, later in the file) */
  .viewer-side :is(.side-menu, .bond-shells .side-button, .bond-add) { text-box: trim-both cap alphabetic; }
  .viewer-side :is(.side-menu, .bond-add) { padding-block: calc(3px + (1lh - 1cap) / 2); }
  .viewer-side .bond-shells .side-button { padding-block: calc(3px + (1lh - 1cap) / 2); }
}
.side-menu-list {
  position: fixed; z-index: 60; max-height: 50vh; overflow-y: auto; padding: 4px 0;  /* over the full-window viewer (50) */
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.side-menu-item { padding: 5px 14px; white-space: nowrap; cursor: pointer; color: var(--dark); }
.side-menu-item:hover, .side-menu-item:focus { background: var(--hover); color: var(--ink); outline: none; }
.side-menu-item[aria-selected="true"] { background: var(--chosen); color: var(--ink); }
.bond-pair .bond-count { margin-left: auto; color: var(--muted); font-size: var(--text-small); white-space: nowrap; }
.bond-pair .side-button { flex: none; display: inline-grid; place-items: center; width: calc(1lh + 8px); padding: 3px 0; }  /* ×: square, as tall as the sidebar's buttons */
.bond-shells { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.bond-shell-row { display: flex; align-items: flex-start; gap: 10px; }  /* the shells' chips, and Outside at their right */
.bond-shell-row .bond-shells { flex: 1; min-width: 0; }
.bond-shell-row .side-option { flex: none; margin-top: 2px; }
.bond-switches { display: flex; align-items: center; gap: 10px; }  /* Ion–Ligand Bonds, and Outside at the right */
.bond-switches .side-option:last-child { margin-left: auto; }
.bond-shells .side-button { font-size: var(--text-small); padding: 3px 7px; }
.side-slider-reset {  /* each slider's way back to its default */
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer; font-weight: normal;
}
.side-slider-reset:hover { color: var(--ink); background: none; }
.side-slider-reset .icon { width: 12px; height: 12px; stroke-width: 2; }
.side-check { flex: 0 0 auto !important; display: inline-flex; }
.check input:disabled { opacity: 0.35; cursor: default; }
.side-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.side-checks .check { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.side-inputs { display: flex; align-items: center; gap: 4px; }
.side-number { width: 2.4em; font: inherit; font-size: var(--text-small); line-height: 1.25; padding: 3px 3px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); text-align: center; appearance: textfield; -moz-appearance: textfield; }
.side-number::-webkit-inner-spin-button, .side-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The boundary's boxes (from vista): − and + a cell at a time at each box's sides, the box square between them; each
   axis's two on one line, the label narrower. */
.side-stepper { display: inline-flex; align-items: stretch; }
.side-step { font: inherit; font-size: var(--text-small); line-height: 1; min-width: 1.35em; padding: 0 2px; border: 1px solid var(--rule); background: var(--paper); color: var(--dark); cursor: pointer; display: grid; place-items: center; }
.side-step:first-child { border-radius: var(--radius) 0 0 var(--radius); border-right: none; }
.side-step:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.side-step:hover { background: var(--hover); }
.side-stepper .side-bound { width: 2.6em; border-radius: 0; }  /* −10 to 10, −0.1, or −2/3 */
.side-bounds > .side-label { flex: 0 0 auto; margin-right: auto; }
.side-bounds > .side-inputs { flex: 0 0 auto; }
/* The sidebar's buttons (Show Orbit, + Add Bonds, Go, Record, Save as Default, …), its menus, boxes and steppers: as tall
   as a switch and in its type (the visual audit's D8, as vista's). */
.side-button {
  font: inherit; font-size: var(--text-small); line-height: 1.25; color: var(--dark); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 3px 9px; cursor: pointer;
}
.side-button:hover { color: var(--ink); background: var(--hover); }
.side-row > .side-button, .side-actions .side-button { flex: 0 0 auto; }
.viewer-tools .side-button { border: 0; border-radius: 0; padding: 3px 8px; }
.side-selection p { margin: 3px 0; }
.side-selection .side-hint { color: var(--muted); }
.side-row > .side-end { margin-left: auto; }
.side-axes { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }  /* the symmetry axes, flowing */
.side-subhead { color: var(--muted); margin: 8px 0 2px; }  /* a little title within a section */
/* A group of a section (Display): a thin rounded box, no fill, its title in the edge at the top left. */
.side-group { border: 1px solid var(--rule); border-radius: var(--radius-box); margin: 8px 0 6px; padding: 0 8px 4px; min-width: 0; }
.side-group > legend { color: var(--ink); padding: 0 4px; margin-left: -2px; }
.side-row.side-last { margin-top: 8px; }  /* Depth Fog, apart at the end of Display */
.side-row.side-right > :not(.side-label) { flex: 0 0 auto; margin-left: auto; }  /* controls flush right */
.side-row.side-nowrap { flex-wrap: nowrap; }
.side-row.side-nowrap > .side-label { flex: 0 1 118px; min-width: 0; }
.side-unit { margin-left: 4px; }
.viewer-tools.turns .side-button { padding: 3px 6px; }  /* the six 15° turns: icons, centred as the tools' (button:has(> .icon)) */
.side-axes .side-button { padding: 3px 7px; font-variant-numeric: tabular-nums; }
.side-section > summary .side-head-tools { float: right; font-weight: normal; margin-top: -1px; }  /* Multi-Select, as the view's buttons */
/* The Display section's switches, in two columns. */
.side-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 6px 0 2px; }
.side-option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.side-option:has(input:disabled) { color: var(--muted); cursor: default; }
/* The selection: a card per atom (or per set of two or three), with tables. */
.side-card { border: 1px solid var(--hairline); border-radius: var(--radius-box); padding: 5px 8px 6px; margin: 6px 0; background: var(--card); }
.side-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid var(--hairline); }
.side-kv, .side-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.side-kv th { text-align: left; font-weight: normal; color: var(--muted); padding: 1px 10px 1px 0; white-space: nowrap; width: 1%; }
.side-kv td { padding: 1px 0; }
.side-table th { text-align: left; font-weight: normal; color: var(--muted); padding: 1px 0; border-bottom: 1px solid var(--hairline); }
.side-table td { padding: 1px 0; }
.side-table .r { text-align: right; }
.side-actions { display: flex; gap: 6px; margin-top: 6px; }
/* The sidebar's pages (Viewer, Symmetry) and the Symmetry page: the elements of G, the chosen one's Γ and U;
   the part of the operation being shown is tinted as its marks in the figure: g red, U blue. */
.viewer-side .side-pages { display: flex; margin: 10px 0 4px; }
.side-pages button { flex: 1; }
/* The tabs (from vista), a segmented control: on a light grey track, no lines between them, the one shown raised on
   it in white, outlined, its label bold and in ink; the others muted, inked under the pointer. Its outline inside its
   own box (outline-offset), so that nothing beside it can cover an edge. */
.viewer-side .side-pages.viewer-tools { gap: 2px; padding: 2px; background: var(--light); border: 1px solid var(--rule); border-radius: var(--radius-box); overflow: visible; }
.side-pages button[role=tab] { background: none; border-radius: var(--radius); }
.side-pages button[role=tab]:not([hidden]) ~ button[role=tab]:not([hidden]) { border-left: 0; }
.side-pages button[role=tab]:hover { background: none; color: var(--ink); }
.side-pages button[role=tab].active {
  background: var(--paper); color: var(--ink); font-weight: bold; box-shadow: var(--shadow-raised);
  outline: 1px solid var(--rule); outline-offset: -1px;
}
/* A site's Wyckoff label in its cards' heads, its orbit's switch (from vista): grey, bold while the orbit is shown. */
.wyckoff-toggle { font: inherit; color: var(--muted); background: none; border: 0; border-radius: var(--radius); padding: 0 2px; margin: 0 -2px; cursor: pointer; }
.wyckoff-toggle:hover { background: var(--hover); }
.wyckoff-toggle.active { color: var(--ink); font-weight: bold; }
.side-page[hidden] { display: none; }
.sym-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 2px 4px; padding: 2px 0 2px; }
.sym-list[hidden], .sym-part[hidden], .sym-group[hidden], .sym-op[hidden] { display: none; }
/* The filters under Symmetry Operations: three switches of two, on one line. */
.sym-filters { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 2px; }
.sym-filter .side-button { padding: 3px 8px; }
.sym-part .sym-list + .sym-list { margin-top: 6px; }  /* a conjugacy class per row or rows, a little apart */
.sym-part + .sym-part { margin-top: 6px; }  /* U = 1, then the rest: the same space as between classes */
.sym-op {
  font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--radius); padding: 2px 5px; margin: 0;
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden;
  justify-self: start; max-width: 100%;  /* as wide as its symbol, so the highlight fits it */
}
.sym-op:hover { background: var(--hover); }
.sym-op.active { background: var(--chosen); }
.sym-op.unplaced { color: var(--muted); }
.sym-chosen { padding: 4px 0 2px; }
.sym-chosen[hidden], .sym-card[hidden] { display: none; }
.sym-whose { font-weight: normal; color: var(--muted); margin-left: 0.3em; }  /* the chosen atom's or bond's name, after Site or Bond Symmetry */
.sym-local[hidden] { display: none; }
/* The chosen element, as a card like the Viewer page's selection: its symbol, then U and Γ side by side. */
.sym-card.side-card { margin: 6px 0 8px; }
.sym-seitz { font-size: 1.12em; }
.sym-caption { color: var(--muted); font-size: var(--text-small); }
.sym-seitz .sym-caption { margin-right: 0.3em; font-size: var(--text-small); }
div.sym-caption { margin-bottom: 4px; }
.sym-matrices { display: flex; gap: 14px; align-items: center; overflow-x: auto; overflow-y: hidden; padding: 2px 0; font-size: var(--text-small); }
.sym-matrices .sym-u { display: flex; align-items: center; gap: 4px; }
.sym-gamma, .sym-u { display: flex; align-items: center; gap: 6px; flex: none; }
.sym-gamma { color: var(--muted); }  /* Γ less prominent than U */
.sym-r, .sym-t, .sym-u, .sym-un { padding: 1px 3px; border-radius: var(--radius); transition: background-color 0.25s; }
.sym-u { margin-left: -4px; }  /* U first in its row */
.sym-r.playing, .sym-t.playing { background: var(--red-tint); }
.sym-u.playing, .sym-un.playing { background: var(--blue-tint); }
.side-button:disabled { color: var(--muted); cursor: default; background: var(--paper); }
.side-button.active { background: var(--chosen); color: var(--ink); }
.player .side-button { padding: 3px 10px; }
.player .side-button .icon { width: 13px; height: 13px; vertical-align: -2px; stroke-width: 2; fill: currentColor; }
.player .side-button:disabled .icon { opacity: 0.45; }
.speeds .side-button { padding: 3px 7px; }
.side-actions { flex-wrap: wrap; }
@media screen and (max-width: 760px) {
  .viewer.expanded { display: flex; flex-direction: column; padding: 10px 12px; }
  .viewer.expanded > .viewer-stage { flex: 1 1 50%; }
  .viewer.expanded > .viewer-side { flex: 0 1 40%; margin-top: 8px; order: 1; }  /* last: the legend and its buttons */
}                                                                                  /* stay under the stage, in reach */
/* The part of the operation being shown, large in the corner of the view: R and t red, U blue. */
.viewer-symbol {
  position: absolute; right: 16px; bottom: 10px; z-index: 2; pointer-events: none; line-height: 1.25; white-space: nowrap;
  color: var(--red); opacity: 0; transition: opacity 0.25s; text-shadow: var(--halo-large);
}
.viewer-symbol.spin { color: var(--blue); }
/* The Sublattices key, in the expanded view's top left corner. */
.viewer-classes {
  position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none; font-size: var(--text-small); line-height: 1.6;
  background: var(--veil); border: 1px solid var(--hairline); border-radius: var(--radius-box); padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}
.viewer-classes[hidden], .viewer:not(.expanded) .viewer-classes { display: none; }
/* A film (from vista): the stage in the film's shape while Record is on or a film is made, in the middle of its place.
   While it is made: the operation's card in the view's top left corner (below the sublattices' key where that shows),
   drawn into each frame; a line along the view's top, how far the film has come; the page still but for Record, red
   while it is on, and the switches' fades in a step (each frame drawn as it is). Record's choices in a card over it. */
/* The Symmetry page's player (as vista's), over the view's lower right while that page is shown: the speeds, then Play,
   Pause, Stop, Record and Follow; the part's symbol above it. */
.viewer-player { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.viewer-player[hidden], .viewer:not(.expanded) .viewer-player { display: none; }
.viewer-player .viewer-tools { box-shadow: var(--shadow); }
.viewer-player:not([hidden]) ~ .viewer-symbol { bottom: 44px; }
.viewer-film.side-card { position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0; pointer-events: none; background: var(--paper); }
.viewer-film[hidden] { display: none; }
.viewer-film .side-card-head:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }  /* (its symbol alone: no line under it) */
.viewer.film-shaped > .viewer-stage { flex: none; justify-self: center; align-self: center; }
.viewer-progress { position: absolute; top: 0; left: 0; width: 0; height: 2px; z-index: 3; background: var(--ink); pointer-events: none; }
.viewer.filming canvas { pointer-events: none; }
.viewer.filming :is(.viewer-symbol, .viewer-film :is(.sym-r, .sym-t, .sym-u, .sym-un)) { transition: none; }
.player [data-record].active .icon { fill: var(--red); stroke: var(--red); }
.film-choices.side-card { position: absolute; z-index: 70; margin: 0; background: var(--paper); box-shadow: var(--shadow); min-width: 15em;
  font-size: var(--text); line-height: 1.35; }  /* (as the sidebar's) */
.film-choices .side-label { flex: 0 0 auto; margin-right: auto; }
.class-swatch { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-mark); margin-right: 6px; vertical-align: -1px; }
/* On a phone the key keeps out of the way of the structure: much smaller, tighter, closer to the corner. */
@media screen and (max-width: 760px) {
  .viewer-classes { top: 6px; left: 6px; font-size: var(--text-tiny); line-height: 1.35; padding: 2px 5px; }
  .class-swatch { width: 7px; height: 7px; margin-right: 4px; vertical-align: 0; }
}
.viewer-symbol.shown { opacity: 1; }
/* The angles of an operation shown on the Symmetry page: its own in red, U's in blue. */
.mark-label { font-size: var(--label); line-height: 1; color: var(--red); white-space: nowrap; text-shadow: var(--halo); }
.mark-label.spin { color: var(--blue); }
.mark-label sub, .mark-label sup { font-size: 0.72em; line-height: 0; }
/* Site labels, as HTML over the drawing (centred on each atom). */
.viewer-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.atom-label { font-size: var(--label); font-weight: bold; line-height: 1; color: var(--ink); white-space: nowrap; }
.atom-label span { text-shadow: var(--halo); }  /* centred on the atom */
/* Measurements (selection): a distance along its line, an angle by its arc. */
.measure-label { font-size: var(--label-measure); line-height: 1; color: var(--ink); white-space: nowrap; pointer-events: none; }
.measure-label span { display: inline-block; text-shadow: var(--halo); }
.viewer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.viewer-head > .viewer-tools:last-child { margin-left: auto; }  /* the projection and the axes at the left; reset, save and fill at the right */
.viewer-head .viewer-back { display: none; }  /* the way back to the page, at the expanded view's top left */
.viewer.expanded .viewer-head .viewer-back { display: inline-flex; }
.viewer-tools { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.viewer-tools button {
  font: inherit; font-size: var(--text-small); font-weight: normal; line-height: 1.25; background: var(--paper); color: var(--muted);
  border: 0; border-radius: 0; padding: 3px 9px; cursor: pointer;
}
.viewer-tools button:not([hidden]) ~ button:not([hidden]) { border-left: 1px solid var(--rule); }  /* between those shown */
.viewer-tools button:hover { color: var(--ink); background: var(--hover); }
.viewer-tools button.active { background: var(--chosen); color: var(--ink); }
.viewer-stage { flex: 1; min-height: 240px; position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-box); }
/* Any canvas in the stage is laid over it, never in the flow: a canvas sized by its pixels would grow the
   stage, which would resize the canvas, and so on. */
.viewer-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.viewer-stage canvas:active { cursor: grabbing; }
.viewer-stage canvas.print { display: none; }
.viewer-tools button .icon { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 2; }
.viewer-tools button sub { line-height: 0; font-style: italic; }  /* k_x, k_y, k_z (as the frame writes them): no taller than the others */
/* An icon centred in its button, which stays as tall as one with a word in it. */
.viewer-tools button:has(> .icon) { display: flex; align-items: center; justify-content: center; min-height: calc(1.25 * var(--text-small) + 6px); }
.viewer-tools button.copy { place-items: center; min-height: calc(1.25 * var(--text-small) + 6px); }  /* its icons are in spans (idle, done) */
/* The hover's card: as the selection's (.side-card), narrower, over the view. */
.viewer-tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap; font-size: var(--text-small); line-height: 1.35;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-box); padding: 5px 8px 6px; box-shadow: var(--shadow);
}
.viewer-tip .side-card-head { flex-wrap: nowrap; }
/* An atom's card: as wide as it is up to a limit, its vectors each on one line, its coordination and Γ_perm wrapping
   where they would be wider. */
.viewer-tip.atom-tip { max-width: 20em; box-sizing: border-box; white-space: normal; }
.atom-tip .side-kv td { white-space: nowrap; }
.atom-tip .side-kv.tip-permutation td { white-space: normal; }
.viewer-tip .tip-environment { color: var(--muted); border-top: 1px solid var(--hairline); margin-top: 3px; padding-top: 3px; }
/* A site's Γ_perm, a section of its own at the end of its card (the hover's and the selection's). */
.side-kv.tip-permutation { border-top: 1px solid var(--hairline); margin-top: 3px; padding-top: 3px; }
/* The expanded view's Γ_perm card: each part a button that pictures it on the orbit, the one pictured shaded. */
.perm-part { font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--radius); padding: 0 3px; margin: 0 -1px; cursor: pointer; }
.perm-part:hover { background: var(--hover); }
.perm-part.active, .perm-part.active:hover { background: var(--chosen); }
.viewer-tip sub { line-height: 0; }
.viewer-stage.unavailable { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--text); }
.viewer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: var(--text); }
.legend { display: flex; flex-wrap: wrap; gap: 3px 12px; }
.legend-item {
  font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--radius); padding: 1px 5px; margin: 0 -5px;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.legend-item:hover { background: var(--hover-panel); }
.legend-item:focus-visible { outline: var(--focus); outline-offset: 1px; }
.legend-item.off { color: var(--muted); }
.legend-item.off .swatch { background: transparent !important; }  /* hidden: an empty circle */
.legend-item.ghost { color: var(--muted); }
.legend-item.ghost .swatch { opacity: 0.35; }  /* faded (Magnetic Only) */
/* The moments' chip: an arrow for its swatch, faded and hidden as the species' are. */
.swatch-arrow { width: 16px; height: 11px; flex: none; stroke: var(--moment); stroke-width: 1.6; fill: var(--moment); }
.legend-moments.ghost .swatch-arrow { opacity: 0.35; }
.legend-moments.off .swatch-arrow { opacity: 0.2; fill: none; }
.viewer-tools button[hidden] { display: none; }
.swatch { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--edge); background: var(--chosen); flex: none; }
/* The switches at the right, in three groups a little apart (the moments' colours; polyhedra and bonds; the magnetic
   atoms alone and their moments' plane). */
.viewer-switches { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; margin-left: auto; }
.viewer-switches[hidden] { display: none; }
.viewer-tools[hidden] { display: none; }
.panel { background: var(--light); border-radius: var(--radius-box); padding: 12px 14px; display: flex; flex-direction: column; }
table.kv { border-collapse: collapse; width: 100%; }
table.kv th { text-align: left; font-weight: normal; color: var(--muted); padding: 3px 14px 3px 0; vertical-align: top; width: 1%; white-space: nowrap; }
table.kv td { padding: 3px 0; vertical-align: top; }

table.data { border-collapse: collapse; width: 100%; border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); margin: 4px 0 12px; }
table.data thead th, table.data tr.subhead th { text-align: left; border-bottom: 1px solid var(--rule); padding: 6px 8px; background: var(--hover); }
table.data tr.subhead th { border-top: 1px solid var(--rule); }
/* Multipoles: two tables (ℓ ≤ 2, ℓ = 3–6) side by side, the second below the first when they do
   not both fit; neither is ever squeezed below its contents (on a phone, a long row scrolls). */
.multipoles { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: flex-start; margin: 4px 0 12px; overflow-x: auto; }
.multipoles table.reference { flex: 1 1 0; min-width: max-content; width: auto; margin: 0 0 8px; }
table.reference td { white-space: nowrap; }
.power-chips .toggle:disabled { opacity: 0.4; cursor: default; }  /* a power that is 0 */
.power-chips .toggle { height: calc(1.25 * var(--text-small) + 6px); display: inline-flex; align-items: center; padding-block: 0; }  /* Λ's typesetting is a little taller than a word */
.multipoles tr.dim td { color: var(--muted); }  /* a multipole that holds none of the chosen power's irreps */
.multipoles .part.match .katex { font-weight: bold; }  /* one it holds */
/* An irrep with a card of its functions (harmonics.js): shaded while the pointer is on it; the card under it, set as
   the viewer's card of an atom (.viewer-tip: its head, then the functions), as wide as they are up to a limit, each
   function on a line, each copy after a gap. */
.multipoles .part.has-card { border-radius: var(--radius); padding: 1px 2px; margin: -1px -2px; cursor: pointer; }  /* (a click copies its card) */
.multipoles .part.has-card:hover { background: var(--hover); }
.harmonics-tick { display: none; margin-left: 4px; }
.harmonics-tick .icon { width: 12px; height: 12px; vertical-align: -1px; stroke: var(--ink); fill: none; stroke-width: 2.5; }
.harmonics-tip.copied .harmonics-tick { display: inline; }  /* a moment once the card is copied */
.viewer-tip.harmonics-tip { z-index: 30; box-sizing: border-box; max-width: min(22em, calc(100vw - 8px)); white-space: normal; font-size: var(--text-small); line-height: 1.5; }
.harmonics-tip .side-card-head { flex-wrap: wrap; }
.harmonics-tip .side-card-head > span:first-child .katex { font-weight: bold; }  /* the irrep, as an atom's card has its name */
.harmonics-line { padding-left: 1.2em; text-indent: -1.2em; }  /* a function's lines after its first, where it needs more, indented */
.harmonics-line .katex { text-indent: 0; white-space: normal; }  /* (a long function breaks between its terms, as KaTeX allows) */
.harmonics-copy + .harmonics-copy { margin-top: 7px; }  /* each copy after a gap */
table.reference td:first-child { width: 1%; }
table.data td { padding: 4px 8px; vertical-align: middle; }
table.data .c { text-align: center; }
table.data .r { text-align: right; }
table.data tbody.group { border-top: 1px solid var(--rule); }
table.data tr.first td { border-top: 1px solid var(--hairline); }
table.data.compact td { padding: 2px 8px; }
table.verification { border-top: 0; }
table.verification td:last-child { white-space: nowrap; }
/* The independent checks (web.checks): a tally, then a line for each check that does not simply agree. */
table.checks td:last-child { white-space: normal; }
table.checks .dot { margin: 0 8px; color: var(--muted); }
table.checks .known { color: var(--known); font-weight: bold; }
table.checks .check-note { font-size: var(--text-small); color: var(--muted); margin-top: 2px; }
table.checks .check-note .no, table.checks .check-note .known { font-size: 1em; }
.yes { color: var(--yes); font-weight: bold; font-size: 1.1em; }
.no { color: var(--no); font-weight: bold; font-size: 1.1em; }
.yes.wave { font-weight: normal; font-size: 1em; }
.sites { max-height: 380px; overflow-y: auto; }
/* Sites: the crystal's sites beside the magnetic ones (one above the other when narrow, and in print).
   The two columns share their rows (heading, description, table) through a subgrid, and every table row
   has the same height, so rows side by side line up. */
.sites-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
.sites-grid > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.sites-grid h4 { margin-top: 6px; }
.sites-grid > div > p { margin-bottom: 6px; }
table.data.site-table th, table.data.site-table td { height: 30px; padding-top: 0; padding-bottom: 0; white-space: nowrap; vertical-align: middle; line-height: 1.3; }
table.data.site-table thead th { height: 36px; }
table.data.site-table sub { line-height: 0; }
table.data.site-table tfoot td { border-top: 1px solid var(--rule); }  /* the cell's net moment, under the sites */
/* Positions and moments in the page's font: figures of one width (tabular), and each component right-aligned in
   a slot of its own, so the columns line up down the table. */
.vec { font-variant-numeric: lining-nums tabular-nums; }
.vec .num { display: inline-block; text-align: right; }
.vec .num + .num { margin-left: 0.45em; }
@media (max-width: 900px) { .sites-grid { grid-template-columns: minmax(0, 1fr); } }

/* Operations */
.grid { display: grid; gap: 10px; }
.grid.dim1 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid.dim2 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grid.dim3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.op { border: 1px solid var(--hairline); border-radius: var(--radius-box); padding: 10px 10px 12px; text-align: center; background: var(--paper); }
.op.gen { position: relative; }
.op.gen::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--mid); }  /* a generator */
.op .gamma { position: relative; isolation: isolate; }  /* the lines between Γ's blocks (report.html) sit beneath its entries */
.op .gamma .rule { position: absolute; z-index: -1; background: var(--rule); pointer-events: none; }
.op .seitz { color: var(--ink); margin-bottom: 10px; }
.op .katex, .op mjx-container { white-space: nowrap; }
.op .u { display: none; }
.defrep.show-u .op .gamma { display: none; }
.defrep.show-u .op .u { display: block; }
/* The regime switch's panels: the non-relativistic ones unless the relativistic are chosen. In the overview grid the
   two versions of a panel share its cell, the other only invisible, so that the cell keeps its size when switched. */
html:not([data-regime="relativistic"]) [data-regime="relativistic"]:not(.overview > *),
html[data-regime="relativistic"] [data-regime="non-relativistic"]:not(.overview > *) { display: none !important; }
html:not([data-regime="relativistic"]) .overview > [data-regime="relativistic"],
html[data-regime="relativistic"] .overview > [data-regime="non-relativistic"] { visibility: hidden; }
.genkey { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mid); vertical-align: 0.15em; margin: 0 1px; }

/* The notation switch (international, the default, or Schoenflies): pages carry both forms, web.notation; one is shown. */
:root[data-notation="international"] .nt-s, :root:not([data-notation="international"]) .nt-i { display: none; }
/* An R group's axes (hexagonal, the default, or rhombohedral): pages carry both forms where they differ, web.app.both_axes. */
:root[data-setting="rhombohedral"] .st-h, :root:not([data-setting="rhombohedral"]) .st-r { display: none; }
.actions .toggle-group.regime { align-self: stretch; }
.actions .regime .toggle { font-size: inherit; padding: 0 12px; }
.panel-head .toggle-group.notation { margin-left: auto; }  /* the notation, at the top right of the symmetry panels */
/* The regime switch: both regimes named, in bold, the one shown filled as Print is. */
.actions .toggle-group.regime { border-color: var(--ink); }
.actions .regime .toggle { font-weight: bold; color: var(--ink); white-space: nowrap; }
@media screen and (max-width: 600px) { .actions .regime .toggle { font-size: var(--text); padding: 0 8px; } }  /* switch and icons on one phone-wide row */
/* Non-Rel. | Rel. where the row would not fit with the full names (after MAGNDATA has become its magnet, below). */
.actions { container-type: inline-size; }
.rg-short { display: none; }
@container (max-width: 413px) {
  .rg-full { display: none; }
  .rg-short { display: inline; }
}
.actions .regime .toggle + .toggle { border-left-color: var(--ink); }
.actions .regime .toggle.active, .actions .regime .toggle.active:hover { background: var(--ink); color: var(--paper); }
.toggle-group { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; vertical-align: middle; }
/* The small switches (the notation, Γ or U, the exterior powers) as the viewer's tools: the same type, padding and
   hover, so every small control on the page is one height; the regime switch in the top bar keeps its own. */
.toggle {
  font: inherit; font-size: var(--text-small); font-weight: normal; line-height: 1.25; background: var(--paper); color: var(--muted);
  border: 0; border-radius: 0; padding: 3px 9px; cursor: pointer;
}
.toggle + .toggle { border-left: 1px solid var(--rule); }
.toggle:hover { color: var(--ink); }
.toggle-group:not(.regime) .toggle:not(.active):hover { background: var(--hover); }
.toggle.active { background: var(--chosen); color: var(--ink); }

/* Labels centred on their capitals. The font's line box keeps more room below the baseline than these labels use,
   so centring the line box left them high. Where the browser can trim a label's box to the capitals and the
   baseline it does, and the padding gives back what was trimmed, so each button keeps its size; elsewhere they stay
   as they were. */
@supports (text-box: trim-both cap alphabetic) {
  .actions .toggle, .actions .button:not(.icon-button), .viewer-tools button:not(:has(> .icon)):not(.copy), .toggle-group:is(.notation, .axes) .toggle,
  .toggle[data-show] {
    text-box: trim-both cap alphabetic;
  }
  .actions .button:not(.icon-button) { padding-block: calc(7px + (1lh - 1cap) / 2); }
  .toggle-group:is(.notation, .axes) .toggle, .toggle[data-show] { padding-block: calc(3px + (1lh - 1cap) / 2); }
  .viewer-tools button:not(:has(> .icon)):not(.copy) { padding-block: calc(3px + (1lh - 1cap) / 2); }
  /* The sidebars' and Record's card's buttons with a word (Show Orbit, Go, Auto, Save PNG, Save as Default, Record, …). */
  .side-button:not(:has(> .icon)) { text-box: trim-both cap alphabetic; padding-block: calc(3px + (1lh - 1cap) / 2); }
}
/* Buttons with a label in a span (.label), at a set height: the label trimmed to its capitals and baseline, centred
   in the box, so the capitals are centred whatever the font keeps below the baseline (as the rules above do for the
   others, which size themselves). Back and MAGNDATA as tall as Print; Search as tall as its text box (stretched to
   it), Browse All too. */
.button:has(> .label), .actions .button:has(> .label) { display: inline-flex; align-items: center; justify-content: center; padding-block: 0; text-box: none; }  /* (over .actions .button above) */
.actions .nav .button { height: calc(1.3em + 16px); }
.search-row > .button { height: calc(1.45em + 10px); }
@supports (text-box: trim-both cap alphabetic) { .button > .label { text-box: trim-both cap alphabetic; } }
/* MAGNDATA with a horseshoe magnet; as the row narrows, first the magnet alone (square, as Print), then Non-Rel. | Rel.
   (below), so the actions keep to one row as long as they can. */
.actions .button.browse { gap: 7px; }
.actions .button.browse > .icon { display: block; width: 16px; height: 16px; flex: none; }
@media screen and (min-width: 601px) { @container (max-width: 575px) {  /* the row's widths with the switch's type at each size */
  .actions .button.browse { display: inline-grid; place-items: center; width: calc(1.3em + 16px); height: calc(1.3em + 16px); padding: 0; text-box: none; }
  .actions .button.browse > .browse-full { display: none; }
  .actions .button.browse > .icon { width: 17px; height: 17px; }
} }
@media screen and (max-width: 600px) { @container (max-width: 532px) {
  .actions .button.browse { display: inline-grid; place-items: center; width: calc(1.3em + 16px); height: calc(1.3em + 16px); padding: 0; text-box: none; }
  .actions .button.browse > .browse-full { display: none; }
  .actions .button.browse > .icon { width: 17px; height: 17px; }
} }

/* Foldable section, closed by default */
details.fold { margin: 28px 0 10px; }
/* A patched file's edits (report.html, Verification, Patch): the lines changed, with a line either side; long lines scroll. */
pre.patch { font-size: var(--text-small); line-height: 1.45; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 10px; margin: 6px 0; overflow-x: auto; }
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
details.fold > summary h2::before {
  content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--ink); transition: transform 0.15s;
}
details.fold[open] > summary h2::before { transform: rotate(90deg); }

.notes { color: var(--muted); font-size: var(--text); }
.footnote { color: var(--muted); font-size: var(--text-small); margin: 6px 0 12px; }
.nowrap { white-space: nowrap; }
/* Cell: a, b, c down one column and α, β, γ down the next (label, "= value" pairs). */
.cell { display: inline-grid; grid-template-columns: repeat(4, auto); align-items: baseline; }
.cell > :nth-child(4n+3) { padding-left: 1.8em; }
.panel .footnote { margin: auto 0 0; padding-top: 8px; }  /* at the foot of the panel, however tall */
/* The structure's source at the foot of its panel: the MAGNDATA entry, then the MCIF statement. */
.panel .source { margin-top: auto; padding-top: 8px; font-size: var(--text); color: var(--muted); }  /* grey, its link too, as the footnotes */
.panel .source .footnote { margin: 0; padding-top: 0; }
.panel .footnote.stars { margin: 4px 0 0; padding-top: 0; }  /* under the rows it explains, not at the foot */
.panel .source a + .footnote { margin-left: 0.6em; }  /* on the entry's line, after it */
.panel .source > a { font-size: var(--text-small); }  /* the MAGNDATA entry at the footnotes' size, as the spin space group's line */
/* The Spin-Space Symmetry panel turned over to the Brillouin zones (web/static/kspace.js), when a wavevector is
   not 0: each face carries the panel's box, and the two turn about the vertical. */
.panel.turns { background: none; padding: 0; position: relative; perspective: 1800px; }
.panel.turns > .face {
  background: var(--light); border-radius: var(--radius-box); padding: 12px 14px; display: flex; flex-direction: column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.6s ease;
}
.panel.turns > .face.front { flex: 1; }
.panel.turns > .face.back { position: absolute; inset: 0; transform: rotateY(180deg); }
.panel.turns.turned > .face.front { transform: rotateY(-180deg); }
.panel.turns.turned > .face.back { transform: rotateY(0deg); }
/* At rest the faces are flat again (no 3D layer, whose thin lines a scaled display can lose): the hidden one is
   simply not shown. kspace.js sets settled when a turn ends. */
.panel.turns.settled > .face, .panel.turns.settled.turned > .face { transform: none; transition: none; }  /* (over turned's rotateY(0)) */
.panel.turns.settled:not(.turned) > .face.back, .panel.turns.settled.turned > .face.front { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .panel.turns > .face { transition: none; } }
.panel.turns.instant > .face { transition: none; }  /* set without animating, before a turn (kspace.js) */
/* The responses table turned over to a row's details (web/static/responses.js, web/forms.py), as the structure
   panel turns over: the back, a panel, takes the table's place and size, its content scrolling inside it if taller. */
.responses-block.turns { position: relative; perspective: 1800px; }
.responses-block.turns > .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.6s ease; }
.responses-block.turns > .face.back {
  position: absolute; inset: 0; transform: rotateY(180deg); background: var(--light); border-radius: var(--radius-box);
  padding: 12px 14px; display: flex; flex-direction: column; overflow: hidden;
}
.responses-block.turns.turned > .face.front { transform: rotateY(-180deg); }
.responses-block.turns.turned > .face.back { transform: rotateY(0deg); }
.responses-block.turns.settled > .face, .responses-block.turns.settled.turned > .face { transform: none; transition: none; }  /* (over turned's rotateY(0)) */
.responses-block.turns.settled:not(.turned) > .face.back, .responses-block.turns.settled.turned > .face.front { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .responses-block.turns > .face { transition: none; } }
.responses-block.turns.instant > .face { transition: none; }  /* set without animating, before a turn (responses.js) */
.responses-block.turns > .face.back:focus { outline: none; }  /* focused when turned to, for Escape */
.responses-block.turns > .face.front table.responses tbody tr { cursor: pointer; }
.responses-block.turns > .face.front table.responses tbody tr:hover > td { background: var(--hover); }
.responses-block.turns > .face.front table.responses tbody tr:focus-visible { outline: var(--focus); outline-offset: -2px; }
/* The controls, under the white area: ‹ and the previous row's name at the left, the next row's name and › at the
   right (the names step too). The way back to the table is at the title line's right. */
.face.back > .details-nav { flex: none; margin: 8px 0 0; display: flex; justify-content: space-between; gap: 16px; }
.details-side { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 0; }
.details-side.next { justify-content: flex-end; }
.details-name { color: var(--muted); font-size: var(--text-small); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.details-name:hover { color: var(--ink); }
.responses-block .details-title > table { flex: 0 1 auto; min-width: 0; margin-right: 12px; }
.responses-block .details-title > .viewer-tools { flex: none; margin-left: auto; align-self: flex-start; }  /* flush in the corner, as the panels' corner buttons */
/* The row as a title line: one line, always the same height, so the details below start in one place; name,
   symbol, overlap and, last, the verdict in bold, commas between; the way back in the top right corner. As tall as
   its buttons, and as far above the white area as the viewer's tools are above its view, so that both white areas
   start the same distance below the top of their panels; its text set a little tighter to fit. */
.responses-block .details-title { flex: none; display: flex; align-items: center; margin: -1px 0 7px; padding: 1px 0 1px calc(12px + 1px); overflow: hidden; }  /* the text inset as the white area's content; a pixel above and below the buttons, so their outline is not cut, its margins a pixel less */
.responses-block table.details-row { width: auto; margin: 0; border: 0; background: none; }
.responses-block table.details-row td { border: 0; background: none; padding: 0; white-space: nowrap; line-height: 1.2; }
.responses-block table.details-row td:first-child, .responses-block table.details-row td:last-child { font-weight: bold; }
.responses-block table.details-row td:not(:last-child)::after { content: ",\2002"; font-weight: normal; }  /* name, symbol, overlap, verdict */
.responses-block table.details-row .wave { color: inherit; }  /* the texture's wave in ink; ✓ and ✗ keep their colours */
.details-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-box); padding: 10px 12px; }  /* white, as the viewer's stage */
.details-foot { margin-top: auto; padding-top: 12px; font-size: var(--text-small); color: var(--muted); }  /* the row's footnote, at the bottom */
/* The details in two columns, labels at the left, as the viewer's sidebar has them; one column, each label above
   its content, where the back is too narrow for that (a phone, a narrow window). */
.responses-block.turns > .face.back { container-type: inline-size; }
.details-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; align-items: baseline; font-size: var(--text); }
.details-label { color: var(--muted); white-space: nowrap; }
.details-value { min-width: 0; }
.details-grid > .top { align-self: start; }  /* the overlap table's label, level with its top rule */
@container (max-width: 440px) {
  .details-grid { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .details-label { margin-top: 8px; white-space: normal; }
  .details-label br { display: none; }  /* the power compared beside "Overlap Table:", not under it */
  .details-label .compared { display: inline; margin-left: 0.25em; }
  /* The title line in two: the name, then the symbol, the overlap and the verdict. */
  .responses-block .details-title { height: 3em; }
  .responses-block table.details-row, .responses-block table.details-row tbody { display: block; }
  .responses-block table.details-row tr { display: flex; flex-wrap: wrap; align-items: baseline; }
  .responses-block table.details-row td { display: block; width: auto; }
  .responses-block table.details-row td:first-child { flex-basis: 100%; }
  .responses-block table.details-row td:first-child::after { content: none; }
}
.details-body table.overlap { width: auto; margin: 0; background: var(--paper); }
.details-body table.overlap :is(th, td) { padding: 3px 6px; text-align: left; white-space: nowrap; font-weight: normal; }
.details-body table.overlap td.role { white-space: normal; min-width: 5em; max-width: 7.5em; line-height: 1.2; }  /* symmetric traceless: two lines */
.details-body table.overlap thead th { font-weight: normal; }
.details-body table.overlap td.c { text-align: center; }
.details-body .far { color: var(--muted); }  /* a part at k ≠ 0, which does not count */
.details-label .compared { display: inline-block; max-width: 11em; white-space: normal; }  /* the power compared, under the label */
.details-label .compared .far { color: var(--faint); }  /* a part at k ≠ 0, lighter */
.details-body table.overlap tr.dim :is(th, td) { color: var(--muted); }  /* a multipole that shares nothing with it */
.details-body table.overlap .shared .katex { font-weight: bold; }  /* an irrep the two sides share */
.details-body .role { color: var(--muted); }
.details-body .form-line { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.details-body .form-line + .form-line { margin-top: 4px; }
.details-body .removed { color: var(--muted); }
.details-body .note { font-size: var(--text-small); color: var(--muted); margin-top: 4px; }
.details-body .pictures { display: flex; flex-wrap: wrap; gap: 12px 8px; align-items: flex-start; }  /* two figures (2 × 204 px) side by side where the back is wide enough */
.details-body figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--text-small); }
.details-body figure .sphere { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.details-body figure.with-key { flex-direction: row; gap: 0; }  /* a sphere, its key to its right (the sphere's canvas has its own margin) */
.details-body figure.with-key > .key { margin: 0; font-size: 1em; width: 64px; max-width: none; }  /* the figure is already the smaller size; every key as wide, so that the figures line up in columns */
.details-label .label-stack { display: inline-flex; flex-direction: column; align-items: center; }  /* the label with its tools centred under it */
.details-body .sphere-tools { display: flex; width: fit-content; margin-top: 6px; }  /* under the Visualization label: reset the views, save them as a PNG */
.details-body .key-name { font-size: 1.1em; }  /* the form's amplitude, s₁, s₂, …, heading its key */
.details-body canvas { width: 140px; height: 140px; cursor: grab; touch-action: none; }  /* the size sphere() draws at */
.details-body canvas:active { cursor: grabbing; }
.details-body .key { display: flex; flex-direction: column; gap: 4px; align-items: center; width: fit-content; max-width: 9em; white-space: normal; font-size: var(--text-small); color: var(--dark); }  /* a sphere's key, at its right, one entry under the other */
.details-body .pairs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }  /* each spin axis's pair of colours beside its name, one under the other */
.details-body .pair { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.details-body .pair-block { flex: none; width: 14px; height: 14px; }
.details-body .pair-block > svg { display: block; width: 14px; height: 14px; }  /* its + and − inside it (pairBlock) */
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.panel-head h3 { margin: 0; }
.face.front .panel-head .viewer-tools:not(.section-copy) { margin-left: auto; }  /* a copy button after it keeps beside it (.section-copy) */
/* The way to the Brillouin zones, as BZ where its name would not fit on the heading's line. */
.panel.turns > .face.front > .panel-head { container-type: inline-size; }
.bz-short { display: none; }
@container (max-width: 416px) { .bz-full { display: none; } .bz-short { display: inline; } }
/* The notation switch, as a rotation in each (C4z, 4001) where the names would not fit on the heading's line. */
.panel-head:has(> .toggle-group.notation) { container-type: inline-size; }
.nt-short { display: none; }
@container (max-width: 400px) { .nt-full { display: none; } .nt-short { display: inline; } }
.bz-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }  /* a regime's stage and key */
/* Filling the window (kspace.js), as the expanded viewer: the back face across the whole window, the drawing taking
   the room with its key below, the sidebar at the right (on a phone, below). The panel's perspective goes, since it
   would hold a fixed face to the panel. */
.panel.turns.bz-expanded { perspective: none; }
.panel.turns.bz-expanded > .face.back {
  position: fixed; inset: 0; z-index: 50; padding: 16px 20px; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px;
}
.bz-expanded > .face.back > .panel-head { grid-column: 1; grid-row: 1; }
.bz-expanded > .face.back > .bz-view { display: contents; }
.bz-expanded .bz-view > .bz-stage { grid-column: 1; grid-row: 2; min-height: 0; }
.bz-expanded .bz-view > .bz-key { grid-column: 1; grid-row: 3; }
.bz-expanded .bz-view > .bz-side { grid-column: 2; grid-row: 1 / -1; display: block; }
@media screen and (max-width: 760px) {
  .panel.turns.bz-expanded > .face.back { display: flex; flex-direction: column; padding: 10px 12px; }
  .bz-expanded .bz-view > .bz-stage { flex: 1 1 50%; }
  .bz-expanded .bz-view > .bz-side { flex: 0 1 40%; margin-top: 8px; }
}
/* The selection: a ring about each chosen point, grey about the arms of a star shown; the distances and angles
   written in the drawing; the reciprocal axes' names; the lattice points. */
.bz-ring {
  --size: calc(8px * var(--bz-point-scale, 1) + 8px);
  position: absolute; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink); pointer-events: none;
}
.bz-ring.star { --size: calc(8px * var(--bz-point-scale, 1) + 6px); box-shadow: 0 0 0 1.5px var(--mid); }
/* The zones' labels (from vista), each its own size times the view's and Label Size (--bz-label-scale) and the zoom's
   (--bz-zoom-scale): kspace.js's sizes(). */
.bz-stage { --bz-text: calc(var(--label) * var(--bz-label-scale, 1) * var(--bz-zoom-scale, 1)); --bz-text-small: calc(var(--label-measure) * var(--bz-label-scale, 1) * var(--bz-zoom-scale, 1)); }
.bz-measure { position: absolute; font-size: var(--bz-text-small); line-height: 1; white-space: nowrap; color: var(--ink); transform: translate(-50%, -50%); text-shadow: var(--halo); }
.bz-axis { position: absolute; font-size: var(--bz-text); line-height: 1; font-style: italic; color: var(--ink); transform: translate(-50%, -50%); }
.bz-axis.crystal { color: var(--mid); }  /* G0's: grey, as its outline; G's black */
.bz-axis.miller { font-style: normal; }  /* a primitive basis vector, by its Miller indices */
.bz-point.corner { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }  /* a zone's corner: unlabelled, smaller */
.bz-line-name { position: absolute; font-size: var(--bz-text-small); line-height: 1; color: var(--ink); white-space: nowrap; }  /* a line of high symmetry's name, placed beside it clear of the rest (kspace.js) */
.bz-line-name.crystal { color: var(--mid); }
.bz-point.lattice { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ink); }
.bz-point.lattice.crystal { background: var(--mid); }
.bz-stage .bz-point:not(.lattice) { transform: scale(var(--bz-point-scale, 1)); }  /* the sidebar's Size */
.bz-side .side-row.side-right > .side-label { flex: 1 1 auto; }  /* (Neighbouring Points on one line) */
/* Under the key, a zone's lines not drawn, having no length there (kspace.js). */
.bz-note { margin-top: 4px; color: var(--muted); font-size: var(--text-small); }
.bz-note[hidden] { display: none; }
.bz-expanded .bz-view > .bz-note { grid-column: 1; }
/* The Stars page: a card for each star, its arms in rows (grey where open), each choosing its point. */
.bz-star .side-table td { padding-right: 8px; }
.bz-star .side-table td:last-child, .bz-star .side-table th:last-child { padding-right: 0; }
.bz-star tr[data-arm] { cursor: pointer; }
.bz-star tr[data-arm]:hover > td { background: var(--hover); }
.bz-star tr.open > td { color: var(--muted); }
.bz-star .side-table + .side-kv { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--hairline); }
/* The key's stars in one column where two do not fit (kspace.js): each k under its Q, across the key; the outlines,
   always short, stay side by side above them. */
.bz-key.stacked > .bz-entry:is([data-bz-toggle^="q:"], [data-bz-toggle^="k"]) { grid-column: 1 / -1; margin-right: 0; }  /* (k:, k2:, k3:) */
.bz-key.stacked > .bz-entry:is([data-bz-toggle^="q:"], [data-bz-toggle^="k"]) > :last-child { grid-column: 2 / -1; }
.bz-key.stacked > span.bz-entry:empty { display: none; }
.bz-stage { flex: 1; min-height: 160px; position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-box); }
.bz-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.bz-stage canvas:active { cursor: grabbing; }
.bz-labels { position: absolute; inset: 0; pointer-events: none; }
.bz-point { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--mid); }  /* every point one size */
.bz-point.parent { background: var(--ink); }
.bz-point.q { background: var(--red); }  /* Q: the viewer's red */
.bz-point.k { background: var(--blue); }  /* k: its blue */
.bz-point.q.k { background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.bz-point.open { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--red); }  /* an arm of Q's star without weight */
.bz-point.openk { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--blue); }  /* an arm of k's star Γ does not carry */
.bz-point.open.openk { box-shadow: none; background: radial-gradient(circle closest-side, var(--paper) 62%, transparent 66%), linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.bz-label {  /* beside its point, as far out as the point's size (the full view's Size) */
  --grown: calc(4px * (var(--bz-point-scale, 1) - 1));
  position: absolute; font-size: var(--bz-text); line-height: 1; white-space: nowrap; color: var(--mid); transform: translate(calc(4px + var(--grown)), calc(-100% - 3px - var(--grown)));
}
.bz-label .parent { color: var(--ink); }  /* G's letters; G0's in the label's grey */
.bz-label.vector { font-weight: bold; font-style: italic; transform: translate(calc(6px + var(--grown)), calc(3px + var(--grown))); }
.bz-label .q { color: var(--red); }
.bz-label .k { color: var(--blue); }
/* The hover's card (a .viewer-tip): what is at the point, named as its labels (Q and k in black); a line for each group. */
.bz-tip-name .crystal { color: var(--mid); }
.bz-tip-name .q, .bz-tip-name .k { font-weight: bold; font-style: italic; }
.bz-tip-name sub.q, .bz-tip-name sub.k { font-weight: normal; font-style: normal; }
.bz-tip .side-table th, .bz-tip .side-table td { padding-right: 10px; }
.bz-tip .side-table th:last-child, .bz-tip .side-table td:last-child { padding-right: 0; }
.bz-tip .side-table tbody th { border-bottom: none; color: var(--ink); }
.bz-tip .side-table + .side-kv { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--hairline); }
.side-kv.bz-split { margin-top: 3px; }  /* the weight at a Q, below a rule, as an open arm's note */
.side-kv.bz-split tr:first-child > * { border-top: 1px solid var(--hairline); padding-top: 3px; }
.bz-tip-gamma { white-space: nowrap; }  /* the parts of Γ at a k, at the head's right */
/* The key: marker, text, marker, text; the outlines on the first row, Q's stars and k's below, each marker over the
   next's. */
.bz-key { display: grid; grid-template-columns: 22px auto 22px auto; justify-content: start; align-items: center; gap: 3px 6px; margin-top: 8px; font-size: var(--text-small); }
/* Each entry a button across a marker and a text column (a subgrid, so that the columns line up), turning its
   outline or star off and on as the viewer's legend does: off, a star's marker hollow and grey, a line gone. */
.bz-entry { grid-column: span 2; display: grid; grid-template-columns: subgrid; align-items: center; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; border-radius: var(--radius); padding: 1px 4px 1px 0; }
.bz-key > .bz-entry:nth-child(odd) { margin-right: 12px; }
button.bz-entry { cursor: pointer; }
button.bz-entry:hover { background: var(--hover-panel); }
button.bz-entry:focus-visible { outline: var(--focus); outline-offset: 1px; }
.bz-entry > .bz-swatch, .bz-entry > .bz-dot { justify-self: center; margin: 0; }
.bz-entry[data-bz-toggle^="q:"]:not(.off) { color: var(--red); }  /* Q's stars named in the drawing's red, k's in its blue */
.bz-entry[data-bz-toggle^="k"]:not(.off) { color: var(--blue); }  /* (k:, k2:, k3:) */
.bz-entry.off { color: var(--muted); }
.bz-entry.off > .bz-swatch { border-top-color: transparent; }
.bz-entry.off > .bz-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mid); }
/* On the page the key is short: each star by its name alone (the drawing labels its points, and a point's vectors are
   on hovering it), the outlines by G0 and G alone (the panel beside names the groups), every entry on as few lines as
   fit. Filling the window, it is in full, in its columns. */
.panel:not(.bz-expanded) .bz-key { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.panel:not(.bz-expanded) .bz-key > .bz-entry { display: inline-flex; align-items: center; gap: 6px; margin-right: 0; }
.panel:not(.bz-expanded) .bz-key > .bz-entry > .bz-swatch { margin-right: 0; }  /* (the gap spaces it) */
.panel:not(.bz-expanded) .bz-key > span.bz-entry:empty { display: none; }
.panel:not(.bz-expanded) .bz-key > [data-bz-toggle^="q:"] { order: 1; }  /* the outlines, then Q's stars, then k's */
.panel:not(.bz-expanded) .bz-key > [data-bz-toggle^="k"] { order: 2; }
.panel:not(.bz-expanded) .bz-key :is(.bz-value, .bz-number) { display: none; }
.bz-entry.off > .bz-dot.star3 { background: var(--mid); box-shadow: none; clip-path: polygon(evenodd, 50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 0%, 50% 21.2%, 21.2% 50%, 50% 78.8%, 78.8% 50%, 50% 21.2%); }
.bz-entry.off > .bz-dot.star4 { background: var(--mid); box-shadow: none; clip-path: polygon(evenodd, 50% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 34.3%, 25.5% 83.3%, 74.5% 83.3%, 50% 34.3%); }
.bz-entry.off > .bz-dot.star5 { background: var(--mid); box-shadow: none; clip-path: polygon(evenodd, 0% 0%, 100% 0%, 50% 100%, 0% 0%, 25.5% 16.7%, 50% 65.7%, 74.5% 16.7%, 25.5% 16.7%); }
.face.back .panel-head { flex-wrap: wrap; row-gap: 6px; }
.face.back .panel-head > .viewer-tools:nth-child(2) { margin-left: auto; }  /* the way back at the left, the view's tools at the right */
.bz-swatch { display: inline-block; width: 18px; border-top: 1.5px solid var(--mid); vertical-align: middle; margin-right: 6px; }
.bz-swatch.parent { border-top: 2.5px solid var(--ink); }
.bz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); vertical-align: middle; margin-right: 6px; }
.bz-dot.q { background: var(--red); }
.bz-dot.k { background: var(--blue); }
/* A second, third, fourth and fifth star's points: a square, a diamond, a triangle, a triangle upside down, of about
   the circle's area; open ones white inside, 1.5px from their sides like the circle's ring. */
:is(.bz-point, .bz-dot).star2 { width: 7px; height: 7px; border-radius: 0; }
:is(.bz-point, .bz-dot).star3 { width: 10px; height: 10px; border-radius: 0; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
:is(.bz-point, .bz-dot).star4 { width: 10px; height: 9px; border-radius: 0; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
:is(.bz-point, .bz-dot).star5 { width: 10px; height: 9px; border-radius: 0; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); }
.bz-point.star2 { margin: -3.5px 0 0 -3.5px; }
.bz-point.star3 { margin: -5px 0 0 -5px; }
.bz-point.star4 { margin: -6px 0 0 -5px; }  /* its centroid on the point */
.bz-point.star5 { margin: -3px 0 0 -5px; }
.bz-point.open:is(.star2, .star3, .star4, .star5) { box-shadow: none; background: var(--red); }
.bz-point.openk:is(.star2, .star3, .star4, .star5) { box-shadow: none; background: var(--blue); }
.bz-point.open.openk:is(.star2, .star3, .star4, .star5) { background: linear-gradient(90deg, var(--red) 50%, var(--blue) 50%); }
.bz-point:is(.open, .openk):is(.star2, .star3, .star4, .star5)::after { content: ''; position: absolute; inset: 1.5px; background: var(--paper); clip-path: inherit; }
.bz-point:is(.open, .openk).star3::after { inset: 2.1px; }
.bz-point:is(.open, .openk).star4::after { inset: 3.1px 2.55px 1.5px; }
.bz-point:is(.open, .openk).star5::after { inset: 1.5px 2.55px 3.1px; }
.mark { font-size: 0.75em; color: var(--muted); margin-left: 1px; font-style: italic; }
.footnote .mark { margin-right: 3px; }
td.c > sup.mark { position: absolute; margin-top: -0.25em; }  /* after its ✓ or ✗ but taking no width, so the symbol stays centred */
.narrow-only { display: none; }
@media screen and (max-width: 600px) {
  .wide-only { display: none; }
  .narrow-only { display: revert; }
  table.kv th { padding-right: 10px; }
  .cell > :nth-child(4n+3) { padding-left: 1em; }
  .segmented label > span { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .brand-title { display: none; }  /* Find Γ alone: the paper's title would wrap */
  /* A response's title line without its name, as its row: one line. */
  .responses-block table.details-row td.wide-only { display: none; }
  .responses-block .details-title { height: auto; }
}

@media (max-width: 760px) {
  .overview { grid-template-columns: minmax(0, 1fr); grid-template-areas: "structure" "symmetry" "responses"; }
  .options { grid-template-columns: auto; justify-content: start; }
  .options > .field { justify-self: start; }
  .drop { padding: 18px 12px; }
  .options .check { grid-row: auto; }
  .options > .field:first-child { grid-column: 1 / -1; }
  .options button { grid-column: 1 / -1; justify-self: start; }
  main { padding: 12px 10px 30px; }
}

/* The top of the report as printed, applied for a moment before printing so that the viewer can measure the
   space it will have on paper (web/static/viewer.js). Width: a letter page less the margins of @page. */
body.print-measure { --text-page: 10pt; font-size: var(--text-page); }
body.print-measure main { max-width: none; width: 725px; padding: 0; }
body.print-measure .overview.has-viewer {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "structure symmetry" "viewer responses";
}
body.print-measure .viewer { min-height: 0; }
body.print-measure .viewer-tools, body.print-measure .viewer .footnote { display: none !important; }
body.print-measure .viewer-stage { min-height: 0; border: 0; }
body.print-measure :is(.scroll, .multipoles) { overflow: visible; }
body.print-measure .sites-grid { display: block; }  /* stacked, as printed: side by side they are wider than the page */
body.print-measure .overview.has-viewer table.responses { font-size: var(--text); }
body.print-measure .overview.has-viewer table.responses :is(th, td) { padding: 2px 5px; }

/* Printing: the report alone, with its shading, and nothing cut across pages. */
@media print {
  html:not([data-regime="relativistic"]) .overview > [data-regime="relativistic"],
  html[data-regime="relativistic"] .overview > [data-regime="non-relativistic"] { display: none !important; }
  /* A panel turned over prints its front, whatever it shows (the turned rules are more specific, hence !important). */
  :is(.panel, .responses-block).turns > .face.back { display: none !important; }
  .panel.turns .panel-head .viewer-tools { display: none; }
  :is(.panel, .responses-block).turns > .face.front { transform: none !important; visibility: visible !important; }
  @page { margin: 14mm 12mm; }
  :root { --text-page: 10pt; }
  body { background: var(--paper); font-size: var(--text-page); }
  main { max-width: none; padding: 0; min-height: 0; }
  .topbar, .actions, footer, .toggle-group, .busy-bar, body.typesetting .typeset-bar { display: none; }
  body.typesetting main { opacity: 1; }
  .panel, .op.gen::after, .op .gamma .rule, .genkey, table.data thead th, table.data tr.subhead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* The heading keeps its layout but prints black on white, without a frame, set apart from the boxes below. */
  .banner { background: var(--paper); color: var(--ink); border: 0; padding-left: 0; padding-right: 0; margin-bottom: 14px; }
  .banner h1, .banner .synopsis, .banner-corner { color: var(--ink); }
  .banner h1 { font-size: var(--text-hero); }  /* paper: as before */
  .banner .tag { border-color: var(--ink); }
  /* Two columns as on screen (a narrow page also matches the 760px rule above). The viewer prints its
     default view, drawn into an image just before printing (web/static/viewer.js); no controls. */
  .overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "structure symmetry" "responses responses"; }
  .overview.has-viewer { grid-template-areas: "structure symmetry" "viewer responses"; }
  .viewer { min-height: 0; break-inside: avoid; }
  .viewer-tools, .viewer .footnote, .viewer-stage canvas.live, .viewer-tip, .viewer-labels, .viewer-side, .viewer-symbol, .viewer-classes { display: none !important; }
  /* White like the image, so the view fills the space beside the responses whatever its shape on paper. */
  .viewer-stage { min-height: 0; border: 0; background: var(--paper); }
  .viewer-stage canvas.print { display: block; object-fit: contain; }  /* fills the stage, undistorted */
  /* The responses table fits its half of the page (else Chrome shrinks the whole page to fit). */
  .overview.has-viewer table.responses { font-size: var(--text); }
  .overview.has-viewer table.responses :is(th, td) { padding: 2px 5px; }
  /* Every row of the site tables, however many. */
  .sites { max-height: none !important; overflow: visible !important; }
  .sites-grid { display: block; }
  .sites-grid > div { display: block; }
  .scroll, .multipoles { overflow: visible; }
  h2, h4 { break-after: avoid; }
  .op, tr, .panel { break-inside: avoid; }
  details.fold > summary h2::before { display: none; }
  a { text-decoration: none; }
}

/* The expanded views' sidebar in panes, and its width (static/panes.js, from vista), above a phone's width (a phone's
   sidebar is a sheet): on a page with a Selection, the selection in a pane at the top, a share of the page's height
   whatever it holds, its title pinned (from the pane's very top and across its width, so that nothing shows past
   it); the page's other sections in a pane under it; each scrolling on its own (its bar at the sidebar's edge), a
   line between them to drag. Folded, the selection is its title alone. A handle in the gap at the sidebar's left edge
   for its width. Each handle a line on hover, darker while dragged. */
.side-split, .side-width { display: none; }
.side-pane-top > .side-section:last-child { border-bottom: 1px solid var(--hairline); }  /* (a phone's: the line under it) */
@media screen and (min-width: 761px) {
  :is(.viewer.expanded > .viewer-side, .bz-expanded .bz-view > .bz-side):has(> .side-page.split:not([hidden])) {
    display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto;
  }
  .viewer-side > :not(.side-page) { flex: none; }
  .viewer-side > .side-page.split:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .side-page.split > .side-pane { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; margin: 0 -12px; padding: 0 12px; }
  .side-page.split > .side-pane-top { flex: 0 0 calc(var(--selection-share) * 100%); }
  .side-page.split > .side-pane-rest { flex: 1 1 0; }
  .side-pane-top > .side-section { padding-top: 0; }
  .side-pane-top > .side-section > summary {  /* (white to the pane's edges by its shadows, its marker where every section's is) */
    position: sticky; top: 0; z-index: 2; background: var(--paper); padding-top: 9px; box-shadow: -26px 0 0 var(--paper), 12px 0 0 var(--paper);
  }
  .side-pane-top > .side-section:last-child { border-bottom: 0; }  /* (the handle's line under it) */
  .side-page.split > .side-pane-top:has(> .side-section:not([open])) { flex: none; border-bottom: 1px solid var(--hairline); }
  .side-page.split > .side-pane-top:has(> .side-section:not([open])) + .side-split { display: none; }
  .side-split { display: block; flex: none; position: relative; height: 9px; margin: 0 -12px; cursor: row-resize; touch-action: none; }
  .side-split::before { content: ''; position: absolute; left: 12px; right: 12px; top: 4px; border-top: 1px solid var(--rule); }
  .side-split:is(:hover, .dragging, :focus-visible)::before { top: 3px; border-top: 3px solid var(--rule); }
  .side-split.dragging::before { border-top-color: var(--muted); }
  :is(.viewer.expanded, .bz-expanded .bz-view) > .side-width {
    display: block; grid-column: 2; grid-row: 1 / -1; justify-self: start; position: relative; width: 12px; margin-left: -14px;
    cursor: col-resize; touch-action: none; z-index: 5;
  }
  .side-width::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; border-left: 2px solid transparent; }
  .side-width:is(:hover, .dragging, :focus-visible)::before { border-left-color: var(--rule); }
  .side-width.dragging::before { border-left-color: var(--muted); }
  :is(.side-split, .side-width):focus-visible { outline: none; }
}
/* An area that scrolls, while there is more of it below (static/panes.js, from vista): its foot faded to white, across
   its padding too; at the foot only. */
[data-more-below]::after {
  content: ''; display: block; position: sticky; bottom: 0; z-index: 3; height: 26px; margin: -26px -12px 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper));
}
/* Phones (from vista): the expanded views' sidebars a sheet at the foot of the screen (static/sheet.js), its tabs (or a
   grip) showing, pulled up to half the screen or nearly all of it by a drag or a tap; the stage gives way up to half. */
.sheet-grip, .sheet-head.sheet-only { display: none; }
@media screen and (max-width: 760px) {
  .viewer.expanded, .panel.turns.bz-expanded > .face.back { padding-bottom: calc(var(--sheet-room, 44px) + 6px); transition: padding-bottom 0.25s ease; }
  .viewer.expanded.sheet-dragging, .panel.turns.bz-expanded > .face.back.sheet-dragging { transition: none; }
  .viewer.expanded > .viewer-side, .bz-expanded .bz-view > .bz-side {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; order: 0; flex: none;
    height: var(--sheet-peek, 44px); border-radius: 12px 12px 0 0; border-bottom: 0;
    box-shadow: var(--shadow-sheet); transition: height 0.25s ease; overscroll-behavior: contain;
  }
  .viewer-side.dragging { transition: none; }
  .viewer-side[data-sheet="peek"] { overflow: hidden; }
  .viewer-side .sheet-head { touch-action: none; padding-top: 6px; display: flow-root; position: sticky; top: 0; z-index: 2; background: var(--paper); }  /* (pinned: the tabs stay to hand) */
  .viewer-side .sheet-head > .side-pages { margin-top: 0; }
  .sheet-head.sheet-only { display: block; padding: 12px 0 10px; }
  .sheet-grip { display: block; width: 36px; height: 4px; border-radius: var(--radius-mark); background: var(--rule); margin: 0 auto 6px; }
}
/* The help page (templates/help.html, as vista's): what the site does, part by part, each part's points and a screenshot
   of an example (tools/help_shots.py) with numbered marks on it, a point with a place there led by its number; the parts'
   names in pills at the top. A point and its number on the picture lit together in the animation's red (static/help.js),
   while the pointer is over either or held by a click on the point; a picture zoomed on the page: a veil, the picture and
   its numbers as large as the window allows, at its own size where that is larger (a click on it again), its × in the
   corner. (guide-…: the site's help-mark is the ? of a card.) */
.guide-contents { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.guide-contents a {
  display: block; padding: 2px 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-round); text-decoration: none;
}
.guide-contents a:hover { border-color: var(--mid); background: var(--hover); }
.guide-part { scroll-margin-top: 16px; }
.guide-part > p { margin: 0 0 10px; }
.guide-points { columns: 2 20em; column-gap: 28px; margin: 0 0 16px; padding: 0; list-style: none; }
.guide-points li { position: relative; break-inside: avoid; margin: 0 0 6px; padding-left: 28px; }
.guide-points li::before { content: '•'; position: absolute; left: 9px; color: var(--muted); }
.guide-points li:has(> .guide-number:first-child)::before { content: none; }
.guide-points li > .guide-number:first-child { position: absolute; left: 0; top: 2px; }
.guide-number {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-round);
  font-size: var(--text-small); font-weight: bold; line-height: 1; color: var(--paper); background: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
@supports (text-box: trim-both cap alphabetic) { .guide-number > span { text-box: trim-both cap alphabetic; } }  /* (the digits on their capitals) */
.guide-shot { margin: 0 0 8px; }
.guide-frame { position: relative; }
.guide-frame > a { display: block; }
.guide-frame img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius-box); }
.guide-frame .guide-number { position: absolute; left: var(--mark-x); top: var(--mark-y); transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--paper); }
.guide-shot figcaption { color: var(--muted); font-size: var(--text-small); margin-top: 4px; }
.guide-shot + .guide-points { margin-top: 18px; }  /* (a part's next points, under the picture of the last) */
.guide-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
@media screen and (min-width: 761px) { .guide-shots-wide { grid-template-columns: 2fr 1fr; } }
@media screen and (max-width: 760px) { .guide-number { width: 16px; height: 16px; font-size: var(--text-tiny); } }
.guide-points li:has(> .guide-number:first-child) { cursor: pointer; }
.guide-points li.lit > .guide-number:first-child, .guide-frame .guide-number.lit { background: var(--red); }
.guide-part .guide-frame { cursor: zoom-in; }
body.zooming { overflow: hidden; }
.guide-zoom { position: fixed; inset: 0; z-index: 80; display: flex; overflow: auto; padding: 16px; background: var(--veil); cursor: zoom-out; }
.guide-zoom[hidden] { display: none; }
.guide-zoom .guide-frame { flex: none; margin: auto; cursor: default; }
.guide-zoom .guide-frame.grows { cursor: zoom-in; }
.guide-zoom .guide-frame.full { cursor: zoom-out; }
.guide-zoom .guide-frame img { height: 100%; border-color: var(--rule); box-shadow: var(--shadow); }
.guide-zoom .guide-number { width: 26px; height: 26px; font-size: var(--text); }  /* (larger, on the larger picture) */
.guide-zoom-close {
  position: fixed; top: 10px; right: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px;
  height: 32px; padding: 0; font-size: var(--text-heading); font-weight: normal; line-height: 1; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-round); box-shadow: var(--shadow);
}
.guide-zoom-close:hover { color: var(--ink); background: var(--hover); }
.viewer-tip.guide-tip { position: fixed; z-index: 90; white-space: normal; max-width: min(24em, calc(100vw - 16px)); color: var(--ink); }
.viewer-tip.guide-tip[hidden] { display: none; }
.guide-tip .side-card-head > span { color: var(--muted); }
/* The report's terms (What the Report Says): each a term and its meaning, in two columns where there is room. */
.guide-terms { columns: 2 22em; column-gap: 28px; margin: 0 0 16px; }
.guide-terms > div { break-inside: avoid; margin: 0 0 8px; }
.guide-terms dt { font-weight: bold; }
.guide-terms dd { margin: 0; }