/* docket, in the mroc design system.
   Tokens are copied from mroc-design-system/tokens/tokens.css — change them
   there and re-copy, never edit a value here on its own.
   Monochrome by default: `attention` appears at most once per view. */

@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/IBMPlexMono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root,
[data-theme="light"] {
  --surface: #fafafa; --surface-raised: #ffffff; --surface-sunken: #f0f0f0;
  --border: #b8b8b8; --border-strong: #737373;
  --ink: #171717; --ink-muted: #525252; --ink-subtle: #6b6b6b; --ink-inverse: #ffffff;
  --attention: #5c2a6e; --attention-quiet: #ece2f2; --on-attention: #ffffff;
  --focus-ring: #5c2a6e; --success: #0a6349; --danger: #ab1e29; --on-danger: #ffffff;
  --shadow-overlay: 0 10px 28px rgba(23,23,23,0.18);
  --hue-0: #b4502f; --hue-1: #946a00; --hue-2: #4f7d1e; --hue-3: #1d7f75;
  --hue-4: #2f62a8; --hue-5: #6a54c4; --hue-6: #a4407e; --hue-7: #7a6546;
}
[data-theme="dark"] {
  --surface: #0e1012; --surface-raised: #1e2125; --surface-sunken: #060707;
  --border: #474d56; --border-strong: #666f7d;
  --ink: #e9eef7; --ink-muted: #9eabc1; --ink-subtle: #828c9f; --ink-inverse: #14171d;
  --attention: #c68ada; --attention-quiet: #352a44; --on-attention: #16101c;
  --focus-ring: #c68ada; --success: #3fd6a6; --danger: #ff7a80; --on-danger: #14171d;
  --shadow-overlay: 0 10px 28px rgba(0,0,0,0.65);
  --hue-0: #e8906f; --hue-1: #e0b454; --hue-2: #9ccb6b; --hue-3: #5fc4b8;
  --hue-4: #72a9ec; --hue-5: #a99bf0; --hue-6: #e38fc4; --hue-7: #c2ae8f;
}
/* Both themes are peers; with no attribute set, follow the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0e1012; --surface-raised: #1e2125; --surface-sunken: #060707;
    --border: #474d56; --border-strong: #666f7d;
    --ink: #e9eef7; --ink-muted: #9eabc1; --ink-subtle: #828c9f; --ink-inverse: #14171d;
    --attention: #c68ada; --attention-quiet: #352a44; --on-attention: #16101c;
    --focus-ring: #c68ada; --success: #3fd6a6; --danger: #ff7a80; --on-danger: #14171d;
    --shadow-overlay: 0 10px 28px rgba(0,0,0,0.65);
  --hue-0: #e8906f; --hue-1: #e0b454; --hue-2: #9ccb6b; --hue-3: #5fc4b8;
  --hue-4: #72a9ec; --hue-5: #a99bf0; --hue-6: #e38fc4; --hue-7: #c2ae8f;
  }
}

html {
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
  --hairline: 1px; --control-height: 36px; --control-height-sm: 28px;
  --page-max: 1120px;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
}
/* A swap replaces the link just clicked, which Chrome's scroll anchoring
   prefers as its anchor because it has focus, and losing it jumps the list;
   the swap already keeps the scroll where it was. */
html { overflow-anchor: none; }
* { box-sizing: border-box; }
/* viewport-fit=cover lays the page under a notch and home bar: surfaces reach
   the edges, and each gutter adds the inset so content keeps out of it */
