/* Simpl.day landing — level-driven top bar, Dialog page, Developers page.
   Kept out of styles.css (already 5.6k lines). Loaded after it on every page.

   Everything below is built from the token block that follows. Three radii,
   two shadows, two button roles, one link role, one danger colour, and one
   type scale per voice (Inter for chrome, Spectral for the reading column).
   A literal value anywhere else in this file is a bug. */

/* ════════════════════════════════════════════════════════════════════════
   Tokens
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* Teal, used only for "something of yours is here": comment counts,
     the section chip, the version picker, the chat bubble. */
  --chip: #7cc4dd;
  --chip-ink: #bfe6f5;

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The document keeps its warm voice in BOTH themes. styles.css's --accent
     turns blue in dark, which would repaint the whole framework cold. */
  --accent-doc: #b4753a;

  /* One danger colour, from the per-theme token styles.css already defines. */
  --danger: var(--form-status-error);
  /* Its pair: the one "good / in focus" colour. */
  --ok: var(--form-status-ok);

  /* The highlighter's one yellow. Translucent rather than solid, so it tints
     the page it lands on and the words keep the theme's own ink — which is
     why it does not need a second value for the light theme, and why the
     editor can hand this literal straight to the browser's own highlight
     command without the two drifting apart. */
  --dlg-hl: rgba(255, 209, 77, 0.38);

  /* Three radii: a pill, a card, a control. Nothing else. */
  --r-pill: 999px;
  /* The page shells, as tokens: the subbar has to line its first tab up with
     the content column, and it can only do that if it knows the same numbers. */
  --page-max: 44rem;              /* a reading measure, deliberately narrow */
  /* Every wide shell is the dialog reader's shell. One number, so the bars,
     the pages and the investors story cannot drift apart at the edges. */
  --page-max-wide: var(--dlg-max);
  --page-pad: var(--dlg-pad);
  /* Room the bottom formatting bar occupies: its own height plus the gap it
     floats in, plus whatever the phone reserves below it. */
  --edit-bar-h: calc(env(safe-area-inset-bottom, 0px) + 4.1rem);
  --r-card: 16px;
  --r-control: 10px;

  /* Two shadows: a thing resting on the page, a thing floating above it. */
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 16px 44px rgba(0, 0, 0, 0.22);

  /* The minimum a finger can reliably hit. */
  --tap: 2.75rem;

  /* The Dialog page's measurements. The docked composer reuses all four so it
     lands exactly under the document column instead of centring on the window. */
  --dlg-max: 68rem;
  /* The margin the heading numbers hang in, wide enough for s.1.1.1. */
  --dlg-rail: 4.25rem;
  /* The column a list marker hangs in, wide enough for "10." and its gap. */
  --dlg-lmark: 1.65rem;
  --dlg-pad: clamp(1rem, 4vw, 2rem);
  --dlg-gap: 1.6rem;

  /* Scrim behind anything modal. */
  --scrim: rgba(20, 16, 12, 0.45);

  /* Status hues come from the diagram palette styles.css already themes. */
  --dot-live: var(--dia-teal);
  --dot-draft: var(--dia-sand);
  --dot-archived: var(--muted2);

  /* This file's chrome scale. Maps to the site scale on a wide screen and
     steps up on a phone, where 14px chrome under an 18px document reads as
     an afterthought. Kept separate so the phone bump cannot leak into the
     pages styles.css already tuned. */
  --ui-xs: var(--fs-xs);
  --ui-sm: var(--fs-sm);
  --ui-base: var(--fs-base);
  --ui-md: var(--fs-md);
  --ui-lg: var(--fs-lg);
  --ui-xl: var(--fs-xl);
  --ui-2xl: var(--fs-2xl);

  /* The reading column's own scale. Separate from the UI scale on purpose —
     a serif document sets larger than chrome — but a scale all the same.
     The phone block near the bottom redefines these five, and nothing else. */
  --ds-body: 1.06rem;
  --ds-h1: 2rem;
  --ds-h2: 1.7rem;
  --ds-h3: 1.3rem;
  --ds-h4: 1.1rem;
  --ds-lead: 1.65;
}
html[data-theme="light"] {
  --chip: #4d8fa6;
  --chip-ink: #2f6f86;
  --accent-doc: #9c5a17;
  --shadow-pop: 0 16px 44px rgba(60, 48, 30, 0.16);
  --shadow-card: 0 10px 30px rgba(60, 48, 30, 0.1);
}

/* styles.css clears the fixed bar with `body { padding-top: 3.65rem }` — a
   guess that is short whenever the bar wraps. access.js measures the bar and
   writes --nav-h, so hand the job to it once, here, for every page. */
body { padding-top: var(--nav-h); }

/* ════════════════════════════════════════════════════════════════════════
   Controls — two button roles, one link role
   Class names stay as the JS writes them; the styling is shared.
   ════════════════════════════════════════════════════════════════════════ */

/* Every button-shaped control. */
.top-bar__enter,
.top-bar__loginbtn,
.top-bar__requestbtn,
.acct__action,
.dlg-nav-toggle,
.dlg-dock__edit,
.adm .btn-primary,
.adm .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--ui-base);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.top-bar__loginbtn:hover,
.acct__action:hover,
.dlg-nav-toggle:hover,
.dlg-dock__edit:hover,
.adm .btn-ghost:hover {
  color: var(--text);
  border-color: var(--text);
}

/* The one filled role. At most one per view. */
.top-bar__enter,
.top-bar__requestbtn,
.acct__action--primary,
.adm .btn-primary {
  background: var(--btn-pill-primary-bg);
  color: var(--btn-pill-primary-fg);
  border-color: transparent;
}
.top-bar__enter:hover,
.top-bar__requestbtn:hover,
.acct__action--primary:hover,
.adm .btn-primary:hover {
  filter: var(--btn-pill-primary-hover);
  color: var(--btn-pill-primary-fg);
  text-decoration: none;
}

.top-bar__enter:disabled,
.adm button:disabled,
.dlg-dock__send:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
}

/* Text actions. One size, one weight, one colour, everywhere. */
.dlg-count,
.dlg-c__edit {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.15rem;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: var(--ui-base);
  font-weight: 600;
  color: var(--chip-ink);
  cursor: pointer;
}
.dlg-c__edit:hover { text-decoration: underline; }
/* Removing is the destructive one, so it does not wear the action colour. */
.dlg-c__remove { color: var(--muted2); }
.dlg-c__remove:hover { color: var(--danger); }

/* One focus ring for everything a keyboard can reach. */
.top-bar__email,
.top-bar__enter,
.top-bar__loginbtn,
.top-bar__requestbtn,
.top-bar__page,
.acct-av,
.acct__action,
.acct__foot a,
.dlg-nav-toggle,
.dlg-nav__doc,
.dlg-nav__chev,
.dlg-nav__new,
.dlg-nav__pin,
.dlg-nav__sec,
.dlg-nav__ver,
.dlg-count,
.dlg-c__edit,
.dlg-chip,
.dlg-dock__edit,
.dlg-dock__send,
.login-modal__close,
.adm input,
.adm select,
.adm .btn-primary,
.adm .btn-ghost,
.adm details summary {
  outline-color: var(--focus-ring);
}
.top-bar__email:focus-visible,
.top-bar__enter:focus-visible,
.top-bar__loginbtn:focus-visible,
.top-bar__requestbtn:focus-visible,
.top-bar__page:focus-visible,
.acct-av:focus-visible,
.acct__action:focus-visible,
.acct__foot a:focus-visible,
.dlg-nav-toggle:focus-visible,
.dlg-nav__doc:focus-visible,
.dlg-nav__chev:focus-visible,
.dlg-nav__new:focus-visible,
.dlg-nav__pin:focus-visible,
.dlg-nav__sec:focus-visible,
.dlg-nav__ver:focus-visible,
.dlg-count:focus-visible,
.dlg-c__edit:focus-visible,
.dlg-chip:focus-visible,
.dlg-dock__edit:focus-visible,
.dlg-dock__attach:focus-visible,
.dlg-attach-menu__item:focus-visible,
.dlg-dock__send:focus-visible,
.login-modal__close:focus-visible,
.adm input:focus-visible,
.adm select:focus-visible,
.adm .btn-primary:focus-visible,
.adm .btn-ghost:focus-visible,
.adm details summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-control);
}

/* Text fields, wherever they appear. */
.top-bar__email,
.adm input[type="text"],
.adm input[type="email"],
.adm input[type="search"],
.adm select {
  min-height: var(--tap);
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--ui-base);
  outline: none;
}

/* One status line, one error colour. */
.top-bar__status,
.dlg-dock__status,
.adm-status {
  font-family: var(--sans);
  font-size: var(--ui-xs);
  color: var(--muted2);
  margin: 0.35rem 0 0;
}
.top-bar__status.is-error,
.dlg-dock__status.is-error,
.adm-status.is-error { color: var(--danger); }
.top-bar__status:empty,
.dlg-dock__status:empty { display: none; }

/* Any `display` above would otherwise beat the attribute, and a control that
   is supposed to be hidden but is not is a bug every single time. One rule,
   rather than a list that has to be kept in step with the markup. */
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   Top bar
   ════════════════════════════════════════════════════════════════════════ */
.top-bar__inner {
  display: grid;
  /* The pages sit beside the wordmark, not in the middle of the bar: the
     wordmark says whose site this is and the row of pages says where in it
     you are, and the two read as one sentence when they are next to each
     other. The middle column takes the slack, so the links keep their place
     against the wordmark whether or not the page carries editing controls —
     it is the empty space that grows and shrinks, not the nav. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
}
.top-bar__brand { justify-self: start; }
.top-bar__links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.8rem);
  /* A touch more air than the grid gap, so the first page is clearly a page
     and not the second half of the wordmark. */
  margin-left: clamp(0.2rem, 1.5vw, 1rem);
  min-width: 0;
  flex-wrap: wrap;
}
.top-bar__page {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--serif);
  font-size: var(--ui-xl);
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.top-bar__page:hover { color: var(--text); text-decoration: none; }
.top-bar__page.is-current { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.top-bar__right { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }
.top-bar__me { position: relative; display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
.top-bar__gate { display: flex; align-items: center; gap: 0.4rem; }
.top-bar__email { width: clamp(9rem, 22vw, 15rem); }
.top-bar__code { width: 7rem; letter-spacing: 0.12em; }

@media (max-width: 40rem) {
  .top-bar__inner { grid-template-columns: auto auto; }
  /* One row, always. Five destinations do not fit across a phone, and wrapping
     put a single orphan on a second line — a ragged two-row bar that moved the
     whole page down by its height. A phone scrolls sideways here instead: the
     row bleeds into the bar's own gutter so a link half-off the edge reads as
     "there is more", not as a link that was cut. */
  .top-bar__links {
    grid-column: 1 / -1; order: 3;
    justify-content: flex-start;
    gap: 1.1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2rem));
    padding-inline: clamp(1.1rem, 4vw, 2rem);
  }
  .top-bar__links::-webkit-scrollbar { display: none; }
  .top-bar__links:empty { display: none; }
  .top-bar__page { font-size: var(--ui-lg); min-height: var(--tap); flex: 0 0 auto; }
  .top-bar__email { width: clamp(7.5rem, 38vw, 11rem); }
  .top-bar__loginbtn, .top-bar__requestbtn { padding: 0.4rem 0.8rem; font-size: var(--ui-sm); }
}

/* Editing puts six controls in the bar. Below the width where wordmark, pages
   and controls fit on one line, the middle column shrank to nothing and the
   pages stacked one per line, a bar taller than the document under it. The
   pages take a row of their own instead, as they do on a phone. */
@media (max-width: 80rem) {
  .top-bar__inner:has(.top-bar__edit:not(:empty)) { grid-template-columns: auto auto; }
  .top-bar__inner:has(.top-bar__edit:not(:empty)) .top-bar__links {
    grid-column: 1 / -1; order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: 0;
  }
  .top-bar__inner:has(.top-bar__edit:not(:empty)) .top-bar__page { flex: 0 0 auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   Login modal
   ════════════════════════════════════════════════════════════════════════ */
.login-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: var(--scrim);
  backdrop-filter: blur(4px);
}
.login-modal__card {
  position: relative;
  width: min(22rem, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.4rem 1.3rem 1.2rem;
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.login-modal__close {
  position: absolute; top: 0.4rem; right: 0.5rem;
  width: var(--tap); height: var(--tap);
  border-radius: 50%;
  border: none; background: transparent; color: var(--muted2);
  font-size: var(--ui-2xl); line-height: 1; cursor: pointer;
}
.login-modal__close:hover { color: var(--text); }
.login-modal__title {
  font-family: var(--serif); font-size: var(--ds-h3);
  font-weight: 600; color: var(--text); margin: 0;
}
.login-modal__sub { font-size: var(--ui-base); color: var(--muted2); margin: -0.4rem 0 0.2rem; }
.login-modal__form { display: flex; gap: 0.5rem; align-items: center; }
.login-modal__form .top-bar__email { flex: 1; width: auto; min-width: 0; }
.login-modal .top-bar__status { text-align: center; }

/* ════════════════════════════════════════════════════════════════════════
   Account menu — one avatar is the whole control
   ════════════════════════════════════════════════════════════════════════ */
.acct-av {
  width: var(--tap); height: var(--tap); flex: none;
  border-radius: 50%;
  border: 1px solid transparent;
  background: var(--btn-pill-primary-bg);
  color: var(--btn-pill-primary-fg);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.acct-av:hover { filter: var(--btn-pill-primary-hover); }
.acct-av.is-waiting { background: var(--card); color: var(--muted); border-color: var(--border); }
.acct-av.is-waiting svg { width: 1.25rem; height: 1.25rem; }

/* Lives on <body>, not in the bar: the bar's backdrop-filter would make it the
   containing block for anything fixed inside it, clipping this to the bar's
   own height. */
.acct-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  z-index: 130;
  width: min(20rem, 86vw);
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom));
  background: var(--card);
  border: none;
  border-left: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-pop);
  text-align: center;
  overflow-y: auto;
}
.acct-scrim { position: fixed; inset: 0; z-index: 125; background: var(--scrim); }

