/* Mol3D: the page's look. ONE place sets every colour: the tokens just below, and nothing else in the project holds a colour of its own: the tab icon
   (web/favicon.svg) and the share image (web/share.png) are made from these tokens by scripts/make_brand.py, and tests/test_look.py fails if they drift.
   THE ACCENT IS THE FAMILY PANEL'S SLOT "blue-bright" (the site owner's choice, 2026-10-10: "Mol3D would be blue"; site-kit/palette/palette.json, `sites.mol3d`): light #1F5FC9 with #FFFFFF on it,
   dark #6BA6FF with #0B1220 on it. tests/test_look.py holds the four --accent / --on-accent values equal to that slot, so the panel is the only source: to change the accent, change
   the panel, re-sync the kit, then change the lines here and run scripts/make_brand.py --force. 3Dmol's atom colours are NOT the accent: they stay the standard
   element colours. The --atom-* tokens colour the 2D drawing (c carbon, n, o, f, cl, s, br, i, p; x any other element) in both themes, 3:1 or better against the view.
   The accent is for what can be pressed and the "3D" of the name. In the dark theme the main text is one light grey, #D4D8D5 (the family's rule: not white, not dark).
   tests/test_look.py also holds every pair at 4.5:1 or better (text 7:1 on the dark page), and that no colour literal lives outside this block. The footer (site-footer.css, the
   kit's) borrows --ink, --body, --ink2, --rule. */
:root {
  color-scheme: light;
  --paper: #F5F5F5; --panel: #FFFFFF; --field: #FFFFFF; --chip: #E6E6E6;
  --ink: #262626; --body: #333333; --ink2: #595959; --rule: #CFCFCF;
  --accent: #1F5FC9; --on-accent: #FFFFFF; --accent-hover: #174FA8;
  --view: #FFFFFF; --shadow: rgba(0, 0, 0, .25);
  --atom-c: #262626; --atom-n: #2B4FD8; --atom-o: #D42B2B; --atom-f: #12808A; --atom-cl: #1E8A2E; --atom-s: #8A7A00; --atom-br: #8A4B12; --atom-i: #8A1FC9; --atom-p: #C45A00; --atom-x: #595959;
  --bad: #9B2C3F; --on-bad: #FFFFFF;
  --select: #15803D; --pick: #B36B00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #161616; --panel: #1F1F1F; --field: #1A1A1A; --chip: #2B2B2B;
    --ink: #D4D8D5; --body: #D4D8D5; --ink2: #A3A3A3; --rule: #3A3A3A;
    --accent: #6BA6FF; --on-accent: #0B1220; --accent-hover: #8DBCFF;
    --view: #101010; --shadow: rgba(0, 0, 0, .6);
    --atom-c: #D4D8D5; --atom-n: #7C96FF; --atom-o: #FF6B6B; --atom-f: #52D6D6; --atom-cl: #5CD65C; --atom-s: #E0D04A; --atom-br: #D69455; --atom-i: #D07CFF; --atom-p: #FFA24A; --atom-x: #A3A3A3;
    --bad: #F0A0AF; --on-bad: #2A1015;
    --select: #4ADE80; --pick: #FFC24A;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161616; --panel: #1F1F1F; --field: #1A1A1A; --chip: #2B2B2B;
  --ink: #D4D8D5; --body: #D4D8D5; --ink2: #A3A3A3; --rule: #3A3A3A;
  --accent: #6BA6FF; --on-accent: #0B1220; --accent-hover: #8DBCFF;
  --view: #101010; --shadow: rgba(0, 0, 0, .6);
  --atom-c: #D4D8D5; --atom-n: #7C96FF; --atom-o: #FF6B6B; --atom-f: #52D6D6; --atom-cl: #5CD65C; --atom-s: #E0D04A; --atom-br: #D69455; --atom-i: #D07CFF; --atom-p: #FFA24A; --atom-x: #A3A3A3;
  --bad: #F0A0AF; --on-bad: #2A1015;
  --select: #4ADE80; --pick: #FFC24A;
}

