/* saturnus web UI. The calculator is the page; the controls sit in a side
   panel (wide screens) or a bar with a drop-down sheet (narrow screens).
   The drawn calculator keeps its own colours in both themes; only the
   chrome around it follows the colour scheme.

   Every colour, size, radius, shadow and duration the page uses is a token
   in shared/tokens.css (iteration 26), loaded before this file with the
   base rules; the rules here only combine tokens. */

/* ------------------------------------------------------------------ page */

/* The calculator view (app.js mountCalculator, iteration 50c): the side
   panel beside the stage, the whole height of the page (shared/tokens.css
   has body). Its root carries the layout's classes; a hidden view is
   hidden, not removed. */
#calculator-view {
  height: 100%;
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  grid-template-rows: 100%;
  overflow: hidden;
}
#calculator-view.panel-hidden { grid-template-columns: 0 1fr; }
#calculator-view[hidden] { display: none; }

/* -------------------------------------------------------------- side panel */

:where(#calculator-view) .panel {
  grid-column: 1;
  background: var(--panel);
  border-right: 1px solid var(--rule);
  padding: var(--s3) var(--gutter) var(--s3) calc(var(--gutter) + var(--safe-l));
  overflow: hidden auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap);
}
#calculator-view.panel-hidden .panel { display: none; }

