/* 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);

  /* Three radii: a pill, a card, a control. Nothing else. */
  --r-pill: 999px;
  /* 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;
  --dlg-pad: clamp(1rem, 4vw, 2rem);
  --dlg-nav-w: 13.5rem;
  --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__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__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;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
}
.top-bar__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.8rem);
  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; }
  .top-bar__links { grid-column: 1 / -1; order: 3; justify-content: flex-start; gap: 1.1rem; }
  .top-bar__links:empty { display: none; }
  .top-bar__page { font-size: var(--ui-lg); min-height: var(--tap); }
  .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); }
}

/* ════════════════════════════════════════════════════════════════════════
   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: 44rem;
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 4vw, 2rem) 4rem;
}
.page--wide { max-width: 64rem; }

/* ════════════════════════════════════════════════════════════════════════
   Dialog — layout
   Desktop: a sticky left pane beside the document. Narrow: the same markup
   slides in as a drawer behind the "Contents" button. One pane, two shapes.
   ════════════════════════════════════════════════════════════════════════ */
.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__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); }
.dlg-nav__chev { font-size: var(--ui-xs); color: var(--muted2); flex: none; }
.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);
}
.dlg-nav__sec-t { 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); }

@media (min-width: 62rem) {
  .dlg-layout { grid-template-columns: var(--dlg-nav-w) minmax(0, 1fr) var(--dlg-nav-w); }
  .dlg-nav {
    position: sticky;
    top: calc(var(--nav-h) + 1.2rem);
    max-height: calc(100vh - var(--nav-h) - 3rem);
    overflow-y: auto;
  }
  .dlg-nav-toggle { display: none; }
}
@media (max-width: 61.99rem) {
  /* 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; }
}

/* ════════════════════════════════════════════════════════════════════════
   Dialog — the document
   ════════════════════════════════════════════════════════════════════════ */
.dlg-doc { font-family: var(--serif); font-size: var(--ds-body); line-height: var(--ds-lead); color: var(--text); }
.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); }
.dlg-doc table { border-collapse: collapse; margin: 1rem 0; font-size: 0.95em; }
.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; }
.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; }
.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 editing, the bar must not slide away — it holds the controls. */
body.dlg-editing .top-bar { top: 0 !important; }

/* 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; }
@media (min-width: 62rem) {
  /* Same trap for the sidebar: its sticky offset clears the top bar, which the
     editing layout already clears — leaving it stranded a bar's height down.
     Mobile keeps position:fixed; that one is a drawer, not a column. */
  body.dlg-editing .dlg-nav { position: static; top: auto; }
}

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

/* 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; gap: 0.15rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.3rem 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
}
.dlg-editor__toolbar::-webkit-scrollbar { display: none; }
/* Nothing in the row may shrink — a squeezed icon is a mis-tap. */
.dlg-editor__toolbar > * { flex: none; }
.dlg-editor__sep {
  width: 1px; height: 1.4rem; flex: none;
  margin: 0 0.35rem;
  background: var(--line);
}
.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.is-on { color: var(--text); background: var(--card); box-shadow: 0 0 0 1px var(--border); }
.dlg-editor__tool.is-bold { font-weight: 800; }
.dlg-editor__tool.is-italic { font-style: italic; }
.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);
}
@media (min-width: 62rem) {
  .dlg-dock { grid-template-columns: var(--dlg-nav-w) minmax(0, 1fr) var(--dlg-nav-w); }
  .dlg-dock__card { grid-column: 2; }
}
/* 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); }
.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 { min-height: 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;
}