/* The frame and the small parts every page shares: the masthead, buttons,
   the stance word, the second voice's mark, the keys sheet, the toast; and the
   plain pages (the front door, signing in, the list of trees).

   Rules: square corners, 1px rules, no shadows. Coral marks against and the
   second voice's control; focus uses --focus. */

body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.kicker { font: 400 11px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }

/* The stance, as a word. Against carries the accent; the word carries the meaning. */
.stance {
  display: inline-block;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
.stance[data-stance="against"] { color: var(--accent); }
.stance[data-stance="note"], .stance[data-stance="thesis"] { color: var(--text-2); }

/* The second voice: its own mark, an open square. */
.voice-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--pencil); }
.voice-name::before, .ask-mark {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border: 1px solid currentColor;
}
.ask-mark { color: var(--mark); }

/* Buttons. One primary per screen, in ink; the rest outlined or plain. */
.primary, .secondary, .danger, .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--page);
  font: 600 15px/1 var(--sans);
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--instant), border-color var(--instant), color var(--instant), transform var(--instant) var(--enter);
}
/* A press: the control gives a pixel, like a key. */
:is(.primary, .secondary, .danger, .keys-button, .theme-toggle, .map-zoom, .tree-action, .node-pending button, .toast button, .detail-close):active { transform: translateY(1px); }
.primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--page)); }
.secondary { background: transparent; color: var(--text); font-weight: 400; border-color: var(--rule-strong); }
.secondary:hover { background: var(--band); }
.danger { background: transparent; color: var(--accent); border-color: currentColor; font-weight: 400; }
.text-button { min-height: 36px; padding: 0; border: 0; background: none; color: var(--text-2); font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.text-button:hover { color: var(--text); }

/* Frame. */
.masthead {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 52px;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--page);
}
/* The name, its P the mark itself (D28): the stem stands on the baseline,
   a little taller than a capital like an initial, and the coral point is the
   P's bowl. */
.wordmark { display: inline-flex; align-items: baseline; gap: .07em; flex: none; font-weight: 600; font-size: 21px; line-height: 1; letter-spacing: -.035em; text-decoration: none; }
/* The mark beside the name: the stem takes the text colour, the point stays coral. */
.wordmark svg { flex: none; width: auto; height: .8em; overflow: visible; }
.tabs { display: flex; align-self: stretch; }
.tabs a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { color: var(--text); border-bottom-color: var(--rule-strong); }
.mast-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.mast-link { font: 400 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--text-2); display: inline-flex; align-items: center; min-height: 44px; }
.mast-link:hover { color: var(--text); }
.keys-button, .keys-close {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  background: transparent;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}
.keys-button:hover, .keys-close:hover { border-color: var(--rule-strong); }

.menu { position: relative; }
.menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  list-style: none;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-mark { width: 14px; height: 9px; border-block: 1px solid currentColor; position: relative; }
.menu-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid currentColor; }
.menu[open] .menu-sheet { animation: sheet-in var(--quick) var(--enter); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: grid;
  gap: 2px;
  width: 260px;
  padding: 14px 16px 16px;
  border: 1px solid var(--rule-strong);
  background: var(--page);
}
.menu-who { overflow: hidden; text-overflow: ellipsis; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--text-2); }
.menu-sheet > a, .menu-sheet button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
}
.menu-sheet > a:hover, .menu-sheet button:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Each entry carries a small picture of where it goes, so the menu reads at a glance. */
.menu-sheet > a, .menu-sheet button { gap: 12px; }
.menu-sheet .icon { color: var(--text-2); transition: color var(--instant); }
.menu-sheet > a:hover .icon, .menu-sheet button:hover .icon,
.menu-sheet > a:focus-visible .icon, .menu-sheet button:focus-visible .icon { color: var(--text); }
/* The family, named beside the mark on the front page, as c-pointlabs.com
   names itself: a thin rule, then a mono line. */