.acct__email {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  margin: 0 0 0.8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct__av {
  display: inline-flex; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--btn-pill-primary-bg); color: var(--btn-pill-primary-fg);
  align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--ds-h4); font-weight: 700;
  margin-bottom: 0.55rem;
}
.acct__av.is-waiting { background: var(--bg-elevated); color: var(--muted2); }
.acct__hi {
  font-family: var(--serif); font-size: var(--ds-h4); font-weight: 600;
  color: var(--text); margin: 0 0 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct__lvl { font-family: var(--sans); font-size: var(--ui-base); color: var(--muted); margin: 0 0 0.9rem; }
.acct__note {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  line-height: 1.5; margin: 0 0 0.9rem;
}
.acct__action { display: flex; width: 100%; margin: 0 0 0.5rem; color: var(--text); }
.acct__foot {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  margin: 0.6rem 0 0; padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
}
.acct__foot a {
  display: inline-flex; align-items: center; min-height: 2rem;
  padding: 0 0.3rem; color: var(--muted2); text-decoration: none;
}
.acct__foot a:hover { color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════
   Page shells
   ════════════════════════════════════════════════════════════════════════ */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.4rem var(--page-pad) 4rem;
}
.page--wide { max-width: var(--page-max-wide); }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — layout
   The document owns the column at every width; the pane is a drawer behind
   the "Contents" button. One pane, one shape.
   ════════════════════════════════════════════════════════════════════════ */
.dlg-layout {
  max-width: var(--dlg-max);
  margin: 0 auto;
  padding: 1.2rem var(--dlg-pad) 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dlg-gap);
}
.dlg-main { min-width: 0; }

.dlg-nav { font-family: var(--sans); min-width: 0; }
.dlg-nav__label {
  font-size: var(--ui-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted2); margin: 0 0 0.6rem;
}
.dlg-nav__head { display: flex; align-items: center; gap: 0.3rem; }
.dlg-nav__head .dlg-nav__label { flex: 1 1 auto; margin: 0 0 0.6rem; }
/* The pin leans over while the pane is loose and stands upright once it is
   fixed — the state is the icon, not a second label. */
.dlg-nav__pin {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; margin-bottom: 0.6rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-control);
  background: none; color: var(--muted2);
}
.dlg-nav__pin svg {
  width: 1rem; height: 1rem;
  transform: rotate(-38deg);
  transition: transform 0.18s ease;
}
.dlg-nav__pin:hover { color: var(--text); border-color: var(--line-soft); background: var(--bg-elevated); }
.dlg-nav__pin.is-pinned { color: var(--accent-doc); border-color: var(--accent-doc); }
.dlg-nav__pin.is-pinned svg { transform: none; }
/* Below the workspace width there is one column, and a pinned pane would be
   the whole screen — so it is not offered, the same as "open beside". */
@media (max-width: 47.99rem) { .dlg-nav__pin { display: none; } }
@media (prefers-reduced-motion: reduce) { .dlg-nav__pin svg { transition: none; } }
/* Founder-only, and never rendered for a reader. Dashed and quiet: it stands
   at the head of the list without reading as one of the documents in it. */
.dlg-nav__new {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; width: 100%;
  min-height: 2.25rem; margin: 0 0 0.9rem;
  padding: 0.2rem 0.8rem;
  border: 1px dashed var(--line-strong); border-radius: var(--r-pill);
  background: none; color: var(--muted2);
  font-family: var(--sans); font-size: var(--ui-sm); text-align: left;
}
.dlg-nav__new:hover { color: var(--text); border-color: var(--chip); background: var(--bg-elevated); }
.dlg-nav__search {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 2.25rem; margin: 0 0 0.9rem;
  padding: 0.2rem 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--card); color: var(--text);
  font-family: var(--sans); font-size: var(--ui-sm);
}
.dlg-nav__search::placeholder { color: var(--muted2); }
.dlg-nav__search:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.dlg-nav__hits { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); }
.dlg-nav__hits .dlg-nav__note { margin-left: 0; }
.dlg-nav__hit {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.45rem 0.5rem 0.45rem 0.7rem; margin-bottom: 0.3rem;
  border-left: 2px solid var(--line-soft);
  color: var(--muted); text-decoration: none; line-height: 1.35;
  font-size: var(--ui-sm);
}
.dlg-nav__hit:hover { color: var(--text); background: var(--bg-elevated); text-decoration: none; }
.dlg-nav__hit-doc { font-family: var(--serif); font-size: var(--ui-base); color: var(--text); }
.dlg-nav__hit-head { color: var(--accent-doc); font-weight: 600; }
.dlg-nav__hit-snip mark { background: var(--dlg-hl); color: var(--text); font-weight: 600; }
.dlg-nav__rule { border: none; border-top: 1px solid var(--line-soft); margin: 0.9rem 0; }
.dlg-nav__doc {
  display: flex; gap: 0.4rem; align-items: center;
  min-height: 2.25rem;
  font-family: var(--serif); font-size: var(--ui-lg); font-weight: 400;
  color: var(--muted); text-decoration: none; line-height: 1.3;
}
.dlg-nav__doc:hover { color: var(--text); text-decoration: none; }
.dlg-nav__doc.is-open { font-weight: 600; color: var(--text); }
/* The title opens the document; the chevron only opens its contents. Two jobs,
   so two controls — one nested inside the other would be neither. */
.dlg-nav__row { display: flex; gap: 0.2rem; align-items: center; min-width: 0; }
.dlg-nav__doc { flex: 1 1 auto; }
.dlg-nav__chev {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: none; align-self: stretch;
  padding: 0 0.3rem; line-height: 1;
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
}
.dlg-nav__chev:hover { color: var(--text); }
.dlg-nav__secs { display: block; }
.dlg-nav__note { margin: 0.3rem 0 0 0.7rem; font-size: var(--ui-sm); color: var(--muted2); }
.dlg-nav__sec {
  display: flex; justify-content: space-between; align-items: center; gap: 0.4rem;
  min-height: var(--tap);
  font-size: var(--ui-base); color: var(--muted); text-decoration: none;
  padding: 0.2rem 0.4rem 0.2rem 0.7rem;
  border-left: 2px solid var(--line-soft); line-height: 1.35;
}
.dlg-nav__sec:hover { color: var(--text); background: var(--bg-elevated); text-decoration: none; }
.dlg-nav__sec.is-sub { padding-left: 1.35rem; color: var(--muted2); }
.dlg-nav__sec.is-current {
  color: var(--accent-doc); font-weight: 600;
  border-left-color: var(--accent-doc); background: var(--bg-elevated);
}
/* flex: 1 — the counter (::before) is a flex child too, and without this the
   row's space-between would push the title to the far edge. */
.dlg-nav__sec-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-nav__ver {
  appearance: none;
  min-height: 2.25rem;
  border: 1px solid var(--chip); color: var(--chip-ink); background: var(--card);
  border-radius: var(--r-pill); padding: 0.2rem 0.8rem;
  font-family: var(--sans); font-size: var(--ui-sm); cursor: pointer;
  margin: 0.5rem 0 0 0.7rem;
}

/* A chat bubble marks anything you have written on — in the pane, on the
   heading, and on the document title. Absent means you have not commented. */
.dlg-bubble {
  display: inline-flex; align-items: center; gap: 0.2rem;
  color: var(--chip-ink); flex: none;
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
}
.dlg-bubble svg { width: 1em; height: 1em; }
.dlg-doc .dlg-bubble { margin-left: 0.45rem; vertical-align: 0.1em; }

.dlg-nav-toggle { justify-self: start; background: var(--card); }
.dlg-scrim { position: fixed; inset: 0; z-index: 125; background: var(--scrim); }

/* One shape at every width (founder call 2026-09-15): the document takes the
   whole column and the pane is a drawer behind Contents, desktop included. A
   pinned sidebar cost the document a third of its width, and the table rows
   were wrapping five words deep. */
