/* vista's stylesheet. Find-gamma's look carried over (reference/find-gamma/static/style.css): black, white and grey,
   STIX Two Text through KaTeX (katex-stix.css), the viewer's rules as they were. */
/* The tokens (the visual audit, VISUAL-AUDIT-PLAN.md): one value for each role, each named for it; tests/style.test.js
   holds the rest of the file to them. */
:root {
  /* 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: #9e9e9e;          /* drawn greys (the zone's corners, rings, a key turned off); a checkbox's edge */
  --rule: #b5b5b5;         /* a control's edge; a group's box; a floating card's edge */
  --hairline: #e2e2e2;     /* a separator; a card's edge */
  --chosen: #d9d9d9;       /* what is chosen: a switch's option, an operation, a part, a row; a slider's track */
  --hover: #f2f2f2;        /* under the pointer, on white */
  --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;
  --bar-rule: #5a5a5a;     /* a button's edge on the bar */
  /* The brand's (brand/vista-octahedron-111.svg): its ligands' red. */
  --brand-ligand: #e34d49;
  --veil: rgba(255, 255, 255, 0.9);  /* white over the view */
  --strip: rgba(255, 255, 255, 0.85);  /* a start card's facts over its thumbnail */
  /* The animation's red and blue (an error in the red), and their tints behind the part being played. */
  --red: #c62828;
  --blue: #1f62c9;
  --red-tint: #f7dddd;
  --blue-tint: #dbe5f6;
  /* Shadows: whatever floats (menus, hover cards, the save card, the player); text over the view, its halo. */
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --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;  /* (the corner's symbol, many times as large) */
  --shadow-sheet: 0 -2px 14px rgba(0, 0, 0, 0.14);  /* (a phone's sheet, over the view) */
  --shadow-raised: inset 0 0 0 1px var(--rule), 0 1px 2px rgba(0, 0, 0, 0.14);  /* (the tab shown, raised on its track, ringed) */
  --edge: rgba(0, 0, 0, 0.3);  /* a swatch's edge, whatever its colour */
  /* The group tables' pinned edges, one line each: a label's rule at its right (a hairline under it, as the cells
     have), a head's rule under it, the corner's both. */
  --shadow-label: inset -1px 0 0 var(--rule), inset 0 -1px 0 var(--hairline);
  --shadow-head: inset 0 -1px 0 var(--rule);
  --shadow-corner: inset -1px 0 0 var(--rule), inset 0 -1px 0 var(--rule);
  /* Type: the page's; the sidebar's, every control's and card's (and the legend's, the bar's buttons', a menu's); small,
     find-gamma's (switches, tabs, chips, tables' headers, hover cards, notes, the key); titles. Labels drawn over the view: names (atoms, the zone's
     points and axes, a bond's ends) and measurements (distances, angles). */
  --text-page: 17px;
  --text: 15.3px;
  --text-small: 13.5px;
  --text-tiny: 10px;       /* (the key over the view, on a phone) */
  --text-title: 19.55px;   /* the drop card's title */
  --text-heading: 22.1px;  /* the start page's headings; the brand on a phone */
  --text-hero: 34px;       /* the start page's title (Find Γ's, a page's h1) */
  --text-brand: 25.5px;
  --label: 14px;
  --label-measure: 12.5px;
  /* Controls, one height (the user's): a switch (a group of options: the view's tools, the tabs, Global | Local, the
     player), a menu, a button (Show Orbit, + Add Bonds, More, Go), a box to type in and a chip (in a flowing list of
     them: shells, directions); each label centred on its capitals. */
  --switch: 22px;
  /* The sidebar (src/ui/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;
  /* Corners: a control's (and a highlight's), a box's (a card, a group, a panel, a menu's list, a hover card), a small
     mark's (a checkbox, a swatch, a track). */
  --radius: 3px;
  --radius-box: 4px;
  --radius-mark: 2px;
  --radius-round: 999px;  /* a pill's ends */
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--page); font-size: var(--text-page); line-height: 1.45;
  font-family: "KaTeX_Main", "STIX Two Text", "Times New Roman", Times, serif;
  display: flex; flex-direction: column;
}
code { font-family: "KaTeX_Typewriter", ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }
a { color: inherit; }
a:hover { color: var(--ink); }
.muted { color: var(--muted); }
.katex { font-size: 1em; white-space: nowrap; }  /* KaTeX's 21% enlargement suits other fonts, not STIX */
sub, sup { line-height: 0; }

.topbar { background: var(--ink); color: var(--paper); padding: 10px 20px; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.8em; }
.brand { flex: none; color: var(--paper); font-size: var(--text-brand); font-weight: bold; text-decoration: none; white-space: nowrap; }
/* The brand's mark, reversed for the bar (its edges the bar's ink's opposite, its centre solid white), in
   the name's line (the bar's names on one baseline), centred on its letters; its lines a fixed width on the screen. */
.brand-mark { width: 1.3em; height: 1.43em; vertical-align: -0.36em; margin-right: 0.28em; }
.brand-mark :is(.brand-edges, .brand-centre) { stroke-linecap: round; stroke-linejoin: round; }
.brand-mark :is(line, circle) { vector-effect: non-scaling-stroke; }  /* (each shape's own: it is not inherited from a group) */
.brand-mark .brand-edges { fill: none; }
.brand-mark .brand-edges { stroke: var(--paper); stroke-width: 1.4px; }
.brand-mark .brand-ligands { fill: var(--brand-ligand); }
.brand-mark .brand-centre { fill: var(--paper); stroke: var(--paper); stroke-width: 1.6px; }  /* (solid white, the user's) */
.brand:hover { color: var(--paper); }
/* The compound's name: one line, the bar never two (the user's), cut short (…) where the bar's short forms are not
   enough, and shown whole in a card (src/ui/bar.js). */
.topbar .file-name {
  flex: 1 1 auto; min-width: 0; font-size: var(--text-brand); line-height: 1.2; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .file-name:empty { display: none; }
.viewer-tip.bar-tip { position: fixed; z-index: 70; white-space: normal; max-width: min(30em, calc(100vw - 16px)); color: var(--ink); }
.viewer-tip.bar-tip[hidden] { display: none; }

main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 18px 16px 40px; background: var(--paper); }

h2 { font-size: var(--text-heading); margin: 28px 0 10px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }

/* The first view: what the page is for (Find Γ's hero: a title and a lead), then choose or drop a file, or take an
   example; under the drop, how it is done (Find Γ's footnote). */
.hero h1 { font-size: var(--text-hero); line-height: 1.2; margin: 6px 0 4px; text-wrap: balance; }
.hero p { margin: 0 0 4px; }  /* (the page's width, as the card under it: the user's) */
.footnote { color: var(--muted); font-size: var(--text-small); margin: 8px 0 0; }
/* The start page's ? and its card (src/start-page.js): how it is done, the libraries and tables, on hover or a tap. */
.footnote.about { position: relative; }
.about-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin-left: 4px; padding: 0;
  font: inherit; font-weight: bold; line-height: 1; color: var(--muted); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 50%; cursor: pointer; vertical-align: 0.05em;
}
.about-mark:hover, .about-mark[aria-expanded="true"] { color: var(--ink); border-color: var(--mid); }
.viewer-tip.about-card {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; display: block; box-sizing: border-box; pointer-events: auto;
  white-space: normal; max-width: min(30em, calc(100vw - 32px)); color: var(--ink);
}
.viewer-tip.about-card[hidden] { display: none; }
body.viewing .hero { display: none; }
.card { background: var(--light); border-radius: var(--radius-box); padding: 16px 18px; margin: 16px 0; }
.card > h2:first-child { margin-top: 0; }
.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, body.dragging .drop { border-color: var(--dark); background: var(--card); }
.drop input { display: none; }
.drop-title { font-weight: bold; color: var(--ink); font-size: var(--text-title); text-align: center; text-wrap: balance; }  /* (centred, its two lines even where it wraps: a phone's) */
.drop-hint { color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.drop-hint.error { color: var(--red); }
/* A structure opening (src/main.js's load): the start page hidden, and the viewer's frame (its panel, stage and sidebar
   where .viewer.app puts them) over the page, "Loading…" in its stage, until the viewer is ready under it (the
   user's: nothing moving about as it comes). The bar's tools shown at once. */
.opening-frame { display: none; }
body.opening:not(.viewing) .hero, body.opening:not(.viewing) #start { display: none; }
body.opening main { max-width: none; padding: 12px 16px; display: flex; flex-direction: column; min-height: 0; position: relative; }
body.opening .topbar-tools[hidden] { display: flex; }
body.opening .opening-frame {
  position: absolute; inset: 12px 16px; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width);
  grid-template-rows: 30px minmax(0, 1fr) 32px; column-gap: 16px; background: var(--light); border-radius: var(--radius-box); padding: 12px 14px;
}
.opening-stage {
  grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-box);
}
.opening-side { grid-column: 2; grid-row: 1 / -1; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-box); }
.opening-ring { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--ink); animation: opening 0.8s linear infinite; }
@keyframes opening { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .opening-ring { animation-duration: 2.4s; } }
@media screen and (max-width: 760px) {  /* (a phone's: the stage between the tools and the legend, the sidebar a sheet below) */
  body.opening main { padding: 8px; }
  body.opening .opening-frame { inset: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px minmax(0, 1fr) 32px 106px; padding: 10px 12px 0; }
  .opening-side {
    position: fixed; left: 0; right: 0; bottom: 0; height: 74px; border-radius: 12px 12px 0 0; border-bottom: 0;
    box-shadow: var(--shadow-sheet);
  }
}
/* The examples and the recent files as cards (U12): a thumbnail of the view filling each, the formula, the group and the
   order's kind on a strip across its foot, mostly opaque (the user's: half as tall as they were, no blur). */