html { --inset-l: env(safe-area-inset-left, 0px); --inset-r: env(safe-area-inset-right, 0px);
  --inset-b: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- type styles, from tokens.json --- */
.display-m { font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.heading   { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; }
.body      { font-size: 15px; line-height: 24px; font-weight: 400; }
.body-sm   { font-size: 13px; line-height: 20px; font-weight: 400; }
.label     { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
.code      { font-family: var(--font-mono); font-size: 13px; line-height: 22px; }
.code-sm   { font-family: var(--font-mono); font-size: 12px; line-height: 20px; font-weight: 500; }
.meta      { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
             letter-spacing: 0.08em; text-transform: uppercase; }
/* Interface text is 500, not the 400 of running prose — it is chrome, not copy. */
.ui        { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; }
.muted { color: var(--ink-muted); }

/* --- controls --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  height: var(--control-height); padding: 0 var(--space-4);
  border: var(--hairline) solid transparent; border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.btn--sm { height: var(--control-height-sm); padding: 0 var(--space-3); font-size: 12px; }
/* Primary actions are ink-filled. `attention` is for the one action a screen is
   built around, and no screen here has one. */
.btn--primary { background: var(--ink); color: var(--ink-inverse); }
.btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--danger { background: var(--danger); color: var(--on-danger); }
.btn--quiet {
  height: var(--control-height-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-muted); font-family: var(--font-sans);
  font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none;
}
.btn--quiet:hover { background: var(--surface-sunken); color: var(--ink); }
.icon { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; background: transparent;
  color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; text-decoration: none; }
.icon:hover { background: var(--surface-sunken); color: var(--ink); }
input[type="text"], input[type="search"], input[type="password"], textarea, select {
  font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--ink);
  height: var(--control-height); padding: 0 var(--space-3); background: var(--surface-raised);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-md);
}
textarea { height: auto; min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; }
/* scope inputs suggest names as you type; Chrome's dropdown arrow beside
   them reads as a select, which they are not */
input[list]::-webkit-calendar-picker-indicator { display: none !important; }
input::placeholder, textarea::placeholder { color: var(--ink-subtle); }
label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-muted); margin: 0 0 var(--space-2); }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  background: var(--surface-sunken); color: var(--ink-muted);
  border: var(--hairline) solid var(--border);
}

/* --- page chrome ---
   Everything runs the window's full width; the gutter is the only margin. */
.band { background: var(--surface-raised); }
.hdr { --lockup: 46px; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) calc(var(--space-5) + var(--inset-r)) var(--space-4) calc(var(--space-5) + var(--inset-l)); }
.wm { font-size: var(--lockup); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); text-decoration: none; flex: none; white-space: nowrap; }
/* The glyph fills 40 of its 48 units, so a box of 0.66em draws it at about
   the x-height; the drop puts the glyph's foot, not its box's, on the baseline. */
.wm .o { display: inline-block; width: 0.66em; height: 0.66em; margin: 0 0.02em;
  vertical-align: calc(-0.66em * 4 / 48); color: var(--attention); }
/* The opening is painted in the band's color rather than cut out, so it can
   shut: a wink squeezes it to a slit and back, at the times the server rolled.
   No fill mode: a waiting wink that held its first frame would mask the others. */
.wm .o .lid { fill: var(--surface-raised); transform-box: fill-box; transform-origin: center;
  animation: wink 340ms ease-in-out var(--w1, 9999s),
             wink 340ms ease-in-out var(--w2, 9999s),
             wink 340ms ease-in-out var(--w3, 9999s); }
@keyframes wink {
  0%, 100% { transform: scaleY(1); }
  40%, 55% { transform: scaleY(0.08); }
}
/* beside a drawer the header has only the list's width: the search gives way first */
.hdr .right, .hdr .bar { min-width: 0; }
.hdr .right { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.hdr .bar { display: flex; gap: var(--space-2); align-items: center; }
.bar > [role="search"] { width: 260px; min-width: 0; }
.hdr input[type="search"] { width: 100%; font-size: 13px; font-weight: 500; }
.new svg { display: none; }
.theme-pick, .sign-out { width: var(--control-height); height: var(--control-height); flex: none; }
.theme-pick { anchor-name: --theme; }
.new { flex: none; }
.hdr [data-sign-out] { display: flex; flex: none; }
/* the brand's icon spec: Lucide, 20px, 1.5px stroke, square caps and joins */
.theme-pick svg, .sign-out svg, .menu svg, .new svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter; flex: none; }
/* above the phone layout only, so the bar fixed to a phone's foot is never
   inside a contained box */
@media (width > 860px) {
  .hdr { container-type: inline-size; }
  /* the drawer covers the window's right edge and keeps its own inset */
  .has-drawer > .main { --inset-r: 0px; }
}
/* below this the search would cut its own placeholder short: New entry
   gives up its words for the + the phone's bar shows */
