/* Margin: a sheet of good paper with mathematics on it. */

:root {
  --bg: #fbfaf8;
  --ink: #1b1b1b;
  --accent: #3b6ea5;
  --ins-tint: rgba(58, 157, 93, 0.22);
  --del-tint: rgba(201, 79, 79, 0.2);

  --sans: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --scale: 1;
  --math-px: 19px;
  --gap: 40px;
  --rail-w: 220px;
  --ease: 150ms ease-out;

  --soft: color-mix(in srgb, var(--ink) 70%, transparent);
  --mid: color-mix(in srgb, var(--ink) 58%, transparent);
  --muted: color-mix(in srgb, var(--ink) 45%, transparent);
  --faint: color-mix(in srgb, var(--ink) 28%, transparent);
  --hair: color-mix(in srgb, var(--ink) 10%, transparent);
  --wash: color-mix(in srgb, var(--ink) 5%, transparent);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #111214;
  --ink: #e8e6e1;
  --accent: #7aa2d6;
  --ins-tint: rgba(88, 190, 122, 0.22);
  --del-tint: rgba(225, 104, 104, 0.22);
  color-scheme: dark;
}

:root[data-theme="paper"] {
  --bg: #f6f0e4;
  --ink: #2a2420;
  --accent: #3b6ea5;
}

:root[data-density="compact"] { --gap: 20px; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--sans);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Icon buttons and text buttons ------------------------------------------ */

.ib {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  color: var(--muted);
  transition: color var(--ease), background var(--ease);
}
.ib:hover { color: var(--ink); background: var(--wash); }
.ib:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ib[aria-pressed="true"] { color: var(--accent); }
.ib .icon { display: block; }

.tb {
  all: unset;
  cursor: pointer;
  font: 12.5px var(--sans);
  color: var(--soft);
  padding: 5px 10px;
  border-radius: 5px;
  transition: color var(--ease), background var(--ease);
}
.tb:hover { color: var(--ink); background: var(--wash); }
.tb.primary { color: var(--accent); }
.tb:focus-visible { outline: 2px solid var(--accent); }

/* Top bar ---------------------------------------------------------------- */

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--muted);
  opacity: 0.4;
  transition: opacity var(--ease);
  min-height: 42px;
  min-width: 0;
}
body.near-top .topbar, .topbar:hover, .topbar:focus-within { opacity: 1; }

.wordmark {
  font: italic 15px var(--serif);
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  letter-spacing: 0.01em;
  margin-right: 6px;
}

.session-name {
  all: unset;
  cursor: text;
  font: 15px var(--serif);
  color: var(--soft);
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 34ch;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-name:hover { background: var(--wash); }
.session-name:focus-visible { outline: 2px solid var(--accent); }

.views { display: flex; align-items: center; gap: 6px; margin-left: 10px; flex: none; }
.views button {
  all: unset;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--muted);
  transition: color var(--ease);
}
.views button:hover { color: var(--ink); }
.views button[aria-pressed="true"] { color: var(--ink); }
.views button:focus-visible { outline: 2px solid var(--accent); }
.sep-dot { color: var(--faint); }

.spacer { flex: 1; }

.search { display: flex; align-items: center; gap: 2px; margin: 0; }
.search input {
  all: unset;
  font: 12.5px var(--sans);
  color: var(--ink);
  width: 0;
  opacity: 0;
  padding: 3px 4px;
  border-bottom: 1px solid transparent;
  transition: width var(--ease), opacity var(--ease), border-color var(--ease);
}
.search input:focus, .search input.has-value {
  width: 180px;
  opacity: 1;
  border-bottom-color: var(--faint);
}
.search input::placeholder { color: var(--faint); }

.topbar-link { padding: 3px 6px; color: var(--muted); flex: none; }
.topbar-link[hidden] { display: none; }

.mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  margin-left: 4px;
  flex: none;
}
.mode-dot.is-connected { background: var(--muted); }
.mode-dot.is-offline { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }

/* Rail ------------------------------------------------------------------- */

.rail {
  width: var(--rail-w);
  overflow: auto;
  padding: 6px 8px 16px 14px;
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body[data-rail="closed"] .rail { display: none; }

.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 6px; }
.rail-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

.sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sess {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px 3px 6px;
  border-radius: 5px;
  position: relative;
}
.sess:hover { background: var(--wash); }
.sess.is-selected { color: var(--ink); }
.sess-name {
  all: unset;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 0;
  font-family: var(--serif);
  font-size: 14px;
}
.sess-name:focus-visible { outline: 2px solid var(--accent); }
.sess-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.sess.is-live::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--accent);
}
.sess .ib { width: 22px; height: 22px; opacity: 0; }
.sess:hover .ib, .sess .ib:focus-visible, .sess.is-selected .ib { opacity: 1; }

.rail-foot { margin-top: 10px; padding-left: 6px; }
.rail-link {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 0;
}
.rail-link:hover { color: var(--ink); }
.rail-link:focus-visible { outline: 2px solid var(--accent); }
.rail-empty { padding: 6px; color: var(--faint); font-style: italic; font-family: var(--serif); font-size: 13.5px; }

/* Main ------------------------------------------------------------------- */

.main-wrap { position: relative; min-width: 0; overflow: hidden; }
#main { height: 100%; overflow: auto; outline: none; scroll-padding-block: 40px; }

/* The demo says what it is, on one line, and hands back control on the right.
   It sits over the stream rather than pushing the page around, and the stream
   is given exactly its height back as padding so nothing scrolls under it. */
.demobar {
  position: absolute;
  z-index: 12;
  inset: 0 0 auto 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  /* Aligned with the column the formulas are in, not with the window. */
  padding: 8px max(40px, calc((100% - 880px) / 2 + 40px));
  background: var(--bg);
  font: 12.5px/1.45 var(--sans);
  color: var(--muted);
}
.demobar[hidden] { display: none; }
.demobar-text { flex: 1; min-width: 0; }
.demobar .tb { flex: none; padding: 0 4px; }
/* The line wraps on a narrow window, so the stream is given back whatever the
   bar actually measures rather than a number guessed here. */
body.demo-on #main { padding-top: var(--demobar-h, 34px); scroll-padding-top: calc(var(--demobar-h, 34px) + 10px); }

.stream, .pinned {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 40px 60px;
}

.empty {
  font: italic 15px/1.6 var(--serif);
  color: var(--muted);
  text-align: center;
  padding: 18vh 0 0;
}
.empty .hint { display: block; font: 12px var(--sans); color: var(--faint); margin-top: 10px; font-style: normal; }
.empty-link {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
}
.empty-link:hover { color: var(--ink); border-bottom-color: var(--faint); }
.empty-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Item ------------------------------------------------------------------- */

.item {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 var(--gap);
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-margin: 32px;
  transition: opacity var(--ease);
}
.item:focus { outline: none; }
.item.is-new { animation: rise 150ms ease-out both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.item.is-archived { opacity: 0.45; }

.item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--ease);
}
.item.is-current::before { opacity: 1; }
.item.is-pinned::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
/* Marked for compare (v): the same spot in the gutter, hollow, so it is still
   there after you scroll away to find the formula to compare it against.
   Pinned and marked together read as the dot inside its ring. */
.item.is-marked::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--accent);
}
.item.is-pinned.is-marked::after { background: var(--accent); }

/* The context line is the label in disguise, and it now carries mathematics of
   its own, so it reads a step up from an aside: still quiet, but not a
   whisper the eye slides off on the way to the formula. */
.item .context {
  margin: 0;
  font: 14px/1.5 var(--serif);
  color: var(--mid);
}
.item .label {
  margin: 0;
  font: 15px/1.5 var(--serif);
  color: var(--soft);
}
.item .note {
  margin: 0;
  font: italic 13.5px/1.45 var(--serif);
  color: var(--muted);
}