.start-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.start-cards[hidden] { display: none; }
.examples-head { font-size: var(--text); font-weight: bold; color: var(--muted); margin: 16px 0 8px; }
.examples-head:first-child { margin-top: 0; }
.start-card { position: relative; }
.start-open {
  position: relative; display: block; width: 100%; height: 96px; padding: 0; text-align: left; isolation: isolate;
  font: inherit; font-weight: normal; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-box);
  overflow: hidden; cursor: pointer; line-height: 1.25;
}
.start-open:hover { border-color: var(--ink); }
.start-card.loading .start-open { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.start-thumb { position: absolute; inset: 0; display: block; background: var(--paper); }
.start-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.start-label { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 3px 8px 4px; background: var(--strip); }
.start-title { display: block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* (a long name cut short) */
.start-facts { display: flex; flex-wrap: wrap; column-gap: 6px; font-size: var(--text-small); color: var(--dark); }
.start-group { color: var(--ink); }
.start-forget {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 20px;
  font-weight: normal; color: var(--muted); background: var(--veil); border: 1px solid var(--hairline);
  opacity: 0; transition: opacity 0.15s;
}
.start-card:hover .start-forget, .start-forget:focus-visible { opacity: 1; }
.start-forget:hover { color: var(--ink); border-color: var(--ink); background: var(--paper); }
@media (hover: none) { .start-forget { opacity: 1; } }
@media screen and (max-width: 760px) { .start-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* The 230's page (230/index.html, src/space-groups-page.js): the start page's cards in one list, a link each; on its strip
   the group, its number first (bold, with #), and the compound, cut short where long; over them the filters as Find Γ's
   MAGNDATA page has them (the user's): a number typed, and the crystal system's pills, the chosen one shaded; a card of
   the facts under the pointer. */
a.start-open { text-decoration: none; }
.list-number { color: var(--ink); font-weight: bold; margin-right: 6px; font-variant-numeric: tabular-nums; }
.list-cards .start-facts { flex-wrap: nowrap; }
.list-compound { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-none { color: var(--muted); margin: 8px 0; }
.filters { display: flex; flex-direction: column; gap: 12px; }
.filter-row { display: flex; gap: 12px 26px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 3px; font-size: var(--text); color: var(--muted); }
.field > span, .field > label { white-space: nowrap; }
.list-search .search-box { flex: 1; }
.list-search { flex: 0 1 380px; min-width: 0; }  /* (as wide as Find Γ's, narrowing on a phone) */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; cursor: pointer; }
.pill > span { display: block; min-width: 2.6em; text-align: center; padding: 2px 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-round); }
.pill:hover > span { border-color: var(--mid); }
.pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; border-radius: var(--radius-round); }
.pill input:checked + span { background: var(--chosen); border-color: var(--mid); }
/* A text box (a number typed: the 230's page and the start page's), and one with its button joined to it. */
:is(.field, .search-box) input[type=text] {
  font: inherit; line-height: 1.45; color: var(--ink); padding: 4px 8px; margin: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); appearance: none;
}
:is(.field, .search-box) input[type=text]::placeholder { color: var(--mid); }
:is(.field, .search-box) input[type=text]:hover { border-color: var(--mid); }
:is(.field, .search-box) input[type=text]:focus { border-color: var(--ink); }
:is(.field, .search-box) input[aria-invalid=true] { border-color: var(--red); }
.search-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 10px; }
.search-box { position: relative; display: flex; flex: 0 1 380px; min-width: 0; }
/* The start page's 230 search: its matches under the box as it is typed (src/start-page.js), the one chosen with the
   arrows shaded, as a menu's list is. */
.search-matches {
  position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60; display: flex; flex-direction: column; padding: 4px 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-box); box-shadow: var(--shadow);
}
.search-matches[hidden] { display: none; }
.search-match, .search-more, .search-none { display: flex; align-items: baseline; gap: 8px; padding: 3px 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.search-match b { flex: none; min-width: 2.6em; font-variant-numeric: tabular-nums; }
.search-match .search-symbol { flex: none; }
.search-match .search-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.search-match:hover, .search-match.chosen, .search-more:hover { background: var(--hover); color: var(--ink); }
.search-more, .search-none { color: var(--muted); }
.search-box input[type=text] { flex: 1; min-width: 0; border-radius: var(--radius) 0 0 var(--radius); }
/* The box and its button one control (the user's: the box's focus ring ran into the button): the ring around both. */
.search-box :is(input[type=text], .button):focus-visible { outline: none; }
.search-box:has(:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--radius); }
.search-box .button { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; padding: 4px 14px; line-height: 1.45; }
.search-row > .button { padding: 4px 14px; line-height: 1.45; text-box: normal; }  /* (as tall as the box and Go: a link's text box
   untrimmed, as the button's is) */
.button.secondary { background: var(--paper); color: var(--ink); border-color: var(--rule); font-weight: normal; }
.button.secondary:hover { background: var(--hover); color: var(--ink); }
.after-heading { margin: 0; }
.viewer-tip.list-tip { z-index: 60; box-sizing: border-box; max-width: min(26em, calc(100vw - 8px)); white-space: normal; }
.list-tip .side-kv td { overflow-wrap: anywhere; }
.list-tip-name { font-weight: bold; }
.list-tip-formula { white-space: nowrap; }  /* (the note's formula whole on its line) */
/* The help page (help/index.html, linked from the start page's lead): what Vista does, part by part, each part's points and a
   screenshot of an example (tools/help-shots.mjs) with numbered marks on it, a point with a place there led by its
   number; the parts' names in pills at the top. */