/* ---- everything below uses only the tokens above ---- */
:root { --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --gutter: 16px; --wide: 72rem; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--body); font: 15px/1.55 var(--sans); }
a { color: inherit; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header { max-width: var(--wide); margin: 0 auto; padding: 22px var(--gutter) 6px; }
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mark { margin: 0; font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.mark sup { position: relative; top: -.1em; vertical-align: baseline; margin-left: .06em; font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--accent); }
.brand .site-hub { margin-left: auto; }
/* Light / Dark: two buttons side by side, the one in use filled, as on the sister sites (mono capitals, square corners) */
.theme { display: flex; flex: 0 0 auto; border: 1px solid var(--rule); background: var(--panel); }
.theme button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--ink2); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.theme button:hover:not(:disabled) { background: none; color: var(--ink); }
.theme button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tagline { margin: 4px 0 0; color: var(--ink2); }
.tagline .version { margin-left: .6em; font-family: var(--mono); font-size: .85em; }

.work { max-width: var(--wide); margin: 0 auto; padding: 14px var(--gutter) 8px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.input { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); }
.input label { font-weight: 600; color: var(--ink); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); }
.tabs button { min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--ink2); }
.tabs button[aria-selected="true"] { border-color: var(--rule); background: var(--panel); color: var(--ink); position: relative; top: 1px; }
.tabs button:hover { background: var(--chip); }
[role="tabpanel"] { display: flex; flex-direction: column; gap: 8px; }
textarea { width: 100%; min-height: 7.5rem; resize: vertical; padding: 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--field); color: var(--ink); font: 13px/1.4 var(--mono); }
textarea::placeholder { color: var(--ink2); opacity: 1; }
.filebtn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; }
.filebtn:hover { background: var(--chip); }
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.filebtn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.input.drop { border-color: var(--accent); }
#editor { width: 100%; height: 340px; border: 1px solid var(--rule); border-radius: 8px; background: var(--view); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button { min-height: 38px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); color: var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; }
button:hover { background: var(--chip); }
/* a button that has asked "are you sure": red, with its question as its text (Random; the family's two-step) */
button.sure, button.sure:hover:not(:disabled) { border-color: var(--bad); background: var(--bad); color: var(--on-bad); }
.randomlabel { color: var(--ink2); font-weight: 600; margin-left: 4px; }
#origin { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink2); overflow-wrap: anywhere; }
#origin[hidden] { display: none; }
.linkbtn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--panel); color: var(--ink); font: 600 14px/1 var(--sans); text-decoration: none; }
.linkbtn:hover { background: var(--chip); }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linkbtn[hidden] { display: none; }
button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { opacity: .5; cursor: default; }
select { min-height: 38px; max-width: 100%; padding: 0 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--field); color: var(--ink); font: 14px/1 var(--sans); }
#status { margin: 0; min-height: 1.55em; color: var(--ink2); overflow-wrap: anywhere; }
#status b { color: var(--ink); font-weight: 600; }