.math {
  font-size: calc(var(--math-px) * var(--scale));
  color: var(--ink);
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
  cursor: default;
  min-height: 1.4em;
  line-height: 1;
}
:root[data-align="left"] .math { text-align: left; }
.math svg { max-width: 100%; height: auto; overflow: visible; }
.tex-fallback { font: 0.72em/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; }
.tex-fallback .tex-raw { font: inherit; }
.tex-error { font: 11px var(--sans); color: var(--muted); margin-left: 6px; cursor: help; }

/* Inline math in prose ----------------------------------------------------- */

/* MathJax measures an inline formula in ex and hands over its own baseline
   offset, so it already comes out at the prose size and on the prose baseline.
   What it will not do is stay inside the line: a fraction is over two ems tall
   and would push the lines of a context line apart. So a rendered formula is
   hung inside a span that is exactly one line tall and as wide as the formula.
   Its width and baseline come from the SVG (see prose.js) and both are in ex,
   which resolves against the prose font. */
.imath { white-space: nowrap; }
.imath.is-svg {
  display: inline-block;
  position: relative;
  height: 1em;
  line-height: 1;
  vertical-align: -0.2em;
  max-width: 100%;
}
.imath.is-svg > svg {
  position: absolute;
  left: 0;
  bottom: calc(0.2em + var(--imath-baseline, 0px));
  max-width: 100%;
  overflow: visible;
}
.imath > .tex-fallback, .imath > .tex-raw {
  font: 0.86em/1 var(--mono);
  color: inherit;
  white-space: pre;
}

.source {
  position: relative;
  font: 12.5px/1.55 var(--mono);
  color: var(--soft);
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  padding: 4px 30px 4px 0;
  margin: 2px 0 0;
}
.source .ib { position: absolute; right: 0; top: 0; opacity: 0; }
.source:hover .ib, .source .ib:focus-visible { opacity: 1; }

.row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 26px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--ease);
}
.item:hover .row, .item.is-current .row, .item:focus-within .row, .row:focus-within { opacity: 1; }
.row .meta { display: inline-flex; align-items: baseline; gap: 8px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.row .num { color: var(--muted); }
.row .mark { color: var(--muted); font-size: 11px; }
.row .tag { color: var(--faint); font-size: 11px; }
.row .tag::before { content: "#"; opacity: 0.7; }

/* Path separators ---------------------------------------------------------- */

.sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 calc(var(--gap) * 0.7) 22px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.sep::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.archived-link {
  all: unset;
  cursor: pointer;
  display: block;
  margin: 0 0 0 22px;
  font-size: 12px;
  color: var(--faint);
}
.archived-link:hover { color: var(--muted); }
.archived-link:focus-visible { outline: 2px solid var(--accent); }

/* Paste field ------------------------------------------------------------- */

.paste {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 40px 70px 62px;
}
.paste input {
  all: unset;
  display: block;
  width: 100%;
  font: 13px var(--sans);
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
  transition: border-color var(--ease);
}
.paste input::placeholder { color: var(--faint); }
.paste input:focus { border-bottom-color: var(--faint); }

/* Pill --------------------------------------------------------------------- */

.pill {
  all: unset;
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 6px);
  background: var(--accent);
  color: var(--bg);
  font: 12px var(--sans);
  padding: 5px 12px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
  white-space: nowrap;
}
.pill.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pill.is-link { cursor: pointer; }

/* Paths view (board) ------------------------------------------------------- */