/* Reading forward hides the bar; Contents takes the top it leaves behind. */
.top-bar { transition: top 0.22s ease; }
body.bar-hidden .top-bar { top: calc(-1 * var(--nav-h)); }
.dlg-nav-toggle {
  position: sticky;
  top: calc(var(--nav-h) + 0.4rem);
  z-index: 80;
  transition: top 0.22s ease, box-shadow 0.22s ease;
}
body.bar-hidden .dlg-nav-toggle { top: 0.4rem; box-shadow: var(--shadow-card); }
.dlg-nav {
  position: fixed; z-index: 130;
  top: 0; bottom: 0; left: 0;
  width: min(17rem, 82vw);
  padding: max(1.4rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  background: var(--card);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(-102%);
  transition: transform 0.18s ease;
}
body.dlg-drawer-open .dlg-nav { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .dlg-nav, .top-bar, .dlg-nav-toggle { transition: none; }
}

/* Pinned (founder ask 2026-09-21): the drawer stops being a sheet in front of
   the page and becomes a column beside it. The scrim goes (dialog.js), and
   the page is moved over by the pane's own measured width — through body
   padding, so the document keeps centring itself in what is left. In the
   workspace the columns are placed in pixels instead, and dialog.js has
   already spent the same offset, so the padding must not be added twice. */
body.dlg-nav-pinned .dlg-nav { transform: translateX(0); }
@media (min-width: 48rem) {
  body.dlg-nav-pinned:not(.dlg-ws) { padding-left: var(--nav-pin-w, 17rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   Dialog — the document
   ════════════════════════════════════════════════════════════════════════ */
.dlg-doc { font-family: var(--serif); font-size: var(--ds-body); line-height: var(--ds-lead); color: var(--text); padding-top: 1.1rem; }
.dlg-doc > :first-child { margin-top: 0; }
.dlg-doc__title {
  font-family: var(--serif); font-size: var(--ds-h1); font-weight: 700;
  color: var(--text); line-height: 1.15; margin: 0 0 0.5rem;
}
.dlg-doc h1, .dlg-doc h2, .dlg-doc h3, .dlg-doc h4 {
  font-family: var(--serif);
  color: var(--accent-doc);
  font-weight: 600;
  line-height: 1.2;
  margin: 1.8rem 0 0.5rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.dlg-doc h1 { font-size: var(--ds-h1); }
.dlg-doc h2 { font-size: var(--ds-h2); }
.dlg-doc h3 { font-size: var(--ds-h3); }
.dlg-doc h4 { font-size: var(--ds-h4); }
.dlg-doc p { margin: 0 0 0.8rem; }
.dlg-doc ul, .dlg-doc ol { padding-left: 1.4rem; margin: 0 0 0.8rem; }
.dlg-doc li { margin: 0.25rem 0; }
.dlg-doc img { display: block; max-width: 100%; height: auto; margin: 1rem auto; border-radius: var(--r-control); }
/* A table wider than the phone used to widen the PAGE, and the top bar spans
   the page — so the lock, Edit and the avatar rode off the right edge and the
   only way to them was to scroll the document sideways. The table scrolls
   inside itself instead. `display: block` + `width: max-content` makes the
   table its own scroll box; the rows still lay out as a table underneath, so
   the columns stay aligned. In CSS rather than in the reader's JS, so the
   editor is held to the same width as the page it is editing. */
.dlg-doc table {
  display: block; width: max-content; max-width: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  border-collapse: collapse; margin: 1rem 0; font-size: 0.95em;
}
/* The other way a document widens the page: one unbroken string — a pasted
   URL, a long token — with nowhere to break. */
.dlg-doc { overflow-wrap: break-word; }
.dlg-doc td, .dlg-doc th { border: 1px solid var(--border); padding: 0.4rem 0.6rem; vertical-align: top; }
.dlg-doc a { color: var(--accent-doc); }
.dlg-doc strong { font-weight: 600; }
/* Underline sits close to the serif descenders, so give it a little room and
   let it skip them rather than strike through. */
.dlg-doc u, .dlg-editor__body u { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: from-font; }
/* Struck-out text is still text: keep the reader's ink and let the line take
   its weight from the serif rather than from a browser default. */
.dlg-doc s, .dlg-editor__body s { text-decoration: line-through; text-decoration-thickness: from-font; }
/* A highlight is a tint over the words, not a swatch behind them: the UA's
   own <mark> paints black on yellow, which goes blind in the dark theme. The
   padding gives the ink a little air without changing the line's height. */
.dlg-doc mark, .dlg-editor__body mark {
  background: var(--dlg-hl); color: inherit;
  padding: 0 0.08em; border-radius: 2px;
}
.dlg-empty { font-family: var(--sans); color: var(--muted); text-align: center; margin: 3rem 0; }

/* A rule, a bubble, then the words: the end of a section and the invitation
   to answer it, in one line. */
.dlg-count {
  display: flex; align-items: center; gap: 0;
  width: 100%; margin: 0 0 0.6rem; padding: 0;
}
/* The rule runs the width of the section and ends in the invitation itself. */
.dlg-count__rule { flex: 1; min-width: 1.5rem; height: 1px; background: var(--line-strong); }
.dlg-count__pill {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; flex: none;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: transparent;
}
/* Widens only to carry the number of comments you have already left. */
.dlg-count__pill.has-count { width: auto; padding: 0 0.85rem; }
.dlg-count__label { font-variant-numeric: tabular-nums; }
.dlg-count__label:empty { display: none; }
.dlg-count__icon { display: inline-flex; flex: none; }
.dlg-count__icon svg { width: 1.25em; height: 1.25em; }
.dlg-count:hover { text-decoration: none; }
.dlg-count:hover .dlg-count__pill { border-color: var(--line-strong); }
.dlg-thread { margin: 0 0 1.2rem; padding-left: 0.9rem; border-left: 2px solid var(--border); }
.dlg-c { margin: 0 0 0.8rem; font-family: var(--sans); font-size: var(--ui-md); line-height: 1.55; }
.dlg-c__meta {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  display: flex; align-items: center; gap: 0.5rem;
}
/* The same mark as the top bar, so a comment is visibly yours at a glance. */
.dlg-c__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; flex: none;
  border-radius: 50%;
  background: var(--btn-pill-primary-bg); color: var(--btn-pill-primary-fg);
  font-size: 0.65rem; font-weight: 700; line-height: 1;
}
.dlg-c__body { white-space: pre-wrap; margin: 0; }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — editing (developers only)
   ════════════════════════════════════════════════════════════════════════ */
/* ——— Editing, from the top bar ———
   The controls sit in the bar rather than in a strip of their own: the page
   belongs to the document. A draft saves itself, so there is a state to read
   and one action, not a row of buttons. */
.top-bar__edit { display: flex; align-items: center; gap: 0.4rem; }
.top-bar__edit:empty { display: none; }
.dlg-topedit__pill {
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  letter-spacing: 0.03em; text-transform: lowercase;
  padding: 0.15rem 0.6rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--muted2); white-space: nowrap;
}
.dlg-topedit__pill.is-published { color: var(--dot-live); border-color: var(--dot-live); }
.dlg-topedit__pill.is-draft { color: var(--dot-draft); border-color: var(--dot-draft); }
.dlg-topedit__pill.is-editing { color: var(--accent-doc); border-color: var(--accent-doc); text-transform: none; }
.dlg-topedit__state {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
}
.dlg-topedit__state:empty { display: none; }
.dlg-topedit__state.is-error { color: var(--danger); }
.dlg-topedit__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.2rem; padding: 0 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: var(--ui-sm); font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.dlg-topedit__btn:hover { color: var(--text); border-color: var(--text); }
.dlg-topedit__btn.is-primary {
  background: var(--btn-pill-primary-bg); color: var(--btn-pill-primary-fg); border-color: transparent;
}
.dlg-topedit__btn.is-primary:hover { filter: var(--btn-pill-primary-hover); color: var(--btn-pill-primary-fg); }
.dlg-topedit__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The lock is the document's own state, so it keeps its place on a phone where
   the version pill drops out — a page can be hidden from readers and you must
   be able to see that on any screen. */
.dlg-topedit__lock { width: 2.2rem; padding: 0; }
.dlg-topedit__lock svg { display: block; }
.dlg-topedit__lock.is-locked {
  color: var(--danger); border-color: var(--danger);
}
.dlg-topedit__lock.is-locked:hover { color: var(--danger); border-color: var(--danger); filter: brightness(0.9); }
.dlg-nav__lock {
  display: inline-flex; align-items: center;
  color: var(--danger); flex: none;
}
.dlg-nav__lock svg { width: 0.95em; height: 0.95em; }
.dlg-topedit__menu { position: relative; display: inline-flex; }
.dlg-topedit__more { width: 2.2rem; padding: 0; font-size: var(--ui-lg); line-height: 1; }
.dlg-topedit__pop {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 140;
  min-width: 13rem; padding: 0.3rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.dlg-topedit__item {
  display: flex; align-items: center; min-height: var(--tap);
  padding: 0 0.7rem; border: none; border-radius: var(--r-control);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 500;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.dlg-topedit__item:hover { background: var(--bg-elevated); }
.dlg-doc__title--edit { outline: none; }
.dlg-doc__title--edit:focus { outline: none; }

/* While you are writing, the page itself stops scrolling and the document
   scrolls inside a region that ENDS above the toolbar. Padding alone would
   only pad the end of the document — mid-document, every line would still
   slide under the bar on its way past. */
body.dlg-editing { overflow: hidden; }
body.dlg-editing .dlg-layout {
  height: calc(100dvh - var(--nav-h) - var(--edit-bar-h));
  padding-bottom: 0;
  overflow: hidden;
  align-items: start;
}
body.dlg-editing .dlg-main {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 0.75rem;
}
body.dlg-editing .dlg-nav { max-height: 100%; overflow-y: auto; }
/* Contents is sticky only because the page normally scrolls under the top bar.
   Here the layout already starts below the bar and the document scrolls inside
   it, so sticky would park the button in the middle of the text. */
body.dlg-editing .dlg-nav-toggle { position: static; }

/* While editing on a phone the bar is two rows of a small screen, and it is
   the one thing between the words and the top edge. So it slides away with
   the reading, the same as it does for a reader — Save and the pane are one
   scroll back, never further.

   For that to cost nothing, the words must not move when it goes. A reader
   gets this free: the bar is fixed and the page scrolls under it. Editing
   scrolls the document inside its own region instead, and that region used to
   START below the bar — so hiding the bar would have left a blank strip and
   dragged every line up by its height mid-scroll. Give the region the whole
   screen and pad ITS content down instead: the first screenful still begins
   under the bar, the rest passes beneath it, and the bar leaving reveals what
   was already there rather than moving anything. Narrow screens only — a wide
   one keeps the bar, so there is nothing to make room for. */
@media (max-width: 61.99rem) {
  body.dlg-editing { padding-top: 0; }
  body.dlg-editing .dlg-layout { height: calc(100dvh - var(--edit-bar-h)); }
  body.dlg-editing .dlg-main {
    padding-top: var(--nav-h);
    /* The caret is scrolled into view by the region, which knows nothing about
       a bar floating over it. Without this, typing at the top of a line the
       browser has just revealed puts that line behind the bar. */
    scroll-padding-top: var(--nav-h);
  }
}
@media (min-width: 62rem) {
  /* The bar never hides here, so it must never be left part-way up either. */
  body.dlg-editing .top-bar { top: 0 !important; }
}

/* The date dialog's input. Present and rendered — showPicker() refuses on an
   element that is not — but a pixel wide and invisible, because the dialog is
   the whole control and the field itself is never meant to be seen. */
.dlg-editor__datein {
  position: fixed;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  padding: 0; border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ——— A picked date ———
   Small, quiet, and unmistakably one thing rather than words that happen to
   look like a date. The same chip for the writer and the reader. */
.dlg-doc time, .dlg-editor__body time {
  display: inline-block;
  padding: 0.05em 0.5em;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--accent-doc) 13%, transparent);
  color: var(--accent-doc);
  font-family: var(--sans);
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 0.08em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media (max-width: 40rem) {
  .dlg-topedit__pill { display: none; }
  .dlg-topedit__state { max-width: 6.5rem; }
  .dlg-topedit__btn { padding: 0 0.7rem; }
}

/* ——— The AI pane ———————————————————————————————————————————————————————
   A column on the right, only while editing. It takes its width off the
   editing layout rather than overlaying the text, because the whole point is
   reading the answer and the paragraph it is about at the same time. Below
   52rem there is no room for two columns, so it becomes a sheet over the
   document — the document is still there, you just stop seeing it while you
   are asking. */
.dlg-pane {
  position: fixed;
  top: var(--nav-h);
  right: 0;
  width: 25rem;
  height: calc(100dvh - var(--nav-h) - var(--edit-bar-h));
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border);
  z-index: 40;
}
body.dlg-pane-open .dlg-layout { padding-right: 25rem; }

.dlg-pane__head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 0.9rem 0.6rem;
  border-bottom: 1px solid var(--border);
}
.dlg-pane__title { font-weight: 600; font-size: 0.9rem; }
.dlg-pane__x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--text-muted); padding: 0 0.25rem;
}
.dlg-pane__x:hover { color: var(--text); }

/* History lives in the head next to the close button, because it belongs to
   the pane and not to the page: the sittings it lists are this pane's. */
.dlg-pane__hist {
  margin-left: auto; cursor: pointer;
  font: 500 0.72rem/1.7 var(--sans);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted);
  border-radius: var(--r-pill); padding: 0 0.6rem;
}
.dlg-pane__hist:hover { color: var(--text); border-color: var(--accent-doc); }
.dlg-pane__hist[aria-pressed="true"] {
  color: var(--accent-doc); border-color: var(--accent-doc);
  background: color-mix(in srgb, var(--accent-doc) 10%, transparent);
}
/* Both the pill and the × want the right-hand end; the pill claims it and the
   × sits against it rather than an auto margin away from it. */
.dlg-pane__hist + .dlg-pane__x { margin-left: 0; }

/* Saved threads, standing in front of the conversation rather than beside it.
   Same column, same width — reading the list is what you do instead of
   typing, so it takes the whole of the pane while it is up. */