.check { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; color: var(--ink); font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.check select { min-height: 32px; font-weight: 400; }
#result { margin: 0; min-height: 1.55em; color: var(--ink2); overflow-wrap: anywhere; }
#result b { color: var(--ink); font-weight: 600; }
#hint { margin: 0; min-height: 1.55em; color: var(--ink2); overflow-wrap: anywhere; }
/* Clear and Align are only there while atoms are selected, but their places are kept: a button that came and went would move the view under a finger between two taps */
#clear-selection[hidden], #align[hidden] { display: inline-flex !important; visibility: hidden; }
.modes button[aria-pressed="true"] { border-color: var(--accent); background: var(--chip); color: var(--ink); }
#result.working, #hint2d.working { color: var(--accent); }
/* the Kept tab: one row for each kept structure, a button that shows it and one that forgets it */
#kept { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 22.5rem; overflow-y: auto; overscroll-behavior: contain; }
.pane.fillpage #kept { max-height: max(22.5rem, calc(100vh - 13rem)); }
#kept[hidden], #kepthint[hidden] { display: none; }
#kept li { display: flex; gap: 6px; align-items: stretch; }
#kept .pick { flex: 1; min-width: 0; min-height: 34px; padding: 4px 10px; text-align: left; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25; }
#kept .pick[aria-current="true"] { border-color: var(--accent); background: var(--chip); font-weight: 700; }
#kept .delta { color: var(--accent); font-weight: 700; }
#kept .drop { min-width: 38px; padding: 0 10px; }
#kepthint { margin: 0; color: var(--ink2); }
.rotrow { display: flex; flex: 1 1 100%; gap: 10px; align-items: center; }
#tools2d .rot { display: inline-flex; gap: 6px; align-items: center; min-height: 38px; color: var(--ink); font-weight: 600; }
#tools2d output { min-width: 3.2ch; color: var(--ink2); font-weight: 400; font-variant-numeric: tabular-nums; }
#rotate { flex: 1 1 6rem; min-width: 5rem; min-height: 38px; margin: 0; accent-color: var(--accent); }
#hint2d { margin: 0; min-height: 1.55em; color: var(--ink2); overflow-wrap: anywhere; }
#move2d[aria-pressed="true"], #rotors2d[aria-pressed="true"] { border-color: var(--accent); background: var(--chip); }
#view2d.hands2d { touch-action: none; cursor: crosshair; }
#view2d.turns2d { cursor: pointer; }
#view.hands { touch-action: none; }
#view.mode-move, #view.mode-twist { cursor: crosshair; }
#view.mode-select { cursor: pointer; }

.views { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* both panes open: the 2D picture one third, the 3D view two thirds; one folded: the other takes the whole row and the folded one stays above or below it as its heading (a folded pane is a heading) */
@media (min-width: 48rem) { .views[data-mode="both"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
/* a pane: its heading is the button that folds it (the chevron is drawn here, in the neutral grey), its body holds what belongs to it. A folded body is hidden, nothing in it is lost. */
.pane { position: relative; margin: 0; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); overflow: hidden; }
.panebar { display: flex; align-items: center; gap: 8px; }
.panehead { flex: 1 1 auto; margin: 0; font-size: 12px; line-height: 1; }
/* a switch, the family's (Pocket2D's): a track with a knob, the state in aria-checked */
button.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 12px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink2); font: 11px var(--mono); letter-spacing: .04em; }
button.switch:hover:not(:disabled) { background: none; color: var(--ink); }
.switch .track { position: relative; flex: 0 0 auto; width: 30px; height: 16px; border: 1px solid var(--rule); border-radius: 999px; background: var(--field); transition: background .15s, border-color .15s; }
.switch .knob { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink2); transition: transform .15s, background .15s; }
.switch[aria-checked="true"] .track { border-color: var(--accent); background: var(--accent); }
.switch[aria-checked="true"] .knob { transform: translateX(14px); background: var(--on-accent); }
.switch:focus-visible .track { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .knob { transition: none; } }
.pane:has(.foldbtn[aria-expanded="false"]) .fillsw { display: none; }
/* a pane that fills the page: fixed over everything, the page under it stays where it was; its tools stay in it, the picture or the view takes the room that is left */
html.filling { overflow: hidden; }
html.filling .pane:not(.fillpage) { visibility: hidden; }
.pane.fillpage { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 0; background: var(--panel); }
.pane.fillpage > .panebody { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pane.fillpage .stage { display: flex; flex: 1 1 auto; min-height: 12rem; }
.pane.fillpage .canvas { flex: 1 1 auto; height: auto; max-height: none; aspect-ratio: auto; }
.foldbtn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: none; color: var(--ink2); font: 600 12px/1 var(--sans); letter-spacing: .06em; text-align: left; }
.foldbtn:hover { background: var(--chip); color: var(--ink); }
.foldbtn:focus-visible { outline-offset: -2px; }
.foldbtn::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: -4px 4px 0 0; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: rotate(45deg); transition: transform .15s; }
.foldbtn[aria-expanded="false"]::after { margin-top: 0; transform: rotate(-45deg); }
.panebody { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
#smiles { margin: 0; min-height: 1.4em; padding: 0 2px; color: var(--ink); font: 13px/1.4 var(--mono); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.stage { position: relative; border: 1px solid var(--rule); border-radius: 8px; background: var(--view); overflow: hidden; }
.canvas { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 34rem; }
.canvas svg { display: block; width: 100%; height: 100%; fill: var(--atom-c); stroke: none; }
.note { position: absolute; inset: 0; z-index: 1; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; color: var(--ink2); pointer-events: none; }
.note:empty { display: none; }
.live { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; margin: 0; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--view); color: var(--ink); font-size: 13px; line-height: 1.4; white-space: pre-line; pointer-events: none; }
.live[hidden] { display: none; }
.measure { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; margin: 0; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--view); color: var(--ink); font-size: 13px; line-height: 1.4; pointer-events: none; overflow-wrap: anywhere; }
.measure[hidden] { display: none; }
.canvas svg .marks2d { pointer-events: none; }
.canvas svg .marks2d circle { stroke-width: 2; }
.canvas svg .mark2d { fill: var(--select); fill-opacity: .3; stroke: var(--select); }
.canvas svg .lit2d { fill: none; stroke: var(--select); stroke-dasharray: 4 3; opacity: .8; }
/* the bonds of Rotors, by shape (colour alone says nothing): a filled disc is a bond the search turns, a hollow ring one it does not, an outer ring one the visitor changed */
.canvas svg .turn2d { fill: var(--accent); stroke: var(--view); }
.canvas svg .hold2d { fill: var(--view); stroke: var(--ink2); }
.canvas svg .changed2d { fill: none; stroke: var(--pick); }