@container (width < 520px) {
  .bar .new { width: var(--control-height); padding: 0; }
  .new svg { display: block; }
  .new .words { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
}
/* then the wordmark takes the phone's lockup, on the full one's line so the
   band keeps its height when the drawer opens */
@container (width < 424px) {
  .wm { font-size: 32px; line-height: var(--lockup); }
}
.theme-pick:has(+ .menu:popover-open) { background: var(--surface-sunken); color: var(--ink); }
.menu { min-width: 180px; padding: var(--space-2); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-overlay);
  color: var(--ink); }
.menu:popover-open { display: flex; flex-direction: column; gap: 2px; }
/* without anchor positioning the popover keeps its default, centered */
@supports (position-area: bottom) {
  .menu { position-anchor: --theme; position-area: bottom span-left; inset: auto; margin: 6px 0 0; }
}
.menu button { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.menu button:hover { background: var(--surface-sunken); }
.menu button.on { color: var(--attention); }
.menu button.on::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
/* fixed height: filters sit in the tab row and must never make it grow */
.nav { display: flex; align-items: stretch; gap: var(--space-5); height: 40px;
  padding: 0 calc(var(--space-5) + var(--inset-r)) 0 calc(var(--space-5) + var(--inset-l));
  border-bottom: var(--hairline) solid var(--border); }
.nav > a { display: flex; align-items: center; text-decoration: none; color: var(--ink-muted);
  margin-bottom: -1px; border-bottom: 2px solid transparent; }
.nav > a.on { color: var(--ink); border-bottom-color: var(--ink); }
.nav .n { font-family: var(--font-mono); font-size: 11px; font-weight: 500; margin-left: 6px; color: var(--ink-muted); }
.nav .end { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.nav .filters { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md);
  background: var(--surface-sunken); }
.seg button { height: 24px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-muted); cursor: pointer;
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--surface-raised); color: var(--ink);
  box-shadow: 0 0 0 var(--hairline) var(--border); }

/* A scope's color sits behind its name, mixed down so ink stays readable on
   it in both themes: recognition at a glance, never the only label. */
.hue-0 { --hue: var(--hue-0); } .hue-1 { --hue: var(--hue-1); } .hue-2 { --hue: var(--hue-2); }
.hue-3 { --hue: var(--hue-3); } .hue-4 { --hue: var(--hue-4); } .hue-5 { --hue: var(--hue-5); }
.hue-6 { --hue: var(--hue-6); } .hue-7 { --hue: var(--hue-7); }
.tint { background: color-mix(in srgb, var(--hue) 26%, var(--surface-raised)); color: var(--ink);
  border-radius: var(--radius-sm); padding: 0 6px; text-decoration: none; }
.panel > header .name.tint { padding: 0 8px; }
.pill.tint { border-color: color-mix(in srgb, var(--hue) 60%, var(--surface-raised)); }
.drawer .crumb.tint { color: var(--ink); padding: 1px 6px; }
.facts a.tint { text-decoration: none; }
/* A flair is outlined, its color a dot beside its name: a kind of work, never
   mistaken for a scope, whose color fills behind the name. A name too long
   for the row is cut short rather than widen it. */
.flairs { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.flair { display: inline-block; max-width: 100%; height: 20px; padding: 0 7px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: var(--hairline) solid color-mix(in srgb, var(--hue) 50%, var(--border));
  border-radius: 10px; background: var(--surface-raised);
  font-family: var(--font-mono); font-size: 11px; line-height: 18px; font-weight: 500;
  color: var(--ink-muted); text-decoration: none; }
.flair::before, .pill--flair::before { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: 5px; border-radius: 50%; background: var(--hue); vertical-align: 1px; }
.flair:hover { color: var(--ink); border-color: var(--hue); }
.pill--flair::before { margin-right: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: var(--control-height-sm);
  padding: 0 var(--space-3); border-radius: var(--radius-md);
  border: var(--hairline) solid var(--border); background: var(--surface-raised);
  font-size: 12px; font-weight: 500; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.pill--on { border-color: var(--ink); color: var(--ink); padding-right: var(--space-2); }
.error { margin: var(--space-4) calc(var(--space-5) + var(--inset-r)) 0 calc(var(--space-5) + var(--inset-l)); padding: var(--space-3) var(--space-4);
  border: var(--hairline) solid var(--danger); color: var(--danger);
  border-radius: var(--radius-md); font-size: 14px; }

/* --- panels: one per scope, packed into two columns by the server --- */
.cols { display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-5) calc(var(--space-5) + var(--inset-r)) var(--space-5) calc(var(--space-5) + var(--inset-l)); }
.col { flex: 1; min-width: 0; }
.panel { background: var(--surface-raised); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5); }
.panel:last-child { margin-bottom: 0; }
.panel > header { display: flex; align-items: center; gap: var(--space-3); height: 28px;
  margin-bottom: var(--space-2); }