.board-wrap { height: 100%; }
.board {
  display: flex;
  gap: 32px;
  padding: 24px 40px 40px;
  min-height: 100%;
  overflow-x: auto;
  align-items: flex-start;
}
.col { flex: 0 0 min(560px, 80vw); display: flex; flex-direction: column; min-height: 200px; }
.col-head {
  all: unset;
  display: block;
  margin: 0 0 18px 22px;
  font: 12px var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: default;
}
.col-head[data-act] { cursor: text; }
.col-head[data-act]:hover { color: var(--ink); }
.col-body { flex: 1; min-height: 120px; border-radius: 6px; transition: background var(--ease); }
.col.is-over .col-body { background: var(--wash); }
.item[draggable="true"] { cursor: grab; }
.item.is-dragging { opacity: 0.4; }

/* Pinned view ---------------------------------------------------------------- */

.group-head {
  margin: 0 0 18px 22px;
  font: 12px var(--sans);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.group-head + .item { margin-top: 0; }
.group { margin-bottom: calc(var(--gap) * 0.5); }

/* Menu ---------------------------------------------------------------------- */

.menu {
  position: fixed;
  z-index: 40;
  min-width: 190px;
  padding: 5px 0;
  background: color-mix(in srgb, var(--bg) 97%, var(--ink));
  outline: 1px solid var(--hair);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--soft);
}
.menu button {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 14px;
}
.menu button:hover, .menu button:focus-visible { background: var(--wash); color: var(--ink); outline: none; }
.menu button[disabled] { color: var(--faint); cursor: default; }
.menu hr { border: 0; height: 1px; background: var(--hair); margin: 4px 0; }

/* Dialogs -------------------------------------------------------------------- */

dialog {
  border: 0;
  padding: 0;
  margin: auto;
  background: transparent;
  color: var(--ink);
  max-width: none;
  max-height: none;
  overflow: visible;
}
/* Nothing behind a dialog may still be readable. The small panels keep a
   lighter wash, blurred past legibility; focus and compare take the page. */
dialog::backdrop { background: rgba(251, 250, 248, 0.82); backdrop-filter: blur(10px); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(17, 18, 20, 0.82); }
:root[data-theme="paper"] dialog::backdrop { background: rgba(246, 240, 228, 0.82); }

dialog.focus::backdrop, dialog.compare::backdrop { background: #fbfaf8; backdrop-filter: blur(4px); }
:root[data-theme="dark"] dialog.focus::backdrop,
:root[data-theme="dark"] dialog.compare::backdrop { background: #111214; }
:root[data-theme="paper"] dialog.focus::backdrop,
:root[data-theme="paper"] dialog.compare::backdrop { background: #f6f0e4; }
dialog:focus, .panel:focus, .panel:focus-visible, .focus-body:focus, .compare-body:focus { outline: none; }

.panel {
  background: var(--bg);
  padding: 26px 30px 22px;
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow: auto;
  font-size: 13px;
  color: var(--soft);
  margin: 0;
}
.dlg-title {
  margin: 0 0 14px;
  font: italic 17px var(--serif);
  color: var(--soft);
}
.dlg-sub {
  margin: 22px 0 8px;
  font: 11px var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.dlg-text { margin: 0 0 12px; font: 14px/1.5 var(--serif); color: var(--soft); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 18px; }
.hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.hint code, .keys code { font: 11.5px var(--mono); }

.field {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: 14px/1.5 var(--serif);
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--faint);
  white-space: pre-wrap;
}
.field:focus { border-bottom-color: var(--accent); outline: none; }
textarea.field { resize: vertical; min-height: 4.5em; }

.setting { display: flex; align-items: center; gap: 12px; padding: 5px 0; }
.setting > span { flex: 0 0 90px; color: var(--muted); }
.setting output { color: var(--faint); font-variant-numeric: tabular-nums; margin-left: 4px; }
.setting input[type="range"] { flex: 1; accent-color: var(--accent); }
.choices { display: flex; gap: 12px; flex-wrap: wrap; }
.choices label, .checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.checks { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); margin: 0; }

.settings textarea {
  all: unset;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: 12.5px/1.55 var(--mono);
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--faint);
  white-space: pre;
  overflow: auto;
  resize: vertical;
  min-height: 5em;
}
.settings textarea:focus { border-bottom-color: var(--accent); }
.export-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.export-row > span { color: var(--muted); margin-right: 4px; }
.export-row > span + .tb + .tb { margin-right: 16px; }

.keys { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 0; }
.keys dt { font: 12px var(--mono); color: var(--ink); text-align: right; }
.keys dd { margin: 0; color: var(--muted); }

/* About panel ---------------------------------------------------------------- */

.panel.about { width: min(580px, 94vw); }
.about p { margin: 0 0 10px; font: 13.5px/1.6 var(--serif); color: var(--soft); }
.about p:last-child { margin-bottom: 0; }
.about code { font: 11.5px/1.5 var(--mono); color: var(--ink); }
.about a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--hair); }
.about a:hover { border-bottom-color: var(--accent); }
.about-lede { font-size: 14.5px !important; color: var(--ink) !important; }