.help-contents { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.help-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;
}
.help-contents a:hover { border-color: var(--mid); background: var(--hover); }
.help-part { scroll-margin-top: 16px; }
.help-part > p { margin: 0 0 10px; }
.help-points { columns: 2 20em; column-gap: 28px; margin: 0 0 16px; padding: 0; list-style: none; }
.help-points li { position: relative; break-inside: avoid; margin: 0 0 6px; padding-left: 28px; }
.help-points li::before { content: '•'; position: absolute; left: 9px; color: var(--muted); }
.help-points li:has(> .help-mark:first-child)::before { content: none; }
.help-points li > .help-mark:first-child { position: absolute; left: 0; top: 2px; }
.help-mark {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: var(--text-small); font-weight: bold; line-height: 1; color: var(--paper); background: var(--ink);
  font-variant-numeric: tabular-nums;
}
.help-shot { margin: 0 0 8px; }
.help-frame { position: relative; }
.help-frame > a { display: block; }
.help-frame img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius-box); }
.help-frame .help-mark { position: absolute; left: var(--mark-x); top: var(--mark-y); transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px var(--paper); }
.help-shot figcaption { color: var(--muted); font-size: var(--text-small); margin-top: 4px; }
.help-shot + .help-points { margin-top: 18px; }  /* (a part's next points, under the picture of the last: Representations') */
.help-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) { .help-shots-wide { grid-template-columns: 2fr 1fr; } }
@media screen and (max-width: 760px) { .help-mark { width: 16px; height: 16px; font-size: var(--text-tiny); } }
/* A point and its number on the picture lit together, in the logo's red (src/help-page.js; the user's): 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. */
.help-points li:has(> .help-mark:first-child) { cursor: pointer; }
.help-points li.lit > .help-mark:first-child, .help-frame .help-mark.lit { background: var(--brand-ligand); }
.help-part .help-frame { cursor: zoom-in; }
body.zooming { overflow: hidden; }
.help-zoom { position: fixed; inset: 0; z-index: 80; display: flex; overflow: auto; padding: 16px; background: var(--veil); cursor: zoom-out; }
.help-zoom[hidden] { display: none; }
.help-zoom .help-frame { flex: none; margin: auto; cursor: default; }
.help-zoom .help-frame.grows { cursor: zoom-in; }
.help-zoom .help-frame.full { cursor: zoom-out; }
.help-zoom .help-frame img { height: 100%; border-color: var(--rule); box-shadow: var(--shadow); }
.help-zoom .help-mark { width: 26px; height: 26px; font-size: var(--text); }  /* (larger, on the larger picture) */
.help-zoom .help-mark { cursor: default; }
.viewer-tip.help-tip { position: fixed; z-index: 90; white-space: normal; max-width: min(24em, calc(100vw - 16px)); color: var(--ink); }
.viewer-tip.help-tip[hidden] { display: none; }
.help-tip .side-card-head > span { color: var(--muted); }
.help-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: 50%; box-shadow: var(--shadow);
}
.help-zoom-close:hover { color: var(--ink); background: var(--hover); }

button, .button {
  font: inherit; font-weight: bold; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 7px 18px; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.25;
}
.button:hover { color: var(--paper); background: var(--dark); }
/* What cannot be used now, any control: faded, as one (its text, edge and icon together). */
:is(button, input):disabled, .side-option:has(input:disabled) { opacity: 0.45; cursor: default; }
.side-option input:disabled { opacity: 1; }  /* (its label faded with it, once) */
.button:disabled { cursor: wait; }  /* (the start page's, while a file is read) */
/* Icons: 14px in a button, 12px beside a word (a menu's chevron, a slider's reset, the copied tick); one stroke. */
.icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.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");
}
/* The keyboard's place, on any control: one ring (inside a switch, whose group clips what is outside). */
:is(button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:is(.viewer-tools, .top-switch) button:focus-visible { outline-offset: -3px; }

@media screen and (max-width: 760px) {
  main { padding: 12px 10px 28px; }
  .topbar { padding: 8px 12px; }
  .hero h1 { font-size: var(--text-heading); }
}

/* The viewer (viewer.js, ported in M1): find-gamma's rules as they were (reference/find-gamma/static/style.css:336-604). */
/* The viewer: a white stage in a grey panel, with view buttons above and the legend below. */
.viewer { min-height: 340px; }
.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-row[hidden], .side-group[hidden] { display: none; }  /* (rows shown only with what they set: Probability, the peaks') */
.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 { 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.
   As small as the switches and buttons (the user's); as wide as its widest choice whatever is chosen (every choice in
   one grid cell, the others hidden), and a menu of a row (Looks Like, Model, Axes Along) one standard width, wider only
   where a choice needs it, so that the menus of a group line up. */
.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); color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0 20px 0 8px; min-height: var(--switch); cursor: pointer;
}
.side-row > .side-menu { min-width: 9em; }
/* A Wyckoff orbit's menu of its alike sites (O1, O2, …): as wide as its longest name, and its count (× 17) kept beside
   it on the line (the user's: the count pushed to a line of its own). */
.orbit-menu { min-width: 0; }
.orbit-table td:first-child { white-space: nowrap; }
.side-menu-label { display: inline-grid; }
.side-menu-choice { grid-area: 1 / 1; visibility: hidden; }
.side-menu-choice.shown { visibility: inherit; }  /* (inherit, not visible: hidden with a face turned away, the user's: a menu's choice showing over the tables) */
.side-menu:hover { background: var(--hover); }
.side-menu[aria-expanded="true"] { border-color: var(--muted); }
.side-menu .icon { position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; 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) {
  :is(.side-menu, .side-button) { text-box: trim-both cap alphabetic; }
}
.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); box-shadow: var(--shadow);
}
.side-menu-item { padding: 4px 12px; white-space: nowrap; cursor: pointer; color: var(--dark); font-size: var(--text-small); }
.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); }
/* The view's right-click menu (A32): its icon, the item, its key (or a toggle's tick) at the right; its groups ruled
   apart; an item that cannot be, greyed */
.viewer-menu .side-menu-item { display: flex; align-items: center; gap: 8px; padding-left: 10px; }
.viewer-menu-icon { width: 14px; height: 14px; flex: none; display: inline-flex; color: var(--muted); }
.viewer-menu .side-menu-item:hover .viewer-menu-icon, .viewer-menu .side-menu-item:focus .viewer-menu-icon { color: var(--ink); }
.viewer-menu-text { flex: 1; }
.viewer-menu-key { margin-left: 18px; color: var(--muted); }
.viewer-menu-key.on { color: var(--ink); }
.viewer-menu-key:empty { margin-left: 0; }
.viewer-menu-rule { height: 1px; margin: 4px 0; background: var(--rule); }
.viewer-menu .side-menu-item[aria-disabled="true"] { color: var(--muted); cursor: default; }
.viewer-menu .side-menu-item[aria-disabled="true"]:hover { background: none; }
.bond-set .bond-count { flex: none; color: var(--muted); white-space: nowrap; font-size: var(--text-small); }  /* by the range */
.bond-pair .side-menu { min-width: 0; }  /* (as wide as their species' names: the pair's line within the box) */
.bond-pair .side-button { flex: none; display: inline-grid; place-items: center; width: var(--switch); padding: 0; margin-left: auto; }  /* ×: square, as tall as the sidebar's buttons, at the right */
.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-set-options { flex: none; display: flex; flex-direction: column; gap: 2px; }  /* Outside, and Polyhedra under it */
.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-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }  /* A9's: Covalent, Hydrogen Bonds, Contacts */

.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-own { display: inline-flex; align-items: center; gap: 6px; }  /* a card's colour or style, and its ↺ (the Display page's Selection) */
.side-slider-reset .icon { width: 12px; height: 12px; }
.side-check { flex: 0 0 auto !important; display: inline-flex; }
.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; height: var(--switch); font: inherit; font-size: var(--text-small); padding: 0 3px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); text-align: center; appearance: textfield; -moz-appearance: textfield; }
.side-bound { width: 2.9em; }
.side-number::-webkit-inner-spin-button, .side-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.side-button {
  font: inherit; font-size: var(--text-small); color: var(--dark); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 7px; cursor: pointer;
  min-height: var(--switch);  /* (the switches' size, the user's: Show Orbit, + Add Bonds, More, Go …) */
}
.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: 0 5px; min-height: 0; }
.side-selection p { margin: 3px 0; }
.side-selection .side-hint { color: var(--muted); }
.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-right > :not(.side-label) { flex: 0 0 auto; margin-left: auto; }  /* controls flush right */
.side-row.side-nowrap { flex-wrap: nowrap; }
.light-aim { display: inline-flex; align-items: center; gap: 6px; }  /* Lighting's Direction: its sphere and its ↺ */
.light-ball { width: 96px; height: 96px; display: block; cursor: grab; touch-action: none; border-radius: 50%; }
.light-ball:active { cursor: grabbing; }
.light-ball:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.side-row.side-nowrap > .side-label { flex: 0 1 118px; min-width: 0; }
.viewer-tools.turns .side-button { padding: 0 3px; }  /* the six 15° turns: icons, centred as the tools' (button:has(> .icon)) */
/* Chips: the shells of a bond set, the directions to view along; small, in a flowing list. */
.bond-shells .side-button, .side-axes .side-button { font-size: var(--text-small); line-height: 1.25; min-height: var(--switch); padding: 0 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: repeat(auto-fit, minmax(8.5em, 1fr)); gap: 4px 12px; margin: 6px 0 2px; }
.side-option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* 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; }
/* Every cell on its row's first baseline: a label with its value's first line, whatever wraps or is taller below it. */
:is(.side-kv, .side-table) :is(th, td) { vertical-align: baseline; }
.side-kv th { text-align: left; font-weight: normal; color: var(--muted); padding: 1px 8px 1px 0; white-space: nowrap; width: 1%; }
.side-kv td { padding: 1px 0; }
/* A table: its header row small and muted over its rule; a row's label (in its first column) as a fact's; one gap
   between columns (the Crystal Sites' own, later). */