.panel > header .name { font-size: 21px; line-height: 28px; font-weight: 600;
  letter-spacing: -0.012em; color: var(--ink); text-decoration: none; }
.panel > header .name:hover { text-decoration: underline; text-underline-offset: 3px; }
.panel > header .counts { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.panel > header .tools { margin-left: auto; display: flex; gap: var(--space-1); opacity: 0;
  transition: opacity 120ms ease-out; }
.panel:hover > header .tools, .panel:focus-within > header .tools { opacity: 1; }
/* the name turns into its own input, at its own size and place */
.rename { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.rename .name-input { flex: 1; min-width: 0; max-width: 360px; height: 28px; padding: 0 8px;
  font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; }
/* The highlight's box is there before the pointer is: rows are always inset
   to it, so hovering paints a color and moves nothing. */
.entry { position: relative; display: grid; grid-template-columns: 30px 1fr auto; column-gap: var(--space-3);
  align-items: baseline; margin: 0 calc(var(--space-3) * -1); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--ink);
  transition: background-color 120ms ease-out; }
.entry:hover { background: var(--attention-quiet); }
/* attention-quiet is the token's own case, a selected item; the open one also
   carries the view's single use of attention */
.entry.on { background: var(--attention-quiet); box-shadow: inset 2px 0 0 var(--attention); }
.entry .id { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--ink-subtle); text-align: right; }
.entry .title { display: block; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink);
  text-decoration: none; }
/* The title's link covers its row, so a tap anywhere on it opens the entry.
   The flairs come after it in the page and so paint above it, each a link of
   its own; no z-index, which would lift them over the phone's bar too. */
.entry .title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.entry .flair { position: relative; }
.entry .title:focus-visible { outline: none; }
.entry:has(> span > .title:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.entry .src { display: block; font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  font-weight: 500; color: var(--ink-muted); margin-top: 3px; word-break: break-word; }
/* a flair too long for the row is cut short, never widens it */
.entry > span:nth-child(2) { min-width: 0; }
.entry .flairs { margin-top: var(--space-1); }
.entry .reason { display: block; font-size: 13px; line-height: 20px; color: var(--ink-muted); margin-top: 3px; }
.entry .age { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink-muted); white-space: nowrap; }
/* compact: one line per entry; source and via wait in the drawer */
.compact .entry { padding-top: var(--space-1); padding-bottom: var(--space-1); }
/* flairs share the title's line while it keeps room to be read, and wrap
   below it on a narrow screen */