/* Two windows, one hook. Hairlines only, in the palette the page already uses. */
.about-diagram { display: block; width: 100%; max-width: 372px; margin: 4px 0 16px; }
.about-diagram rect { fill: none; stroke: var(--faint); stroke-width: 1; }
.about-diagram .d-line { fill: none; stroke: var(--faint); stroke-width: 1; }
.about-diagram text { text-anchor: middle; font-family: var(--sans); }
.about-diagram .d-name { font-size: 12px; fill: var(--soft); }
.about-diagram .d-sub { font-size: 10.5px; fill: var(--faint); }

.about-steps { margin: 0; padding: 0 0 0 20px; }
.about-steps > li { margin: 0 0 16px; padding-left: 4px; }
.about-steps > li::marker { color: var(--faint); font: 11px var(--sans); }
.about-steps > li:last-child { margin-bottom: 0; }
.about-note { font-size: 12.5px !important; color: var(--muted) !important; }
.about-steps strong { font-weight: 600; color: var(--ink); }

/* The install line breaks between its words, never inside them, so it can be
   read as a command and not as a hyphenated paragraph. */
.cmd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 8px 0; }
.cmd code {
  align-self: stretch;
  font: 11.5px/1.7 var(--mono);
  color: var(--soft);
  word-break: normal;
  overflow-wrap: break-word;
  user-select: all;
}
.cmd .tb { flex: none; padding: 2px 4px; font-size: 11.5px; }

.says { display: grid; grid-template-columns: max-content 1fr; gap: 4px 24px; margin: 8px 0 0; align-items: baseline; }
.says dt { font: 13.5px/1.5 var(--serif); color: var(--soft); }
.says dd { margin: 0; font: 11.5px var(--mono); color: var(--muted); }

.about-list { margin: 0; padding: 0 0 0 18px; }
.about-list li { margin: 0 0 5px; font: 13.5px/1.6 var(--serif); color: var(--soft); }
.about-list li::marker { color: var(--faint); }

.about-mode[hidden] { display: none; }
.about-actions { margin-top: 4px; }
.about-actions .tb { padding: 4px 0; color: var(--accent); }
/* A button that lives inside a sentence keeps the sentence's rhythm. */
#about-keys { padding: 0; color: var(--accent); border-bottom: 1px solid var(--hair); border-radius: 0; }
#about-keys:hover { background: none; border-bottom-color: var(--accent); }
.about p.about-foot { margin-top: 22px; font: 12px var(--sans); color: var(--faint); }
.about .dlg-sub + p, .about .dlg-sub + .about-mode { margin-top: 0; }
.about .tb { font-family: var(--sans); }

.move-list { display: flex; flex-direction: column; gap: 2px; }
.move-list button {
  all: unset;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 5px;
  font: 14px var(--serif);
  color: var(--soft);
}
.move-list button:hover, .move-list button:focus-visible { background: var(--wash); color: var(--ink); outline: none; }
.move-list button[aria-current="true"]::after { content: " ·"; color: var(--accent); }
.move-list button.new-path { font: 12.5px var(--sans); color: var(--muted); margin-top: 6px; }