.dlg-hist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dlg-hist__top {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem 0.5rem; border-bottom: 1px solid var(--border);
}
.dlg-hist__head { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.02em; }
.dlg-hist__new {
  margin-left: auto; cursor: pointer;
  font: 600 0.72rem/1.8 var(--sans);
  background: var(--accent-doc); border: 0; color: #fff;
  border-radius: var(--r-pill); padding: 0 0.7rem;
}
.dlg-hist__list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem 0.6rem;
}
.dlg-hist__group {
  margin: 0.55rem 0.3rem 0.3rem; font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dlg-hist__row { display: flex; align-items: stretch; gap: 0.2rem; }
.dlg-hist__open {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.1rem;
  border: 1px solid transparent; background: none; color: var(--text);
  border-radius: 0.6rem; padding: 0.4rem 0.5rem; font: inherit;
}
.dlg-hist__open:hover:not(:disabled) { background: var(--bg); border-color: var(--border); }
.dlg-hist__open:disabled { opacity: 0.55; cursor: default; }
/* Two lines of the question, then the ellipsis — enough to recognise a thread
   without the list turning into the transcript it is an index of. */
.dlg-hist__what {
  font-size: 0.82rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dlg-hist__meta { font-size: 0.68rem; color: var(--text-muted); }
.dlg-hist__x {
  align-self: center; border: 0; background: none; cursor: pointer;
  font-size: 1.05rem; line-height: 1; color: var(--text-faint, var(--text-muted));
  padding: 0 0.3rem; opacity: 0;
}
.dlg-hist__row:hover .dlg-hist__x, .dlg-hist__x:focus-visible { opacity: 1; }
.dlg-hist__x:hover { color: var(--danger); }
/* A thumb never hovers, and a row you cannot forget on a phone is a row you
   cannot forget at all. */
@media (hover: none) { .dlg-hist__x { opacity: 1; } }
.dlg-hist__status {
  margin: 0; padding: 0.2rem 0.9rem; font-size: 0.72rem; color: var(--text-muted); min-height: 1rem;
}
.dlg-hist__status.is-error { color: var(--danger); }
/* While the list is up, the pane's own status and footnote are talking about a
   conversation that is not on screen — and the history says its own two
   things. One footer at a time. */
.dlg-pane.is-hist > .dlg-pane__status,
.dlg-pane.is-hist > .dlg-pane__foot { display: none; }

/* What is about to be sent, in words rather than in a payload. */
.dlg-pane__ctx {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.dlg-pane__chip {
  font-size: 0.7rem; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 0.1rem 0.5rem;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dlg-pane__list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0.9rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.dlg-pane__msg { font-size: 0.85rem; line-height: 1.5; }
.dlg-pane__msg.is-me { align-self: flex-end; max-width: 90%; }
.dlg-pane__said {
  margin: 0; padding: 0.45rem 0.65rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 0.9rem 0.9rem 0.2rem 0.9rem;
}
.dlg-pane__body {
  padding: 0.55rem 0.7rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 0.2rem 0.9rem 0.9rem 0.9rem;
}
.dlg-pane__body p { margin: 0 0 0.5rem; }
.dlg-pane__body p:last-child { margin: 0; }

.dlg-pane__acts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.dlg-pane__act {
  font: 500 0.75rem/1.6 var(--sans); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  border-radius: var(--r-pill); padding: 0.15rem 0.6rem;
}
.dlg-pane__act:hover:not(:disabled) { border-color: var(--accent-doc); color: var(--accent-doc); }
.dlg-pane__act.is-primary {
  background: var(--accent-doc); border-color: var(--accent-doc); color: #fff;
}
.dlg-pane__act.is-done {
  background: transparent; border-color: var(--border); color: var(--text-muted); cursor: default;
}
.dlg-pane__act:disabled { opacity: 0.55; cursor: default; }

.dlg-pane__ops {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0.5rem 0.9rem 0.35rem; border-top: 1px solid var(--border);
}
.dlg-pane__op {
  font: 500 0.75rem/1.6 var(--sans); cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted);
  border-radius: var(--r-pill); padding: 0.15rem 0.6rem;
}
.dlg-pane__op:hover:not(:disabled) { color: var(--text); border-color: var(--accent-doc); }
.dlg-pane__op:disabled { opacity: 0.4; cursor: default; }

.dlg-pane__form { padding: 0.35rem 0.9rem 0.5rem; }
.dlg-pane__ta {
  width: 100%; resize: none; font: 0.85rem/1.45 var(--sans); color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 0.7rem; padding: 0.5rem 0.6rem;
}
.dlg-pane__ta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.dlg-pane__bar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.dlg-pane__hint { font-size: 0.7rem; color: var(--text-muted); }
.dlg-pane__send {
  margin-left: auto; cursor: pointer;
  font: 600 0.78rem/1.9 var(--sans);
  background: var(--btn-pill-primary-bg, var(--text)); color: var(--btn-pill-primary-fg, #fff);
  border: 0; border-radius: var(--r-pill); padding: 0 0.85rem;
}
.dlg-pane__send:disabled { opacity: 0.5; cursor: default; }

.dlg-pane__status { margin: 0; padding: 0 0.9rem; font-size: 0.72rem; color: var(--text-muted); min-height: 1rem; }
.dlg-pane__status.is-error { color: var(--danger); }
.dlg-pane__foot { margin: 0; padding: 0.3rem 0.9rem 0.7rem; font-size: 0.68rem; color: var(--text-muted); }

/* Text the pane just wrote comes back SELECTED rather than highlighted by a
   class, so the affordance is the browser's own and can never be saved into a
   version. Give that selection the document's warm accent instead of the
   browser default, so an insert reads as the document's own event. */
.dlg-editor__body::selection,
.dlg-editor__body *::selection {
  background: color-mix(in srgb, var(--accent-doc) 26%, transparent);
}

/* The same mark, painted by the Custom Highlight API rather than by the
   browser's selection, so the words you are asking the pane about stay lit
   while you type in the pane and the document's own selection has gone grey.
   It paints a Range and touches no DOM, so there is nothing here that could
   end up in a saved version. */
::highlight(dlg-pane-sel) {
  background: color-mix(in srgb, var(--accent-doc) 30%, transparent);
}

.dlg-topedit__btn.is-ai[aria-pressed="true"] {
  color: var(--accent-doc); border-color: var(--accent-doc);
}

/* On a phone there is no second column to be, and a full-height side sheet hid
   the one thing the pane is about — the paragraph you are asking about. So it
   becomes a BOTTOM SHEET: the document keeps the top of the screen and its
   cursor stays in view, the answer rises from the bottom where a thumb already
   is, and the sheet stops above the editing toolbar rather than burying it. */
@media (max-width: 52rem) {
  .dlg-pane {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(58dvh, 30rem);
    border-left: 0;
    border-top: 1px solid var(--border);
    border-radius: 0.9rem 0.9rem 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.14);
  }
  body.dlg-pane-open .dlg-layout { padding-right: 0; }
  /* With the pane open you are asking, not formatting, and on a phone the
     sheet plus the formatting bar is more furniture than screen. So the bar
     goes while the pane is up and comes straight back when it closes — which
     also lets the sheet sit flush on the bottom edge. The bar's measured
     --edit-bar-h is deliberately not used here: its observer ignores a height
     of zero, so the variable keeps the last height the bar had. */
  body.dlg-pane-open .dlg-editor__toolbar { display: none; }
  /* The document scrolls in what the sheet leaves, so the line you are working
     on can always be scrolled clear of it. */
  body.dlg-pane-open.dlg-editing .dlg-layout {
    /* The region already starts at the top of the screen here (the bar floats
       over it), so only the sheet comes off. */
    height: calc(100dvh - min(58dvh, 30rem));
  }
  /* A sheet this short cannot afford a tall head or a hint nobody taps. */
  .dlg-pane__head { padding: 0.55rem 0.9rem 0.45rem; }
  .dlg-pane__ops { padding-top: 0.4rem; }
  .dlg-pane__hint { display: none; }
  .dlg-pane__foot { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .dlg-pane__msg { animation: dlg-pane-in 160ms ease-out both; }
}
@keyframes dlg-pane-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}


/* A rounded bar of icon groups, floating at the foot of the screen where a
   thumb reaches it and the keyboard pushes it up — separators between what you
   did, what this block is, what the words look like, what goes in, and how a
   list runs. Always ONE row: too narrow to fit, and it scrolls sideways rather
   than growing a second line that moves the buttons around under your finger.
   Centred with auto margins, not a transform: a transformed fixed element
   becomes the containing block for anything fixed inside it. */
.dlg-editor__toolbar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  z-index: 60;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: 0.15rem;
  /* Two children: the row of controls, and the chevron that opens the rest.
     The row is ONE line and is clipped, never scrolled — a hidden scrollbar
     left the controls at the right end simply gone, with nothing to say so and
     no bar left to drag. The chevron is that sign, and it is outside the
     clipped row so it is never itself the control that gets cut off. */
  flex-wrap: nowrap;
  padding: 0.3rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  /* Larger than half of one row, so a single row is still a pill and the
     radius is capped to it; smaller than half of two, so a wrapped bar reads
     as a rounded block instead of a blob with semicircular ends. */
  border-radius: 1.5rem;
  box-shadow: var(--shadow-pop);
}
/* The row of controls is the one thing that gives way, down to nothing; the
   chevron beside it never does, or the way to the hidden controls would be the
   first thing to go. */
.dlg-editor__tools {
  display: flex; align-items: center; gap: 0.15rem;
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Open: the same controls, wrapped onto as many lines as they need. The card
   grows in place rather than opening a menu somewhere else on the screen. */
.dlg-editor__toolbar.is-open .dlg-editor__tools {
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
  row-gap: 0.15rem;
}
/* Nothing in the row may shrink — a squeezed icon is a mis-tap. */
.dlg-editor__tools > *, .dlg-editor__more { flex: none; }
/* It appears only when something is actually hidden behind it. Qualified by
   the toolbar so it outranks .dlg-editor__tool's own `display`, which the
   chevron also carries and which is declared further down this file. */
.dlg-editor__more { margin-left: 0.1rem; }
.dlg-editor__toolbar .dlg-editor__more { display: none; }
.dlg-editor__toolbar.has-more .dlg-editor__more { display: inline-flex; }
/* Open, it stays on the line it was on rather than sliding to the middle of a
   two-row card: the control you just pressed should still be under your
   finger. Both it and a row are 2rem, so the top edge centres it on row one. */
.dlg-editor__toolbar.is-open .dlg-editor__more { align-self: flex-start; }
.dlg-editor__more svg { transition: transform 0.18s ease; }
.dlg-editor__toolbar.is-open .dlg-editor__more svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .dlg-editor__more svg { transition: none; }
}
.dlg-editor__sep {
  width: 1px; height: 1.4rem; flex: none;
  margin: 0 0.35rem;
  background: var(--line);
}
/* On a narrow screen the four dividers are ~3rem of nothing, and a divider
   that lands at the end of a wrapped row reads as a stray tick. Group the
   controls by spacing alone there. */
@media (max-width: 40rem) {
  .dlg-editor__sep { display: none; }
}
.dlg-editor__block {
  appearance: none;
  min-height: 2rem;
  max-width: 9rem;
  padding: 0 1.6rem 0 0.7rem;
  border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 500;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.85rem) 55%, calc(100% - 0.55rem) 55%;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}
.dlg-editor__block:hover { background-color: var(--card); }
.dlg-editor__tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-family: var(--serif); font-size: var(--ui-lg);
  line-height: 1; cursor: pointer; padding: 0;
}
.dlg-editor__tool svg { width: 1.1rem; height: 1.1rem; }
.dlg-editor__tool:hover { color: var(--text); background: var(--card); }
.dlg-editor__tool:disabled { opacity: 0.3; cursor: default; }
.dlg-editor__tool:disabled:hover { color: var(--muted); background: transparent; }
.dlg-editor__tool.is-on { color: var(--text); background: var(--card); box-shadow: 0 0 0 1px var(--border); }

/* ——— The formatting bar, on a phone ———

   It floats as a centred pill on a wide screen, where there is room for it to
   be an object resting on the page. On a phone it docks: edge to edge, flat,
   flush on top of the keyboard. A pill there spends the two ends of the row on
   nothing, leaves the document showing either side of it — so it reads as a
   thing lying ON the words rather than as the page's own controls — and puts
   its outermost buttons where the thumb has furthest to travel. Docked, the
   row is as wide as the screen and every control is a bigger target. */
@media (max-width: 61.99rem) {
  .dlg-editor__toolbar {
    bottom: 0;
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  /* Full width means the controls can stop huddling in the middle. Spread
     only while the row is closed: open, it has wrapped, and spreading a last
     row of two would fling them to opposite edges. */
  .dlg-editor__toolbar:not(.is-open) .dlg-editor__tools { justify-content: space-between; }
}

.dlg-editor__tool.is-bold { font-weight: 800; }
.dlg-editor__tool.is-italic { font-style: italic; }
.dlg-editor__tool.is-underline { text-decoration: underline; text-underline-offset: 0.16em; }
.dlg-editor__tool.is-strike { text-decoration: line-through; }
.dlg-editor__body {
  min-height: 40vh; outline: none;
  padding: 0.2rem 0 1.5rem;
}
.dlg-editor__body:focus { outline: none; }
.dlg-editor__body img { cursor: default; }
.dlg-editor__body p:empty::before { content: "\00a0"; }
.dlg-editor__tool:focus-visible, .dlg-editor__block:focus-visible, .dlg-editbar__btn:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   Dialog — docked composer
   ════════════════════════════════════════════════════════════════════════ */
.dlg-dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  max-width: var(--dlg-max);
  margin: 0 auto;
  padding: 0 var(--dlg-pad) max(0.7rem, env(safe-area-inset-bottom));
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dlg-gap);
}
.dlg-dock__card {
  pointer-events: auto;
  grid-column: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 0.55rem 0.7rem 0.55rem 1rem;
  box-shadow: var(--shadow-card);
}
/* Folded away until you engage — see setDockChrome() in dialog.js. */
.dlg-dock__top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.dlg-dock:not(.is-engaged) .dlg-dock__top { display: none; }
.dlg-dock__title { font-family: var(--sans); font-size: var(--ui-base); font-weight: 600; color: var(--muted); flex: 1; white-space: nowrap; }
.dlg-chip {
  appearance: none;
  min-height: 2.25rem;
  border: 1px solid var(--chip);
  color: var(--chip-ink);
  background: var(--card);
  border-radius: var(--r-control);
  padding: 0.2rem 0.7rem;
  font-family: var(--sans);
  font-size: var(--ui-base);
  max-width: 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
}
.dlg-dock__ver { font-family: var(--sans); font-size: var(--ui-sm); color: var(--muted2); }
.dlg-dock__edit { margin-left: auto; min-height: 2.25rem; padding: 0.2rem 0.85rem; font-size: var(--ui-sm); }

/* What you already wrote, read-only until you ask to change it. */
.dlg-dock__preview {
  font-family: var(--sans); font-size: var(--ui-md); line-height: 1.55;
  color: var(--text); white-space: pre-wrap;
  max-height: 40vh; overflow-y: auto;
}
.dlg-dock__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.dlg-dock__ta {
  flex: 1;
  min-height: 1.7rem;
  max-height: 40vh;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--ui-md);
  line-height: 1.55;
  padding: 0;
  overflow-y: hidden;
}
.dlg-dock__ta::placeholder { color: var(--muted2); }
.dlg-dock__card:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Opens the three ways in. Storing what they return is still to come. */
.dlg-attach-menu {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 0;
  z-index: 110;
  min-width: 13rem;
  padding: 0.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column;
}
.dlg-attach-menu__item {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: var(--tap);
  padding: 0 0.7rem;
  border: none; border-radius: var(--r-control);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 500;
  text-align: left; cursor: pointer;
}
.dlg-attach-menu__item:hover { background: var(--bg-elevated); }
.dlg-attach-menu__item svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--muted); }
/* The editor's table menu wears the attach menu's look but hangs from <body>,
   placed by the editor next to the toolbar button. */