.compact .entry > span:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--space-2); row-gap: 2px; }
.compact .entry .title { flex: 1 1 16ch; min-width: 0; font-size: 14px; line-height: 20px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact .entry .flairs { margin-top: 0; }
.compact .entry .src, .compact .entry .reason { display: none; }
/* a refresh can reorder the list; the tint shows the eye what it changed */
.entry.fresh { animation: fresh 1500ms ease-out; }
@keyframes fresh { from { background-color: var(--attention-quiet); } }
@keyframes fresh-still { from, to { background-color: var(--attention-quiet); } }
/* the row an action takes out of the list folds away while its swap waits */
.htmx-swapping .entry.on { interpolate-size: allow-keywords; overflow: hidden;
  animation: leave 200ms ease-in forwards; }
@keyframes leave { to { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } }

/* --- drawer: a floating layer, so it gets the overlay shadow --- */
.with-drawer { display: flex; align-items: flex-start; }
/* the list reaches the window's foot, so the click-away target does too */
.with-drawer > .main { flex: 1; min-width: 0; min-height: 100vh; position: relative; z-index: 0; }
/* Clicking outside the drawer closes it, with no script: a link to the closed
   view lies under the list, and while the drawer is open only controls take a
   click. Any other point falls through to that link. */
.backdrop { position: absolute; inset: 0; z-index: -1; cursor: default; }
.has-drawer > .main * { pointer-events: none; }
.has-drawer > .main :is(a, button, input, textarea, select, label),
.has-drawer > .main :is(a, button, input, textarea, select, label) * { pointer-events: auto; }
/* pinned to the viewport, not to the list's height, so its actions stay in
   reach however long the list is */
.drawer { width: 440px; flex: none; position: sticky; top: 0; align-self: flex-start;
  height: 100vh; background: var(--surface-raised);
  border-left: var(--hairline) solid var(--border); box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column; }
.drawer > header { display: flex; align-items: center; gap: var(--space-2); height: 56px; flex: none;
  padding: 0 calc(var(--space-4) + var(--inset-r)) 0 var(--space-5); border-bottom: var(--hairline) solid var(--border); }
.drawer > header .close { margin-left: auto; }
.drawer .crumb { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-muted); }
/* links are ink with a 2px underline — a page of violet links has no emphasis left */
.drawer .self { color: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.drawer .body { padding: var(--space-5) calc(var(--space-5) + var(--inset-r)) var(--space-5) var(--space-5);
  flex: 1; overflow-y: auto; }
.drawer .body .text { font-size: 14px; line-height: 22px; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; }
.drawer footer { display: flex; gap: var(--space-2); align-items: center; flex: none;
  padding: var(--space-4) calc(var(--space-5) + var(--inset-r)) calc(var(--space-4) + var(--inset-b)) var(--space-5);
  border-top: var(--hairline) solid var(--border); }
.drawer .error { margin: 0 0 var(--space-4); }
.drawer .verdict { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--attention-quiet); border-radius: var(--radius-md); font-size: 14px; line-height: 21px; }
.drop { display: flex; gap: var(--space-2); align-items: center; flex: 1; min-width: 0; }
.drop input[type="text"] { flex: 1; min-width: 0; }

/* --- the entry on its own page: the text, and a column of facts beside it --- */
.page { padding: var(--space-4) calc(var(--space-5) + var(--inset-r)) var(--space-7) calc(var(--space-5) + var(--inset-l)); }
.crumbs { display: flex; align-items: center; gap: var(--space-2); height: 28px; margin-bottom: var(--space-4); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { color: var(--ink-subtle); }
.crumbs .here { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-7);
  background: var(--surface-raised); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-6); }
.doc h1 { margin: 0 0 var(--space-5); max-width: 36ch; }
.doc .text { font-size: 15px; line-height: 24px; color: var(--ink); max-width: 72ch;
  white-space: pre-wrap; word-break: break-word; }
.doc .verdict { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); max-width: 72ch;
  background: var(--attention-quiet); border-radius: var(--radius-md); font-size: 15px; line-height: 24px; }
.doc .acts { margin-top: var(--space-6); }
.doc .form { max-width: 72ch; }
.doc .form .acts { margin-top: var(--space-2); }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4);
  align-content: start; padding-left: var(--space-5); border-left: var(--hairline) solid var(--border); }
.facts dt { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--ink-muted); }
.facts dd { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 20px; font-weight: 500;
  color: var(--ink); word-break: break-word; }