.mast-family { display: inline-flex; align-items: center; min-height: 26px; padding-left: clamp(12px, 1.6vw, 22px); border-left: 1px solid var(--rule); font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--text-2); transition: color var(--instant); }
.mast-family:hover { color: var(--text); }
@media (max-width: 720px) {
  .masthead { gap: 10px; }
  .mast-family { display: none; }
  .mast-link, .menu-word { display: none; }
  .menu summary { min-width: 44px; justify-content: center; }
  .tabs a { padding: 0 8px; }
}
@media (hover: none) and (pointer: coarse) { .keys-button { display: none; } .theme-toggle { position: relative; } .theme-toggle::after { content: ""; position: absolute; inset: -4px; } }

/* The instrument: how the top of the map leans, as a needle on a scale from
   for (left, where for stands on the map) to against (right). It swings
   slowly, like a needle with weight; it leans coral when the case leans
   against. Fixed width, so the masthead never moves. */
.balance {
  --w: 132px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
  user-select: none;
}
.balance-side { transition: color var(--settle) var(--move); }
.balance[data-leans="for"] .balance-for { color: var(--text); }
.balance[data-leans="against"] .balance-against { color: var(--accent); }
/* The scale: end ticks, an ink rule toward for, a coral rule toward against;
   where they meet is the middle. */
.balance-scale { position: relative; flex: none; width: var(--w); height: 9px; border-inline: 1px solid var(--rule-strong); }
.balance-scale::before, .balance-scale::after { content: ""; position: absolute; top: 4px; width: 50%; height: 1px; }
.balance-scale::before { left: 0; background: var(--rule-strong); }
.balance-scale::after { right: 0; background: var(--mark); }
.balance-needle {
  position: absolute;
  left: -1px;
  top: -4px;
  z-index: 1;
  width: 3px;
  height: 17px;
  background: var(--text);
  transform: translateX(calc((1 - var(--share)) * (var(--w) - 3px)));
  transition: transform var(--slow) var(--move), background-color var(--settle) var(--move), opacity var(--settle);
}
.balance[data-leans="against"] .balance-needle { background: var(--mark); }
.balance[data-empty] .balance-needle { opacity: .3; }
@media (max-width: 1100px) { .balance { --w: 96px; } }
/* A phone's masthead has no room: the instrument stands in the map's top
   right corner instead, opposite "Whole tree", in the same frame. */
@media (max-width: 720px) {
  .masthead .balance {
    --w: 64px;
    position: fixed;
    top: 62px;
    right: 10px;
    z-index: 5;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--rule-strong);
    background: var(--page);
    font-size: 10px;
  }
}

/* Icons: line drawings in the text's colour, square ends, never filled but for
   the half that marks "follows your device". */
.icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.icon .fill { fill: currentColor; stroke: none; }
.primary .icon { width: 14px; height: 14px; }