.dlg-table-menu { position: fixed; bottom: auto; z-index: 300; min-width: 12rem; }
.dlg-table-menu__sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--border); }
/* The bar that sits on top of the table the caret is in. */
.dlg-table-bar {
  position: fixed; z-index: 290;
  display: flex; flex-wrap: wrap; gap: 0.15rem;
  padding: 0.2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-pop);
}
.dlg-table-bar[hidden] { display: none; }
.dlg-table-bar__btn {
  min-height: 2rem; padding: 0 0.6rem;
  border: none; border-radius: var(--r-control);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: 0.82rem; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.dlg-table-bar__btn:hover { background: var(--bg-elevated); }
.dlg-table-bar__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
/* An empty cell is a <br> wide; give it room to be clicked into. */
.dlg-editor__body td, .dlg-editor__body th { min-width: 4rem; }
.dlg-file { display: none; }

.dlg-dock__attach {
  width: 2rem; height: 2rem; flex: none;
  margin-left: -0.35rem;
  border: none; background: transparent; padding: 0;
  color: var(--muted2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dlg-dock__attach svg { width: 1.15rem; height: 1.15rem; }
.dlg-dock__attach:hover { color: var(--muted); }
.dlg-dock__send {
  width: var(--tap); height: var(--tap); flex: none;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--ui-lg);
}
.dlg-dock__send:hover:not(:disabled) { color: var(--text); border-color: var(--text); }
.dlg-dock__send.is-save {
  width: auto; border-radius: var(--r-pill); padding: 0 1.1rem;
  background: var(--btn-pill-primary-bg); color: var(--btn-pill-primary-fg);
  border-color: transparent;
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600;
}
.dlg-dock__send.is-save:hover:not(:disabled) {
  filter: var(--btn-pill-primary-hover);
  color: var(--btn-pill-primary-fg); border-color: transparent;
}

/* Waiting to be posted, and what came with a comment once it was. */
.dlg-pending {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 0.55rem;
}
.dlg-pending__item {
  position: relative;
  width: 4.5rem; height: 4.5rem;
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}
.dlg-pending__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlg-pending__doc {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.2rem; padding: 0.3rem; color: var(--muted);
}
.dlg-pending__doc svg { width: 1.3rem; height: 1.3rem; }
.dlg-pending__name {
  font-family: var(--sans); font-size: 0.62rem; color: var(--muted2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dlg-pending__x {
  position: absolute; top: 0.2rem; right: 0.2rem;
  width: 1.35rem; height: 1.35rem;
  border: none; border-radius: 50%;
  background: rgba(20, 16, 12, 0.72); color: #fff;
  font-size: 0.95rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dlg-pending__x:hover { background: rgba(20, 16, 12, 0.9); }

.dlg-c__files { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.35rem 0 0.45rem; }
.dlg-c__file {
  display: block;
  width: 5.5rem; height: 5.5rem;
  border-radius: var(--r-control);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg);
}
.dlg-c__file img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dlg-c__file.is-file {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem; padding: 0.35rem; color: var(--muted); text-decoration: none;
}
.dlg-c__file.is-file svg { width: 1.4rem; height: 1.4rem; }
.dlg-c__file.is-file:hover { border-color: var(--line-strong); color: var(--text); }
.dlg-c__filename {
  font-family: var(--sans); font-size: 0.62rem; color: var(--muted2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Asking before something that cannot be undone. */
.dlg-confirm {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: var(--scrim);
  backdrop-filter: blur(4px);
}
.dlg-confirm__card {
  width: min(23rem, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.3rem 1.3rem 1.1rem;
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.dlg-confirm__title {
  font-family: var(--serif); font-size: var(--ds-h3); font-weight: 600;
  color: var(--text); margin: 0 0 0.7rem;
}
.dlg-confirm__quote {
  font-family: var(--sans); font-size: var(--ui-base); color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-control);
  padding: 0.55rem 0.8rem; margin: 0 0 0.6rem;
  text-align: left; white-space: pre-wrap; max-height: 8rem; overflow-y: auto;
}
.dlg-confirm__note {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  margin: 0 0 1rem;
}
.dlg-confirm__input {
  width: 100%;
  margin: 0.2rem 0 0.9rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base);
}
.dlg-confirm__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.dlg-confirm__row { display: flex; gap: 0.6rem; }
.dlg-confirm__btn {
  flex: 1; min-height: var(--tap);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600;
  cursor: pointer;
}
.dlg-confirm__btn:hover { border-color: var(--text); }
.dlg-confirm__btn--danger { background: var(--danger); color: #fff; border-color: transparent; }
.dlg-confirm__btn--danger:hover { filter: brightness(1.08); border-color: transparent; }
.dlg-confirm__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Camera — the real one, over everything
   ════════════════════════════════════════════════════════════════════════ */
.dlg-cam {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: #0b0b0c;
  padding: max(0.75rem, env(safe-area-inset-top)) 0.75rem max(1rem, env(safe-area-inset-bottom));
}
.dlg-cam__stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dlg-cam__video, .dlg-cam__still {
  max-width: 100%; max-height: 100%;
  border-radius: var(--r-card);
  object-fit: contain;
}
.dlg-cam__note {
  font-family: var(--sans); font-size: var(--ui-base); color: #d9d4cc;
  text-align: center; margin: 0.6rem auto 0; max-width: 28rem; line-height: 1.45;
}
.dlg-cam__note:empty { display: none; }
.dlg-cam__bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem; padding: 0.9rem 0.5rem 0.2rem; flex-wrap: wrap;
}
.dlg-cam__btn {
  min-height: var(--tap); padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: transparent; color: #f2eee7;
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600;
  cursor: pointer;
}
.dlg-cam__btn:hover { border-color: #f2eee7; }
.dlg-cam__btn--primary { background: #f2eee7; color: #16150f; border-color: transparent; }
.dlg-cam__shutter {
  width: 4rem; height: 4rem; flex: none;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: #f2eee7;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(11, 11, 12, 0.9) inset;
}
.dlg-cam__shutter:active { transform: scale(0.94); }
.dlg-cam__btn:focus-visible, .dlg-cam__shutter:focus-visible {
  outline: 2px solid #f2eee7; outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════════
   Phone — the reading scale steps up, the gaps step down
   Only the five document tokens change; every rule above follows.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 40rem) {
  :root {
    --ui-xs: 0.8rem;
    --ui-sm: 0.875rem;
    --ui-base: 0.95rem;
    --ui-md: 1rem;
    --ui-lg: 1.05rem;
    --ui-xl: 1.1rem;
    --ui-2xl: 1.2rem;
    --ds-body: 1.12rem;
    --ds-h1: 1.85rem;
    --ds-h2: 1.6rem;
    --ds-h3: 1.25rem;
    --ds-h4: 1.12rem;
    --ds-lead: 1.6;
  }
  .dlg-layout { padding-top: 0.9rem; padding-bottom: 2rem; gap: 0.9rem; }
  .dlg-doc h1, .dlg-doc h2, .dlg-doc h3, .dlg-doc h4 { margin: 1.3rem 0 0.4rem; }
  .dlg-doc p, .dlg-doc ul, .dlg-doc ol { margin-bottom: 0.65rem; }
  .dlg-count { margin: 0 0 0.4rem; }
  .dlg-thread { margin-bottom: 0.9rem; }
  .dlg-dock { padding: 0; }
  .dlg-dock__card {
    padding: 0.5rem 0.7rem max(0.55rem, env(safe-area-inset-bottom)) 1rem;
    border-radius: var(--r-card) var(--r-card) 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .dlg-dock__top { margin-bottom: 0.35rem; gap: 0.5rem; }
  /* "Comment section" is a desktop nicety: the chip already names the section,
     and dropping the label is what lets Edit sit on the same row. */
  .dlg-dock__title { display: none; }
  .dlg-chip { flex: 1; max-width: none; min-height: var(--tap); }
  .dlg-dock__edit { margin-left: 0; min-height: var(--tap); }
  .dlg-nav__doc, .dlg-nav__ver, .dlg-nav__chev, .dlg-nav__new { min-height: var(--tap); }
  .dlg-nav__chev { min-width: var(--tap); }
  .dlg-dock__ta { min-height: 1.8rem; }
  .top-bar__brand { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* ════════════════════════════════════════════════════════════════════════
   Developers
   ════════════════════════════════════════════════════════════════════════ */
.adm h2 {
  font-family: var(--serif); color: var(--accent-doc); font-weight: 600;
  font-size: var(--ds-h3); margin: 2.2rem 0 0.3rem;
}
.adm h2:first-child { margin-top: 0; }
.adm .sub { font-family: var(--sans); color: var(--muted2); font-size: var(--ui-base); margin: 0 0 0.8rem; }
.adm-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0 0 0.7rem; }
.adm-row .grow { flex: 1; min-width: 10rem; }
.adm-table-wrap { overflow-x: auto; }
.adm table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--ui-base); }
.adm th {
  text-align: left; font-weight: 600; color: var(--muted2);
  font-size: var(--ui-xs); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.adm td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.adm td.mono { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; }
.adm .muted { color: var(--muted2); }
.adm .pill {
  display: inline-block; border: 1px solid var(--chip); color: var(--chip-ink);
  border-radius: var(--r-pill); padding: 0.1rem 0.6rem; font-size: var(--ui-xs);
}
.adm .dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.adm .dot--published { background: var(--dot-live); }
.adm .dot--draft { background: var(--dot-draft); }
.adm .dot--archived { background: var(--dot-archived); }
.adm-doc { border: 1px solid var(--border); border-radius: var(--r-card); padding: 0.8rem 1rem; margin: 0 0 1rem; background: var(--card); }
.adm-doc__title { font-family: var(--serif); font-size: var(--ds-h4); font-weight: 600; margin: 0 0 0.5rem; }
.adm-doc__title .muted { font-family: var(--sans); font-size: var(--ui-base); font-weight: 400; }
.adm-drop {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-control);
  padding: 0.8rem;
  text-align: center;
  font-family: var(--sans);
  color: var(--muted2);
  font-size: var(--ui-base);
  margin-top: 0.6rem;
  cursor: pointer;
}
.adm-drop.is-over { border-color: var(--accent-doc); color: var(--text); }
.adm-drop input[type="file"] { display: none; }
.adm-comment { padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--ui-md); }
.adm-comment .meta { font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2); margin-bottom: 0.15rem; }
.adm-comment .body { white-space: pre-wrap; font-family: var(--serif); }
.adm-status { min-height: 1.2em; }
.adm details summary {
  display: flex; align-items: center; min-height: var(--tap);
  cursor: pointer; font-family: var(--sans); color: var(--muted); font-size: var(--ui-base);
}

/* ════════════════════════════════════════════════════════════════════════
   Developers — people, filed by what they can open
   ════════════════════════════════════════════════════════════════════════ */
.pp-bucket { margin: 0 0 0.6rem; border-bottom: 1px solid var(--line); }
.pp-bucket:last-child { border-bottom: none; }
.pp-bucket__head {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0;
}
.pp-bucket__title {
  font-family: var(--serif); font-size: var(--ds-h3); font-weight: 600;
  color: var(--accent-doc); margin: 0;
}
.pp-bucket__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--accent-doc);
  font-family: var(--sans); font-size: var(--ui-base); line-height: 1; cursor: pointer;
}
.pp-bucket__toggle:hover { border-color: var(--accent-doc); }
.pp-bucket__n {
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  color: var(--muted2); min-width: 1.5rem;
}
.pp-bucket__blurb {
  font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2);
  margin: 0.4rem 0 0.9rem;
}
.pp-bucket__body { padding-bottom: 0.2rem; }

/* Only while rows are ticked: what you can do TO them. */
.pp-quick {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-left: auto;
}
.pp-quick__label {
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600; color: var(--text);
}
.pp-quick__del {
  min-height: var(--tap);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--danger); border-radius: var(--r-pill);
  background: transparent; color: var(--danger);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600;
  cursor: pointer;
}
.pp-quick__del:hover { background: var(--danger); color: #fff; }
.pp-quick__del:focus-visible, .pp-quick__sel:focus-visible, .pp-bucket__toggle:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

.pp-tick { width: 2.2rem; }
.pp-tick input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-doc); cursor: pointer; }
.pp-tick input:disabled { cursor: not-allowed; opacity: 0.45; }
.adm tr.is-you td { background: var(--card); }

@media (max-width: 40rem) {
  /* On a phone the actions get their own line rather than squeezing the title. */
  .pp-quick { margin-left: 0; width: 100%; }
  .pp-quick__sel { flex: 1 1 8rem; min-width: 0; }
}

/* Per-row menu and the sort control. Both popovers live on <body>, so they are
   positioned in fixed coordinates rather than inside the scrolling table. */
.pp-dots {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: var(--ui-lg); line-height: 1; cursor: pointer;
}
.pp-dots:hover { color: var(--text); background: var(--card); }
.pp-sort {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  margin-left: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r-control);
  background: transparent; color: var(--muted); cursor: pointer;
}
.pp-sort svg { width: 1.05rem; height: 1.05rem; }
.pp-sort:hover { color: var(--text); border-color: var(--text); }
.pp-dots:focus-visible, .pp-sort:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.pp-pop {
  position: fixed; z-index: 200;
  min-width: 11rem;
  padding: 0.4rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.pp-pop__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; }
.pp-pop__row--end { justify-content: center; border-top: 1px solid var(--line); margin-top: 0.2rem; padding-top: 0.5rem; }
.pp-pop__item {
  display: block; width: 100%; text-align: left;
  min-height: var(--tap);
  padding: 0.4rem 0.6rem;
  border: none; border-radius: var(--r-control);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); cursor: pointer;
}
.pp-pop__item:hover { background: var(--card); }
.pp-pop__item.is-on { font-weight: 600; color: var(--accent-doc); }
.pp-pop__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* The bucket's own actions sit next to the count; sort stays at the far right. */
.pp-quick { margin-left: 0; }
.pill--app { border-color: var(--accent-doc); color: var(--accent-doc); }

/* Resizable columns. Fixed layout is what makes a width mean something: with
   `auto`, the browser treats any width as a suggestion and re-negotiates it. */
.pp-table { table-layout: fixed; width: 100%; }
.pp-table th, .pp-table td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-th { position: relative; }
.pp-grip {
  position: absolute; top: 0; right: -3px; bottom: 0;
  width: 7px; cursor: col-resize;
  touch-action: none;           /* or a touch drag scrolls the table instead */
  z-index: 2;
}
.pp-grip::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; left: 3px;
  width: 1px; background: var(--line); transition: background 0.12s ease;
}
.pp-grip:hover::after, body.is-colresizing .pp-grip::after { background: var(--accent-doc); }
/* While dragging, the pointer owns the page: no text selection anywhere. */
body.is-colresizing { user-select: none; cursor: col-resize; }
.pp-cell--dots { overflow: visible; }
/* A failure in the people list has to read as a failure, not as small print. */
.adm-status.is-error {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--danger);
  border-radius: var(--r-control);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
   Sub-navigation — a second level under the top bar
   ════════════════════════════════════════════════════════════════════════ */