.facts a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.drawer .body > .flairs { margin: 0 0 var(--space-4); }
.doc .main > .flairs { margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.drawer .facts { margin: 0 0 var(--space-5); padding: 0; border: 0; gap: var(--space-1) var(--space-4); }
.acts { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

.text img, .verdict img { display: block; max-width: 100%; height: auto; margin: var(--space-2) 0;
  border: var(--hairline) solid var(--border); border-radius: var(--radius-md); }

/* --- toasts: what an action did, pinned where the list's scroll cannot hide it --- */
.toasts { position: fixed; z-index: 1; left: calc(var(--space-5) + var(--inset-l));
  bottom: calc(var(--space-5) + var(--inset-b));
  max-width: calc(100vw - 2 * var(--space-5) - var(--inset-l) - var(--inset-r)); }
.toast { display: flex; gap: var(--space-3); align-items: center; min-height: 44px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  background: var(--surface-raised); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); font-size: 14px;
  animation: toast-in 160ms ease-out, toast-out 160ms ease-in 5840ms forwards; }
/* a pointer or focus on the toast stops its clock, so Undo never runs out
   from under someone reaching for it (WCAG 2.2.1) */
.toast:hover, .toast:focus-within { animation-play-state: paused; }
.toast form { display: inline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
/* changes held back while a form is open: said once, in the corner the
   toasts leave free */
.live-note { position: fixed; z-index: 1; right: calc(var(--space-5) + var(--inset-r));
  bottom: calc(var(--space-5) + var(--inset-b));
  padding: var(--space-1) var(--space-3); font-family: var(--font-mono); font-size: 12px;
  font-weight: 500; line-height: 20px; color: var(--ink-muted); background: var(--surface-raised);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-lg); }
.live-note:empty { display: none; }

/* a title edits in place: its button reads as the heading it sits in, and
   the textarea that replaces it takes the heading's type (app.js) with its
   text where the heading's was */
[data-retitle] { font: inherit; letter-spacing: inherit; color: inherit; text-align: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: text; }
[data-retitle]:hover { text-decoration: underline dotted var(--border-strong); text-underline-offset: 0.2em; }
.retitle textarea { display: block; height: auto; min-height: 0; resize: none; overflow: hidden;
  field-sizing: content;
  width: calc(100% + 2 * (var(--space-2) + var(--hairline)));
  margin-left: calc(-1 * (var(--space-2) + var(--hairline))); padding: 0 var(--space-2); }

/* --- forms and empty states --- */
.form input[type="text"], .form textarea { display: block; width: 100%; margin-bottom: var(--space-4); }
.form textarea:has(+ .attach:not([hidden])) { margin-bottom: var(--space-2); }
.form input[hidden] { display: none; }
/* app.js's chip field: the chips and what is being typed share one box that
   reads as a text field, and wraps as the chips fill it */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  min-height: var(--control-height); margin-bottom: var(--space-4); padding: 3px var(--space-1) 3px var(--space-2);
  background: var(--surface-raised); border: var(--hairline) solid var(--border-strong);
  border-radius: var(--radius-md); cursor: text; }
.chips:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.form .chips input[type="text"] { flex: 1 1 10ch; width: auto; min-width: 10ch; height: 26px; margin: 0;
  padding: 0 var(--space-1); border: 0; background: transparent; }
.chips input:focus-visible { outline: none; }
.chips .flair { height: 24px; line-height: 22px; padding-right: 0; font-size: 12px; cursor: default; }
.chips .flair button { width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-muted); font-size: 10px; line-height: 22px; vertical-align: top;
  cursor: pointer; }
.chips .flair button:hover { background: var(--surface-sunken); color: var(--ink); }
.chips-status { display: block; margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: 12px; line-height: 16px; color: var(--danger); }
.chips-status:empty { display: none; }
/* a body grows with what is typed until it would push Save out of reach,
   then scrolls; app.js does the same where field-sizing is missing */