.side-table thead th { text-align: left; font-weight: normal; font-size: var(--text-small); color: var(--muted); padding: 1px 0; border-bottom: 1px solid var(--hairline); }
.side-table tbody th { text-align: left; font-weight: normal; color: var(--muted); padding: 1px 0; white-space: nowrap; }
.side-table tbody tr:not(.subhead) th:first-child { width: 1%; }  /* (a row's label as narrow as it can be) */
.side-table td { padding: 1px 0; }
/* A header row within a table, over a block of its rows (a site's j, after its orbitals): as the header, a little apart. */
.side-table tr.subhead th { font-size: var(--text-small); color: var(--muted); padding-top: 8px; border-bottom: 1px solid var(--hairline); }
.side-table :is(th, td):not(:last-child) { padding-right: 8px; }
/* Tables one under another in a card (the axes', a level's), and under its facts, a little apart. */
.side-card :is(.side-kv, .side-table) + .side-table { margin-top: 4px; }
.side-table .r { text-align: right; }
.side-table .c { text-align: center; }
.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: 0; }
.viewer-side .side-pages:not(.viewer-tools) { flex-direction: column; }  /* the structure's: its tabs in rows */
.side-pages-row { display: flex; }

.viewer-side .side-tabs { position: sticky; top: 0; z-index: 4; background: var(--paper); margin: 0 -12px 4px; padding: 10px 12px 6px; }  /* pinned at the top */
.side-pages button { flex: 1 1 0; min-width: 0; padding-inline: 4px; }  /* (each row's tabs one width: spread evenly) */
/* The tabs, a segmented control (the user's: the page shown plain at a glance, but not by an underline): 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 ring inside its own box (an inset shadow), so that nothing beside it can
   cover an edge (the user's: a second row's lost its top), on the corners its background's (an outline drawn inside
   had its own: the white showed past it, the user's). The structure's two rows one track; the zone's one. */
.viewer-side .side-pages:not(.viewer-tools), .viewer-side .side-pages.viewer-tools {
  gap: 2px; padding: 2px; background: var(--light); border: 1px solid var(--rule); border-radius: var(--radius-box);
}
.side-pages .side-pages-row { gap: 2px; border: 0; background: none; overflow: visible; }
.viewer-side .side-pages.viewer-tools { overflow: visible; }
.side-pages button[role=tab] { background: none; border-radius: var(--radius); min-height: var(--switch); }  /* (the zone's one row as tall as the structure's: the user's) */
.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);
}
.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-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, .sym-op.pinned { background: var(--hover); }  /* (pinned: its element kept drawn, a right-click) */
.sym-op.active { background: var(--chosen); }
.sym-op.unplaced { color: var(--muted); }
/* Symmetry Operations for one atom or two (the section titled Site or Bond Symmetry and whose): the name beside the title. */
.sym-whose { font-weight: normal; color: var(--muted); margin-left: 0.3em; }
.sym-empty > .muted { display: block; padding: 2px 5px; }
.sym-chosen { padding: 4px 0 2px; }
.sym-chosen[hidden], .sym-card[hidden] { display: none; }
/* The chosen element, as a card like the Viewer page's selection: its symbol, then U and Γ side by side. */
.sym-seitz { font-size: 1.12em; }
.sym-r, .sym-t, .sym-u, .sym-un { padding: 1px 3px; border-radius: var(--radius); transition: background-color 0.25s; }
.sym-r.playing, .sym-t.playing { background: var(--red-tint); }
.sym-u.playing, .sym-un.playing { background: var(--blue-tint); }
.side-button:disabled { background: var(--paper); }
.side-button.active { background: var(--chosen); color: var(--ink); }
.player .side-button { padding: 0 5px; }
.player .side-button .icon { fill: currentColor; }
.speeds .side-button { padding: 0 4px; }
.side-actions { flex-wrap: wrap; }
/* The part of the operation being shown, large in the corner of the view: R and t red, U blue. */
.viewer-symbol {  /* (above the player, which is in the corner while it plays) */
  position: absolute; right: 16px; bottom: 44px; 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 part of a representation pictured, named in the corner as large: in ink, in the corner itself, above the player
   where the player shows. */
.viewer-symbol.viewer-irrep { color: var(--ink); bottom: 12px; }
.viewer-player:not([hidden]) ~ .viewer-symbol.viewer-irrep { bottom: 44px; }
/* The Symmetry page's player, over the view's lower right: the speeds, then Play, Pause, Stop and Follow. */
.viewer-player { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 6px; }
.viewer-player[hidden] { display: none; }
.shape-name { cursor: default; }  /* (its S in its tooltip) */
/* A site's Wyckoff label in its card's head, the switch of its orbit (the user's): 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; }
.viewer-player .viewer-tools { box-shadow: var(--shadow); }
/* A film (A21): 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, its switches' fades in a
   step (each frame drawn as it is). Record red while it is on. */
.viewer-film { position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0; pointer-events: none; font-size: var(--text); }
.viewer-film[hidden] { display: none; }
.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); }
/* The Sublattices key, in the 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.5;
  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(.app) .viewer-classes { display: none; }
.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; }
  .axes-pair svg { width: 10px; height: 10px; }
}
.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-measure); 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); }
/* A bond's or a site's own operation played: its ends numbered, the atoms' own in grey to the upper left, the moving
   copy's in the operation's red to the upper right, so that a swap ends with 1 by 2. */
.end-label { font-size: var(--label); font-weight: bold; line-height: 1; pointer-events: none; }
.end-label span { display: inline-block; position: relative; top: -16px; text-shadow: var(--halo); }
.end-label.still span { left: -14px; color: var(--muted); }
.end-label.moving span { left: 14px; color: var(--red); }
.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 and save at the right */
.viewer-tools { display: inline-flex; min-height: var(--switch); 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: 0 5px; 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-tools button .icon { vertical-align: -2px; }
.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; }
.viewer-tools button.copy { place-items: center; }  /* 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: normal; }  /* (a long value wraps within the card: a polyhedron's Shape, "or" another) */
.atom-tip .whole { white-space: nowrap; }  /* (a vector, whole on its line) */
.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 Γ_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: 4px 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.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) */
.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; }
/* A box being drawn over the view (A30: Shift-drag, or Box): the atoms inside it chosen. */
.viewer-box { position: absolute; z-index: 5; pointer-events: none; border: 1px dashed var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.viewer-box[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; }

/* 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 leaves 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) {
  .button, .viewer-tools button:not(:has(> .icon)):not(.copy) { text-box: trim-both cap alphabetic; }
  .button { padding-block: calc(7px + (1lh - 1cap) / 2); }
}

/* vista: the page while a structure is shown, the viewer filling the window below the bar, its sidebar beside it
   (find-gamma's expanded view, within the page). */
body.viewing #start { display: none; }
body.viewing main { max-width: none; padding: 12px 16px; display: flex; flex-direction: column; min-height: 0; }
.viewer.app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-width); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px; }
.viewer.app > .viewer-head { grid-column: 1; grid-row: 1; }
.viewer.app > .viewer-stage { grid-column: 1; grid-row: 2; min-height: 0; }
.viewer.app > .viewer-foot { grid-column: 1; grid-row: 3; }
.viewer.app > .viewer-side { grid-column: 2; grid-row: 1 / -1; display: block; }
@media screen and (max-width: 760px) {
  body.viewing main { padding: 8px; }
  .viewer.app { display: flex; flex-direction: column; padding: 10px 12px; }
  .viewer.app > .viewer-stage { flex: 1 1 50%; }
  .viewer.app > .viewer-side { flex: 0 1 40%; margin-top: 8px; order: 1; }
}
/* The bar's Open and Examples, at its right. */
.topbar-tools { margin-left: auto; display: flex; gap: 8px; align-self: center; flex: none; }
.topbar-tools[hidden] { display: none; }
.top-button {
  font: inherit; font-size: var(--text); font-weight: normal; line-height: 1.45; color: var(--paper); background: transparent;
  border: 1px solid var(--bar-rule); border-radius: var(--radius); padding: 3px 11px; cursor: pointer;
}
.top-button:hover { background: var(--dark); border-color: var(--mid); }
/* Install (Vista as an app): at the bar's right on the start page, while the browser offers it; not while viewing. */
#install { margin-left: auto; align-self: center; }
#install[hidden], body:is(.viewing, .opening) #install { display: none; }
@supports (text-box: trim-both cap alphabetic) {
  .top-button { text-box: trim-both cap alphabetic; padding-block: calc(3px + (1lh - 1cap) / 2); }
}
.top-menu {
  position: fixed; z-index: 60; max-height: 70vh; overflow-y: auto; padding: 4px 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-box); box-shadow: var(--shadow);
}
.top-menu :is(button, a) {
  display: block; width: 100%; text-align: left; font: inherit; font-size: var(--text); font-weight: normal; line-height: 1.35; color: var(--dark);
  background: none; border: 0; border-radius: 0; padding: 5px 14px; white-space: nowrap; cursor: pointer;
}
.top-menu :is(button, a):hover, .top-menu :is(button, a):focus { background: var(--hover); color: var(--ink); outline: none; }
.top-menu a { text-decoration: none; }
.top-menu .menu-head { font-size: var(--text-small); color: var(--muted); padding: 6px 14px 2px; }
.notice {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 70; max-width: min(90vw, 640px);
  background: var(--ink); color: var(--paper); border-radius: var(--radius-box); padding: 8px 14px; font-size: var(--text);
}
.notice[hidden] { display: none; }
/* The Structure section: find-gamma's structure panel in the sidebar. */
/* A cell's lengths and angles: two blocks, the angles beside the lengths, or under them where the panel is too narrow;
   their rows of one height, so that each angle sits beside its edge. A word too long for its row broken (a journal's). */
.cell { display: inline-flex; flex-wrap: wrap; column-gap: 1.4em; row-gap: 3px; }
.cell-part { display: inline-grid; grid-template-columns: repeat(2, auto); grid-auto-rows: 1.45em; align-items: baseline; }
.structure-rows td { overflow-wrap: break-word; }
.side-notes { margin: 4px 0 2px; padding-left: 1.2em; color: var(--dark); }
/* The notation switch (find-gamma's): Schoenflies or international, one shown. */
:root[data-notation="international"] .nt-s, :root:not([data-notation="international"]) .nt-i { display: none; }
/* The Crystal Sites table: narrow, its coordinates in small figures. */
.side-scroll { overflow-x: auto; overflow-y: hidden; }  /* a table wider than the sidebar, scrolled across in its place (not the sidebar's scroller: keepingPlace) */
.site-table td, .site-table th { white-space: nowrap; }
.site-table :is(td, th):not(:last-child) { padding-right: 6px; }  /* (the densest table: 6px apart, as its coordinates are, 3px each side, to fit the sidebar) */
.site-table tbody tr[data-site] { cursor: pointer; }  /* a click shows the site's orbit */
.site-table tbody tr[data-site]:hover { background: var(--hover); }
.site-table tbody tr[data-site].active { background: var(--chosen); }
.site-table td:last-child, .site-table th:last-child { padding-right: 0; }
.site-table .vec, .moment-table .vec { font-variant-numeric: tabular-nums; font-size: var(--text-small); }
.site-table td.c, .site-table th.c { width: 17%; padding: 1px 3px; }  /* the coordinates' three columns alike, apart */
.site-table td.c:last-child, .site-table th.c:last-child { padding-right: 0; }
/* The Magnetic Moments table (an MCIF's): the allowed form and the file's moment, in a, b, c components. */
.moment-table td:last-child { white-space: nowrap; }

/* The structure's panel and the Brillouin zone's (src/kspace/view.js, src/ui/turns.js): one place, one shown at a time,
   switched at once (the user's: no turning over); the other simply not shown. */
.turning { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.turning > .face { flex: 1; min-height: 0; }
.turning > .face.back { position: absolute; inset: 0; }
.turning > .face:not(.shown) { visibility: hidden; }
.viewer-head .viewer-turn { margin-left: auto; }  /* the way to the zone, at the right before reset, save and fill */
.viewer-head > .viewer-turn + .viewer-tools:last-child { margin-left: 0; }
.bz-short { display: none; }
@media screen and (max-width: 760px) { .bz-full { display: none; } .bz-short { display: inline; } }

/* The zone's drawing: its points, letters and Q over it (find-gamma's). */
.bz-stage { position: relative; overflow: hidden; background: var(--paper); }
.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(--ink); }  /* a point of symmetry */
.bz-point.corner { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--mid); }  /* a corner: unlabelled, smaller */
.bz-point.q { background: var(--red); }  /* Q: the viewer's red */
.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.lattice { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--mid); }
.bz-stage .bz-point:not(.lattice) { transform: scale(var(--bz-point-scale, 1)); }  /* the sidebar's Size */
/* The zone's labels' sizes, each its own times the Display page's Label Size and the zoom (0.35× to 1.6×), the user's. */
.bz-stage {
  --label-zone: calc(var(--label) * var(--bz-label-scale, 1) * var(--bz-zoom-scale, 1));
  --label-zone-small: calc(var(--label-measure) * var(--bz-label-scale, 1) * var(--bz-zoom-scale, 1));
}
.bz-label {  /* beside its point, as far out as the point's size */
  --grown: calc(4px * (var(--bz-point-scale, 1) - 1));
  position: absolute; font-size: var(--label-zone); line-height: 1; white-space: nowrap; color: var(--ink); text-shadow: var(--halo); transform: translate(calc(4px + var(--grown)), calc(-100% - 3px - var(--grown)));
}
.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); }
/* 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.open:is(.star2, .star3, .star4, .star5)::after { content: ''; position: absolute; inset: 1.5px; background: var(--paper); clip-path: inherit; }
.bz-point.open.star3::after { inset: 2.1px; }
.bz-point.open.star4::after { inset: 3.1px 2.55px 1.5px; }
.bz-point.open.star5::after { inset: 1.5px 2.55px 3.1px; }
/* 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 lines' names. */
.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); }
.bz-measure { position: absolute; font-size: var(--label-zone-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(--label-zone); line-height: 1; font-style: italic; color: var(--ink); text-shadow: var(--halo); transform: translate(-50%, -50%); }
.bz-axis.miller { font-style: normal; }
.bz-line-name { position: absolute; font-size: var(--label-zone-small); line-height: 1; color: var(--ink); white-space: nowrap; text-shadow: var(--halo); }
.bz-stage[data-line-colour="gray"] .bz-line-name { color: var(--mid); }  /* (a line's name its line's colour: the user's) */
.bz-stage[data-line-colour="red"] .bz-line-name { color: var(--red); }
/* The hover's card (a .viewer-tip): what is at the point, named as its labels; Q in red. */
.bz-tip-name { font-weight: bold; }  /* a point's or line's name, as an atom's in its card (its numbers and coordinates not) */
.bz-tip-name :is(.muted, .katex) { font-weight: normal; }
.bz-tip-name .q { font-weight: bold; font-style: italic; color: var(--red); }
.bz-tip-name sub.q { font-weight: normal; font-style: normal; }
.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 */
.side-kv.bz-split tr:first-child > * { border-top: 1px solid var(--hairline); padding-top: 3px; }
.bz-arms { margin: 2px 0; line-height: 1.7; }  /* (fractions, as a Stevens form's) */
/* The Stars page: a card for each star, its arms in rows (grey where open), each choosing its point. */
.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); }
/* The key below the drawing: the outline and each star of Q, each turning off and on as the viewer's legend does. */
.bz-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bz-entry { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: var(--ink); text-align: left; background: none; border: 0; border-radius: var(--radius); padding: 1px 4px; cursor: pointer; }
.bz-entry:hover { background: var(--hover-panel); }
.bz-entry[data-bz-toggle^="q:"]:not(.off) { color: var(--red); }
.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); }
.bz-swatch { display: inline-block; width: 18px; border-top: 2px solid var(--ink); vertical-align: middle; }  /* (as wide as the outline it keys) */
.bz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.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%); }
.bz-side .side-row.side-right > .side-label { flex: 1 1 auto; }

/* The Multipoles section (src/ui/multipoles.js): each irrep of a decomposition a part with a card of its functions. */
.multipole-table td:nth-child(2) { white-space: nowrap; }
.multipoles .part { border-radius: var(--radius); padding: 1px 2px; margin: -1px -2px; cursor: pointer; }  /* (a click copies its card) */
.multipoles .part:hover { background: var(--hover); }
/* A site's own representations (N25): its multipoles' and levels' rows, each part's functions on hover, the totally
   symmetric part of the even ranks in bold; the integer j after a gap below the orbitals. */
.site-rows .part { border-radius: var(--radius); padding: 1px 2px; margin: -1px -2px; cursor: pointer; }
.site-rows .part:hover { background: var(--hover); }
.harmonics-tick { display: none; margin-left: 4px; }
.harmonics-tick .icon { width: 12px; height: 12px; vertical-align: -1px; stroke: var(--ink); }
.harmonics-tip.copied .harmonics-tick { display: inline; }  /* a moment once the card is copied */
.viewer-tip.harmonics-tip { position: absolute; z-index: 60; box-sizing: border-box; max-width: min(22em, calc(100vw - 8px)); white-space: normal; font-size: var(--text-small); line-height: 1.5; }
/* (as wide as its widest piece that cannot break, a rank-6 function's bracket, where that is wider: the user's, its
   lines past its edge; past the screen's width, it scrolls) */
.viewer-tip.harmonics-tip { min-width: min-content; overflow-x: auto; }
.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 { white-space: normal; }  /* (a long one, the mixed polynomials', broken between its terms) */
.harmonics-copy + .harmonics-copy { margin-top: 6px; }

/* Character tables (src/ui/charactertables.js): a column per class, its size muted before its first operation; the
   irreps' labels pinned at the left where the table scrolls across; the double-valued rows after a rule; a label
   chosen as a part of an orbit's is. */
.ct-table :is(th, td) { white-space: nowrap; }
.ct-table thead th.c { text-align: center; color: var(--ink); font-size: var(--text); }  /* (the classes as large as the characters) */
.ct-table :is(tbody th, thead th:first-child) { border-right: 1px solid var(--rule); }  /* (a rule after the irreps' labels) */
.side-table.ct-table :is(th, td):not(:last-child) { padding-right: 4px; }  /* (the sidebar's: close set, to fit where it can) */
.ct-table :is(tbody th, thead th:first-child) { position: sticky; left: 0; z-index: 1; background: var(--paper); }
/* (the pinned labels white, and over the cells scrolled under them, whose KaTeX is positioned: the user's, a table's
   cells showing through its labels) */
.side-card .ct-table :is(tbody th, thead th:first-child) { background: var(--card); }
.ct-table tr.ct-double > * { border-top: 1px solid var(--hairline); }
.ct-irrep { font: inherit; color: var(--ink); background: none; border: 0; border-radius: var(--radius); padding: 0 3px; margin: 0 -3px; cursor: pointer; }
.ct-irrep:hover { background: var(--hover); }
.ct-irrep.active, .ct-irrep.active:hover { background: var(--chosen); }
.ct-note { font-size: var(--text-small); margin-top: 2px; }
/* The product table and the compatibility table (src/ui/charactertables.js), as Katzer's pages set a product table
   out: one line a cell, columns as wide as their cells, the labels pinned; with the pointer on a cell, its row and its
   column lit, the cell ringed. The correlation table: Γ → its parts, the single-valued and the double-valued side by
   side. */
.pt-table { flex: none; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 12px; }
.pt-table :is(th, td) { white-space: nowrap; padding: 2px 8px; font-weight: normal; }
.pt-table td { text-align: center; border: 1px solid var(--hairline); }
.pt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); border-bottom: 1px solid var(--rule); }
.pt-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--paper); text-align: left; border-right: 1px solid var(--rule); }
.pt-table thead th:first-child { left: 0; z-index: 2; color: var(--muted); }
.pt-table thead th:first-child { border-right: 1px solid var(--rule); }  /* (the labels' rule up to the top) */
.pt-table { outline: 1px solid var(--rule); }  /* (each table outlined: the face shows several at once) */
.pt-table .pt-lit { background: var(--hover); }
.tv-caption { font-weight: bold; margin: 8px 0 4px; }  /* (a table's heading, outside its outline) */
.tv-caption + .pt-table { margin-top: 0; }
.pt-table.ct-table td { padding: 2px 10px; }
.pt-table.ct-table thead th.c { font-size: var(--text); }
.pt-table td.pt-here { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--dark); }  /* (the cell under the pointer, ringed, white amid its grey row and column: the user's) */
/* The group tables' pinned labels and heads (the user's: "disembodied", some edges drawn twice, the heads' row with
   none under it): each pinned at the stage's own edge (its padding's width out: nothing seen scrolling past beyond
   it), and edged by one line that travels with it, a shadow (a collapsed table's borders stay behind as it scrolls,
   in Firefox), the borders it stands for left out so that no edge is drawn twice. */
.tv-body .pt-table:not(.tv-multipoles) tbody th { left: -12px; border-right: 0; box-shadow: var(--shadow-label); }
.tv-body .pt-table:not(.tv-multipoles) :is(tbody th, thead tr:first-child > th:first-child) + * { border-left: 0; }
.tv-body .pt-table thead th { top: -8px; border-bottom: 0; box-shadow: var(--shadow-head); }
.tv-body .pt-table:not(.tv-multipoles) thead tr:first-child > th:first-child { left: -12px; border-right: 0; box-shadow: var(--shadow-corner); }
/* (the compatibility table's two rows of heads, pinned as one at the top edge: its kinds' boxes and the rules between
   the kinds, lines that travel with them too) */
.tv-body .tv-compat thead { top: -8px; }
.tv-body .tv-compat thead th.tv-kind { border-bottom: 0; }
.tv-body .tv-compat thead th.tv-split { border-right: 0; box-shadow: var(--shadow-corner); }
.tv-body .pt-table tbody tr:first-child > * { border-top: 0; }
/* The group tables' face (src/ui/tablesview.js): its table at the panel's full width, scrolled where it is wider; a
   product table's blocks side by side where they fit; its groups in the sidebar, the one shown marked. */