.subbar {
  position: sticky;
  top: var(--nav-h);
  /* Reading forward hides the top bar; this row takes the edge it leaves,
     the same as the dialog reader's section row. */
  transition: top 0.22s ease;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  min-height: var(--tap);
  /* Full-bleed bar, but the tabs start where the content starts: the page's
     own padding plus whatever the centred column leaves at the side. Below
     64rem the column fills the screen and this falls back to the padding. */
  padding-inline: max(var(--page-pad), calc((100% - var(--page-max-wide)) / 2 + var(--page-pad)));
  overflow-x: auto;           /* one row always; it scrolls before it wraps */
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.subbar::-webkit-scrollbar { display: none; }
body.bar-hidden .subbar { top: 0; }
@media (prefers-reduced-motion: reduce) { .subbar { transition: none; } }
.subbar > * { flex: none; }
.subbar__tab {
  appearance: none;
  min-height: var(--tap);
  padding: 0 0.9rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600;
  line-height: 1; cursor: pointer;
}
.subbar__tab:hover { color: var(--text); }
.subbar__tab.is-on { color: var(--text); border-bottom-color: var(--accent-doc); }
.subbar__tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — where you are in the document, and how to step through it
   ════════════════════════════════════════════════════════════════════════ */
.dlg-jump {
  position: sticky;
  top: var(--nav-h);
  /* Reading forward hides the top bar; this row takes the edge it leaves,
     rather than hovering a bar's height down with text sliding behind it. */
  transition: top 0.22s ease;
  z-index: 70;
  /* Same spacing as the investors row: the bar is tight to what follows it,
     and the document below brings its own breathing room. */
  margin: 0;
  padding: 0.3rem 0 0;
  /* Same treatment as the nav row above it: flat on the page, one hairline
     underneath. No pill, no shadow — it is a bar, not a floating control. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.dlg-jump__row { display: flex; align-items: center; gap: 0.3rem; min-height: var(--tap); }
.dlg-jump .dlg-nav-toggle {
  flex: none;
  min-height: 2.1rem;
  padding: 0 0.85rem;
  position: static;          /* it lives in this row now, not stuck on its own */
}
.dlg-jump__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; flex: none;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: var(--ui-lg); line-height: 1; cursor: pointer;
}
.dlg-jump__arrow:hover:not(:disabled) { color: var(--text); background: var(--card); }
.dlg-jump__arrow:disabled { opacity: 0.3; cursor: default; }
.dlg-jump__arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dlg-jump__label {
  flex: 1 1 auto; min-width: 0;
  text-align: center;
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The progress line IS the bar's bottom edge, sitting on the hairline. */
.dlg-jump__track {
  height: 2px;
  margin: 0.25rem 0 -1px;
  background: transparent;
  overflow: hidden;
}
.dlg-jump__fill {
  display: block; height: 100%; width: 0;
  background: var(--accent-doc);
}
/* ——— The document's own controls, in the document's own bar ———
   Lock, version, Edit: they act on this document, so they stand at the end of
   the row that names where you are in it, not in the site's top bar. They
   never shrink — the heading beside them ellipsizes first, because a control
   that is half a control is worse than a title that is half a title. */
.dlg-docedit {
  display: flex; align-items: center; gap: 0.3rem;
  flex: 0 0 auto; margin-left: 0.2rem;
}
.dlg-docedit:empty { display: none; }
/* In this row the buttons sit beside 2.1rem arrows, so they match them. */
.dlg-docedit .dlg-topedit__btn { min-height: 2.1rem; padding: 0 0.75rem; }
.dlg-docedit .dlg-topedit__lock,
.dlg-docedit .dlg-topedit__more { width: 2.1rem; padding: 0; }
/* The state line belongs to writing; in the reading bar it would only push
   the heading aside for a word that is not there. */
.dlg-docedit .dlg-topedit__state { max-width: 8rem; }

body.bar-hidden .dlg-jump { top: 0; }
@media (prefers-reduced-motion: reduce) { .dlg-jump { transition: none; } }

/* No stepping while writing — the editor has the screen and its own toolbar. */
body.dlg-editing .dlg-jump { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — numbered sections (s.1, ss.1.1, ss.1.2, s.2, ss.2.1)
   ════════════════════════════════════════════════════════════════════════
   Done with counters, never by writing numbers into the markup. The editor
   saves whatever is in the document body, so an injected "1.2" would be
   saved into the document and then renumbered on top of itself the next
   time. A counter renders and is gone.

   Every heading number is prefixed `s.` — s.1., s.1.1., s.1.1.1. A numbered
   list inside a section is also 1., 1.1., and with both plain there was no
   telling, mid-document, whether "1.1" was a heading or the second item of a
   list. The one letter says which, without a reader having to go by the size
   of the type; the depth is already in the number itself. */
.dlg-doc, .dlg-editor__body { counter-reset: dsec; }
.dlg-doc h2, .dlg-editor__body h2 { counter-increment: dsec; counter-reset: dsub; }
.dlg-doc h3, .dlg-editor__body h3 { counter-increment: dsub; counter-reset: dsubsub; }
.dlg-doc h4, .dlg-editor__body h4 { counter-increment: dsubsub; }
.dlg-doc h2::before, .dlg-editor__body h2::before { content: "s." counter(dsec) ". "; }
.dlg-doc h3::before, .dlg-editor__body h3::before {
  content: "s." counter(dsec) "." counter(dsub) ". ";
}
.dlg-doc h4::before, .dlg-editor__body h4::before {
  content: "s." counter(dsec) "." counter(dsub) "." counter(dsubsub) ". ";
}
.dlg-doc h2::before, .dlg-doc h3::before, .dlg-doc h4::before,
.dlg-editor__body h2::before, .dlg-editor__body h3::before, .dlg-editor__body h4::before {
  /* The number labels the heading; it does not compete with it. Set in the
     UI face at a fixed small size so 4.6 stays the same weight beside an h2
     and an h3, instead of inheriting each heading's scale and boldness. */
  font-family: var(--sans);
  font-size: var(--ui-xs);
  font-weight: 400;
  color: var(--muted2);
  font-variant-numeric: tabular-nums;
}
/* Every heading starts at the same left edge, whatever its depth — h2, h3 and
   h4 alike. The number says how deep it is, and stepped titles were a second,
   weaker way of saying the same thing, one that left the eye no straight edge
   to run down.

   Where there is room, the number steps out of the text altogether and hangs
   in a rail to the left of that edge. In the editor the edge is where typing
   is allowed, so the numbers — the stylesheet's, not the writer's to change —
   are visibly outside it. Below this width there is no margin to hang in, so
   the number stays inline. */
@media (min-width: 48rem) {
  .dlg-doc, .dlg-editor__body { padding-left: var(--dlg-rail); }
  /* One rail, however many elements claim it. While you are writing, the
     editable body carries BOTH classes and sits INSIDE the article that also
     carries .dlg-doc — so the rule above landed twice and every heading and
     paragraph started 8.5rem in, with nothing on the right to answer it. The
     title, which is not inside the editor, kept the single rail, so the two
     did not even line up. The outer one is the rail; the inner one inherits
     the room it makes. */
  .dlg-doc .dlg-doc, .dlg-doc .dlg-editor__body { padding-left: 0; }
  /* A hanging indent, not absolute positioning: the number stays IN the
     heading's line box, so it sits on the same baseline as the words — taken
     out of flow it hung from the top of the line instead, floating above the
     heading it belongs to. The first line starts a rail's width to the left,
     the number fills exactly that width, and the words resume at zero. */
  .dlg-doc h2, .dlg-doc h3, .dlg-doc h4,
  .dlg-editor__body h2, .dlg-editor__body h3, .dlg-editor__body h4 {
    text-indent: calc(-1 * var(--dlg-rail));
  }
  .dlg-doc h2::before, .dlg-doc h3::before, .dlg-doc h4::before,
  .dlg-editor__body h2::before, .dlg-editor__body h3::before, .dlg-editor__body h4::before {
    display: inline-block;
    box-sizing: border-box;
    width: var(--dlg-rail);
    padding-right: 0.55rem;
    text-align: right;
    text-indent: 0;
    white-space: nowrap;
  }
}
/* ════════════════════════════════════════════════════════════════════════
   Dialog — folding a section shut
   ════════════════════════════════════════════════════════════════════════
   The arrow belongs to the heading and sits at the right edge of the column,
   opposite the number in its rail on the left: the two ends of the same line,
   one saying how deep this is, the other whether it is open.

   Quiet at rest — it is not a thing to be done, it is a thing available — and
   it takes the heading's own colour on hover so the whole line reads as one
   control. Scoped away from .dlg-editor__body, which also carries .dlg-doc:
   the editor has no arrows, and hiding a block a writer can still select into
   is how words get deleted without ever being seen.

   The hidden blocks are marked by JS on each change (applyFolds), never by a
   selector: no selector can say "everything until the next h2". */
.dlg-doc:not(.dlg-editor__body) h2,
.dlg-doc:not(.dlg-editor__body) h3,
.dlg-doc:not(.dlg-editor__body) h4 {
  position: relative;
  padding-right: 2.4rem;
}
.dlg-doc .is-tucked { display: none !important; }
.dlg-fold {
  position: absolute;
  right: 0;
  /* Centred on the FIRST line, not on the heading box: a heading that wraps
     to two lines would otherwise float its arrow between them. 0.6em is half
     of the 1.2 line-height; 1rem is half the button. */
  top: calc(0.6em - 1rem);
  width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.dlg-fold svg {
  width: 1.05rem; height: 1.05rem;
  transition: transform 0.18s ease;
}
.dlg-fold[aria-expanded="false"] svg { transform: rotate(-90deg); }
.dlg-fold:hover { color: var(--accent-doc); background: var(--card); }
.dlg-fold:focus-visible {
  color: var(--accent-doc);
  outline: 2px solid var(--accent-doc);
  outline-offset: 2px;
}
/* A shut section says how much is under it — "345 words" — so a reader
   scrolling past knows there is something here and roughly how much, rather
   than reading a row of headings that all look empty. The number is measured
   when the arrow is mounted and parked on the heading as data-folded; a
   section with no words at all (a lone diagram) keeps the bare ellipsis. */
.dlg-doc h2.is-folded::after,
.dlg-doc h3.is-folded::after,
.dlg-doc h4.is-folded::after {
  content: "\2026";
  margin-left: 0.4rem;
  color: var(--muted2);
  font-family: var(--sans);
  font-size: var(--ui-xs);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.15em;
  white-space: nowrap;
}
.dlg-doc h2.is-folded[data-folded]::after,
.dlg-doc h3.is-folded[data-folded]::after,
.dlg-doc h4.is-folded[data-folded]::after {
  content: "(" attr(data-folded) ")";
}
@media (prefers-reduced-motion: reduce) {
  .dlg-fold, .dlg-fold svg { transition: none; }
}

/* The words under a heading still follow it in, so a section and its
   subsections read as a column of headings over stepped text. Margin, not
   padding: a list keeps its own padding for the bullets, which padding here
   would overwrite. `data-under` is put on by indentBody(); the editor never
   carries it. A diagram stays centred and a table stays at full width — a step
   in would cost the one and push the other off a phone.

   Depth 1 is now an h2's body, not an h3's, so every block under any heading
   is stepped in and nothing under a section starts to the left of the
   heading's own first letter. Three levels because the depths moved up one. */
.dlg-doc > [data-under="1"]:not(img):not(table) { margin-left: 1.25rem; }
.dlg-doc > [data-under="2"]:not(img):not(table) { margin-left: 2.5rem; }
.dlg-doc > [data-under="3"]:not(img):not(table) { margin-left: 3.75rem; }

/* The document's own title is not section 1. */
.dlg-doc__title::before { content: none; }

/* The same numbers in the contents list, restarting for each document. The
   reset sits on the list, not the title: the rows are its children now, and a
   counter only reaches an element's own descendants and following siblings. */
.dlg-nav__secs { counter-reset: nsec; }
.dlg-nav__sec { counter-increment: nsec; counter-reset: nsub; }
.dlg-nav__sec.is-sub { counter-increment: nsub; counter-reset: none; }
.dlg-nav__sec::before { content: counter(nsec) ". "; color: var(--muted2); font-variant-numeric: tabular-nums; }
.dlg-nav__sec.is-sub::before { content: counter(nsec) "." counter(nsub) " "; }
/* A .docx import can leave a heading with nothing in it. It is invisible, but
   a counter would still spend a number on it — and the contents list, built
   from headings that have text, would then disagree with the document. */
.dlg-doc h2:empty, .dlg-doc h3:empty, .dlg-doc h4:empty,
.dlg-editor__body h2:empty, .dlg-editor__body h3:empty, .dlg-editor__body h4:empty {
  counter-increment: none;
}
.dlg-doc h2:empty::before, .dlg-doc h3:empty::before, .dlg-doc h4:empty::before,
.dlg-editor__body h2:empty::before, .dlg-editor__body h3:empty::before,
.dlg-editor__body h4:empty::before { content: none; }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — nested lists (1, 1.1, 1.1.1 and stepped bullets)
   ════════════════════════════════════════════════════════════════════════
   The same rule as the sections above: a number is a counter, never text in
   the document. Tab moves an ITEM; counters() reads the nesting and renders
   1.1 on its own, so indenting the first of five renumbers the other four and
   nothing is written into what gets saved. */
/* A bulleted list hangs its disc out into the list's own padding, so the dots
   sit half a rem in from the body's left edge. The numbers start there too:
   one marker column down the page, whether the list is bulleted or numbered.
   That is what --dlg-lmark is — the width of the column, and the step the
   words take to clear it. */
.dlg-doc ol, .dlg-editor__body ol {
  list-style: none;
  counter-reset: dlist;
  padding-left: 0.5rem;
}
.dlg-doc ol > li, .dlg-editor__body ol > li {
  counter-increment: dlist;
  /* Hanging indent: the number sits in the margin the padding opens up, and a
     line that wraps lines up under the words, not under the number. */
  padding-left: var(--dlg-lmark);
  text-indent: calc(-1 * var(--dlg-lmark));
}
.dlg-doc ol > li::before, .dlg-editor__body ol > li::before {
  content: counters(dlist, ".") ".";
  display: inline-block;
  box-sizing: border-box;
  min-width: var(--dlg-lmark);
  /* Left-aligned, at the dot's edge. The number was right-aligned before, to
     keep the gap to the words the same for 1. and for 1.1. — but that put the
     left edge wherever the number happened to end, which is the one edge the
     eye actually runs down, and it never matched the dots above it. The
     column is cut to fit "10." so a list of eleven does not step its last two
     items sideways; a 1.1.1 is wider still and widens the column for its own
     sublist, where every item widens with it. */
  text-align: left;
  padding-right: 0.45rem;
  text-indent: 0;
  font-family: var(--sans);
  font-size: var(--ui-xs);
  color: var(--muted2);
  font-variant-numeric: tabular-nums;
}
/* A bullet changes shape with the level, the way a number changes length. */
.dlg-doc ul, .dlg-editor__body ul { list-style: disc; }
/* The document sets this a few hundred lines up; the editor body never did,
   and took the browser's own 40px. That was invisible while the numbers were
   indented too, and is not now that they hang at the dots' edge. */
.dlg-editor__body ul { padding-left: 1.4rem; margin: 0 0 0.8rem; }
.dlg-doc ul ul, .dlg-editor__body ul ul { list-style: circle; }
.dlg-doc ul ul ul, .dlg-editor__body ul ul ul { list-style: square; }
/* A sublist is already stepped in by its parent item's padding, so it adds
   only what its own marker needs. text-indent is reset explicitly: it would
   otherwise inherit the hanging indent from the item above and pull the
   sublist's first line back into the margin. */
.dlg-doc ul ul, .dlg-doc ul ol, .dlg-doc ol ul, .dlg-doc ol ol,
.dlg-editor__body ul ul, .dlg-editor__body ul ol,
.dlg-editor__body ol ul, .dlg-editor__body ol ol {
  text-indent: 0;
  margin: 0.25rem 0 0;
}
/* Same shape the sections use: a dot after a top-level number, none after a
   nested one — 1., then 1.1, 1.2.1. A list and a heading on the same page
   should not number themselves two different ways. */
.dlg-doc ol ol > li::before, .dlg-editor__body ol ol > li::before {
  content: counters(dlist, ".");
}
.dlg-doc ol ol, .dlg-editor__body ol ol { padding-left: 0; }
.dlg-doc ol ul, .dlg-editor__body ol ul { padding-left: 1.1rem; }

/* ——— A checklist ———

   The same list, with a box where the bullet or the number was. Nothing about
   the list changes — data-check only redraws the marker — so taking the boxes
   off gives back exactly the list that was there before, numbering included.

   The box sits in the marker column the ol already establishes: the item pads
   its words in and hangs the marker back out with a negative text-indent, so a
   line that wraps lines up under the words rather than under the box. One
   number does both, and it is the box plus its gap, which is why it is written
   once here. `em` throughout, so the box grows with the words on a phone.

   The tick is a background image rather than a character: a ::before that
   carries text would have to be given a font-size, and every em in this block
   — the box, the gap, the indent — would then be measured against THAT size
   instead of the item's. */
.dlg-doc ul[data-check], .dlg-doc ol[data-check],
.dlg-editor__body ul[data-check], .dlg-editor__body ol[data-check] {
  --dlg-cbox: 1.05em;
  --dlg-cstep: 1.55em;   /* the box, plus the gap to the first letter */
  list-style: none;
  padding-left: 0.5rem;
}
.dlg-doc ul[data-check] > li, .dlg-doc ol[data-check] > li,
.dlg-editor__body ul[data-check] > li, .dlg-editor__body ol[data-check] > li {
  padding-left: var(--dlg-cstep);
  text-indent: calc(-1 * var(--dlg-cstep));
}
.dlg-doc ul[data-check] > li::before, .dlg-doc ol[data-check] > li::before,
.dlg-editor__body ul[data-check] > li::before,
.dlg-editor__body ol[data-check] > li::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  /* A numbered list's marker is a counter sized to hold "10." — a min-width,
     a gap after it, and a font-size of its own. All three have to go, or the
     box inherits a column's width instead of its own and stretches. The
     font-size especially: every em below is the ITEM's em, not a marker's. */
  min-width: 0;
  padding-right: 0;
  font-size: inherit;
  width: var(--dlg-cbox);
  height: var(--dlg-cbox);
  margin-right: calc(var(--dlg-cstep) - var(--dlg-cbox));
  vertical-align: -0.16em;
  text-indent: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 0.3em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76% 76%;
  /* The boxes are the one thing on the page that must survive a printer's
     "background graphics off" — an unticked list is not the document. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.dlg-doc ul[data-check] > li[data-done]::before,
.dlg-doc ol[data-check] > li[data-done]::before,
.dlg-editor__body ul[data-check] > li[data-done]::before,
.dlg-editor__body ol[data-check] > li[data-done]::before {
  border-color: var(--accent-doc);
  background-color: var(--accent-doc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3.1 3.1 6.5-6.9' fill='none' stroke='%23fff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* A finished line steps back without leaving: still readable, plainly behind
   the ones that are not done. A sublist under a done item goes quiet with it,
   which is what a finished task containing sub-tasks means. */
.dlg-doc ul[data-check] > li[data-done],
.dlg-doc ol[data-check] > li[data-done],
.dlg-editor__body ul[data-check] > li[data-done],
.dlg-editor__body ol[data-check] > li[data-done] {
  color: var(--muted2);
  /* Struck as well as dimmed. A line through the words is the older, plainer
     sign that a thing is finished, and it survives being read at a glance in
     a way that a lighter grey alone does not. The box keeps its tick clean:
     it is an inline-block, and a line-through does not cross into an atomic
     inline box. */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* Only the writer's copy answers to a click, so only the writer's copy says
   it will. The reader's boxes are a reading, not a control. */
.dlg-editor__body ul[data-check] > li:hover::before,
.dlg-editor__body ol[data-check] > li:hover::before {
  border-color: var(--accent-doc);
}

/* ════════════════════════════════════════════════════════════════════════
   Developers — tasks
   ════════════════════════════════════════════════════════════════════════ */
.tk-group {
  font-family: var(--serif); font-size: var(--ds-h3); font-weight: 600;
  color: var(--accent-doc); margin: 1.1rem 0 0.4rem;
}
.tk-group:first-child { margin-top: 0.2rem; }
.tk-row {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.tk-row:last-child { border-bottom: none; }
.tk-tick { flex: none; display: flex; align-items: flex-start; padding-top: 0.15rem; }
.tk-tick input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-doc); cursor: pointer; }
.tk-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tk-title { font-family: var(--sans); font-size: var(--ui-base); color: var(--text); line-height: 1.35; }
.tk-detail { font-family: var(--sans); font-size: var(--ui-xs); color: var(--muted2); line-height: 1.4; }
.tk-when {
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-doc);
}
/* Finished work stays readable — struck through, not hidden or greyed to mush. */
.tk-row.is-done .tk-title { text-decoration: line-through; color: var(--muted2); }
.tk-row.is-done .tk-detail, .tk-row.is-done .tk-when { opacity: 0.65; }


/* A floating add button, bottom right. Fixed to the viewport, above the safe
   area on a phone, and it turns into its own close button when the card is
   open so there are never two ways to dismiss competing for the same corner. */
.fab {
  position: fixed;
  /* Sits at the right edge of the CONTENT column, not the window. On a wide
     screen the window edge is a long way from anything it acts on. */
  right: max(var(--page-pad), env(safe-area-inset-right),
             calc((100vw - var(--page-max-wide)) / 2 + var(--page-pad)));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  z-index: 140;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem;
  border: none; border-radius: 50%;
  background: var(--text); color: var(--bg);
  font-family: var(--sans); font-size: 1.75rem; font-weight: 400;
  line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-pop);
}
.fab:hover { filter: brightness(1.15); }
.fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.fab-card {
  position: fixed;
  right: max(var(--page-pad), env(safe-area-inset-right),
             calc((100vw - var(--page-max-wide)) / 2 + var(--page-pad)));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5rem);
  z-index: 140;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
}
.fab-card form { display: flex; flex-direction: column; gap: 0.55rem; }
.fab-card input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base);
}
.fab-card input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.fab-card__row { display: flex; gap: 0.5rem; justify-content: flex-end; }
.fab-card__dates { display: flex; gap: 0.5rem; }
.fab-card__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.fab-card__field span {
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  color: var(--muted2); letter-spacing: 0.04em; text-transform: uppercase;
}
.fab-card__field input { width: 100%; }