/* The theme: one square button, its icon the mode in use. */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--instant), background-color var(--instant), transform var(--instant);
}
.theme-toggle:hover { border-color: var(--rule-strong); background: var(--hover); }
.theme-toggle .theme-icon { grid-area: 1 / 1; display: none; }
:root:not([data-theme]) .theme-toggle .theme-system,
:root[data-theme="light"] .theme-toggle .theme-light,
:root[data-theme="dark"] .theme-toggle .theme-dark { display: block; }
/* It turns only when pressed, never on arrival. */
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle.is-turning .theme-icon { animation: turn var(--settle) var(--enter); }
}
@keyframes turn { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Saving, said quietly: present while it matters, gone when it does not. */
.save-state {
  flex: none;
  width: 84px;
  white-space: nowrap;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: right;
  color: var(--text-2);
  transition: opacity var(--settle) var(--enter);
}
.save-state[data-save-state="idle"] { transition-duration: var(--slow); }
.save-state[data-save-state="idle"] { opacity: 0; }
.save-state[data-save-state="saved"]::before { content: "✓ "; }
.save-state[data-save-state="failed"] { color: var(--accent); }
/* A phone has no room for words up here: a mark while saving, the words only when it failed. */
@media (max-width: 720px) {
  .keys-button { display: none; }
  .save-state { width: 14px; overflow: hidden; white-space: nowrap; font-size: 0; }
  .save-state[data-save-state="saving"]::before { content: "…"; font-size: 13px; }
  .save-state[data-save-state="saved"]::before { content: "✓"; font-size: 12px; }
  .save-state[data-save-state="failed"] { width: auto; font-size: 11px; }
}

/* Plain pages. */
.narrow { width: min(100% - 2 * var(--gutter), 640px); margin: 0 auto; padding: clamp(48px, 9vw, 120px) 0 96px; }
.page-title { margin-top: 12px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.page-lede { margin-top: 16px; max-width: 36em; font-size: 18px; line-height: 1.5; color: var(--text-2); }
.page-note { margin-top: 18px; font-size: 15px; color: var(--text-2); }
.narrow form { margin-top: 28px; }
.form-problem { margin-top: 10px; font-size: 15px; color: var(--accent); }
/* The code that joins a sign-in to an account (D35): the front page's field
   and button, one instrument; the digits in mono, spaced to be read back. */
.code-field { display: flex; max-width: 440px; margin-top: 8px; border: 1px solid var(--rule-strong); background: var(--field); }
.code-field input { flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; border: 0; background: transparent; font: 400 22px/1 var(--mono); letter-spacing: .12em; }
.code-field input::placeholder { color: var(--text-2); opacity: .5; }
.code-field input:focus, .code-field button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.code-field .primary { justify-content: space-between; gap: 28px; min-height: 56px; margin: -1px -1px -1px 0; padding: 0 16px 0 20px; font-size: 15px; }
.code-field .front-arrow { display: inline-block; color: var(--mark); font-size: 19px; font-weight: 400; line-height: 1; transition: transform var(--instant) var(--enter); }
.code-field .primary:hover .front-arrow, .code-field .primary:focus-visible .front-arrow { transform: translateX(4px); }
.verify-email { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.verify-steps { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--rule); counter-reset: none; }
.verify-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; }
.verify-n { font: 400 12px/1 var(--mono); letter-spacing: .06em; color: var(--mark); }
.verify-steps + form { margin-top: 28px; }
.verify-go { justify-content: space-between; gap: 28px; min-height: 56px; padding: 0 16px 0 20px; }
.verify-go .front-arrow { display: inline-block; color: var(--mark); font-size: 19px; font-weight: 400; line-height: 1; transition: transform var(--instant) var(--enter); }
.verify-go:hover .front-arrow, .verify-go:focus-visible .front-arrow { transform: translateX(4px); }
@media (max-width: 600px) {
  .code-field { flex-direction: column; gap: 8px; border: 0; background: none; }
  .code-field input { border: 1px solid var(--rule-strong); background: var(--field); }
  .code-field .primary { margin: 0; }
  .verify-go { width: 100%; }
}

/* Privacy and terms: a memo to read, ruled like the report. */
.legal-date { margin-top: 14px; font: 400 11px/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.legal h2 { margin-top: 44px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.legal p, .legal li { font-size: 16px; line-height: 1.62; }
.legal p { margin-top: 12px; max-width: 36em; }
.legal ul { margin-top: 12px; padding-left: 0; list-style: none; max-width: 36em; }
.legal li { position: relative; padding-left: 20px; }
.legal li + li { margin-top: 10px; }
.legal li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal code { font: 400 .9em/1 var(--mono); }
.legal a { text-underline-offset: 3px; }
.legal-end { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 64px; padding-top: 14px; border-top: 1px solid var(--rule); }
.legal-end a { display: inline-flex; align-items: center; min-height: 44px; font: 400 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* A field and its button on one line (signing in for testing). */
.front-row { display: flex; gap: 8px; margin-top: 8px; }
.front-row input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rule-strong);
  background: var(--field);
  font-size: 17px;
}
.front-row input:focus { outline: 3px solid var(--focus); outline-offset: 1px; }
.front-row button { min-height: 48px; }
@media (max-width: 480px) {
  .front-row { flex-direction: column; }
}

/* Your trees (the rest is desk.css): a tree's small actions, and the bar
   that offers to undo a deletion. */
.tree-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: none;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  cursor: pointer;
}
.tree-action:hover { border-color: var(--rule-strong); color: var(--text); }
.tree-delete:hover { color: var(--accent); border-color: currentColor; }
.undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 10px 10px 10px 16px;
  background: var(--text);
  color: var(--page);
  animation: drop var(--settle) var(--enter);
}
.undo-bar p { font-size: 15px; min-width: 0; }
.undo-bar .secondary { color: var(--page); border-color: currentColor; min-height: 44px; }
.undo-bar .secondary:hover { background: transparent; text-decoration: underline; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* Shared by the desk and the setup (D38): the map's paper, a row of bars over
   days, a button that leads on, and a band of readings. */
/* The paper the map stands on: a step below the page, ruled in squares. */
.paper { position: relative; isolation: isolate; display: block; overflow: hidden; background: var(--map); color: var(--text); }
.paper::before, .paper::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.paper::before {
  background: var(--grid);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 .5H24M.5 0V24' stroke='black'/%3E%3C/svg%3E") 0 0 / 24px 24px repeat;
}
.paper::after {
  background: var(--grid-major);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 .5H120M.5 0V120' stroke='black'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
}

/* A row of bars over days. */
.bars { display: block; width: 100%; shape-rendering: crispEdges; }
.bars-some { fill: var(--text); }
.bars-none { fill: var(--rule); }

/* Buttons that lead on: the words, then a coral arrow (as on the front page). */
.go { justify-content: space-between; gap: 28px; min-height: 52px; padding: 0 16px 0 20px; }
.go-arrow { display: inline-block; color: var(--mark); font-size: 19px; font-weight: 400; line-height: 1; transition: transform var(--instant) var(--enter); }
.go:hover .go-arrow, .go:focus-visible .go-arrow { transform: translateX(4px); }

/* The readings: one ruled band, a hairline between each. */
.reading-row { display: flex; border-bottom: 1px solid var(--rule); }
.reading { flex: 1 1 0; min-width: 0; padding: 16px 20px 18px; border-left: 1px solid var(--rule); }
.reading:first-child { padding-left: 0; border-left: 0; }
.reading:last-child { padding-right: 0; }
.reading-days { flex-grow: 1.7; }
.reading dd { margin: 0; }
.reading-value { margin-top: 10px; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reading-value.is-words { font-size: 21px; line-height: 34px; letter-spacing: -.02em; }
.reading-of { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.reading-bars { height: 34px; margin-top: 10px; }
.reading-bars .bars { height: 34px; }
.reading-note { margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.reading-note a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; color: var(--text); text-underline-offset: 4px; }
/* A finger's room around a short link, without moving the band. */
.reading-note a { position: relative; }
.reading-note a::after { content: ""; position: absolute; inset: -10px -8px; }
.reading-arrow { color: var(--mark); transition: transform var(--instant) var(--enter); }
.reading-note a:hover .reading-arrow, .reading-note a:focus-visible .reading-arrow { transform: translateX(3px); }

@media (max-width: 1100px) {
  .reading { padding-inline: 14px; }
  .reading-value { font-size: 30px; }
}
@media (max-width: 860px) {
  .reading-row { display: grid; grid-template-columns: 1fr 1fr; }
  .reading, .reading:first-child, .reading:last-child { padding: 14px 0 16px; border-left: 0; border-top: 1px solid var(--rule); }
  .reading:nth-child(-n + 2) { border-top: 0; }
  /* Two to a row; a reading marked wide takes a row of its own. */
  .reading.is-right { padding-left: 16px; border-left: 1px solid var(--rule); }
  .reading-days { grid-column: 1 / -1; }
  /* One left over takes the row: the band never ends on half a row. */
  .reading-row:has(.reading-days) .reading:last-child:nth-child(even),
  .reading-row:not(:has(.reading-days)) .reading:last-child:nth-child(odd) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}

/* The voice's point: coral, beside a line on who answers. */
.voice-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mark); }

/* Keys: a sheet that stays out of the way until asked for. */
.keys {
  inset: 60px var(--gutter) auto auto;
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100dvh - 80px);
  margin: 0;
  padding: 18px 20px 20px;
  overflow: auto;
  border: 1px solid var(--rule-strong);
  background: var(--page);
  color: var(--text);
}
.keys::backdrop { background: transparent; }
.keys { transition: opacity var(--quick) var(--enter), transform var(--quick) var(--enter), overlay var(--quick) allow-discrete, display var(--quick) allow-discrete; }
.keys:not(:popover-open) { opacity: 0; transform: translateY(-4px); transition-timing-function: var(--exit); }
@starting-style { .keys:popover-open { opacity: 0; transform: translateY(-4px); } }
.keys-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.keys-mouse { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.keys-title { margin: 16px 0 6px; font-size: 14px; }
.keys-list > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.4; }
.keys-list dd { margin: 0; color: var(--text-2); }
.keys-list kbd, .map-start kbd, .compose-hint kbd { display: inline-block; padding: 2px 4px; border: 1px solid var(--rule); color: var(--text); }