:where(#calculator-view) .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: inherit;
  text-decoration: none;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
:where(#calculator-view) .brand .logo { display: block; flex: none; }
/* The logo in each model's colours (web/logo.js): the headers' by
   `data-logo` on <html>, the case's by its own. The planet and the ring
   are the model's skin colours (crates/saturnus-host/src/skins), on the
   case as they are. In the headers each colour shows at least 2.4:1
   against the panel (the plain logo's planet on the light panel, the
   least of the logo the owner has seen and kept); one short of it on a
   panel has a tint for that panel only (`-light`, `-dark`): its own hue,
   darker or lighter in steps of 0.5% HSL lightness until it reaches
   2.4:1. No model: logo.svg's colours. */
:root { --logo-planet: #d9874a; --logo-ring: #3f9a8c; }
/* left shift, right shift */
[data-logo="48sx"] { --logo-planet: #e2893c; --logo-ring: #8ebfd2; --logo-planet-light: #e18535; --logo-ring-light: #5fa4bf; }
/* left shift, right shift */
[data-logo="48gx"] { --logo-planet: #8c86cc; --logo-ring: #2ba6a2; }
/* left shift, right shift */
[data-logo="49g"] { --logo-planet: #4d59a3; --logo-ring: #d5493c; --logo-planet-dark: #4f5ba6; }
/* shift, ALPHA ink */
[data-logo="38g"] { --logo-planet: #a8d8ce; --logo-ring: #cf8e78; --logo-planet-light: #4caa97; --logo-ring-light: #ce8b74; }
/* shift, case */
[data-logo="39g"] { --logo-planet: #c64d0a; --logo-ring: #27467f; --logo-ring-dark: #355fac; }
/* the 39G's: the same skin */
[data-logo="40g"] { --logo-planet: #c64d0a; --logo-ring: #27467f; --logo-ring-dark: #355fac; }
/* shift, display plate */
[data-logo="42s"] { --logo-planet: #ef8b1d; --logo-ring: #89807a; --logo-planet-light: #e78110; }
/* shift, LCD frame */
[data-logo="27s"] { --logo-planet: #5e94bc; --logo-ring: #cbc1b0; --logo-ring-light: #aa997e; }
/* shift, LCD frame */
[data-logo="17bii"] { --logo-planet: #dcad56; --logo-ring: #8a7a5c; --logo-planet-light: #ca912a; }
/* shift, LCD frame */
[data-logo="17b"] { --logo-planet: #e0a850; --logo-ring: #735b37; --logo-planet-light: #d18e25; --logo-ring-dark: #755d38; }
/* shift, keyboard plate */
[data-logo="28s"] { --logo-planet: #7e2a35; --logo-ring: #a7a297; --logo-planet-dark: #934c55; --logo-ring-light: #9f9a8f; }
/* shift, function keys */
[data-logo="19bii"] { --logo-planet: #eda646; --logo-ring: #5d5b57; --logo-planet-light: #dd8816; --logo-ring-dark: #63615c; }
/* The headers' colours: the panel's tint where there is one. */
:root { --logo-planet-panel: var(--logo-planet-light, var(--logo-planet)); --logo-ring-panel: var(--logo-ring-light, var(--logo-ring)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --logo-planet-panel: var(--logo-planet-dark, var(--logo-planet)); --logo-ring-panel: var(--logo-ring-dark, var(--logo-ring)); }
}
:root[data-theme="dark"] { --logo-planet-panel: var(--logo-planet-dark, var(--logo-planet)); --logo-ring-panel: var(--logo-ring-dark, var(--logo-ring)); }
.logo .planet { fill: var(--logo-planet); }
.logo .ring { fill: none; stroke: var(--logo-ring); stroke-width: 2.6; stroke-linecap: round; }
:where(#calculator-view) .brand .logo .planet { fill: var(--logo-planet-panel); }
:where(#calculator-view) .brand .logo .ring { stroke: var(--logo-ring-panel); }
:where(#calculator-view) .panel-head { display: flex; align-items: center; justify-content: space-between; margin-right: calc(-1 * var(--s2)); }

/* The panel's type, three sizes under the brand: section titles
   (shared/components.css `.sec-title`, --fs-lg), controls, links and
   body text at the base size, hints and the status line one step down
   (--fs-sm). Its rhythm: sections --sec-gap apart (the panel's gap), a
   title and its card 8 px. The sections are the shared `.sec` and
   `.card` (sat-controls.js); here only what is the panel's own. */
:where(#calculator-view) .tagline { margin: calc(-1 * var(--s3)) 0 0; color: var(--muted); font-size: var(--fs-sm); }
:where(#calculator-view) .hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh); }
/* The panel's buttons: their text's width, a shade smaller than a
   dialog's, in one line; in a `.toolbar.fill` they share the row. */
:where(#calculator-view) .panel .card button:not(.icon, .row-btn, .segmented > *) { padding-inline: 10px; font-size: var(--fs-md); white-space: nowrap; }
:where(#calculator-view) .panel .segmented button { padding: 0 var(--s2); white-space: nowrap; }
:where(#calculator-view) .panel .card-row > button:not(.icon) { flex: none; }
:where(#calculator-view) .panel .card-row .row-sub.wrap { line-height: var(--lh); }
/* The panel's links (Keyboard shortcuts, About): the base size, the
   accent, underlined under the pointer, a target's height. */
:where(#calculator-view) .panel a.link, :where(#calculator-view) .panel button.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  font-size: var(--fs-base);
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
:where(#calculator-view) .panel a.link:hover, :where(#calculator-view) .panel button.link:hover:not(:disabled) { color: var(--ink); text-decoration: underline; }

:where(#calculator-view) .help { font-size: var(--fs-md); color: var(--muted); }
:where(#calculator-view) .help summary { cursor: pointer; color: var(--ink); min-height: var(--tap); display: flex; align-items: center; gap: var(--s1); list-style: none; margin-left: -3px; }
:where(#calculator-view) .help summary::-webkit-details-marker { display: none; }
:where(#calculator-view) .help summary .ic { width: 16px; height: 16px; color: var(--muted); transition: transform var(--t-fast); }
:where(#calculator-view) .help[open] summary .ic { transform: rotate(90deg); }
:where(#calculator-view) .help dl { margin: var(--s2) 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; }
:where(#calculator-view) .help dt { white-space: nowrap; }
:where(#calculator-view) .help dd { margin: 0; }
:where(#calculator-view) .help p { margin: var(--s2) 0 0; }

/* The panel's own pages under the tagline, one per line: Files
   (shared/site-links.js) and Switch calculator (the home page), at the
   headings' size with an icon, underlined under the pointer. */
:where(#calculator-view) .site-links { display: flex; flex-direction: column; margin: calc(-1 * var(--s2)) 0; }
:where(#calculator-view) .site-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
:where(#calculator-view) .site-link .ic { width: 20px; height: 20px; }
:where(#calculator-view) .site-link:hover { color: var(--ink); text-decoration: underline; }
/* "Connect your AI app…" (web/ai-dialog.js) is a button that looks like the links above it. */
:where(#calculator-view) button.site-link { padding: 0; background: none; border: 0; box-shadow: none; font-family: inherit; cursor: pointer; }
:where(#calculator-view) button.site-link:hover:not(:disabled) { background: none; }
/* This tab's calculators are its own (app.js watchUnshared): said for as long as it lasts. */
:where(#calculator-view) .panel-note { margin: 0; padding: var(--s2) var(--s3); font-size: var(--fs-base); color: var(--ink); background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-md); }
/* The shortcuts row's key, at its right. */
:where(#calculator-view) .shortcuts-key { margin-left: auto; color: var(--muted); }

:where(#calculator-view) .status {
  margin: auto 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-soft);
  font: var(--fs-sm)/var(--lh) var(--mono);
  color: var(--muted);
  overflow-wrap: anywhere;
}
:where(#calculator-view) .status.error { color: var(--error); }
/* Files works this calculator (the hub's `peers`): no Disconnect here, tx disconnects in tx. */
:where(#calculator-view) .tx-chip {
  margin: var(--s1) 0 0;
  font: var(--fs-sm)/var(--lh) var(--mono);
  color: var(--muted);
}
:where(#calculator-view) .tx-chip a, :where(#calculator-view) .ai-chip button { color: var(--accent-text); text-underline-offset: 2px; font: inherit; min-height: 0; display: inline; }
/* AI access's entry says its state (app.js watchAi, iteration 56): a dot
   in the accent while an AI app is connected, in the warning colour while
   it reconnects. */
:where(#calculator-view) .ai-dot { flex: none; width: 8px; height: 8px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
:where(#calculator-view) .ai-dot[data-tone="lost"] { background: var(--warn); }
:where(#calculator-view) .ai-dot[hidden] { display: none; }
:where(#calculator-view) .ai-chip { margin-top: calc(-1 * var(--s3)); padding-left: 28px; }

/* "The AI's calls" (web/ai-log.js): a drawer over the stage's lower
   right, a sheet on a phone. The packets' look in Files (tx/style.css
   "the cable"): green monospace on black in both themes. Contrast: the
   green on the black about 14:1, the dim green about 6:1, the amber and
   the red about 7:1. */
:where(#calculator-view) .ai-log {
  --al-bg: #040805;
  --al-ink: #4dff7a;
  --al-dim: #46b062;
  --al-rule: #173322;
  --al-bad: #ff6b6b;
  --al-wait: #ffc85a;
  position: fixed;
  right: calc(var(--s3) + var(--safe-r));
  bottom: calc(var(--s3) + var(--safe-b));
  z-index: 3;
  width: min(720px, calc(100vw - var(--panel-w) - 2 * var(--s3)));
  height: min(46vh, 520px);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  background: var(--al-bg);
  color: var(--al-ink);
  border: 1px solid var(--al-rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  color-scheme: dark;
}
#calculator-view.panel-hidden .ai-log { width: min(720px, calc(100vw - 2 * var(--s3))); }
/* Beside the calculator (ai-log.js `besideBox`, a stage of 820 px or more):
   the drawer takes the stage's right part, placed by the script, and the
   stage keeps it free so the calculator fits in the rest. Fullscreen
   covers both. */
#calculator-view.ai-log-beside .stage:not(.fs) { padding-right: calc(var(--al-w) + var(--safe-r)); }
#calculator-view.ai-log-beside .ai-log { min-height: 0; }
:where(#calculator-view) .ai-log[hidden] { display: none; }
:where(#calculator-view) .al-headbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--al-rule); }
:where(#calculator-view) .al-headbar h2 { margin: 0 auto 0 0; font: 600 var(--fs-md)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 6px rgb(77 255 122 / 0.45); }
:where(#calculator-view) .al-actions { display: flex; flex-wrap: wrap; gap: var(--s1); }
:where(#calculator-view) .al-actions button { background: transparent; color: var(--al-ink); border-color: #2c5c3a; font-family: var(--mono); font-size: var(--fs-sm); }
:where(#calculator-view) .al-actions button:hover:not(:disabled) { background: #0d2414; border-color: #3f8a55; }
:where(#calculator-view) .al-actions button:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 1px; }
:where(#calculator-view) .al-actions .ic { color: var(--al-ink); }
:where(#calculator-view) .al-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
:where(#calculator-view) .al-scroll:focus-visible { outline: 2px solid var(--al-ink); outline-offset: -2px; }
:where(#calculator-view) .al-empty { margin: 0; padding: var(--s3) var(--s4); font: var(--fs-sm)/1.5 var(--mono); color: var(--al-dim); }
:where(#calculator-view) .al-empty[hidden] { display: none; }
:where(#calculator-view) .al-list { list-style: none; margin: 0; padding: var(--s1) 0 var(--s2); font: 12.5px/1.5 var(--mono); }
:where(#calculator-view) .al-entry {
  display: grid;
  grid-template-columns: 8ch auto minmax(0, 1fr) auto;
  grid-template-areas: "t app tool out" ". args args args" ". res res res";
  column-gap: 1.5ch;
  padding: 1px var(--s4);
}
:where(#calculator-view) .al-entry + .al-entry { border-top: 1px solid rgb(23 51 34 / 0.6); }
:where(#calculator-view) .al-t { grid-area: t; color: var(--al-dim); font-variant-numeric: tabular-nums; }
:where(#calculator-view) .al-event .al-text { grid-column: 2 / -1; color: #a6f5bb; font-style: italic; overflow-wrap: anywhere; }
:where(#calculator-view) .al-app { grid-area: app; color: var(--al-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18ch; }
:where(#calculator-view) .al-tool { grid-area: tool; font-weight: 700; overflow-wrap: anywhere; }
:where(#calculator-view) .al-out { grid-area: out; color: var(--al-dim); white-space: nowrap; }
:where(#calculator-view) .al-out.waiting { color: var(--al-wait); }
:where(#calculator-view) .al-args { grid-area: args; display: flex; flex-direction: column; min-width: 0; }
:where(#calculator-view) .al-key { color: var(--al-dim); }
:where(#calculator-view) .al-val, :where(#calculator-view) .al-result { white-space: pre-wrap; overflow-wrap: anywhere; }
:where(#calculator-view) .al-result { grid-area: res; color: #c4ffd3; }
:where(#calculator-view) .al-result::before { content: "→ "; color: var(--al-dim); }
:where(#calculator-view) .al-more { display: inline; min-height: 0; margin-left: 1ch; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; color: var(--al-dim); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
:where(#calculator-view) .al-more:hover:not(:disabled) { background: none; color: var(--al-ink); }
:where(#calculator-view) .al-more:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 1px; }
:where(#calculator-view) .al-entry.bad .al-out, :where(#calculator-view) .al-entry.bad .al-result, :where(#calculator-view) .al-event.bad .al-text { color: var(--al-bad); }

:where(#calculator-view) button.floating {
  position: fixed;
  top: calc(10px + var(--safe-t));
  left: calc(10px + var(--safe-l));
  z-index: 3;
  background: var(--panel);
  border-color: var(--rule);
  box-shadow: var(--shadow-1);
}

/* ----------------------------------------------------------------- top bar */

:where(#calculator-view) .bar {
  display: none;
  grid-column: 1 / -1;
  height: var(--bar-top);
  align-items: center;
  gap: var(--s1);
  padding: var(--safe-t) calc(var(--s1) + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 5;
}
/* The name gives way to the buttons: on a phone too narrow for it beside
   all of them (the Edit button shown), it wraps onto a second line that
   is clipped, and the logo stays. */
:where(#calculator-view) .bar .brand { font-size: 17px; margin-right: auto; min-width: 0; height: 32px; line-height: 32px; flex-wrap: wrap; overflow: hidden; }
:where(#calculator-view) .bar .brand .logo { margin-block: 4px; }
:where(#calculator-view) .bar button.icon[aria-expanded=true], :where(#calculator-view) #bar-palette[aria-expanded=true] { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------------- stage */

:where(#calculator-view) .stage {
  grid-column: 2;
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: var(--s3) calc(var(--gutter) + var(--safe-r)) calc(var(--s3) + var(--safe-b)) var(--gutter);
  display: grid;
  place-items: center;
  overflow: auto;
}
/* Fullscreen (app.js): the browser's, or the stage laid over the page
   where it has none (fs-page). The calculator edge to edge (sat-calculator's
   setEdge) inside the safe areas: whole on the desk with a mouse, cropped
   to its face on the case's colour (--case) on a finger's screen (fs-crop);
   nothing on it scrolls, so a finger's drag is the key's. */
:where(#calculator-view) .stage.fs {
  background: var(--desk);
  padding: calc(var(--s3) + var(--safe-t)) calc(var(--s3) + var(--safe-r)) calc(var(--s3) + var(--safe-b)) calc(var(--s3) + var(--safe-l));
  overflow: hidden;
}
:where(#calculator-view) .stage.fs.fs-crop {
  background: var(--case, #141413);
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
}
:where(#calculator-view) .stage.fs-page { position: fixed; inset: 0; z-index: 6; }
/* No gesture on the stage pans or zooms (web/nozoom.js): a pinch beside
   the keys, on the top band or the margins, would enlarge and crop the
   calculator. Taps still click the close and search buttons. */
:where(#calculator-view) .stage.fs, :where(#calculator-view) .stage.fs .skin { touch-action: none; }
:where(#calculator-view) sat-calculator.crop .skin g.case,
:where(#calculator-view) sat-calculator.crop .skin g.logo.off-face { display: none; }
/* The skin, or the face's part in view (web/edge.js), placed by the
   component's margins; cropped, nothing of it drawn outside. */
:where(#calculator-view) sat-calculator.edge .skin { align-self: start; justify-self: start; }
:where(#calculator-view) sat-calculator.crop .skin svg { overflow: hidden; }
/* The close button and, opposite it, the palette's search icon: small,
   in the corners, readable on any case; the face leaves them a band
   along the top, or room at the sides (web/edge.js). */
:where(#calculator-view) button.icon.fs-tool {
  display: none;
  position: absolute;
  top: calc(4px + var(--safe-t));
  z-index: 2;
  border-radius: 50%;
  background: rgba(20, 20, 19, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 4px rgba(0, 0, 0, 0.5);
  color: #fff;
}
:where(#calculator-view) .stage.fs button.icon.fs-tool { display: inline-flex; }
:where(#calculator-view) button.icon.fs-tool:hover:not(:disabled, [aria-disabled="true"]) { background: rgba(20, 20, 19, 0.88); }
:where(#calculator-view) #leave-fullscreen { right: calc(4px + var(--safe-r)); }
:where(#calculator-view) #fs-palette { left: calc(4px + var(--safe-l)); }

/* The tools over the calculator (wide screens; the bar has them below 760 px). */
/* One small toolbar: Edit, Search and the Memory view's toggle, icon
   buttons of one size on one panel; Search's key shows beside it on
   hover and keyboard focus only. */
:where(#calculator-view) .stage-tools {
  position: absolute;
  top: 10px;
  right: calc(10px + var(--safe-r));
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
:where(#calculator-view) .stage.fs .stage-tools { display: none; }
:where(#calculator-view) .stage-tools button.tool { position: relative; width: max(36px, var(--tap)); height: max(36px, var(--tap)); border: 0; background: none; }
:where(#calculator-view) .stage-tools button.tool:hover:not([aria-disabled=true]) { background: var(--hover); }
:where(#calculator-view) .stage-tools .tool-key {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  padding: 1px 5px;
  background: var(--panel);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
:where(#calculator-view) #palette-show:hover .tool-key, :where(#calculator-view) #palette-show:focus-visible .tool-key { opacity: 1; }
:where(#calculator-view) #layer-show[aria-expanded=true] { display: none; }
/* A model without a memory view: no button for it (app.js). */
#calculator-view.no-memory-view :is(#layer-show, #bar-memory) { display: none; }
#calculator-view.file-drop .stage { outline: 3px dashed var(--accent); outline-offset: -8px; }

/* The drawn calculator. */
:where(#calculator-view) .skin {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
:where(#calculator-view) .skin svg { display: block; width: 100%; height: auto; overflow: visible; }
/* A clamshell (the 28S, 19BII, web/fold.js): side by side, or stacked on a tall
   stage with the letter half's reference card left off; stacked, the
   stage scrolls down to the letter half. */
:where(#calculator-view) .skin svg.stacked :is(.card, .side-only),
:where(#calculator-view) .skin svg:not(.stacked) .stacked-only { display: none; }
:where(#calculator-view) sat-calculator.stacked .skin { align-self: start; }
:where(#calculator-view) .skin canvas {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* The glass over the LCD, sunk into its bezel: the lip's shadow falls in
   from the top left, a faint light catches the lower right edge, and a
   little of the room reflects at the top. Sizes in skin units (--u, set
   by the component). */
:where(#calculator-view) .skin .glass {
  position: absolute;
  pointer-events: none;
  border-radius: calc(var(--u, 1px) * 5);
  box-shadow:
    inset calc(var(--u, 1px) * 1.5) calc(var(--u, 1px) * 2.5) calc(var(--u, 1px) * 7) rgba(0, 0, 0, 0.36),
    inset calc(var(--u, 1px) * -1) calc(var(--u, 1px) * -1) calc(var(--u, 1px) * 2) rgba(255, 255, 255, 0.16);
  background: linear-gradient(172deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 38%);
}
/* No ROM for the model shown: over the LCD, in the page's style. */
:where(#calculator-view) .skin .no-rom {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  text-align: center;
  font: var(--fs-md)/var(--lh-tight) var(--font);
  color: var(--ink);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border-radius: var(--r-sm);
  overflow: hidden;
}
:where(#calculator-view) .skin .no-rom p { margin: 0; }
:where(#calculator-view) .skin .no-rom-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s1) var(--s2); }
:where(#calculator-view) .skin .no-rom a.button { min-height: 0; padding: 5px 12px; font-size: var(--fs-md); }
/* Smaller displays (sat-calculator.js `fitNoRom`): smaller print, then the
   first sentence alone, then "No ROM" beside the link. */
:where(#calculator-view) .skin .no-rom.compact { gap: var(--s1); padding: var(--s1) var(--s2); font-size: var(--fs-sm); }
:where(#calculator-view) .skin .no-rom.compact a.button { padding: 2px 10px; font-size: var(--fs-sm); }
:where(#calculator-view) .skin .no-rom.short .no-rom-text { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
:where(#calculator-view) .skin .no-rom.row { flex-direction: row; padding: 2px var(--s2); white-space: nowrap; }
:where(#calculator-view) .skin .no-rom.row .no-rom-actions { flex-wrap: nowrap; gap: var(--s1); }
:where(#calculator-view) .skin .no-rom.row a.button { padding: 1px 8px; font-size: var(--fs-xs); }
:where(#calculator-view) .skin .no-rom.pulse { animation: no-rom-pulse calc(var(--t) * 4) ease-out; }
@keyframes no-rom-pulse {
  0% { box-shadow: inset 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 30%, var(--panel)); }
  100% { box-shadow: inset 0 0 0 0 var(--accent); }
}
:where(#calculator-view) .skin .skey { cursor: pointer; }
:where(#calculator-view) .skin .skey:focus { outline: none; }
:where(#calculator-view) .skin .print { pointer-events: none; }
:where(#calculator-view) .skin text {
  font-family: var(--font);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  :where(#calculator-view) .skin .cap { transition: transform 40ms linear; }
}
/* Ctrl or Option/Alt held (sat-calculator.js `showGlow`): the shift
   labels a click with it reaches light up, every other label fades. */
:where(#calculator-view) .skin svg.glow-left .shift-left { filter: url(#glow-left); }
:where(#calculator-view) .skin svg.glow-right .shift-right { filter: url(#glow-right); }
:where(#calculator-view) .skin svg.glow-left :is(.keys, .print) text:not(.shift-left),
:where(#calculator-view) .skin svg.glow-right :is(.keys, .print) text:not(.shift-right) { opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  :where(#calculator-view) .skin :is(.keys, .print) text { transition: opacity var(--t) var(--ease); }
}
/* A long send is typing: the last frame stays, dimmed, until it is done. */
:where(#calculator-view) sat-calculator.typing #lcd {
  opacity: 0.55;
  cursor: progress;
  transition: opacity var(--t);
}

/* -------------------------------------------------------------- components */

/* The components keep the page's layout: their children are laid out as
   if the elements were not there. */
:where(#calculator-view) sat-calculator, :where(#calculator-view) sat-controls, :where(#calculator-view) sat-tour { display: contents; }

/* -------------------------------------------------------------- dialogs */

/* One look for the About panel and the keyboard shortcuts: a floating
   card with a sticky head; on a phone a full sheet. */
:where(#calculator-view) dialog.about, :where(#calculator-view) dialog.shortcuts {
  width: min(760px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
:where(#calculator-view) dialog.shortcuts { width: min(720px, calc(100vw - 2 * var(--gutter))); }
:where(#calculator-view) .dialog-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
:where(#calculator-view) .dialog-head h2 { margin: 0 auto 0 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: var(--lh-tight); }
:where(#calculator-view) .dialog-foot { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--gutter); border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- about */

:where(#calculator-view) .about-box { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
:where(#calculator-view) .about-head .logo { display: block; }
:where(#calculator-view) .about-title { display: flex; flex-direction: column; margin-right: auto; }
:where(#calculator-view) .about-title h2 { margin: 0; }
:where(#calculator-view) .about-sub { font-size: var(--fs-sm); color: var(--muted); }
:where(#calculator-view) .about-body { overflow: auto; padding: var(--s2) var(--gutter) var(--s5); font-size: var(--fs-md); overflow-wrap: anywhere; }
:where(#calculator-view) .about-body h3 { margin: var(--s5) 0 var(--s2); padding-bottom: var(--s1); border-bottom: 1px solid var(--rule-soft); }
:where(#calculator-view) .about-body h3 .muted { font-weight: 400; letter-spacing: 0; text-transform: none; }
/* The literature list, folded: most of the dialog's length. */
:where(#calculator-view) .about-literature > summary { list-style: none; cursor: pointer; }
:where(#calculator-view) .about-literature > summary::-webkit-details-marker { display: none; }
:where(#calculator-view) .about-literature > summary h3 { display: flex; align-items: center; gap: var(--s1); }
:where(#calculator-view) .about-literature > summary .ic { width: 16px; height: 16px; color: var(--muted); transition: transform var(--t-fast); }
:where(#calculator-view) .about-literature[open] > summary .ic { transform: rotate(90deg); }
:where(#calculator-view) .about-body ul, :where(#calculator-view) .about-body ol { margin: 0; padding-left: 22px; }
:where(#calculator-view) .about-body li { margin: 0 0 var(--s2); line-height: var(--lh); }
:where(#calculator-view) .about-body li::marker { color: var(--muted); font-size: var(--fs-sm); }
:where(#calculator-view) .about-body a { color: var(--accent-text); text-underline-offset: 2px; }
:where(#calculator-view) .about-body .hint { margin: 0 0 var(--s2); max-width: 64ch; }
:where(#calculator-view) .about-version { margin: 0 0 var(--s2); font: var(--fs-sm)/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
:where(#calculator-view) .about-statement { max-width: 64ch; font-size: var(--fs-base); }
:where(#calculator-view) .about-statement p { margin: var(--s2) 0; line-height: 1.5; }
:where(#calculator-view) .about-statement p:first-child { margin-top: var(--s3); }
:where(#calculator-view) .about-where, :where(#calculator-view) .about-used { color: var(--muted); font-size: var(--fs-sm); }
:where(#calculator-view) .about-where code { font-family: var(--mono); font-size: var(--fs-xs); }
:where(#calculator-view) .about-sources li { padding-left: 2px; }

/* ----------------------------------------------------------- memory view */

/* A tool panel beside the calculator: the page's own chrome, calm, with
   the monospace face only where a calculator object is shown. Wide
   windows: a third column. Below 1000px: over the calculator, with a way
   back. */

#calculator-view.layer-open { grid-template-columns: var(--panel-w) minmax(300px, 1fr) var(--layer-w); }
#calculator-view.layer-open.panel-hidden { grid-template-columns: 0 minmax(300px, 1fr) var(--layer-w); }

/* The handles on the inner edges of the side panel and of the memory
   view: drag (or arrow keys) to resize, double-click for the default. */
:where(#calculator-view) .resize, :where(#calculator-view) .resize-tree {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
}
:where(#calculator-view) .resize::after, :where(#calculator-view) .resize-tree::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: transparent;
  transition: background var(--t-fast);
}
:where(#calculator-view) .resize:hover::after, :where(#calculator-view) .resize:focus-visible::after, :where(#calculator-view) .resize.dragging::after,
:where(#calculator-view) .resize-tree:hover::after, :where(#calculator-view) .resize-tree:focus-visible::after, :where(#calculator-view) .resize-tree.dragging::after { width: 3px; left: 3px; background: var(--accent); }
:where(#calculator-view) .resize:focus-visible, :where(#calculator-view) .resize-tree:focus-visible { outline: none; }
:where(#calculator-view) .resize-panel { left: calc(var(--panel-w) - 5px); }
:where(#calculator-view) .resize-layer { right: calc(var(--layer-w) - 5px); }
#calculator-view.panel-hidden .resize-panel, #calculator-view:not(.layer-open) .resize-layer { display: none; }
body.resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.resizing * { cursor: col-resize !important; }

:where(#calculator-view) sat-explorer {
  grid-column: 3;
  grid-row: 1;
  display: block;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  border-left: 1px solid var(--rule);
}

:where(#calculator-view) .layer {
  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  font-size: var(--fs-md);
  padding-bottom: var(--safe-b);
}
:where(#calculator-view) .layer h2, :where(#calculator-view) .layer h3, :where(#calculator-view) .layer p { margin: 0; }

/* The head: the title at the sections' size (components.css
   `.sec-title`), the model as a badge beside it, the close at the right. */
:where(#calculator-view) .layer-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s2) 0 var(--gutter);
  min-height: calc(var(--tap) + var(--s3));
}
:where(#calculator-view) .layer-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
:where(#calculator-view) .layer-model { margin-right: auto; }
:where(#calculator-view) .layer-back { display: none; font-size: var(--fs-md); padding-left: var(--s2); }

/* The tabs (components.css `.tabs`) under a rule, the keys' chip at their right. */
:where(#calculator-view) .layer-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s4);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--rule);
}
:where(#calculator-view) .layer-tabs .tabs { margin-right: auto; }
/* Where the keys go, short (its tooltip says it in full); one line that
   never wraps, so a change of the focus does not move the page. */
:where(#calculator-view) .layer-keys {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 1px 8px 1px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  cursor: help;
  transition: color var(--t-fast), border-color var(--t-fast);
}
:where(#calculator-view) .layer-keys.own { color: var(--accent-text); border-color: var(--accent); }
:where(#calculator-view) .layer-keys .ic { width: 14px; height: 14px; }
/* The way back, while the keys are in the view: plain to see and to
   click, whole; where the tab bar has no room (a phone) it takes a line
   of its own under the tabs. */
:where(#calculator-view) .layer-keys.own { cursor: default; flex: none; margin-bottom: var(--s1); }
:where(#calculator-view) .layer-keys-back { font-size: var(--fs-xs); margin-left: var(--s1); padding: 0; min-height: 0; white-space: nowrap; }
/* Beside the tabs (a layer wider than a phone's), the chip never wraps
   the row, whatever the font's width: a first click into the view would
   move what it clicked. It takes the room left (no more than its text),
   and the way back ends in "…" if that is too little; its tooltip says
   it whole. */
@container (min-width: 471px) {
  :where(#calculator-view) .layer-keys.own { flex: 1 1 0; max-width: max-content; }
  :where(#calculator-view) .layer-keys-back { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* The keys are here: a bar along the layer's edge says so. */
:where(#calculator-view) sat-explorer:focus-within { box-shadow: inset 3px 0 0 var(--accent); }

/* Empty and error states (components.css `.empty`): a heading, one or
   two sentences, the detail in the calculator's face; errors carry a
   rule in the error colour. */
:where(#calculator-view) .pane-error, :where(#calculator-view) .preview-hint, :where(#calculator-view) .palette-empty { padding: var(--s5) var(--gutter); max-width: 48ch; }
:where(#calculator-view) .pane-error h3, :where(#calculator-view) .preview-hint h3 { font-size: 15px; font-weight: 600; margin-bottom: var(--s2); line-height: var(--lh-tight); }
:where(#calculator-view) .pane-error p, :where(#calculator-view) .preview-hint p, :where(#calculator-view) .palette-empty { color: var(--muted); line-height: 1.5; }
:where(#calculator-view) .pane-error p + p { margin-top: var(--s2); }
:where(#calculator-view) .layer .detail, :where(#calculator-view) .layer-empty-detail { font: var(--fs-sm)/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
:where(#calculator-view) .layer-empty-detail:not(:empty) { margin-top: var(--s3) !important; }
:where(#calculator-view) .layer-empty-home { display: inline-flex; margin-top: var(--s4); }
:where(#calculator-view) .pane-error { border-left: 3px solid var(--error); margin: var(--s3) var(--gutter); padding: var(--s1) var(--s3); }
:where(#calculator-view) .preview-hint { padding: var(--s4) var(--card-pad); }

:where(#calculator-view) .pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* The search fields (components.css `.input`): a fixed width beside the crumbs. */
:where(#calculator-view) .find { width: 17ch; }

/* The memory view's content: cards (components.css) on the panel,
   inside the gutter. The lists scroll inside theirs; the preview of one
   object is a card of its own under them. */
:where(#calculator-view) .layer .card { margin: 0 var(--gutter); }
/* The two split cards keep their share of the height (`flex` of their own). */
:where(#calculator-view) .layer .card:not(.vars-split, .cmds-split) { flex: none; }
:where(#calculator-view) .layer .preview.card { margin: var(--s3) var(--gutter) var(--gutter); }
:where(#calculator-view) .layer .preview:empty { display: none; }

/* Variables: the directory tree and the variables of one directory, as
   in a two-pane file manager, the selected object below. */
:where(#calculator-view) .vars-bar { gap: var(--s2); padding: var(--s2) var(--gutter) var(--s1); flex-wrap: nowrap; }
:where(#calculator-view) .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 2px; margin-right: auto; min-width: 0; }
:where(#calculator-view) .crumbs .sep { color: var(--muted); }
:where(#calculator-view) .crumb { border: 0; background: none; box-shadow: none; min-height: 0; padding: 2px 5px; font: 600 var(--fs-md)/1.4 var(--mono); border-radius: var(--r-sm); }
:where(#calculator-view) .crumb:first-child { margin-left: -5px; }
:where(#calculator-view) .crumb:hover { background: var(--hover); }
:where(#calculator-view) .crumb[aria-current] { color: var(--ink); }
:where(#calculator-view) .crumb:not([aria-current]) { color: var(--muted); font-weight: 400; }
:where(#calculator-view) .vars-where { padding: 0 var(--gutter) var(--s2); font-size: var(--fs-sm); color: var(--muted); }
:where(#calculator-view) .vars-where .dot, :where(#calculator-view) .here-mark::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}
:where(#calculator-view) .vars-where.here .dot, :where(#calculator-view) .here-mark::before { background: var(--accent); border-color: var(--accent); }
:where(#calculator-view) .vars-where button.link { font-size: var(--fs-sm); }

/* The tree's width: its default, or the one dragged on the divider
   (--tree-w), within limits that keep a name on both sides. */
:where(#calculator-view) .vars-split {
  --tree-default: max(104px, 30%);
  --tree-col: clamp(80px, var(--tree-w, var(--tree-default)), max(80px, calc(100% - 160px)));
  position: relative;
  flex: 0 0 40%;
  min-height: 150px;
  display: grid;
  grid-template-columns: var(--tree-col) 1fr;
  /* One row the card's height, so the tree and the list scroll inside it. */
  grid-template-rows: minmax(0, 1fr);
}
:where(#calculator-view) .tree { overflow: auto; padding: var(--s1) 0; border-right: 1px solid var(--rule-soft); }
/* The divider between the tree and the list, as the page's edges. */
:where(#calculator-view) .resize-tree { position: absolute; top: 0; bottom: 0; left: calc(var(--tree-col) - 5px); z-index: 1; }
:where(#calculator-view) .node {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--row);
  padding: 2px 8px 2px calc(4px + var(--d) * 14px);
  cursor: default;
  white-space: nowrap;
  font: var(--fs-md)/1.4 var(--mono);
  transition: background-color var(--t-fast);
}
:where(#calculator-view) .node:hover, :where(#calculator-view) .list tbody tr:hover, :where(#calculator-view) .levels li:hover { background: var(--hover); }
:where(#calculator-view) .node.shown, :where(#calculator-view) .list tbody tr[aria-selected=true], :where(#calculator-view) .levels li[aria-selected=true] { background: var(--accent-soft); }
:where(#calculator-view) .node:focus-visible, :where(#calculator-view) .list tbody tr:focus-visible, :where(#calculator-view) .levels li:focus-visible, :where(#calculator-view) .flags-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
:where(#calculator-view) .twist { width: 16px; height: 16px; flex: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
:where(#calculator-view) .twist .ic { width: 14px; height: 14px; transition: transform var(--t-fast); }
:where(#calculator-view) .twist.open .ic { transform: rotate(90deg); }
:where(#calculator-view) .twist.leaf { cursor: default; }
:where(#calculator-view) .here-mark { margin-left: 8px; font: var(--fs-xs)/1 var(--font); color: var(--muted); }
:where(#calculator-view) .here-mark::before { margin-right: 4px; }
/* A narrow phone: the tree keeps only the dot, its tooltip names it. */
@media (max-width: 399px) {
  :where(#calculator-view) .tree .here-mark { font-size: 0; margin-left: 6px; }
  :where(#calculator-view) .tree .here-mark::before { margin-right: 0; }
}

:where(#calculator-view) .list-wrap { overflow: auto; min-width: 0; }
:where(#calculator-view) .list { width: 100%; border-collapse: collapse; }
:where(#calculator-view) .list th {
  position: sticky;
  top: 0;
  background: var(--card);
  text-align: left;
  padding: 7px 8px 6px;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
:where(#calculator-view) .list td { padding: 2px 8px; height: var(--row); white-space: nowrap; cursor: default; }
:where(#calculator-view) .list .num { text-align: right; }
:where(#calculator-view) .list td.num, :where(#calculator-view) .list td.sum { font: var(--fs-sm)/1.5 var(--mono); color: var(--muted); }
:where(#calculator-view) .list td.type { color: var(--muted); }
:where(#calculator-view) .list td.name { max-width: 0; width: 46%; overflow: hidden; text-overflow: ellipsis; }
:where(#calculator-view) .obj-name { font-family: var(--mono); font-weight: 600; }
:where(#calculator-view) .list .in { color: var(--muted); font-size: var(--fs-sm); }
:where(#calculator-view) .kind { display: inline-block; width: 12px; height: 9px; margin-right: 7px; vertical-align: -1px; border-radius: 2px; }
:where(#calculator-view) .kind-dir { background: var(--accent); box-shadow: 0 -2px 0 -0.5px var(--accent); border-top-left-radius: 0; position: relative; }
:where(#calculator-view) .kind-dir::before { content: ""; position: absolute; left: 0; top: -2px; width: 5px; height: 2px; background: var(--accent); border-radius: 1px 1px 0 0; }
/* A page with its top right corner folded over: a file, not a checkbox. */
:where(#calculator-view) .kind-obj { width: 9px; height: 11px; margin-right: 10px; vertical-align: -2px; border-radius: 1px; background: var(--muted); clip-path: polygon(0 0, 55% 0, 100% 45%, 100% 100%, 0 100%); position: relative; }
:where(#calculator-view) .kind-obj::before { content: ""; position: absolute; right: 0; top: 0; width: 45%; height: 45%; background: var(--card); opacity: 0.7; clip-path: polygon(0 0, 100% 100%, 0 100%); }
:where(#calculator-view) .list-empty { padding: var(--s4) 10px; }

/* The preview of one object: a card with its head (the name, its facts,
   the actions) and the object as text. */
:where(#calculator-view) .preview { flex: 1 1 auto; min-height: 0; overflow: auto; }
:where(#calculator-view) .preview-head { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--card-pad) var(--card-pad) var(--s2); }
:where(#calculator-view) .preview-title { min-width: 0; margin-right: auto; }
:where(#calculator-view) .preview-title h3 { font-size: var(--fs-lg); overflow-wrap: anywhere; line-height: var(--lh-tight); }
:where(#calculator-view) .preview-meta { color: var(--muted); font-size: var(--fs-sm); margin-top: 3px !important; }
:where(#calculator-view) .preview-body { padding: 0 var(--card-pad) var(--card-pad); display: flex; flex-direction: column; gap: var(--s2); }
:where(#calculator-view) pre.obj, :where(#calculator-view) .obj-list, :where(#calculator-view) .obj-dir, :where(#calculator-view) .grid-wrap {
  margin: 0;
  background: var(--display);
  color: var(--display-ink);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--inset);
}
:where(#calculator-view) pre.obj {
  padding: 10px 12px;
  font: var(--fs-md)/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
:where(#calculator-view) .obj-program .line { display: block; padding-left: calc(var(--d) * 2ch); }
:where(#calculator-view) .obj-string::before { content: "“"; color: var(--muted); }
:where(#calculator-view) .obj-string::after { content: "”"; color: var(--muted); }
:where(#calculator-view) .more, :where(#calculator-view) .unavailable { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; }
:where(#calculator-view) .unavailable { font-size: var(--fs-md); max-width: 52ch; }
:where(#calculator-view) .preview-error { color: var(--error); }
:where(#calculator-view) .nibbles summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }
:where(#calculator-view) .nibbles pre { margin-top: 6px; font-size: var(--fs-sm); max-height: 160px; overflow: auto; }

:where(#calculator-view) .obj-list, :where(#calculator-view) .obj-dir { padding: 0; list-style: none; counter-reset: item; }
:where(#calculator-view) .obj-list li, :where(#calculator-view) .obj-dir li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 12px;
  counter-increment: item;
}
:where(#calculator-view) .obj-list li + li, :where(#calculator-view) .obj-dir li + li { border-top: 1px solid color-mix(in srgb, var(--display-ink) 14%, transparent); }
:where(#calculator-view) .obj-list li::before { content: counter(item); flex: none; width: 3ch; text-align: right; color: var(--muted); font: var(--fs-xs)/1.6 var(--mono); }
:where(#calculator-view) .obj-list .obj, :where(#calculator-view) .levels .obj { font: var(--fs-md)/1.5 var(--mono); min-width: 0; overflow-wrap: anywhere; margin-right: auto; }
:where(#calculator-view) .obj-dir .obj-name { margin-right: auto; }
:where(#calculator-view) .obj-list .muted, :where(#calculator-view) .obj-dir .muted { font-size: var(--fs-sm); white-space: nowrap; }
:where(#calculator-view) .partial .obj { color: var(--muted); font-style: italic; }

:where(#calculator-view) .grid-wrap { overflow: auto; }
:where(#calculator-view) .obj-grid { border-collapse: collapse; font: var(--fs-md)/1.5 var(--mono); }
:where(#calculator-view) .obj-grid td { padding: 4px 12px; text-align: right; white-space: nowrap; }
:where(#calculator-view) .obj-grid tr + tr td { border-top: 1px solid color-mix(in srgb, var(--display-ink) 14%, transparent); }
:where(#calculator-view) .obj-grid td + td { border-left: 1px solid color-mix(in srgb, var(--display-ink) 14%, transparent); }

/* Stack: level 1 at the bottom, as on the calculator. */
:where(#calculator-view) .levels-wrap {
  flex: 0 1 auto;
  max-height: 46%;
  overflow: auto;
  margin-top: var(--s2);
}
:where(#calculator-view) .levels { margin: 0; padding: var(--s1) 0; list-style: none; }
:where(#calculator-view) .levels li {
  display: grid;
  grid-template-columns: 4ch minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: var(--row);
  padding: 2px var(--gutter) 2px 8px;
  cursor: default;
  transition: background-color var(--t-fast);
}
:where(#calculator-view) .levels .level { text-align: right; color: var(--muted); font: var(--fs-sm)/1.6 var(--mono); }
/* Its track's width, not its text's: an auto margin would size it to the
   unwrapped text and push the row past the list's edge. */
:where(#calculator-view) .levels .obj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 0; }
:where(#calculator-view) .levels .type { font-size: var(--fs-sm); white-space: nowrap; }

/* Flags: a card per topic (components.css `.card`), its title a row,
   its flags rows apart by hairlines; lamps, not switches. */
:where(#calculator-view) .flags-bar { padding: var(--s2) var(--gutter); flex-wrap: nowrap; }
:where(#calculator-view) .flags-bar .find { flex: 1; width: auto; max-width: 28ch; }
:where(#calculator-view) .flags-only { font-size: var(--fs-md); }
:where(#calculator-view) .flags-only[aria-pressed=true] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:where(#calculator-view) .flags-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--s2) 0 var(--s5); }
:where(#calculator-view) .flags-scroll > :not(.card) { margin-inline: var(--gutter); }
:where(#calculator-view) .flags-sum { font-size: var(--fs-md); }
:where(#calculator-view) .flags-scroll > .muted { margin-top: 14px; }
:where(#calculator-view) .flags-basis { margin-top: 4px !important; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; max-width: 62ch; }
:where(#calculator-view) .flag-topic { margin-top: var(--s3); }
:where(#calculator-view) .flag-topic h3 {
  padding: var(--s2) var(--card-pad) 6px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-tight);
}
:where(#calculator-view) .flag-topic .flags-basis { margin: var(--s2) var(--card-pad) 0 !important; }
:where(#calculator-view) .flag-topic > .lamp-grid { margin: var(--s2) var(--card-pad) var(--card-pad); }
:where(#calculator-view) .flag-rows { margin: 0; padding: 0; list-style: none; }
/* A single flag's row toggles it as a whole (sat-explorer.js). */
:where(#calculator-view) .flag.toggles { cursor: pointer; }
:where(#calculator-view) .flag.toggles:hover { background: var(--hover); }
:where(#calculator-view) .flag {
  display: grid;
  grid-template-columns: 8ch 16px minmax(0, 1fr);
  gap: 0 10px;
  align-items: start;
  padding: 7px var(--card-pad);
  transition: background-color var(--t-fast);
}
:where(#calculator-view) .flag + .flag { border-top: 1px solid var(--rule-soft); }
:where(#calculator-view) .flag .num { text-align: right; font: var(--fs-sm)/1.6 var(--mono); color: var(--muted); white-space: nowrap; }
:where(#calculator-view) .flag.on .num { color: var(--ink); font-weight: 600; }
:where(#calculator-view) .lamps { display: grid; grid-template-columns: 10px; padding-top: 4px; justify-content: center; }
:where(#calculator-view) .lamp { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--control-border); }
:where(#calculator-view) .lamp.on { background: var(--accent); border-color: var(--accent); }
:where(#calculator-view) .flag-name { font-weight: 600; }
:where(#calculator-view) .flag:not(.on) .flag-name { font-weight: 400; }
:where(#calculator-view) .flag .state { margin-left: 8px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
:where(#calculator-view) .flag .state.on { color: var(--accent-text); font-weight: 600; }
:where(#calculator-view) .flag .tag { margin-left: 8px; padding: 0 5px; font-size: 10px; line-height: 1.4; }
:where(#calculator-view) .flag .now { margin-top: 1px; line-height: 1.45; }
:where(#calculator-view) .flag .other { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
:where(#calculator-view) .lamp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; margin-top: 8px; }
:where(#calculator-view) .lamp-grid .cell {
  padding: 3px 0;
  text-align: center;
  font: var(--fs-xs)/1.4 var(--mono);
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
:where(#calculator-view) .lamp-grid.bits { grid-template-columns: repeat(auto-fill, 36px); margin: 4px 0 5px; }
:where(#calculator-view) .lamp-grid .cell.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.copy-area { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* The writes: a flag's lamp and cells are buttons; the preview's actions;
   the rename field and the purge question; files dragged over a
   directory; the last write's message; the busy overlay while one runs. */
:where(#calculator-view) .lamps .lamp-toggle {
  min-height: 0;
  padding: 3px;
  margin: -3px;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 50%;
  cursor: pointer;
}
:where(#calculator-view) .lamps .lamp-toggle:hover .lamp { border-color: var(--accent); }
:where(#calculator-view) .lamp-grid button.cell { min-height: 0; background: none; box-shadow: none; cursor: pointer; }
:where(#calculator-view) .lamp-grid button.cell:hover { border-color: var(--accent); color: var(--ink); }
:where(#calculator-view) .lamp-grid button.cell.on { background: var(--accent); }
:where(#calculator-view) .lamp-grid button.cell:disabled, :where(#calculator-view) .lamps .lamp-toggle:disabled { cursor: default; }
/* One primary button and a "⋯" for the rest: they never wrap, the
   title gives way instead. */
:where(#calculator-view) .preview-actions { display: flex; align-items: center; gap: var(--s1); flex: none; }
:where(#calculator-view) .preview-actions > button { font-size: var(--fs-md); }
:where(#calculator-view) .preview-title .here-mark { margin-left: 8px; vertical-align: 2px; font-weight: 400; }
:where(#calculator-view) button.icon.more { border-color: var(--control-border); background: var(--control); box-shadow: var(--shadow-ctl); }
:where(#calculator-view) button.icon.more:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--control-border-hover); background: var(--control); }
:where(#calculator-view) button.icon.more[aria-expanded=true] { background: var(--hover); border-color: var(--control-border-hover); box-shadow: none; }
:where(#calculator-view) .preview-done { font-size: var(--fs-sm); color: var(--accent-text); padding-right: var(--s1); }
:where(#calculator-view) .preview-done:empty { display: none; }

:where(#calculator-view) .edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0 var(--gutter) var(--s3);
  padding: var(--s2) var(--s3);
  border-left: 3px solid var(--accent);
  background: var(--hover);
}
:where(#calculator-view) .edit-row input {
  font: inherit;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--control);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  min-height: var(--tap);
  padding: 0 var(--s2);
  flex: 1 1 12ch;
  min-width: 0;
}
:where(#calculator-view) .edit-row > span { flex: 1 1 100%; }
/* The directory picker of Copy to… and Move to…: the tree's rows, in a
   box of its own that scrolls. */
:where(#calculator-view) .pick-row .pick {
  flex: 1 1 100%;
  max-height: 12rem;
  overflow: auto;
  padding: var(--s1) 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
/* Cancel and the action at the right, below the picker, as in a dialog. */
:where(#calculator-view) .pick-row > button:first-of-type { margin-left: auto; }
:where(#calculator-view) .pick .node[aria-disabled=true] { color: var(--muted); }
:where(#calculator-view) .pick .node[aria-disabled=true]:hover { background: none; }
:where(#calculator-view) button.danger { color: var(--error); border-color: var(--error); }
:where(#calculator-view) .pane-vars .drop-over { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--hover); }
:where(#calculator-view) .vars-new { flex: none; font-size: var(--fs-md); gap: var(--s1); }
:where(#calculator-view) .vars-new .ic { width: 14px; height: 14px; margin-right: -2px; }
:where(#calculator-view) .vars-new[aria-expanded=true] { background: var(--hover); border-color: var(--muted); }
:where(#calculator-view) .edit-row .edit-error { color: var(--error); }
/* The memory view's status row (sat-explorer.js `renderStatus`): one
   line, always there, so a write's message never moves what is below. */
:where(#calculator-view) .layer-status {
  flex: none;
  height: calc(var(--fs-sm) * 1.5 + 2 * var(--s1));
  margin: var(--s1) 0 0;
  padding: var(--s1) var(--gutter);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
/* Its two parts share the line: the live one (announced) or the hint. */
:where(#calculator-view) .layer-status > span { display: block; overflow: hidden; text-overflow: ellipsis; }
:where(#calculator-view) .layer-status > span:empty { display: none; }
:where(#calculator-view) .layer-status[data-kind="hint"], :where(#calculator-view) .layer-status[data-kind="busy"] { color: var(--muted); }
:where(#calculator-view) .layer-status[data-kind="note"] { color: var(--muted); background: var(--hover); }
:where(#calculator-view) .layer-status[data-kind="error"] { color: var(--error); background: var(--error-soft); }
:where(#calculator-view) .layer { position: relative; }
:where(#calculator-view) .layer-busy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  padding: var(--gutter);
  text-align: center;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  cursor: progress;
}
:where(#calculator-view) .layer-busy[hidden] { display: none; }
:where(#calculator-view) .layer-busy-text { font-weight: 600; font-size: var(--fs-lg); }
:where(#calculator-view) .layer-busy-detail { color: var(--muted); font-size: var(--fs-sm); max-width: 40ch; }

/* The Commands tab. */
:where(#calculator-view) .cmds-bar { gap: var(--s3); padding: var(--s2) var(--gutter); flex-wrap: nowrap; }
:where(#calculator-view) .cmds-bar .find { flex: 1; width: auto; max-width: 30ch; }
:where(#calculator-view) .cmds-count { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
:where(#calculator-view) .cmds-split {
  flex: 0 0 38%;
  min-height: 150px;
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  /* One row the card's height, so the tree and the list scroll inside it. */
  grid-template-rows: minmax(0, 1fr);
}
:where(#calculator-view) .cmds-menus { overflow: auto; padding: var(--s1) 0; border-right: 1px solid var(--rule-soft); }
:where(#calculator-view) .cmds-menus .node.other { font-family: var(--font); color: var(--muted); }
:where(#calculator-view) .cmds-menus .node.other.shown { color: var(--ink); }
/* What the mnemonic stands for, after it: muted, in the UI font, cut
   with the cell's ellipsis; hidden where the pane is narrow. */
:where(#calculator-view) .cmds-list .cmd-long { margin-left: var(--s2); font: var(--fs-sm)/1 var(--font); color: var(--muted); }
:where(#calculator-view) .cmds-list td.stack { font: var(--fs-sm)/1.5 var(--mono); color: var(--muted); max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; }
:where(#calculator-view) .cmds-entry { flex: 1; min-height: 0; overflow: auto; }
:where(#calculator-view) .cmds-entry .entry { padding: var(--card-pad) var(--card-pad) 20px; }
:where(#calculator-view) .cmds-note { padding: 0 var(--gutter) 6px; font-size: var(--fs-sm); color: var(--muted); }

/* A narrow layer (a phone, a small window): fewer columns. Below 620 px
   the keys' chip shows its way back alone ("Back to the calculator
   (Esc)"), so it stays on the tabs' line at the default width; its text
   is hidden from sight only, so the live region still announces it. */
@container (max-width: 620px) {
  :where(#calculator-view) .layer-keys-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 470px) {
  :where(#calculator-view) .list .sum { display: none; }
  :where(#calculator-view) .vars-split { --tree-default: max(92px, 28%); }
  :where(#calculator-view) .levels .type { display: none; }
  :where(#calculator-view) .cmds-list .cmd-long { display: none; }
}

/* ------------------------------------------------- the calculator shown */

/* The ROM card's first row: the model over its ROM's name (each ending
   in "…" when the panel is narrow), Change ROM… at the right. */
:where(#calculator-view) .calc-rom:empty { display: none; }
:where(#calculator-view) #calc-rom-pick { flex: none; white-space: nowrap; }

/* --------------------------------------------------------- command palette */

/* One input over the calculator, Alfred-like: the list on the left, the
   selected entry on the right; the calculator stays visible behind a
   dimmed backdrop. On a phone (below 760 px) a full sheet: the input at
   the top, the list under it, the entry as a second step. */

:where(#calculator-view) dialog.palette {
  width: var(--palette-w);
  max-width: none;
  height: var(--palette-h);
  max-height: none;
  margin: 48px auto 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  :where(#calculator-view) dialog.palette[open] { animation: palette-in var(--t) var(--ease); }
  @keyframes palette-in { from { opacity: 0; transform: translateY(-6px) scale(0.995); } }
}
:where(#calculator-view) .palette-box { height: 100%; display: flex; flex-direction: column; font-size: var(--fs-md); }

:where(#calculator-view) .palette-input {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4) 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}
:where(#calculator-view) .palette-glyph { color: var(--accent); display: flex; }
:where(#calculator-view) .palette-input input {
  flex: 1;
  min-width: 0;
  padding: var(--s4) 0;
  font: 500 19px/1.3 var(--font);
  color: var(--ink);
  background: none;
  border: 0;
  outline: none;
}
:where(#calculator-view) .palette-input input:focus-visible { outline: none; }
:where(#calculator-view) .palette-input input::placeholder { color: var(--muted); font-weight: 400; }
:where(#calculator-view) .palette-model { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
:where(#calculator-view) .palette-esc, :where(#calculator-view) .palette-key { font-size: var(--fs-xs); color: var(--muted); }
:where(#calculator-view) .palette-close { display: none; }
:where(#calculator-view) .palette-back { display: none; }
:where(#calculator-view) .palette-actions { display: none; }

:where(#calculator-view) .palette-state {
  margin: 0;
  padding: 7px var(--s4);
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--hover);
  border-bottom: 1px solid var(--rule-soft);
}

:where(#calculator-view) .palette-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 47%) minmax(0, 1fr);
}
:where(#calculator-view) .palette-list { overflow: auto; padding: var(--s2) 0; border-right: 1px solid var(--rule); overscroll-behavior: contain; }
:where(#calculator-view) .palette-detail { overflow: auto; background: var(--paper); overscroll-behavior: contain; }

:where(#calculator-view) .prow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 0 10px;
  padding: 6px 12px 6px 13px;
  cursor: default;
  border-left: 3px solid transparent;
  transition: background-color var(--t-fast);
}
:where(#calculator-view) .prow[aria-selected=true] { background: var(--accent-soft); border-left-color: var(--accent); }
:where(#calculator-view) .prow-kind {
  font-size: 10px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--muted);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
:where(#calculator-view) .prow-command .prow-kind { display: none; }
:where(#calculator-view) .prow-kind:empty { visibility: hidden; }
/* An action that cannot run now: greyed, its reason as its description. */
:where(#calculator-view) .prow-off :is(.prow-name, .prow-desc) { color: var(--ink-disabled); }
:where(#calculator-view) .prow-main { min-width: 0; }
:where(#calculator-view) .prow-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
:where(#calculator-view) .prow-name { font: 600 var(--fs-base)/1.4 var(--mono); white-space: nowrap; }
:where(#calculator-view) .prow-title { font-family: var(--font); font-weight: 600; }
:where(#calculator-view) .prow-text { white-space: pre-wrap; overflow-wrap: anywhere; }
:where(#calculator-view) :is(.prow-stack, .prow-keys) {
  font: var(--fs-sm)/1.4 var(--mono);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
:where(#calculator-view) .prow-desc { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(#calculator-view) .prow[aria-selected=true] .prow-desc { color: var(--ink); }
:where(#calculator-view) .prow-long { font-weight: 600; }
:where(#calculator-view) .prow-hint { visibility: hidden; font-size: 10px; color: var(--muted); text-align: center; }
:where(#calculator-view) .prow[aria-selected=true] .prow-hint, :where(#calculator-view) .palette-list:hover .prow-hint, :where(#calculator-view) .palette-list.hints .prow-hint { visibility: visible; }
:where(#calculator-view) .prow-go { display: none; color: var(--muted); }
:where(#calculator-view) .palette-empty { margin: 0; max-width: 42ch; }

:where(#calculator-view) .palette-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s4);
  padding: 7px var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--muted);
}
:where(#calculator-view) .palette-foot p { margin: 0; }
:where(#calculator-view) .palette-notice {
  margin: 0;
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--hover);
}
:where(#calculator-view) .palette-notice.error { color: var(--error); font-weight: 600; background: var(--error-soft); }
:where(#calculator-view) .palette-notice.busy::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  vertical-align: -1px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :where(#calculator-view) .palette-notice.busy::before { animation: none; border-right-color: var(--accent); opacity: 0.6; }
}
:where(#calculator-view) .palette-hints { white-space: nowrap; }
:where(#calculator-view) .palette-hints kbd { margin: 0 1px; }

/* The palette's editor mode: the input grows to a multi-line RPL editor
   (components/rpl-editor.js). A textarea with transparent text lies over
   a <pre> that shows the same text highlighted; both share every metric. */
:where(#calculator-view) .palette-box.editing .palette-input,
:where(#calculator-view) .palette-box.editing .palette-body,
:where(#calculator-view) .palette-box.editing .palette-foot { display: none; }
:where(#calculator-view) .palette-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }
:where(#calculator-view) .editor-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--rule);
}
:where(#calculator-view) .editor-title { font: 600 var(--fs-lg)/1.3 var(--font); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(#calculator-view) .editor-dirty {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}
:where(#calculator-view) .editor-dirty::before { content: "\25CF"; margin-right: 4px; }
:where(#calculator-view) .editor-head .palette-esc { margin-left: auto; }
:where(#calculator-view) .editor-close { margin-left: calc(-1 * var(--s1)); }
:where(#calculator-view) .editor-area { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
:where(#calculator-view) .rpl-editor { position: relative; flex: 1; min-height: 0; }
:where(#calculator-view) .rpl-hl, :where(#calculator-view) .rpl-text {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: 0;
  font: 14px/1.55 var(--mono);
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
}
:where(#calculator-view) .rpl-hl { color: var(--ink); overflow: hidden; pointer-events: none; }
:where(#calculator-view) .rpl-text {
  color: transparent;
  caret-color: var(--ink);
  background: transparent;
  resize: none;
  outline: none;
  overflow: auto;
  overscroll-behavior: contain;
}
:where(#calculator-view) .rpl-text::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: transparent; }
:where(#calculator-view) .rpl-text:focus-visible { outline: none; }
:where(#calculator-view) .t-delim { color: var(--syn-delim); font-weight: 600; }
:where(#calculator-view) .t-num { color: var(--syn-num); }
:where(#calculator-view) .t-str, :where(#calculator-view) .t-tag { color: var(--syn-str); }
:where(#calculator-view) .t-kw { color: var(--syn-kw); font-weight: 600; }
:where(#calculator-view) .t-cmd { color: var(--syn-cmd); }
:where(#calculator-view) .t-var { color: var(--syn-var); }
:where(#calculator-view) .t-com { color: var(--syn-com); font-style: italic; }
:where(#calculator-view) .t-op { color: var(--muted); }
:where(#calculator-view) mark.bm { background: var(--syn-match); color: inherit; border-radius: 2px; }
:where(#calculator-view) .rpl-complete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--rule-soft);
  background: var(--panel);
}
:where(#calculator-view) button.rpl-choice {
  min-height: 0;
  padding: 2px var(--s2);
  font: var(--fs-sm)/1.4 var(--mono);
  border-radius: var(--r-sm);
}
:where(#calculator-view) button.rpl-choice[aria-selected=true] { background: var(--accent-soft); border-color: var(--accent); }
:where(#calculator-view) .rpl-choice-kind { margin-left: 6px; font: var(--fs-xs)/1 var(--font); color: var(--muted); }
:where(#calculator-view) .editor-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--muted);
}
:where(#calculator-view) .editor-hints { margin: 0; flex: 1 1 260px; min-width: 0; }
:where(#calculator-view) .editor-hints kbd { margin: 0 1px; }
:where(#calculator-view) .editor-buttons { display: flex; gap: var(--s2); margin-left: auto; }

/* The reference entry (palette detail and the explorer's Commands tab; the
   docs' command reference page, web/docs/commands/, as `.docs-ref`). */
:where(#calculator-view, .docs-ref) .entry { padding: var(--s4) 20px 20px; display: flex; flex-direction: column; gap: 10px; }
:where(#calculator-view, .docs-ref) .entry h3, :where(#calculator-view, .docs-ref) .entry h4, :where(#calculator-view, .docs-ref) .entry p, :where(#calculator-view, .docs-ref) .entry dl { margin: 0; }
:where(#calculator-view, .docs-ref) .entry-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
:where(#calculator-view, .docs-ref) .entry-send { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
:where(#calculator-view, .docs-ref) .entry-sent { font-size: var(--fs-sm); color: var(--accent-text); }
:where(#calculator-view, .docs-ref) .entry-sent.error { color: var(--error); }
:where(#calculator-view, .docs-ref) .entry-name { font: 600 var(--fs-2xl)/1.2 var(--mono); overflow-wrap: anywhere; }
/* "RSD · Residual": the long name in the UI font, normal weight, muted. */
:where(#calculator-view, .docs-ref) .entry-long { font: 400 var(--fs-xl)/1.2 var(--font); color: var(--muted); }
:where(#calculator-view, .docs-ref) .entry-title { font-family: var(--font); font-size: var(--fs-xl); letter-spacing: -0.01em; }
:where(#calculator-view, .docs-ref) .entry-models { display: flex; gap: var(--s1); margin-left: auto; }
:where(#calculator-view, .docs-ref) .chip {
  padding: 1px 8px;
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--ink);
  white-space: nowrap;
}
:where(#calculator-view, .docs-ref) .chip.current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
:where(#calculator-view, .docs-ref) .chip.off { color: var(--muted); border-style: dashed; opacity: 0.6; text-decoration: line-through; }
:where(#calculator-view, .docs-ref) .entry-stack {
  margin: 0;
  padding: 9px 12px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font: var(--fs-md)/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:where(#calculator-view, .docs-ref) .entry-stack-wrap { display: flex; flex-direction: column; gap: var(--s1); }
:where(#calculator-view, .docs-ref) .entry-stack-note, :where(#calculator-view, .docs-ref) .entry-stack-none, :where(#calculator-view, .docs-ref) .entry-skip { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
:where(#calculator-view, .docs-ref) .entry-desc, :where(#calculator-view, .docs-ref) .entry-note { line-height: 1.5; max-width: 60ch; }
:where(#calculator-view, .docs-ref) .entry-where { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--fs-sm); }
:where(#calculator-view, .docs-ref) .entry-where dt { color: var(--muted); }
:where(#calculator-view, .docs-ref) .entry-where dd { margin: 0; }
:where(#calculator-view, .docs-ref) .entry .menu-path { font: 600 var(--fs-sm)/1.5 var(--mono); }
:where(#calculator-view, .docs-ref) .entry .sep { color: var(--muted); }
:where(#calculator-view, .docs-ref) .entry h4 { margin-top: 6px; }
:where(#calculator-view, .docs-ref) .entry h4 .muted { font-weight: 400; letter-spacing: 0; text-transform: none; }
:where(#calculator-view, .docs-ref) .entry-examples { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; container: examples / inline-size; }
/* An example as the calculator shows it: the stack before, the command,
   the stack after, "Try it" at the right edge; stacked when narrow. */
:where(#calculator-view, .docs-ref) .ex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
:where(#calculator-view, .docs-ref) .ex-setup { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
:where(#calculator-view, .docs-ref) .ex-setup code { font: var(--fs-sm)/1.4 var(--mono); color: var(--ink); }
:where(#calculator-view, .docs-ref) .ex-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
}
:where(#calculator-view, .docs-ref) .ex-line { display: flex; gap: 8px; align-items: baseline; }
/* A key-driven model's example: the display's two lines, as shown. */
:where(#calculator-view, .docs-ref) .ex-screen .ex-text { margin-left: 0; white-space: pre; }
:where(#calculator-view, .docs-ref) .entry-keys { display: flex; flex-wrap: wrap; gap: 4px; }
:where(#calculator-view, .docs-ref) .ex-level { flex: none; font: var(--fs-xs)/1.4 var(--mono); color: var(--muted); min-width: 2ch; }
/* An object that fits on its line right-aligned, as on the calculator's
   stack; a longer one wraps left-aligned across the side's width. */
:where(#calculator-view, .docs-ref) .ex-text { flex: 0 1 auto; margin-left: auto; min-width: 0; font: var(--fs-md)/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
:where(#calculator-view, .docs-ref) .ex-empty { font-size: var(--fs-sm); text-align: center; }
:where(#calculator-view, .docs-ref) .ex-after.error { flex-direction: row; gap: 8px; align-items: baseline; border-color: var(--error); }
:where(#calculator-view, .docs-ref) .ex-after.error .ex-level { color: var(--error); min-width: 0; }
:where(#calculator-view, .docs-ref) .ex-after.error .ex-text { color: var(--error); margin-left: 0; }
:where(#calculator-view, .docs-ref) .ex-cmd { display: flex; align-items: center; gap: 6px; max-width: 24ch; min-width: 0; }
:where(#calculator-view, .docs-ref) .ex-run { font: 600 var(--fs-md)/1.4 var(--mono); color: var(--accent-text); text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
:where(#calculator-view, .docs-ref) .ex-arrow { color: var(--accent); font-size: var(--fs-lg); line-height: 1; }
:where(#calculator-view, .docs-ref) .ex-try { font-size: var(--fs-sm); white-space: nowrap; }
/* The example's comment: a short muted line under it. */
:where(#calculator-view, .docs-ref) .ex-comment { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
:where(#calculator-view, .docs-ref) .ex-tried { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--accent-text); }
:where(#calculator-view, .docs-ref) .ex-tried.error { color: var(--error); }
/* A narrow pane (a phone, the palette's detail): before, command, after
   one under the other, the arrow pointing down, "Try it" below. */
@container examples (max-width: 470px) {
  :where(#calculator-view, .docs-ref) .ex { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  :where(#calculator-view, .docs-ref) .ex-cmd { justify-content: center; max-width: none; }
  :where(#calculator-view, .docs-ref) .ex-arrow { order: -1; transform: rotate(90deg); }
  :where(#calculator-view, .docs-ref) .ex-try { justify-self: start; margin-top: 2px; }
}
:where(#calculator-view, .docs-ref) .entry-manuals ul { margin: 0; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.6; }
:where(#calculator-view, .docs-ref) .entry a { color: var(--accent-text); text-underline-offset: 2px; }
:where(#calculator-view, .docs-ref) .entry-names { font: var(--fs-sm)/1.7 var(--mono); overflow-wrap: anywhere; }
:where(#calculator-view, .docs-ref) .entry-enter { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; padding: 10px 20px 16px; border-top: 1px solid var(--rule-soft); }
:where(#calculator-view, .docs-ref) .palette-detail .entry { padding-bottom: 14px; }
:where(#calculator-view, .docs-ref) .entry-enter kbd { margin: 0 1px; }

/* ------------------------------------------------------ keyboard shortcuts */

:where(#calculator-view) .shortcuts-box { display: flex; flex-direction: column; max-height: calc(100vh - 50px); }
:where(#calculator-view) .shortcuts-body { overflow: auto; padding: var(--s1) var(--gutter) var(--s3); font-size: var(--fs-md); }
:where(#calculator-view) .shortcuts-body h3 { margin: var(--s4) 0 var(--s1); }
:where(#calculator-view) .shortcuts-body h3 .muted { font-weight: 400; letter-spacing: 0; text-transform: none; }
:where(#calculator-view) .shortcuts-body p { margin: var(--s2) 0 0; line-height: 1.5; }
:where(#calculator-view) .shortcuts-intro { color: var(--muted); max-width: 70ch; }
:where(#calculator-view) .shortcuts-table { width: 100%; border-collapse: collapse; }
:where(#calculator-view) .shortcuts-table th, :where(#calculator-view) .shortcuts-table td { padding: 7px 0; vertical-align: top; text-align: left; border-top: 1px solid var(--rule-soft); }
:where(#calculator-view) .shortcuts-table tr:first-child > * { border-top: 0; }
:where(#calculator-view) .shortcuts-table th { width: 38%; padding-right: 14px; font-weight: 400; }
:where(#calculator-view) .shortcuts-table:is(.typing, .mouse) th { white-space: nowrap; width: 1%; }
:where(#calculator-view) .sc-title { display: block; font-weight: 600; }
:where(#calculator-view) .sc-desc { display: block; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; margin-top: 1px; }
:where(#calculator-view) .sc-reset { width: 1%; padding-left: 8px !important; white-space: nowrap; text-align: right !important; }
:where(#calculator-view) .sc-reset button.link { font-size: var(--fs-sm); }
:where(#calculator-view) .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:where(#calculator-view) .chip-key { display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1px 1px 1px 6px; background: var(--control); min-height: 28px; }
:where(#calculator-view) .chip-key kbd { border: 0; background: none; padding: 0 2px; font-size: var(--fs-sm); }
:where(#calculator-view) .chip-key.warned { border-color: var(--error); }
:where(#calculator-view) .chip-key.fresh { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
:where(#calculator-view) button.icon.chip-remove { width: 24px; height: 24px; color: var(--muted); }
:where(#calculator-view) button.icon.chip-remove .ic { width: 14px; height: 14px; }
:where(#calculator-view) button.chip-add { font-size: var(--fs-sm); min-height: 28px; padding: 0 9px; }
:where(#calculator-view) button.chip-add.recording { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:where(#calculator-view) .shortcuts-table select { font-size: var(--fs-md); }
:where(#calculator-view) .warns { list-style: none; margin: 5px 0 0; padding: 0; font-size: var(--fs-sm); line-height: 1.45; }
:where(#calculator-view) .warns li + li { margin-top: 2px; }
:where(#calculator-view) .warn { color: var(--error); }
:where(#calculator-view) .warn.minor { color: var(--muted); }
:where(#calculator-view) .warn.fresh { color: var(--error); font-weight: 600; }
:where(#calculator-view) .warns kbd { font-size: var(--fs-xs); }
:where(#calculator-view) .shortcuts-where { margin: 0 auto 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* ------------------------------------------------------- layout: widths */

/* Below 1000px the layer lies over the calculator. */
@media (max-width: 999px) {
  #calculator-view.layer-open, #calculator-view.layer-open.panel-hidden { grid-template-columns: var(--panel-w) 1fr; }
  #calculator-view.layer-open.panel-hidden { grid-template-columns: 0 1fr; }
  :where(#calculator-view) sat-explorer { grid-column: 2; z-index: 2; border-left: 0; }
  :where(#calculator-view) .layer-back { display: inline-flex; }
  :where(#calculator-view) .layer button.layer-close { display: none; }
  :where(#calculator-view) .resize-layer { display: none; }
  #calculator-view.layer-open.panel-hidden #panel-show { display: none; }
}
@media (min-width: 760px) {
  :where(#calculator-view) #bar-memory, :where(#calculator-view) #bar-palette, :where(#calculator-view) #bar-edit { display: none; }
}

/* Narrow screens (phones): the top bar, the controls as a drop-down
   sheet, the layer in the stage's place, dialogs as full sheets, the
   palette as a sheet with the entry as a second step. */
@media (max-width: 759px) {
  #calculator-view, #calculator-view.panel-hidden, #calculator-view.layer-open, #calculator-view.layer-open.panel-hidden {
    grid-template-columns: 1fr;
    grid-template-rows: var(--bar-top) 1fr;
  }
  :where(#calculator-view) .bar { display: flex; grid-row: 1; }
  :where(#calculator-view) .stage { grid-column: 1; grid-row: 2; padding: var(--s2) calc(var(--s2) + var(--safe-r)) calc(var(--s2) + var(--safe-b)) calc(var(--s2) + var(--safe-l)); }
  :where(#calculator-view) .stage-tools { display: none; }
  :where(#calculator-view) sat-explorer { grid-column: 1; grid-row: 2; }
  :where(#calculator-view) .panel, #calculator-view.panel-hidden .panel {
    display: none;
    position: fixed;
    top: var(--bar-top);
    left: 0;
    right: 0;
    max-height: calc(100% - var(--bar-top));
    z-index: 4;
    padding-bottom: calc(var(--s3) + var(--safe-b));
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-2);
  }
  #calculator-view.sheet-open .panel { display: flex; }
  /* "The AI's calls" as a sheet along the bottom. */
  :where(#calculator-view) .ai-log, #calculator-view.panel-hidden .ai-log { left: 0; right: 0; bottom: 0; width: auto; height: 50vh; border-width: 1px 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: var(--safe-b); }
  :where(#calculator-view) .al-headbar { padding-left: var(--gutter); }
  :where(#calculator-view) .al-entry { grid-template-columns: 8ch minmax(0, 1fr) auto; grid-template-areas: "t tool out" ". app app" ". args args" ". res res"; padding-inline: var(--gutter); }
  @media (prefers-reduced-motion: no-preference) {
    #calculator-view.sheet-open .panel { animation: sheet-in var(--t) var(--ease); }
    @keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }
  }
  :where(#calculator-view) .resize-panel { display: none; }
  /* The tree keeps its default width: no divider to drag on a phone. */
  :where(#calculator-view) .resize-tree { display: none; }
  :where(#calculator-view) .vars-split { --tree-col: var(--tree-default); }
  :where(#calculator-view) .panel-head, :where(#calculator-view) .tagline, :where(#calculator-view) #panel-show { display: none !important; }
  /* A phone's gutter: the cards keep more of the width. */
  :where(#calculator-view) .layer { --gutter: 12px; }
  :where(#calculator-view) .layer-head { padding-left: var(--s2); }

  /* Dialogs as full sheets. */
  :where(#calculator-view) dialog.about, :where(#calculator-view) dialog.shortcuts {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  :where(#calculator-view) .about-box, :where(#calculator-view) .shortcuts-box { height: 100%; max-height: none; }
  :where(#calculator-view) .dialog-head { padding-top: calc(var(--s2) + var(--safe-t)); padding-left: var(--gutter); }
  :where(#calculator-view) .about-body, :where(#calculator-view) .shortcuts-body { flex: 1; min-height: 0; padding-bottom: calc(var(--s5) + var(--safe-b)); }
  :where(#calculator-view) .dialog-foot { padding-bottom: calc(var(--s3) + var(--safe-b)); }
  :where(#calculator-view) .shortcuts-table th { width: auto; display: block; border-top: 1px solid var(--rule-soft); padding-bottom: 2px; }
  :where(#calculator-view) .shortcuts-table td { display: inline-block; border-top: 0; padding-top: 2px; }
  :where(#calculator-view) .shortcuts-table td.sc-keys { width: 75%; }
  :where(#calculator-view) .shortcuts-table:is(.typing, .mouse) th { width: auto; }

  /* The palette as a sheet. Its height follows the visual viewport
     (--vvh, set by the component), so the on-screen keyboard never
     covers the list. */
  :where(#calculator-view) dialog.palette {
    position: fixed;
    inset: var(--vvt, 0px) 0 auto 0;
    width: 100%;
    height: 100vh;
    height: var(--vvh, 100dvh);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    :where(#calculator-view) dialog.palette[open] { animation: fade-in var(--t) var(--ease); }
  }
  :where(#calculator-view) .palette-input { padding: var(--safe-t) var(--s2) 0 var(--s4); gap: var(--s2); }
  :where(#calculator-view) .palette-input input { padding: var(--s3) 0; min-height: var(--tap); font-size: 17px; }
  :where(#calculator-view) .palette-model, :where(#calculator-view) .palette-esc, :where(#calculator-view) .palette-key { display: none; }
  :where(#calculator-view) .palette-close { display: inline-flex; }
  :where(#calculator-view) .palette-body { display: block; }
  :where(#calculator-view) .palette-list { height: 100%; border-right: 0; padding-bottom: var(--safe-b); }
  :where(#calculator-view) .palette-detail { display: none; height: 100%; }
  :where(#calculator-view) .palette-box.detail-open .palette-input, :where(#calculator-view) .palette-box.detail-open .palette-state, :where(#calculator-view) .palette-box.detail-open .palette-list { display: none; }
  :where(#calculator-view) .palette-box.detail-open .palette-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; }
  :where(#calculator-view) .palette-box.detail-open .palette-back { display: flex; }
  :where(#calculator-view) .palette-back {
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    gap: var(--s2);
    padding: var(--safe-t) var(--s2) 0 var(--s2);
    min-height: calc(var(--tap) + var(--s2) + var(--safe-t));
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
  }
  :where(#calculator-view) .palette-back .palette-back-name { font: 600 var(--fs-lg)/1.3 var(--mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(#calculator-view) .palette-detail .entry { flex: 1; padding-bottom: var(--s4); }
  :where(#calculator-view) .entry-enter { display: none; }
  :where(#calculator-view) .palette-actions {
    display: flex;
    gap: var(--s2);
    padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-b));
    border-top: 1px solid var(--rule);
    background: var(--panel);
    position: sticky;
    bottom: 0;
  }
  :where(#calculator-view) .palette-actions button { flex: 1; }
  :where(#calculator-view) .palette-actions .muted { flex: 1; align-self: center; font-size: var(--fs-sm); }
  :where(#calculator-view) .palette-foot { display: none; }
  :where(#calculator-view) .editor-head { padding: var(--safe-t) var(--s2) 0 var(--s4); gap: var(--s2); }
  :where(#calculator-view) .editor-head .palette-esc { display: none; }
  :where(#calculator-view) .editor-close { margin-left: auto; }
  :where(#calculator-view) .rpl-hl, :where(#calculator-view) .rpl-text { font-size: 15px; padding: var(--s3); }
  :where(#calculator-view) .editor-hints { display: none; }
  :where(#calculator-view) .editor-bar { padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-b)); }
  :where(#calculator-view) .editor-buttons { flex: 1; }
  :where(#calculator-view) .editor-buttons button { flex: 1; min-height: var(--tap); }
  :where(#calculator-view) .prow { grid-template-columns: minmax(0, 1fr) auto 20px; min-height: var(--tap); padding: var(--s2) var(--s2) var(--s2) 13px; }
  :where(#calculator-view) .prow-hint { display: none; }
  :where(#calculator-view) .prow-go { display: block; }
  :where(#calculator-view) .prow-desc { white-space: normal; }
}

/* Coarse pointers: the shortcut chips grow to a finger's size too (after
   their own rules, which they override). */
@media (pointer: coarse) {
  :where(#calculator-view) .chip-key, :where(#calculator-view) button.chip-add { min-height: var(--tap); }
  :where(#calculator-view) button.icon.chip-remove { width: var(--tap); height: var(--tap); }
}

/* A new build of the installed page is ready, or keep a kept ROM for
   good (web/pwa.js), or start fresh (web/fresh.js): a card at the bottom,
   above the home indicator. Not modal; an update notice covers the
   storage one, the question the user just asked for covers both. */
.update-notice, .storage-notice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s4) + var(--safe-b));
  transform: translateX(-50%);
  z-index: 7;
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s3) var(--s4);
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-md);
  line-height: var(--lh);
}
.storage-notice { z-index: 6; }
/* On the home page, under the calculators (pwa.js `showStorageOffer`). */
.storage-notice.in-panel {
  position: static;
  transform: none;
  width: auto;
  margin: var(--s1) 0 var(--s2);
  padding: var(--s2) var(--s3);
  box-shadow: none;
  border-left: 3px solid var(--accent);
  font-size: var(--fs-sm);
}
.storage-notice.in-panel .notice-actions { justify-content: flex-start; }
.update-notice p, .storage-notice p { margin: 0 0 var(--s2); }
.update-actions, .notice-actions { display: flex; justify-content: flex-end; gap: var(--s2); }
/* The outcome: its one line beside OK. */
.storage-notice.outcome { display: flex; align-items: center; gap: var(--s3); }
.storage-notice.outcome p { margin: 0; flex: 1; }

/* A graphic (GROB): its pixels at a whole scale, hard-edged, in the LCD's
   colours; a thumbnail of it in its stack level, the row's height. */
:where(#calculator-view) .graphic-wrap { overflow: auto; max-width: 100%; }
:where(#calculator-view) canvas.graphic, :where(#calculator-view) .levels canvas.thumb { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
:where(#calculator-view) .levels canvas.thumb {
  display: inline-block;
  height: calc(var(--row) - 8px);
  width: auto;
  max-width: 40%;
  object-fit: contain;
  object-position: left center;
  vertical-align: middle;
  margin-right: var(--s1);
}

/* The tour (components/sat-tour.js): a ring around one element and a
   bubble beside it, a sheet at the bottom on a phone. Neither blocks the
   page: the ring takes no pointer, there is no backdrop. The quiet line
   offering it on a first visit sits at the bottom like the notices. */
:where(#calculator-view) .tour-ring {
  position: fixed;
  z-index: 25;
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  pointer-events: none;
}
:where(#calculator-view) dialog.tour-bubble {
  position: fixed;
  z-index: 26;
  inset: auto;
  margin: 0;
  width: min(340px, calc(100vw - 16px));
  padding: var(--s3) var(--s4);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-md);
  line-height: var(--lh);
}
/* Out of sight, and of `seen`'s hit test, while the next step is found. */
:where(#calculator-view) dialog.tour-bubble.measuring { visibility: hidden; }
:where(#calculator-view) .tour-count { margin: 0; font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--track-caps); text-transform: uppercase; }
:where(#calculator-view) .tour-title { margin: var(--s1) 0 0; font-size: var(--fs-lg); line-height: var(--lh-tight); }
:where(#calculator-view) .tour-text { margin: var(--s2) 0 0; }
:where(#calculator-view) .tour-next-chapter { margin: var(--s2) 0 0; }
:where(#calculator-view) .tour-actions { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
:where(#calculator-view) .tour-actions .tour-skip { margin-right: auto; }
:where(#calculator-view) dialog.tour-bubble.sheet {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  max-width: none;
  padding: var(--s4) calc(var(--gutter) + var(--safe-r)) calc(var(--s4) + var(--safe-b)) calc(var(--gutter) + var(--safe-l));
  border-width: 1px 0 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  :where(#calculator-view) dialog.tour-bubble[open] { animation: menu-in var(--t) var(--ease); }
}
:where(#calculator-view) .tour-offer {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  /* Over the calculator, under the memory view lying over it (2). */
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s1);
  max-width: calc(100% - 2 * var(--s3));
  padding: var(--s1) var(--s1) var(--s1) var(--s3);
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-md);
  white-space: nowrap;
}
/* A phone: the case fills the stage, its logo and model at the top; the
   offer is docked under the bar as a strip, and the stage gives it room
   (the calculator fits below it) for as long as it is shown. */
@media (max-width: 759px) {
  :where(#calculator-view) .tour-offer {
    --offer-h: calc(var(--tap) + 2 * var(--s1));
    top: 0;
    left: 0;
    right: 0;
    height: var(--offer-h);
    max-width: none;
    justify-content: center;
    padding: 0 var(--s1) 0 var(--s3);
    background: var(--panel);
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
  }
  :where(#calculator-view) .stage:not(.fs):has(> .tour-offer:not([hidden])) { padding-top: calc(var(--tap) + 2 * var(--s1) + var(--s2)); }
}
:where(#calculator-view) .stage.fs .tour-offer { display: none; }
:where(#calculator-view) .tour-offer[hidden] { display: none; }
/* A phone's sheet covers the end of the controls: room there while the tour runs. */
#calculator-view.tour-room .panel { padding-bottom: calc(var(--tour-room, 0px) + var(--s4)); }
:where(#calculator-view) .tour-offer button.icon { width: 28px; height: 28px; }
:where(#calculator-view) .about-tour, :where(#calculator-view) .about-docs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
@media (pointer: coarse) {
  :where(#calculator-view) .tour-offer button.icon { width: var(--tap); height: var(--tap); }
}

/* Save state and Load state, their "⋯" (the file commands, iteration 34)
   after them: a `.toolbar.fill` ("side panel" above), the "⋯" a control's square. */
:where(#calculator-view) .state-actions { flex-wrap: nowrap; }
:where(#calculator-view) .panel .state-actions > button:not(.icon) { flex: 1 1 0; padding-inline: var(--s2); }
:where(#calculator-view) .state-actions > button.icon.more { flex: none; width: var(--tap); height: var(--tap); padding: 0; font-size: inherit; line-height: inherit; }