.tv-stage { overflow: auto; padding: 8px 12px 12px; touch-action: pan-x pan-y; }  /* (two fingers: the tables' own pinch, src/ui/tablesview.js) */
.tv-title { font-weight: bold; min-height: 1.4em; }
.tv-title .sym-whose { margin-left: 0; }
.tv-body .pt-blocks { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 28px; }
.tv-body > .ct { margin-top: 8px; }
.tv-body > .ct .side-table { width: auto; }
.tv-body .ct-correlation { margin-top: 8px; gap: 0 28px; }
.tv-body .ct-correlation > .side-table { flex: none; }
.tv-body :is(.ct-arrows td, .pt-table th) { white-space: nowrap; }
.tv-body .ct-irrep.active { background: var(--chosen); }
.tv-compat thead th > .muted { font-size: var(--text-small); }
.tv-compat thead { position: sticky; top: 0; z-index: 2; }  /* (two rows of heads, held together) */
.tv-compat thead th { position: static; text-align: center; }
.tv-compat thead tr:first-child th:first-child { position: sticky; left: -12px; z-index: 1; background: var(--paper); }  /* (its corner, over the pinned labels, pinned with them) */
.tv-compat th.tv-kind { font-weight: bold; border-bottom: 1px solid var(--rule); }  /* (each kind's name in a box of its own: the user's) */
.tv-compat .tv-split { border-right: 1px solid var(--rule); }  /* (a rule between the Wyckoff sites, the points and the lines, top to bottom) */
.tv-compat thead tr + tr th:first-child { border-right: 0; color: var(--ink); }  /* (the second row's first head a column's, not the corner) */
.tv-compat thead tr + tr th.tv-split:first-child { border-right: 1px solid var(--rule); }
.tv-pair { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 28px; }
.tv-multipoles td { text-align: left; }
.tv-multipoles tbody th { position: static; }
.tv-multipoles thead th:first-child { left: auto; }  /* (k, its head, not pinned at the left either: the user's, k alone travelling) */
.tv-multipoles tbody th:nth-child(2) { text-align: left; color: var(--muted); }
.tv-multipoles .part { border-radius: var(--radius); padding: 1px 2px; margin: -1px -2px; cursor: pointer; }
.tv-multipoles .part:hover { background: var(--hover); }
.tv-list tbody tr[data-group] { cursor: pointer; }
.tv-list tbody tr[data-group]:hover { background: var(--hover); }
.tv-list tbody tr.active, .tv-list tbody tr.active:hover { background: var(--chosen); }
/* A table that may be too wide for its place: the table where it fits, else its button (opening it over the view). */
.ct-fit.ct-wide > .ct-fit-body { display: none; }
.ct-fit:not(.ct-wide) .ct-wide-open, .ct-fit:not(.ct-wide) > .ct-wide-actions { display: none; }
.ct-measuring .ct-correlation { overflow: hidden; }
.ct-measuring .ct-correlation > .side-table { flex: none; }
.ct-measuring .ct-arrows td { white-space: nowrap; }
.irrep-card .side-kv th { white-space: nowrap; }
.ct-correlation { display: flex; align-items: flex-start; gap: 0 14px; }
.ct-correlation > .side-table { width: auto; flex: 0 1 auto; min-width: 0; }
.ct-arrows tbody th { color: var(--ink); }
.ct-arrows td.ct-arrow { color: var(--muted); padding-right: 4px; }
.side-card .ct-products > .side-card { border: 0; border-radius: 0; padding: 0; margin: 6px 0 0; background: none; }  /* (a site's: within its table's card) */

/* The Interactions page: the bonds' list (a row chosen, or under the pointer, shaded); the cards' matrices kept within
   the sidebar (scrolled across if they must). */
.inter-list tr[data-orbit] { cursor: pointer; }
.inter-list tr[data-orbit]:hover > td { background: var(--hover); --cell: var(--hover); }
.inter-list tr[data-orbit].active > td { background: var(--chosen); --cell: var(--chosen); }
/* Every column on one line; Allowed, the last, cut short where it is longer than the rest of the row (table.fit). */
.inter-list th, .inter-list td:not(:last-child) { white-space: nowrap; }
/* A table of class fit (src/ui/fit.js, find-gamma's: its MAGNDATA list's way, the user's): its last column the rest of
   the width, a longer cell cut short, its end faded into an ellipsis, and shown whole in a card over the cell while
   hovered or once tapped. */
table.fit td:last-child { max-width: 0; width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
/* (and a table's own cells of class fit-cell: the sites' names, a shared site's its main element then …: the user's) */
table.fits td.fit-cell { white-space: nowrap; }
table.fits td.fit-cell[data-full] { cursor: help; }
:is(table.fit, table.fits) td.clipped::after {
  content: "…"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center;
  padding-left: 0.8em; background: linear-gradient(to right, transparent, var(--cell, var(--paper)) 0.75em);
}
.fit-tip { position: absolute; z-index: 60; 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; }
.side-kv td.inter-wide { text-align: center; padding: 2px 0 4px; max-width: 0; overflow-x: auto; }
.viewer-tip.atom-tip:has(.inter-wide) { max-width: min(600px, 92%); }  /* a bond's card: its matrices whole */
.viewer-tip td.inter-wide { max-width: none; overflow: visible; }
.inter-wide .katex { font-size: 0.92em; }
/* A bond's matrix (the user's): 𝗝 =, its entries in brackets, the columns' operators over them, the rows' at the right. */
.inter-matrix { display: inline-grid; grid-template-columns: auto 6px repeat(3, minmax(min-content, max-content)) 6px auto; column-gap: 4px;
  align-items: center; justify-items: center; max-width: calc(100% - 4px); }  /* (room for KaTeX's slant) */
.inter-matrix .mx-open, .inter-matrix .mx-close { align-self: stretch; width: 5px; border: 1.2px solid var(--ink); margin: 1px 0; }
.inter-matrix .mx-open { border-right: 0; border-radius: 6px 0 0 6px; }
.inter-matrix .mx-close { border-left: 0; border-radius: 0 6px 6px 0; }
.inter-matrix .mx-col, .inter-matrix .mx-row { color: var(--muted); font-size: 0.82em; }
.inter-matrix .mx-row { justify-self: start; }
.inter-matrix .mx-entry { white-space: normal; text-align: center; line-height: 1.35; padding: 1px 0; }  /* (a long one breaks between terms) */
.stevens { cursor: help; }
.stevens:hover .katex { color: var(--ink); text-decoration: underline dotted; text-underline-offset: 3px; }
.inter-term { white-space: nowrap; border-radius: var(--radius); }  /* a term whole: a long sum wraps between terms */
.inter-term.pinned { background: var(--chosen); }  /* its shapes kept at the orbit's atoms (shelved: SHAPES) */
.viewer-tip.stevens-tip { max-width: min(30em, calc(100vw - 8px)); }
.stevens-form { line-height: 1.7; }
.side-stepper { display: inline-flex; align-items: stretch; }
.side-step { font: inherit; line-height: 1; min-width: 1.5em; padding: 0 3px; 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 { border-radius: 0; }
.side-bounds > .side-label { flex: 0 0 auto; margin-right: auto; }
.side-bounds > .side-inputs { flex: 0 0 auto; }
.side-step { min-width: 1.35em; padding: 0 2px; }
.side-stepper .side-bound { width: 2.6em; }  /* −10 to 10, −0.1, or −2/3 */
/* A card's switches (its axes, Global | Local, and Flip; a bond's matrix, Cartesian | Spherical): a row of their own
   under its head, room above and below them and between them. */
.inter-switch { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.inter-switch-row { display: flex; justify-content: flex-end; margin: 4px 0 6px; }  /* (a bond's, or a site's without doublets) */
/* A site's Doublet and its axes' switch, one line: the menu at the left, the switch at the right (the user's). */
.inter-doublet-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.inter-switch:empty { display: none; }
.inter-exchange-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }  /* (Exchange, its form's switch at the right) */
.side-kv th.inter-exchange-th { padding-right: 0; }  /* (the switch to the card's right edge, as the head's aside: the user's) */
.inter-count { margin: 2px 0 6px; }  /* (how many real parameters, under the matrix) */
/* Every bond of a class (the Bonds section's box under the Bond Table): scrolled in its place past about twenty lines. */
.inter-members-scroll { max-height: 28em; overflow-y: auto; }
.inter-member-table td { vertical-align: middle; }
/* Sites' local axes (src/viewer/interactions.js, axesTable): a row of the card's, each site's axes a line, x̂ [uvw] ŷ [uvw]
   ẑ [uvw], an axis and its direction together where the line breaks. */
.axes-table { margin-top: 10px; }  /* (apart from the table or the matrix above it, in every card: the user's) */
.axes-table td { white-space: normal; }
.axes-table th { white-space: nowrap; }
.axes-one { white-space: nowrap; margin-right: 0.45em; }
/* A bond's two ends: a grid (the user's), the names a column and each axis a column, aligned whatever the names'
   lengths (each line's cells the grid's own, display: contents). */
.axes-grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 0.45em; }
.axes-grid .axes-line { display: contents; }
.axes-grid .axes-one { margin-right: 0; }
/* Tables whose columns are a vector's components (τˣ, τʸ, τᶻ): each centred in its column (the user's). */
.parts-table :is(thead th:not(:first-child), td) { text-align: center; }
/* A card's rows of one kind (a doublet's parts, the crystal field's ranks): each column as narrow as it can be, the last the
   rest of the card. */
.rows-table td:not(:last-child) { width: 1%; white-space: nowrap; }
.rows-table th:not(:last-child) { white-space: nowrap; }  /* (a heading as its cells: Shared Polyhedra's Cr–I–Cr, the user's) */
.swatch-arrow { width: 16px; height: 11px; flex: none; stroke: var(--ink); stroke-width: 1.6; fill: var(--ink); }
.legend-moments.ghost .swatch-arrow { opacity: 0.35; }
.legend-moments.off .swatch-arrow { opacity: 0.2; fill: none; }
.axes-key { display: flex; gap: 10px; align-items: center; }
.axes-pair { display: inline-flex; align-items: center; gap: 3px; position: relative; }
.axes-pair svg { width: 13px; height: 13px; border-radius: var(--radius-mark); }  /* (its signs drawn in it) */
.bond-class:not(:empty) { margin-right: 2px; }
.file-row { font-size: var(--text-small); color: var(--muted); word-break: break-all; }
.side-group-plain { margin: 4px 0 8px; }
/* The save card under the head's save button (U3), and Reset All at the sidebar's foot (U4). */
.save-card { position: absolute; z-index: 70; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-box); padding: 5px 8px 6px;
  box-shadow: var(--shadow); font-size: var(--text); line-height: 1.35; min-width: 15em; }