/* Focus dialog ----------------------------------------------------------------- */

dialog.focus {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
}
dialog.focus[open] { display: grid; place-items: center; }
.focus-body { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 92vw; }
.focus-label { margin: 0; font: 16px/1.5 var(--serif); color: var(--muted); text-align: center; max-width: 60ch; }
.focus-math { color: var(--ink); line-height: 1; max-width: 92vw; overflow-x: auto; padding: 8px 0; }
.focus-source {
  margin: 0;
  font: 13px/1.6 var(--mono);
  color: var(--soft);
  white-space: pre-wrap;
  max-width: 80ch;
  user-select: text;
}
.focus-index { position: absolute; left: 22px; bottom: 18px; font: 12px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.focus-hint { position: absolute; right: 22px; bottom: 18px; font: 12px var(--sans); color: var(--faint); }
.focus-close { position: absolute; right: 14px; top: 12px; }

/* Compare dialog ---------------------------------------------------------------- */

dialog.compare {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
}
dialog.compare[open] { display: grid; place-items: center; }
.compare-body { width: min(1200px, 94vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column; gap: 28px; }
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.compare-head { margin: 0 0 10px; font: 12px var(--sans); color: var(--muted); }
.compare-head .lbl { display: block; font: 14px/1.5 var(--serif); color: var(--soft); margin-top: 4px; }
.compare-math { font-size: calc(var(--math-px) * var(--scale) * 1.1); color: var(--ink); text-align: center; overflow-x: auto; line-height: 1; padding: 6px 0; }
.compare-diff {
  margin: 0 auto;
  font: 13px/1.7 var(--mono);
  color: var(--soft);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 90ch;
  user-select: text;
}
.compare-diff ins { text-decoration: none; background: var(--ins-tint); border-radius: 2px; color: var(--ink); }
.compare-diff del { text-decoration: none; background: var(--del-tint); border-radius: 2px; color: var(--ink); }
.compare-diff.is-same { font-style: italic; color: var(--muted); font-family: var(--serif); text-align: center; }
.compare-nav { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.compare-nav[hidden] { display: none; }

/* Responsive ----------------------------------------------------------------- */

@media (max-width: 640px) {
  .rail {
    position: fixed;
    left: 0;
    top: 42px;
    bottom: 0;
    z-index: 20;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--hair);
  }
  body { grid-template-columns: minmax(0, 1fr); }
  .stream, .pinned { padding: 20px 16px 40px; }
  .paste { padding: 0 16px 60px 38px; }
  .search input:focus, .search input.has-value { width: 120px; }
  /* A phone cannot hold the whole bar. Rather than clipping the controls on
     the right off the edge, the bar carries them and scrolls sideways. */
  .topbar { overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .wordmark { display: none; }
  .demobar { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .says { grid-template-columns: 1fr; gap: 1px 0; }
  .says dd { text-align: left; margin-bottom: 8px; }
  .views { margin-left: 2px; }
  .session-name { max-width: 16ch; }
  .compare-cols { grid-template-columns: 1fr; }
}

@media (hover: none) {
  .row, .topbar, .sess .ib, .source .ib { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Print: the formulas, nothing else --------------------------------------------- */

@media print {
  body { display: block; height: auto; overflow: visible; background: #fff; color: #000; }
  .topbar, .rail, .row, .paste, .pill, .menu, dialog, .archived-link, .source, .demobar { display: none !important; }
  .main-wrap, #main { height: auto; overflow: visible; padding-top: 0 !important; }
  .stream, .pinned { max-width: none; padding: 0; }
  .item { break-inside: avoid; padding-left: 0; }
  .item::before, .item::after { display: none; }
  .math { color: #000; }
}