/* Tasks, filed by when they are due. */
.tk-bucket { border-bottom: 1px solid var(--line); }
.tk-bucket:last-child { border-bottom: none; }
.tk-bucket__head { display: flex; align-items: center; }
.tk-bucket__toggle {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; min-height: var(--tap);
  padding: 0.35rem 0;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--serif); font-size: var(--ds-h3); font-weight: 600;
  color: var(--accent-doc); text-align: left;
}
.tk-bucket__chev { font-family: var(--sans); font-size: var(--ui-base); width: 0.9rem; color: var(--muted2); }
.tk-bucket__label { flex: 1 1 auto; min-width: 0; }
.tk-bucket__n {
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  color: var(--muted2);
}
.tk-bucket__toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tk-bucket__body { padding-bottom: 0.5rem; }
/* Overdue is the one bucket that should catch the eye. */
.tk-bucket.is-late .tk-bucket__label, .tk-bucket.is-late .tk-bucket__n { color: var(--danger); }
.tk-bucket.is-late .tk-when { color: var(--danger); }
.fab-card__title {
  margin: 0 0 0.2rem;
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted2);
}
.fab-card textarea {
  width: 100%; resize: vertical; min-height: 2.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); line-height: 1.4;
}
.fab-card textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Filters for tasks: one row that scrolls sideways rather than wrapping, so
   the list below never shifts down as chips come and go. */
.tk-filters {
  display: flex; align-items: center; gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.8rem;
}
/* One chip: a fixed "Type:" label with the select sitting inside it, so the
   closed control reads "Type: All (14)" while the open list stays clean. */
.tk-filter {
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 2.1rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 500;
  cursor: pointer;
}
.tk-filter__label { color: var(--muted2); }
.tk-filter__chev { color: var(--muted2); font-size: var(--ui-xs); }
.tk-filter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Filtered is a state worth seeing at a glance. */
.tk-filter.is-on { background-color: var(--text); color: var(--bg); border-color: transparent; }
.tk-filter.is-on .tk-filter__label { color: var(--bg); opacity: 0.7; }
.tk-filter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.tk-filters::-webkit-scrollbar { display: none; }
.tk-filters > *, .tk-filters__types > * { flex: none; }
.tk-filters__types { display: flex; align-items: center; gap: 0.4rem; }
.tk-filters__sep { width: 1px; height: 1.4rem; background: var(--line); flex: none; }
.tk-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.1rem;
  padding: 0 0.7rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  font-family: var(--sans); font-size: var(--ui-base); font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.tk-chip:hover { color: var(--text); border-color: var(--text); }