/* the 2D drawing: RDKit's colours come in as classes (web/svg.js), coloured here from the tokens: fk- is a fill, sk- a stroke */
.fk-c { fill: var(--atom-c); } .sk-c { stroke: var(--atom-c); }
.fk-n { fill: var(--atom-n); } .sk-n { stroke: var(--atom-n); }
.fk-o { fill: var(--atom-o); } .sk-o { stroke: var(--atom-o); }
.fk-f { fill: var(--atom-f); } .sk-f { stroke: var(--atom-f); }
.fk-cl { fill: var(--atom-cl); } .sk-cl { stroke: var(--atom-cl); }
.fk-s { fill: var(--atom-s); } .sk-s { stroke: var(--atom-s); }
.fk-br { fill: var(--atom-br); } .sk-br { stroke: var(--atom-br); }
.fk-i { fill: var(--atom-i); } .sk-i { stroke: var(--atom-i); }
.fk-p { fill: var(--atom-p); } .sk-p { stroke: var(--atom-p); }
.fk-x { fill: var(--atom-x); } .sk-x { stroke: var(--atom-x); }

/* below the working part: quiet text, no new colours */
.tail { max-width: var(--wide); margin: 0 auto; padding: 28px var(--gutter) 0; color: var(--ink2); }
.tail h2 { margin: 0 0 8px; font-size: 1rem; color: var(--ink); }
.tail p { margin: 0 0 10px; max-width: 70ch; }
.tail details { max-width: 70ch; border-top: 1px solid var(--rule); padding: 8px 0; }
.tail details:last-of-type { border-bottom: 1px solid var(--rule); }
.tail summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.tail details p { margin: 6px 0 2px; }
.tail code { font: .92em var(--mono); color: var(--ink); }
.tail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; max-width: 70ch; }
.tail dt { color: var(--ink); font-weight: 600; }
.tail dd { margin: 0; overflow-wrap: anywhere; }