.save-card .side-label { flex: 0 0 auto; margin-right: auto; }
.side-foot { border-top: 1px solid var(--hairline); margin-top: 10px; padding: 10px 0 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.side-section + .side-foot { border-top: 0; margin-top: 0; }  /* (the section's own line above it: one line, not two) */
/* The notation's switch in the top bar (U5): two of its buttons joined, the chosen one filled. */
.top-switch { display: inline-flex; }
.top-switch[hidden] { display: none; }  /* (the group's, Crystal | Magnetic: a magnetic structure's alone) */
.top-switch .top-button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.top-switch .top-button:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }
.top-switch .top-button.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 640px) { .top-switch .top-button { padding-inline: 7px; font-size: var(--text-small); } }
/* The bar's short forms (src/ui/bar.js: one line always, the user's), each step taken only where the one before is not
   enough: the groups' words gone, the notation by a rotation in each (4₀₀₁ | C₄z, Find Γ's), the groups by Find Γ's
   magnet and the magnet struck through, the logo without its name, Open as a folder. A narrow phone's set closer. */
.nt-short, .rg-icon, .open-icon { display: none; }
.rg-icon .icon { width: 15px; height: 15px; stroke-width: 1.5; vertical-align: -2px; }
.open-icon .icon { width: 16px; height: 16px; vertical-align: -3px; }
.topbar.short-words .top-switch .label-long { display: none; }
.topbar.short-notation .nt-long, .topbar.short-regime .rg-symbol, .topbar.short-brand .brand-name { display: none; }
.topbar.short-notation .nt-short, .topbar.short-regime .rg-icon { display: inline; }
.topbar.short-open :is(#open, #examples-button) > :not(.open-icon) { display: none; }
.topbar.short-open .open-icon { display: inline; }
@media (max-width: 400px) {
  .topbar { padding-inline: 8px; }
  .topbar-tools { gap: 4px; }
  .top-switch .top-button, .topbar-tools > .top-button { padding-inline: 5px; }
}
/* Phones (U13): short labels where the long ones would not fit on one row; Open and Examples one menu; the sidebar a
   sheet at the foot of the screen (src/ui/sheet.js), its tabs showing, pulled up by a drag or a tap. */
.label-short, .top-menu .menu-file, .sheet-grip, .side-tabs.sheet-only { display: none; }
@media screen and (max-width: 760px) {
  .label-long { display: none; }
  .label-short { display: inline; }
  #open { display: none; }
  .top-menu .menu-file { display: block; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
  .topbar { align-items: center; gap: 0.6em; }
  .brand, .topbar .file-name { font-size: var(--text-heading); }  /* (the compound's name as large as the brand: the user's) */
  .topbar .file-name { flex: 1 1 auto; }
  .topbar-tools { gap: 6px; }
  .top-button { padding-inline: 7px; font-size: var(--text-small); }
  .viewer-head { flex-wrap: nowrap; gap: 6px; }
  .viewer-head .viewer-tools button { padding-inline: 4px; }
  .viewer.app { padding-bottom: calc(var(--sheet-room, 44px) + 6px); transition: padding-bottom 0.25s ease; }
  .viewer.sheet-dragging { transition: none; }
  .viewer.app > .viewer-stage { flex: 1 1 auto; min-height: 120px; }
  .viewer.app > .viewer-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 .side-tabs { touch-action: none; padding-top: 6px; border-radius: 12px 12px 0 0; }
  .side-tabs.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 sidebar's panes and width (src/ui/panes.js, the user's), 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; the page's other sections in a pane under it; each scrolling on its own (into the sidebar's padding, 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) {
  .viewer.app > .viewer-side:has(> .side-page.split:not([hidden])) {
    display: flex; flex-direction: column; overflow: hidden; scrollbar-gutter: auto; padding-bottom: 0;
  }
  .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; }
  /* (its title from the pane's very top, so that it never moves, and across the pane's whole width, white, so that
     nothing shows past it: the user's) */
  .side-pane-top > .side-section { padding-top: 0; }
  .side-pane-top > .side-section > summary {
    position: sticky; top: 0; z-index: 2; background: var(--paper);
    margin: 0 -12px; padding: 9px 12px 3px; list-style-position: inside;
  }
  .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(--mid); }
  .viewer.app > .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(--mid); }
  :is(.side-split, .side-width):focus-visible { outline: none; }
}
/* An area that scrolls, while there is more of it below (src/ui/panes.js, the user's): 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));
}
/* A line chart (src/ui/plot.js: the zone's form factors): hairline grid, the axis a step darker, its ticks muted; the
   axes' names under it, the key under them; the pointer's line and card. */
.line-chart { position: relative; margin: 4px 0 6px; }
.side-table + .line-chart { margin-top: 16px; }  /* (apart from a table above it: the user's) */
.line-chart-plot { display: block; width: 100%; height: auto; }
.chart-frame { fill: none; stroke: var(--ink); stroke-width: 1; }
.chart-grid { stroke: var(--chosen); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tick-mark { stroke: var(--ink); stroke-width: 1; }
.chart-cross { stroke: var(--muted); stroke-width: 1; }
.chart-tick { fill: var(--muted); font-size: var(--text-tiny); }
.line-chart-axes { display: flex; justify-content: space-between; font-size: var(--text-small); color: var(--muted); }
.line-chart-key { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: var(--text-small); color: var(--ink); }
.line-chart-key svg { width: 16px; height: 4px; margin-right: 5px; vertical-align: middle; }
.line-chart-tip { position: absolute; top: 0; z-index: 5; pointer-events: none; }
.line-chart-tip[hidden] { display: none; }
/* The neighbours' table (A12): a row of drawn atoms chooses the pair. */
.neighbour-table tr.pickable { cursor: pointer; }
.neighbour-table tr.pickable:hover td { background: var(--hover); }
/* A species' own colour and size (A3), its chip's card. */
/* vista's own colour picker (src/ui/colour.js): a swatch, and its card: the automatic choices, the palette (a square of
   saturation and value over a strip of hue), and HTML and RGB fields, each one text field. */
.colour-swatch { flex: none; width: 44px; height: var(--switch); padding: 3px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); cursor: pointer; }
.bond-pair .colour-swatch { width: 28px; }
.colour-swatch-fill { display: block; width: 100%; height: 100%; border-radius: var(--radius-mark); }
.colour-picker { position: fixed; z-index: 70; margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.colour-autos { align-self: flex-start; }
.colour-field { display: block; width: 200px; height: 120px; cursor: crosshair; border-radius: var(--radius); touch-action: none; }
.colour-hue { display: block; width: 200px; height: 12px; cursor: ew-resize; border-radius: var(--radius); touch-action: none; }
.colour-picker .side-row { margin: 0; }
.colour-text { width: 128px; font: inherit; padding: 2px 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
/* The zone's tables of points, lines and reflections: a row clicked picks out its orbit or its peaks (the user's). */
:is(.bz-points, .bz-lines, .bz-reflections) tbody tr { cursor: pointer; }
:is(.bz-points, .bz-lines, .bz-reflections) tbody tr:hover { background: var(--hover); }
:is(.bz-points, .bz-lines, .bz-reflections) tbody tr.active { background: var(--chosen); }
:is(.bz-reflections, .bz-factors) th { white-space: nowrap; }  /* (each heading and its unit on one line) */