.tk-chip.is-on { color: var(--bg); background: var(--text); border-color: transparent; }
.tk-chip.is-on .tk-chip__n { color: var(--bg); opacity: 0.7; }
.tk-chip__n { font-size: var(--ui-xs); font-weight: 600; color: var(--muted2); }
.tk-chip--check { cursor: pointer; }
.tk-chip--check input { accent-color: var(--accent-doc); }
.tk-chip:focus-visible, .tk-chip--check:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fab-card select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--ui-base);
}
.tk-meta { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.tk-type {
  font-family: var(--sans); font-size: var(--ui-xs); font-weight: 600;
  color: var(--muted2); text-transform: capitalize;
}
.tk-filter.is-on .tk-filter__chev { color: var(--bg); opacity: 0.7; }
.pp-pop__item.is-on { font-weight: 600; color: var(--accent-doc); }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — printing
   Printing has no control of its own: it is an item in the bar's ⋯ menu,
   which already exists and already looks right. All that is left here is the
   line the printout carries, and the print stylesheet itself.
   ════════════════════════════════════════════════════════════════════════ */
/* The version and the date, on paper only — a printout that has left the
   browser should still say which version it is. */
.dlg-doc__printmeta { display: none; }

@media print {
  /* Everything that is a way to move, comment or sign in is screen furniture;
     paper keeps only the document. Scoped to this page: the other pages of
     the site print as they always have. */
  [data-page="dialog"] .top-bar,
  [data-page="dialog"] .skip-link,
  .dlg-nav, .dlg-scrim, .dlg-jump, .dlg-dock, .dlg-confirm, .dlg-cam,
  .dlg-count, .dlg-c__edit, .dlg-c__remove,
  .dlg-fold,
  /* The other columns are a way to work on this document, not part of it:
     the assistant, the map, a second document, and the strip and dividers
     that arrange them. "Print the whole document" means this one. */
  .dlg-pane, .dlg-wshead, .dlg-wsdiv,
  .dlg-bubble { display: none !important; }

  /* And the document column stops being a column. The workspace sets its
     width and left edge in pixels, at a higher specificity than the reset
     below, so paper has to say so. */
  body.dlg-ws .dlg-layout {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* The pinned pane is not printed, so the room the page was keeping for it
     is not kept either. */
  body[data-page="dialog"] { background: #fff; color: #000; margin: 0; padding-left: 0; }

  .dlg-layout { display: block; max-width: none; margin: 0; padding: 0; }
  .dlg-main { display: block; }
  .dlg-doc { padding-top: 0; font-size: 11pt; line-height: 1.45; color: #000; }
  .dlg-doc a { color: #000; text-decoration: underline; }
  .dlg-doc mark {
    background: #ffe9a3; color: #000;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .dlg-doc__printmeta {
    display: block; font-family: var(--sans); font-size: 9pt;
    color: #444; margin: 0 0 1.2rem;
  }

  /* A heading orphaned at the foot of a page, and a comment split across two,
     are the two ways a printed document stops reading as one. */
  .dlg-doc h1, .dlg-doc h2, .dlg-doc h3, .dlg-doc h4 {
    break-after: avoid; page-break-after: avoid;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* One comment, one paragraph, one picture holds together; a long thread is
     allowed to run over a page break rather than leave one half-empty. */
  .dlg-doc p, .dlg-doc li, .dlg-doc img, .dlg-c {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* On screen a wide table scrolls inside itself; on paper there is nothing to
     scroll, so it lays out as a table again and fits the page. */
  .dlg-doc table {
    display: table; width: 100%; max-width: 100%;
    overflow: visible; font-size: 9pt;
  }
  .dlg-doc td, .dlg-doc th { border: 1px solid #999; }
  .dlg-doc thead { display: table-header-group; }

  /* The threads printing under each section: quieter than on screen, and
     nothing at all where a section drew no comment. */
  .dlg-thread {
    margin: 0.4rem 0 1rem; padding-left: 0.6rem;
    border-left: 2px solid #bbb;
  }
  .dlg-thread:empty { display: none; }
  /* The pill that says "comments" is a button, and buttons do not print — so
     on paper the thread says it for itself, or a comment reads as part of the
     section it was written about. */
  .dlg-thread::before {
    content: "Comments";
    display: block; font-family: var(--sans); font-size: 8pt;
    letter-spacing: 0.08em; text-transform: uppercase; color: #666;
    margin: 0 0 0.35rem;
  }
  .dlg-c__meta { color: #444; }
  .dlg-c__av { background: #ddd !important; color: #000 !important; }
  .dlg-c__file { border: 1px solid #999; }
}

/* ——— The graph pane ————————————————————————————————————————————————————
   Geometry is the AI pane's (.dlg-pane), because they are the same column and
   only one is ever in it. What is different here is that the middle of the
   pane is a canvas that must take every pixel the head and the legend leave —
   a map you have to scroll is not a map. */
.dlg-graph__legend {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.dlg-graph__key {
  font-size: 0.7rem; cursor: pointer;
  background: var(--bg); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.15rem 0.6rem 0.15rem 1.35rem;
  position: relative;
}
/* The key IS the line it turns on: same dash, same colour. */
.dlg-graph__key::before {
  content: ""; position: absolute; left: 0.45rem; top: 50%;
  width: 0.65rem; border-top: 1.5px dashed currentColor;
}
.dlg-graph__key.is-links { color: var(--accent-doc); }
.dlg-graph__key.is-terms { color: #3f8f74; }
.dlg-graph__key[aria-pressed="false"] {
  color: var(--text-muted); opacity: 0.55; text-decoration: line-through;
}
/* The focused document's row: what it can tell you (is-see, held down to
   light it) and where you can go from it (is-act). Same pill as the legend
   keys so the two rows read as one instrument. */
.dlg-graph__actions {
  display: flex; gap: 0.35rem; flex-wrap: wrap;
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.dlg-graph__chip {
  font-size: 0.7rem; cursor: pointer;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.dlg-graph__chip.is-act { color: var(--accent-doc); border-color: var(--accent-doc); }
.dlg-graph__chip.is-see[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.dlg-graph__chip:disabled { cursor: default; color: var(--text-muted); opacity: 0.6; }
/* The empty row's one line, set to the chips' height so the map holds still. */
.dlg-graph__hint { font-size: 0.7rem; line-height: 1.5rem; color: var(--text-muted); }
.dlg-graph__stage { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; }
.dlg-graph__canvas { display: block; }
.dlg-graph__canvas:focus-visible { outline: 2px solid var(--accent-doc); outline-offset: -2px; }
.dlg-graph__status {
  margin: 0; padding: 0.45rem 0.9rem;
  font-size: 0.72rem; line-height: 1.35; color: var(--text-muted);
  border-top: 1px solid var(--border);
  min-height: 1.1rem;
}
/* An icon-only button in a bar of worded ones: square it up so it reads as a
   control rather than a letter that failed to load. */
.dlg-topedit__graph { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem 0.4rem; }
.dlg-topedit__graph[aria-pressed="true"] { color: var(--accent-doc); border-color: var(--accent-doc); }

/* ——— The second document ———————————————————————————————————————————————
   Geometry is the other panes' — it is a column like they are. What is its
   own is the type: the same serif document, set a size down, because a column
   half the width of the page holds half the words per line. It reads and does
   not write: no composer, no threads, no version picker. */
.dlg-side__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 1rem 1.6rem;
}
.dlg-side__doc { font-size: 0.95rem; line-height: 1.6; padding-top: 0.9rem; }
.dlg-side__doc h1, .dlg-side__doc .dlg-doc__title { font-size: 1.2rem; margin-top: 1.3rem; }
.dlg-side__doc h2 { font-size: 1.08rem; margin-top: 1.3rem; }
.dlg-side__doc h3 { font-size: 1rem; }
.dlg-side__doc h4 { font-size: 0.95rem; }
.dlg-side__doc table { font-size: 0.85rem; }
.dlg-side__note {
  margin: 1.1rem 0; font-family: var(--sans); font-size: var(--ui-sm); color: var(--muted2);
}
/* The title takes the room, then these two sit together at the end of it. */
.dlg-side__swap {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--text-muted); padding: 0 0.25rem;
}
.dlg-side__swap:hover { color: var(--accent-doc); }
.dlg-side .dlg-pane__x { margin-left: 0; }

/* In the documents list: open this one BESIDE the one being read, rather than
   instead of it. There is only one column below the workspace width, so
   there the list goes back to being a list of places to go. */
.dlg-nav__beside {
  appearance: none; flex: none; cursor: pointer;
  min-width: 1.8rem; min-height: 1.8rem;
  border: 1px solid var(--line-soft); border-radius: var(--r-control);
  background: none; color: var(--muted2);
  font-family: var(--sans); font-size: var(--ui-sm); line-height: 1;
}
.dlg-nav__beside:hover { color: var(--text); border-color: var(--chip); background: var(--bg-elevated); }
@media (max-width: 47.99rem) { .dlg-nav__beside { display: none; } }

/* ——— The workspace: three movable columns ———————————————————————————————
   Document, assistant and map side by side on a wide screen. The geometry is
   not a grid: the document column is the page's own <main>, in normal flow,
   so that reading still scrolls the window and writing still scrolls the
   region. Each column is instead TOLD its left edge and its width, in pixels,
   on :root — dialog.js computes them, these rules only spend them.

   Everything here is inert until body.dlg-ws is set, which happens on a wide
   screen with two columns open, or with one while you are writing. A reader
   with only the document open is not in a workspace at all: the page is the
   centred document it has always been, with no strip of chrome above it. */
.dlg-wshead { display: none; }
.dlg-wsdiv { display: none; }

@media (min-width: 48rem) {
  body.dlg-ws {
    --ws-head-h: 2.4rem;
    --ws-inner: 1.35rem;
  }

  /* The document column. */
  body.dlg-ws .dlg-layout {
    max-width: none;
    width: var(--ws-doc-w);
    margin-left: var(--ws-doc-l);
    margin-right: 0;
    padding-left: var(--ws-inner);
    padding-right: var(--ws-inner);
    padding-top: calc(var(--ws-head-h) + 0.9rem);
  }
  /* The old geometry made room for one pane at a fixed 25rem on the right.
     There is no "the right" here — there are columns, and they are placed. */
  body.dlg-ws.dlg-pane-open .dlg-layout { padding-right: var(--ws-inner); }

  /* The two panes stop being pinned to the window's right edge and become
     columns like the document: placed, sized, and bounded on all four sides. */
  body.dlg-ws .dlg-pane {
    left: var(--ws-col-l);
    width: var(--ws-col-w);
    right: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
  }
  body.dlg-ws #dlg-pane { --ws-col-l: var(--ws-ai-l); --ws-col-w: var(--ws-ai-w); }
  body.dlg-ws #dlg-graph { --ws-col-l: var(--ws-graph-l); --ws-col-w: var(--ws-graph-w); }
  body.dlg-ws #dlg-side { --ws-col-l: var(--ws-doc2-l); --ws-col-w: var(--ws-doc2-w); }

  /* The document has no pane to carry a head, so it is given a strip of one —
     same height, same top edge, same grip as the other two. */
  body.dlg-ws .dlg-wshead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: fixed;
    z-index: 41;
    top: var(--nav-h);
    left: var(--ws-doc-l);
    width: var(--ws-doc-w);
    height: var(--ws-head-h);
    padding: 0 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-card) var(--r-card) 0 0;
  }
  body.dlg-ws .dlg-pane__head {
    height: var(--ws-head-h);
    padding: 0 0.7rem;
    gap: 0.5rem;
    flex: 0 0 auto;
  }
  /* One label per column: a quiet uppercase name, so the heads read as a row
     of column titles rather than unrelated headings. */
  body.dlg-ws .dlg-pane__title {
    font: 600 0.67rem/1 var(--sans);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The document column's head says which document, so it carries the two
     controls that answer that: the library, and the documents open now.
     Contents is worded — it is the way into every document, and an icon for
     that is a guess the reader has to make. */
  .dlg-wshead__contents {
    appearance: none; flex: 0 0 auto; cursor: pointer;
    min-height: 1.6rem; padding: 0 0.6rem;
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    background: var(--card); color: var(--text-muted);
    font: 600 0.67rem/1 var(--sans);
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .dlg-wshead__contents:hover { color: var(--text); border-color: var(--chip); }
  .dlg-wshead__contents[aria-expanded="true"] { color: var(--accent-doc); border-color: var(--accent-doc); }

  /* Tabs: what is open, and a + for one more. They name documents, so they
     are set in the document's own serif and in ordinary case — an uppercase
     title is a label, and these are names. */
  /* No overflow:hidden here, tempting as it is: the + menu is a child of this
     strip and clipping the strip would clip the menu. The tabs shrink with
     their own ellipsis instead, and the + never shrinks. */
  .dlg-wstabs {
    display: flex; align-items: center; gap: 0.2rem;
    flex: 1 1 auto; min-width: 0;
  }
  .dlg-wstab {
    appearance: none; flex: 0 1 auto; min-width: 0; max-width: 13rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid transparent; border-radius: var(--r-control);
    background: none; color: var(--muted2);
    font-family: var(--serif); font-size: 0.82rem; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  button.dlg-wstab { cursor: pointer; }
  button.dlg-wstab:hover { color: var(--text); background: var(--card); border-color: var(--line-soft); }
  .dlg-wstab.is-current { color: var(--text); font-weight: 600; background: var(--card); border-color: var(--border); }
  .dlg-wstabs__add { flex: 0 0 auto; margin-left: 0.1rem; }
  .dlg-wstabs__add .dlg-topedit__more {
    width: 1.7rem; min-height: 1.6rem; height: 1.6rem;
    font-size: 0.85rem; padding: 0;
  }
  /* A column is at least 250px wide and this menu is 11rem, so hanging it
     from the button's right edge keeps it inside the column whichever slot
     the document has been moved to. */
  .dlg-wstabs__add .dlg-topedit__pop { min-width: 11rem; max-width: 15rem; }
  .dlg-wstabs__add .dlg-topedit__item {
    display: block; min-height: 2rem; line-height: 2rem;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* The same controls again, in the column head — where they go while the
     editor has the column and the step bar is away. The head is a 2.4rem
     strip, so everything in it is scaled to the tabs beside it rather than to
     the top bar it came from. */
  .dlg-wshead__ctl {
    display: flex; align-items: center; gap: 0.25rem;
    flex: 0 0 auto; margin-left: auto;
  }
  .dlg-wshead__ctl:empty { display: none; }
  .dlg-wshead__ctl .dlg-topedit__btn {
    min-height: 1.6rem; height: 1.6rem; padding: 0 0.6rem;
    font-size: 0.72rem;
  }
  .dlg-wshead__ctl .dlg-topedit__lock,
  .dlg-wshead__ctl .dlg-topedit__more { width: 1.7rem; padding: 0; }
  .dlg-wshead__ctl .dlg-topedit__more { font-size: 0.85rem; }
  .dlg-wshead__ctl .dlg-topedit__pill { font-size: 0.62rem; padding: 0.1rem 0.45rem; }
  .dlg-wshead__ctl .dlg-topedit__state { font-size: 0.68rem; max-width: 8rem; }
  .dlg-wshead__ctl .dlg-topedit__graph { padding: 0 0.35rem; }
  .dlg-wshead__ctl .dlg-topedit__graph svg { width: 0.95rem; height: 0.95rem; }
  .dlg-wshead__ctl .dlg-topedit__lock svg { width: 0.95rem; height: 0.95rem; }
  /* A column is only ever a few hundred pixels wide, so the menu hangs from
     the button's right edge and stays inside it. */
  .dlg-wshead__ctl .dlg-topedit__pop { min-width: 11rem; max-width: 15rem; }

  /* The grip. It is a button, so the column can also be moved with the
     keyboard — focus it and press an arrow. */
  .dlg-wsgrip {
    appearance: none;
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0 0.1rem;
    color: var(--muted2);
    font-size: 0.95rem;
    line-height: 1;
    cursor: grab;
    touch-action: none;
  }
  .dlg-wsgrip:hover { color: var(--text); }
  .dlg-wsgrip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 3px; }
  body.dlg-ws-moving, body.dlg-ws-moving .dlg-wsgrip { cursor: grabbing; }
  body.dlg-ws-moving { user-select: none; }
  body.dlg-ws .dlg-wshead.is-moving,
  body.dlg-ws .dlg-pane__head.is-moving {
    background: color-mix(in srgb, var(--accent-doc) 12%, var(--bg-elevated));
    border-color: var(--accent-doc);
  }

  /* The divider sits IN the gap between two columns, not on either one, so a
     drag belongs to the boundary rather than to a pane. */
  body.dlg-ws .dlg-wsdiv {
    display: block;
    position: fixed;
    z-index: 45;
    top: var(--nav-h);
    bottom: 0;
    width: 14px;
    margin-left: -7px;
    cursor: col-resize;
    touch-action: none;
  }
  .dlg-wsdiv::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 1px;
    transform: translateX(-50%);
    background: var(--border);
    border-radius: 2px;
  }
  .dlg-wsdiv:hover::after,
  .dlg-wsdiv.is-active::after { width: 3px; background: var(--accent-doc); }
  body.dlg-ws-sizing { cursor: col-resize; user-select: none; }

  /* Two things that were centred on the window are really the document's:
     the composer a reader types into, and the bar a writer formats with. They
     follow the document column wherever it goes. */
  body.dlg-ws .dlg-dock {
    left: var(--ws-doc-l);
    right: auto;
    width: var(--ws-doc-w);
    max-width: none;
    margin: 0;
    padding-left: var(--ws-inner);
    padding-right: var(--ws-inner);
  }
  body.dlg-ws .dlg-editor__toolbar {
    left: var(--ws-doc-l);
    right: calc(100% - var(--ws-doc-l) - var(--ws-doc-w));
  }

  /* Closing a column is an answer to "what am I working on", so the ones left
     should be seen to take the room rather than appear already holding it. */
  @media (prefers-reduced-motion: no-preference) {
    body.dlg-ws .dlg-layout,
    body.dlg-ws .dlg-pane,
    body.dlg-ws .dlg-wshead,
    body.dlg-ws .dlg-dock,
    body.dlg-ws .dlg-wsdiv {
      transition: left 190ms ease, right 190ms ease, width 190ms ease, margin-left 190ms ease;
    }
    /* Not while a hand is on it: a drag that lags its own pointer reads as a
       dropped frame, not as ease. */
    body.dlg-ws-sizing .dlg-layout,
    body.dlg-ws-sizing .dlg-pane,
    body.dlg-ws-sizing .dlg-wshead,
    body.dlg-ws-sizing .dlg-dock,
    body.dlg-ws-sizing .dlg-wsdiv,
    body.dlg-ws-moving .dlg-layout,
    body.dlg-ws-moving .dlg-pane,
    body.dlg-ws-moving .dlg-wshead,
    body.dlg-ws-moving .dlg-dock,
    body.dlg-ws-moving .dlg-wsdiv { transition: none; }
  }
}

/* Paper has one column, and it is the document. */
@media print {
  .dlg-wshead, .dlg-wsdiv, .dlg-pane { display: none !important; }
  body.dlg-ws .dlg-layout { width: auto; margin: 0; padding: 0; }
}