.form textarea { field-sizing: content; min-height: 176px; max-height: 60vh; }
.attach { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.attach[hidden] { display: none; }
.server-now { margin: calc(-1 * var(--space-2)) 0 var(--space-4); padding: var(--space-2) var(--space-3);
  max-height: 10em; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  font-size: 13px; line-height: 20px; color: var(--ink-muted);
  border-left: 2px solid var(--border-strong); }
.server-now > span { font-weight: 500; color: var(--ink); }
.draft-note { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin: 0 0 var(--space-4); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.attach .upload-status { font-size: 12px; line-height: 16px; color: var(--danger); }
textarea.drop-target { outline: 2px dashed var(--focus-ring); outline-offset: 2px; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-3); padding: var(--space-8) calc(var(--space-5) + var(--inset-r)) var(--space-8) calc(var(--space-5) + var(--inset-l)); }
.empty .eye { color: var(--border-strong); }
.empty p { margin: 0; max-width: 46ch; color: var(--ink-muted); }
.login { max-width: 420px; margin: 0 auto; padding: var(--space-8) var(--space-5); }
.login input { width: 100%; margin-bottom: var(--space-4); }

@media (max-width: 860px) {
  .cols { flex-direction: column; gap: 0;
    padding: var(--space-4) calc(var(--space-4) + var(--inset-r)) var(--space-4) calc(var(--space-4) + var(--inset-l)); }
  .col { width: 100%; }
  .col:empty { display: none; }
  .panel { margin-bottom: var(--space-4); }
  .panel > header .counts { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* stretched, not sized to content: the list is as wide as the window,
     never as wide as the header would like to be */
  .with-drawer { flex-direction: column; align-items: stretch; }
  /* stacked, the drawer comes first: tapping an entry must not send you to
     the bottom of the page to read it */
  .drawer { order: -1; width: 100%; height: auto; position: static; border-left: 0;
    border-bottom: var(--hairline) solid var(--border); box-shadow: none; }
  .drawer .body { overflow: visible; }
  .drawer > header, .drawer .body { padding-left: calc(var(--space-5) + var(--inset-l)); }
  .drawer footer { padding: var(--space-4) calc(var(--space-5) + var(--inset-r)) var(--space-4)
      calc(var(--space-5) + var(--inset-l)); }
  .hdr { --lockup: 32px; gap: var(--space-2);
    padding: var(--space-4) calc(var(--space-4) + var(--inset-r)) var(--space-4) calc(var(--space-4) + var(--inset-l)); }
  /* at the foot, in the thumb's reach; the page's end and focus keep clear of it */
  html { --bar-room: calc(var(--control-height) + 2 * var(--space-2) + var(--hairline) + var(--inset-b));
    scroll-padding-bottom: var(--bar-room); }
  .hdr .bar { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0;
    padding: var(--space-2) calc(var(--space-4) + var(--inset-r)) calc(var(--space-2) + var(--inset-b))
      calc(var(--space-4) + var(--inset-l));
    background: var(--surface-raised); border-top: var(--hairline) solid var(--border); }
  /* keyed to forms whose buttons can sit at the foot, not to focus, which moves mid-click */
  #page:has(form.form, form.drop, form.rename) .bar { display: none; }
  /* the backdrop under the list would take a tap between its controls */
  .has-drawer > .main .bar { pointer-events: auto; }
  .bar > [role="search"] { flex: 1; min-width: 0; }
  /* below 16px iOS Safari zooms the page into a field it focuses */
  .hdr .bar input[type="search"] { width: 100%; font-size: 16px; }
  .bar .new { flex: none; width: var(--control-height); padding: 0; }
  .new svg { display: block; }
  .new .words { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .with-drawer > .main { padding-bottom: var(--bar-room); }
  .page { padding-bottom: calc(var(--space-7) + var(--bar-room)); }
  .nav { gap: var(--space-4); padding: 0 calc(var(--space-4) + var(--inset-r)) 0 calc(var(--space-4) + var(--inset-l)); }
  /* a long filter is cut short rather than pushing the row past the window */
  .nav .pill { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    line-height: calc(var(--control-height-sm) - 2 * var(--hairline)); }
  .nav .pill--flair::before { margin-right: 6px; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
  .facts { padding: var(--space-4) 0 0; border-left: 0; border-top: var(--hairline) solid var(--border); }
  .nav .filters .ui, .nav .seg { display: none; }
  .toasts { left: calc(var(--space-4) + var(--inset-l)); bottom: calc(var(--bar-room) + var(--space-2));
    max-width: calc(100vw - 2 * var(--space-4) - var(--inset-l) - var(--inset-r)); }
  .live-note { right: calc(var(--space-4) + var(--inset-r));
    bottom: calc(var(--bar-room) + var(--space-2)); }
}
/* Without hover a panel's tools could never be found, so they stay in view,
   and the header wraps them below rather than squeeze the name and counts.
   Some touch browsers claim hover; their pointer still gives them away. */
@media (hover: none), (pointer: coarse) {
  .panel > header { flex-wrap: wrap; height: auto; min-height: 28px; row-gap: var(--space-1); }
  .panel > header .name { min-width: 0; overflow-wrap: anywhere; }
  .panel > header .tools { opacity: 1; min-width: 0; max-width: 100%; }
  .panel > header .tools a { display: block; min-width: 0; line-height: var(--control-height-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* a flair on a row sits on the link to its entry: a finger that misses it
   opens the entry, so it is a bigger target with room around it */
@media (pointer: coarse) {
  .flairs { gap: var(--space-2); }
  .flair { height: 24px; line-height: 22px; padding: 0 9px 0 8px; }
  .entry .flairs { margin-top: 6px; margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .entry, .panel > header .tools { transition-duration: 1ms; }
  .htmx-swapping .entry.on { animation-duration: 1ms; }
  .entry.fresh { animation: fresh-still 1500ms; }
  .toast { animation: toast-out 1ms 6s forwards; }
  .wm .o .lid { animation: none; }
}