/* the torsion card: a full-width card under the two views, its heading the two tabs (Torsion, Conformers) and a chevron that folds it; the profile is an SVG in the page's tokens */
#paneTors { margin-top: 0; }
#torshint, #torsnote, #confhint { margin: 0; min-height: 1.55em; color: var(--ink2); overflow-wrap: anywhere; }
#confcount { margin: 6px 0 4px; color: var(--ink2); font-variant-numeric: tabular-nums; }
/* the View button says in small type under its name that a double-click centres the molecule (a tooltip never shows on a touch screen) */
#mode-view { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 12px; line-height: 1.1; }
#mode-view small { font: 400 10px/1.1 var(--sans); color: var(--ink2); }
#confcount[hidden], .confs[hidden], #foldline[hidden] { display: none; }
#foldline { margin: 8px 0 0; color: var(--ink2); overflow-wrap: anywhere; }
button.linkish { min-height: 0; padding: 0 2px; border: 0; border-radius: 4px; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
button.linkish:hover:not(:disabled) { background: var(--chip); }
.folded { white-space: nowrap; }
/* the conformers of the last search, lowest first: a box of about ten rows that scrolls (the filled page lets it grow); the row shown in the 3D view is in bold */
.confs { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 22.5rem; overflow-y: auto; overscroll-behavior: contain; }
.pane.fillpage .confs { max-height: max(22.5rem, calc(100vh - 13rem)); }
.confs .pick { width: 100%; min-height: 34px; padding: 4px 10px; text-align: left; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.25; }
.confs .pick[aria-current="true"] { border-color: var(--accent); background: var(--chip); font-weight: 700; }
.confs .delta { color: var(--accent); font-weight: 700; }
.confs .share { white-space: nowrap; }
/* under the 3D view: Keep at the left, the two arrows at the right; the faces of the arrows are drawn here, so that no word shows (the name of each is its tooltip and its aria-label) */
#strip { justify-content: space-between; flex-wrap: nowrap; }
.arrows { display: flex; gap: 6px; }
/* Same: six buttons in a row, the one that is the value pressed (the look of the mouse modes); they wrap inside their own row when the screen is narrow, and the page does not widen */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg button { min-width: 44px; min-height: 32px; padding: 0 8px; font-weight: 400; font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] { border-color: var(--accent); background: var(--chip); color: var(--ink); font-weight: 700; }
.arrow { min-width: 38px; padding: 0; font-size: 22px; line-height: 1; }
#step-prev::before { content: "\2039"; }
#step-next::before { content: "\203a"; }
#scanprogress, #searchprogress, #scantime, #searchtime { color: var(--ink2); font-variant-numeric: tabular-nums; }
.panehead .tabs { border-bottom: 0; gap: 2px; }
.panehead .tabs button { min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px 8px 0 0; background: var(--chip); color: var(--ink); font: 600 12px/1 var(--sans); letter-spacing: .06em; }
.panehead .tabs button:hover { background: var(--rule); }
.panehead .tabs button[aria-selected="true"] { top: 0; background: var(--accent); color: var(--on-accent); }
.panehead .tabs button { position: relative; }
.panehead .count { position: absolute; top: 5px; right: 6px; color: var(--ink2); font: 400 10px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.panehead .tabs button[aria-selected="true"] .count { color: var(--on-accent); }
.foldbtn.chevron { flex: 0 0 auto; width: 40px; justify-content: center; padding: 0; }
.foldbtn.chevron::after { margin: -4px 0 0; }
.foldbtn.chevron[aria-expanded="false"]::after { margin-top: 0; }
.plotbox { border: 1px solid var(--rule); border-radius: 8px; background: var(--view); overflow: hidden; }
.plot { touch-action: none; cursor: crosshair; min-height: 2rem; }
.plot svg { display: block; width: 100%; height: auto; }
.plot[hidden] { display: none; }
.plot .axis { stroke: var(--ink2); stroke-width: 1; }
.plot .grid { stroke: var(--rule); stroke-width: 1; }
.plot .tick { fill: var(--ink2); font: 11px var(--sans); }
.plot .curve { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.plot .low { fill: var(--accent); }
.plot .dot { fill: var(--accent); stroke: var(--view); stroke-width: 1; }
.plot .here { stroke: var(--select); stroke-width: 2; stroke-dasharray: 4 3; }
/* a narrow screen (361 px is the one measured): the lower card's heading (three tabs, the chevron, Fill page) and the six buttons of Same each stay on one line: tighter tabs, a smaller chevron, no right margin on the switch; smaller buttons and gaps */
@media (max-width: 26rem) {
  .panehead .tabs button { padding: 0 4px; letter-spacing: .02em; }
  .foldbtn.chevron { width: 32px; }
  button.switch { margin-right: 0; }
  .seg { gap: 3px; }
  .seg button { min-width: 36px; padding: 0 4px; }
  #hands button:not(#mode-view) { padding-left: 10px; padding-right: 10px; }                  /* the mouse row (with Align, even hidden) is two lines at 361 px, not three */
}