.toast {
  position: fixed;
  left: var(--gutter);
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 8px 8px 8px 16px;
  background: var(--text);
  color: var(--page);
  font-size: 14px;
  overflow: hidden;
}
/* Arriving from below, leaving downward; while it stays, a hairline says how long undo lasts. */
.toast.is-in { animation: toast-in var(--settle) var(--enter); }
.toast.is-out { animation: toast-out var(--quick) var(--exit) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.toast-time { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mark); transform-origin: left; animation: toast-time linear forwards; }
.toast:hover .toast-time, .toast:focus-within .toast-time { animation-play-state: paused; }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast button { min-height: 36px; padding: 0 12px; border: 1px solid currentColor; background: none; color: inherit; font: 400 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.toast :focus-visible { outline-color: var(--mark); }
.toast button:hover { background: color-mix(in srgb, var(--page) 14%, transparent); }
@media (max-width: 720px) { .toast { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; } .toast button { min-height: 44px; margin-left: auto; } }

/* The language (D43): signed out, a square in the masthead beside the theme,
   its code in mono; open, the four by their own names. Signed in, the same
   four codes stand in a row at the foot of the menu. */
.lang { position: relative; }
.lang summary {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  list-style: none;
  border: 1px solid var(--rule);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--instant), background-color var(--instant);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { border-color: var(--rule-strong); background: var(--hover); }
.lang-code { font: 400 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.lang[open] .lang-sheet { animation: sheet-in var(--quick) var(--enter); }
.lang-sheet {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 40;
  display: grid;
  width: 220px;
  padding: 14px 16px 12px;
  border: 1px solid var(--rule-strong);
  background: var(--page);
}
.lang-title { margin: 0 0 6px; font: 400 11px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.lang-sheet button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  font-size: 15px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}
.lang-sheet button .lang-code { color: var(--text-2); }
.lang-sheet button:hover .lang-name { text-decoration: underline; text-underline-offset: 4px; }
/* The language in use: its name in semibold and a short ink rule before it. */
.lang-sheet button[aria-current] .lang-name { font-weight: 600; }
.lang-sheet button[aria-current] .lang-name::before { content: ""; display: inline-block; width: 10px; margin-right: 8px; vertical-align: middle; border-top: 2px solid currentColor; }
.menu-lang { display: flex; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--rule); }
.menu-sheet .menu-lang button {
  flex: 1;
  justify-content: center;
  width: auto;
  min-height: 44px;
  font: 400 11px/1 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-2);
}
.menu-sheet .menu-lang button:hover { color: var(--text); }
.menu-sheet .menu-lang button[aria-current] { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }