/* Officially — a records interface.

   One idea runs through this file: the publisher is the object, and the
   provenance state is its primary attribute. A row leads with who published,
   the way a social feed does, because that is the claim this product makes —
   and then refuses the rest of that shape. Where a social app puts engagement
   counts, a row here puts record metadata: versions, documents, withdrawal,
   whether the source page still resolves. There is no follower count, no
   ranking and no reaction anywhere, and there is not going to be (§3, §88).

   The handle is the domain. `ec.europa.eu` is what verification actually
   proves, and a domain cannot be released and reassigned to somebody else —
   so ADR-035's rule that an alias is never an identifier holds by
   construction here rather than by anyone remembering it.

   Colour means one thing each. Verdigris is the accent and the one state we
   are entitled to call verified. Ochre is "something about this record
   changed" — revised, withdrawn, a claim not yet proven. Brick is an
   unreachable URL and nothing else, because a dead link is not a withdrawal
   (ADR-024) and must never be able to look like one. */

/* ---- the faces ----
   Self-hosted, not linked from Google. Reading a public record here never
   requires an account and the analytics are cookieless (§99) — a stylesheet
   that made every reader's browser announce itself to a third party on every
   page would undo that quietly, for a typeface.

   Latin and latin-ext only, at the weights actually used: the archive is
   mostly English and European, and anything outside those ranges falls back to
   the stack below rather than shipping a megabyte for the cases that do not
   arise. Newsreader is referenced only by publisher prose, so a browser never
   fetches it for the feed.

   Archivo — a grotesque drawn for headlines and UI, which is what almost all
   of this is. IBM Plex Mono — identifiers: domains, timestamps, versions,
   file sizes. Newsreader — the publisher's own words, the one thing on this
   site meant to be read rather than scanned. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-normal-400-700-latin-ext-f0161952.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/archivo-normal-400-700-latin-51bfae9b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-normal-400-latin-ext-d3045dec.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-normal-400-latin-d803141a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-normal-500-latin-ext-82f2cde0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-normal-500-latin-3f7bbac1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/newsreader-italic-400-latin-ext-42b23cfc.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/newsreader-italic-400-latin-0b0e0d9c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/newsreader-normal-400-latin-ext-8661244e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/newsreader-normal-400-latin-dd08b472.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Cool slate, biased toward the accent. A pure grey reads as unconsidered. */
  --ground:     #F5F7F8;
  --surface:    #FFFFFF;
  --surface-2:  #EDF1F2;
  --surface-3:  #E4EAEC;
  --ink:        #111619;
  --ink-2:      #4C5960;
  /* 4.9:1 on the hover state, which is the darkest ground it lands on. This
     carries the handle on every row, the date, and the provenance labels —
     #6C7A82 cleared AA on the page and missed it on a hovered row, which is
     where a reader's eye actually is. */
  --ink-3:      #5C6A72;
  --line:       #E0E6E8;
  /* WCAG 1.4.11: the border of a control is how you find the control, and
     3:1 is the floor for finding it. --line, at 1.2:1, is a separator and is
     allowed to be invisible; this is not. */
  --line-2:     #7E8C93;

  --accent:     #0C6B60;
  --accent-2:   #0A564D;
  --wash:       #E2F0ED;

  --signal:     #8C5211;
  --signal-2:   #9E5C14;
  --signal-wash:#FAEFDF;

  --gone:       #8E3C35;
  --gone-wash:  #F9ECEA;

  /* Text on a filled accent. A token rather than a literal #fff, so the dark
     theme is one block and nothing defines a colour outside it. */
  --on-accent:  #FFFFFF;

  --ui:   "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --read: "Newsreader", Georgia, "Times New Roman", serif;

  --rail: 15.5rem;
  --aside: 18rem;
  --col: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:     #0C1013;
    --surface:    #141A1E;
    --surface-2:  #1C2429;
    --surface-3:  #242E34;
    --ink:        #E6ECEE;
    --ink-2:      #9FAEB5;
    --ink-3:      #87959D;
    --line:       #222B31;
    --line-2:     #66737F;
    --accent:     #4FBCAB;
    --accent-2:   #6FD0C0;
    --wash:       #0F2E2A;
    --signal:     #DCA766;
    --signal-2:   #E8B87C;
    --signal-wash:#2B2115;
    --gone:       #DE958B;
    --gone-wash:  #2C1917;
    --on-accent:  #08201D;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  /* Archivo's word space is narrow, and at 600 weight below about 14px it
     closes up far enough that "date unknown" reads as one word. Opened once,
     here, rather than patched on the handful of labels where it shows. */
  word-spacing: 0.045em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

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

/* Focus must be visible for keyboard users on every interactive element. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
}

/* ============================================================================
   The shell — rail, records, aside.

   Three columns rather than two. The rail is where to go; the middle is the
   archive; the right column carries what the footer disclaimer used to carry,
   in the place it is actually read. It is the first thing to go on a narrow
   screen, because nothing in it is the record.
   ========================================================================== */

/* The chrome goes to the edges; the reading measure stays a measure.
   ----------------------------------------------------------------------------
   This used to be one centred 80rem block, which put the navigation and the
   aside in the middle of a wide screen with empty margins outside them — and
   left the dashboard's columns competing for 42rem while a third of an ultrawide
   display sat unused. Now the rail is flush left, the aside flush right, and the
   space between them belongs to the page.
   Records still get a measure rather than the window: a feed row two thousand
   pixels wide is not a feed row. So the *column* stretches and its contents are
   capped and centred inside it — which looks identical to the old layout on a
   laptop and stops throwing away half an ultrawide. */
.shell {
  max-width: none;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--aside);
  align-items: start;
}

/* Everything the content column holds keeps the old measure, centred. The topbar
   included: it searches the records, so it belongs over them rather than spanning
   a width they never occupy. */
.content > * { max-width: var(--col); margin-inline: auto; }

/* The dashboard is the exception, and the reason this change was worth making:
   several columns side by side is the one layout that wants every pixel, so
   nothing inside it is capped (§48, TASK-105). */
.shell-wide { grid-template-columns: var(--rail) minmax(0, 1fr); }
.shell-wide .content > * { max-width: none; margin-inline: 0; }

.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  padding: 1.4rem 1rem 1rem 1.5rem;
  border-right: 1px solid var(--line);
}

/* The wordmark is set in the UI face, not a serif. "Officially" in a masthead
   serif invites the reading this product exists to prevent — that official
   means verified, or endorsed, or true. The dot is the same shape as the
   verified mark, at the one size where it is decoration rather than a claim. */
.wordmark {
  display: flex; align-items: baseline; gap: 0.4rem;
  text-decoration: none; color: var(--ink);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1;
}
.wordmark::after {
  content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--accent); flex: none;
}
.tagline {
  margin: 0.55rem 0 1.4rem; max-width: 11rem;
  color: var(--ink-3); font-size: 0.72rem; line-height: 1.45;
}

.rail { display: flex; flex-direction: column; gap: 0.1rem; }
.rail a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.42rem 0.6rem; border-radius: 8px;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
}
.rail a:hover { background: var(--surface-2); color: var(--ink); }
.rail a.on { background: var(--wash); color: var(--accent-2); font-weight: 600; }
.rail svg { flex: none; }

/* Topics are chips, not rail rows: five full-width rows cost about 10rem of a
   sidebar whose job is the links above them. They keep their labels rather
   than becoming hashtags — these are *our* classification (ADR-049), and a
   hashtag reads as something the publisher attached. */
.rail-topics {
  margin-top: 1.4rem;
  flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem;
}
.rail-topics a {
  display: inline-block;
  font-size: 0.72rem; font-weight: 500; padding: 0.16rem 0.55rem;
  border: 1px solid var(--line-2); border-radius: 99px;
  color: var(--ink-2); white-space: nowrap; line-height: 1.5;
}
.rail-topics a:hover { border-color: var(--accent); color: var(--accent-2); background: transparent; }
.rail-topics a.on {
  background: var(--wash); color: var(--accent-2); font-weight: 600;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.rail-heading {
  flex: 0 0 100%;
  font-size: 0.64rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3); margin: 0 0 0.45rem;
}

/* The one place the publishing side of the product is offered to a reader who
   has an account. Not a promise of authority: what it opens is a claim form. */
.publish-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  margin-top: 1.4rem; padding: 0.55rem; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.publish-cta:hover { background: var(--accent-2); }

.sidebar-foot { margin-top: auto; padding-top: 1rem; }

/* ---- the user drop-up ----
   <details> rather than a script. <summary> is focusable and operable with
   Enter or Space on its own, so the chrome keeps working with JavaScript off
   like every other page (ADR-030). */
.user-menu { position: relative; }
.user-menu > summary {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  padding: 0.45rem 0.5rem; border-radius: 10px; list-style: none;
  border: 1px solid var(--line-2); font-size: 0.8rem; color: var(--ink-2);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { background: var(--surface-2); color: var(--ink); }
.avatar {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 7px;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
}
.user-menu .who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu .caret { margin-left: auto; font-size: 0.7rem; transition: transform 120ms ease; }
.user-menu[open] .caret { transform: rotate(180deg); }

.user-panel {
  position: absolute; bottom: calc(100% + 0.4rem); left: 0; right: 0;
  display: flex; flex-direction: column; padding: 0.3rem;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 14%);
}
.user-panel a, .user-panel .linkish {
  text-align: left; font-size: 0.83rem; padding: 0.45rem 0.6rem; border-radius: 6px;
  color: var(--ink-2); text-decoration: none;
}
.user-panel a:hover, .user-panel .linkish:hover { background: var(--surface-2); color: var(--ink); }
.user-panel a.on { color: var(--ink); font-weight: 600; }
.user-panel form { margin: 0; }
/* `font: inherit` before the size, or the shorthand resets it and Sign out
   renders a size larger than the links above it. */
.user-panel .linkish {
  display: block; width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.83rem; line-height: inherit;
}

.sign-in {
  display: block; text-align: center; padding: 0.5rem 0.6rem; border-radius: 99px;
  border: 1px solid var(--line-2);
  font-size: 0.83rem; font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.sign-in:hover { border-color: var(--accent); color: var(--accent-2); }

/* ---- the records column ---- */
.content { background: var(--surface); border-right: 1px solid var(--line); min-height: 100vh; }

/* Sticky, so search is reachable from anywhere in a long archive without
   scrolling back. It spans the records rather than the window, because the
   records are what it searches. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 1.25rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.search { margin-left: auto; width: 100%; max-width: 15rem; }
.search input {
  font: inherit; font-size: 0.8rem; padding: 0.35rem 0.8rem; width: 100%;
  border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--ground); color: var(--ink);
}
.search input::placeholder { color: var(--ink-3); }
.topbar-title { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.topbar-title .section-count { font-weight: 400; }

/* A feed row is full-bleed — it has a hover surface and a left accent, and
   both of those want the whole column. Everything else is inset by the same
   amount, so a monogram's left edge and a heading's left edge line up. */
.wrap { padding-left: 1.25rem; padding-right: 1.25rem; }
main { padding: 1.4rem 0 3.5rem; }
/* The topbar is sticky, so anything jumped to — the skip link's target
   included — has to clear it rather than land underneath. */
#main, [id] { scroll-margin-top: 4rem; }

/* ---- the aside ---- */
.aside {
  position: sticky; top: 0; align-self: start;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.4rem 1.5rem 2rem 1.25rem;
}
.card {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.9rem 1rem; background: var(--surface);
}
.card h2 {
  margin: 0 0 0.55rem;
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-3);
}
.card p { margin: 0; font-size: 0.8rem; color: var(--ink-2); line-height: 1.5; }
.card p + p { margin-top: 0.5rem; }
.card-link {
  display: inline-block; font-size: 0.8rem; font-weight: 600;
  color: var(--accent-2); text-decoration: none;
}
.card-link:hover { text-decoration: underline; }

/* The legend for the three marks. On the page rather than in a help article,
   because the difference between them is the product. */
.mark-legend { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; }
.mark-legend > div { display: flex; gap: 0.55rem; align-items: flex-start; }
.mark-legend dt { flex: none; line-height: 1; padding-top: 0.12rem; }
.mark-legend dd { margin: 0; font-size: 0.775rem; line-height: 1.3; }
.mark-legend b { display: block; font-weight: 600; color: var(--ink); }
.mark-legend span { display: block; font-size: 0.72rem; color: var(--ink-3); line-height: 1.35; }
.legend-foot { margin-top: 0.75rem !important; font-size: 0.72rem !important; color: var(--ink-3) !important; }

/* What ingestion did in the last hour. The only number on a reader page that
   is about us rather than a publisher: it says the archive is being kept, and
   deliberately counts no audience (§3). */
.pulse { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; }
.pulse > div { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.78rem; }
.pulse dt {
  font-family: var(--mono); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 2.6rem;
}
.pulse dd { margin: 0; color: var(--ink-3); }

/* ============================================================================
   The provenance mark.

   One shape in three weights: a dashed ring for imported, a solid ring for
   claimed, a filled seal for verified. Nobody, asked, proven. Deliberately
   not a check in a shield — that is what every platform uses for a very
   different claim, and a reader who only skims would read ours as theirs.
   ========================================================================== */
.pm { display: inline-flex; flex: none; vertical-align: -0.12em; }
.pm svg { display: block; }
.pm-imported_official_source { color: var(--ink-3); }
.pm-claimed_unverified      { color: var(--signal); }
.pm-claimed_verified        { color: var(--accent); }

/* ============================================================================
   The record row.

   One definition of what a row is, rendered by the feed, an organization's
   archive, a topic, a search result and a reader's own following list. Two
   copies of this drift, and the first thing to drift is the withdrawal badge —
   the one part of a row that must never quietly disappear (ADR-024).
   ========================================================================== */

.feed { list-style: none; margin: 0; padding: 0; }
.feed > li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.85rem;
  padding: 0.95rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--line);
  transition: background 90ms ease;
}
.feed > li:hover { background: var(--surface-2); }

/* A publication made here, shown as first-class rather than as an echo of an
   import (ADR-073). Quiet on purpose: a visibly different card would make the
   imported records look like second-class citizens in their own archive. */
.feed > li.here { box-shadow: inset 3px 0 0 var(--accent); }

/* The monogram. Not a logo: logos would mean fetching from 239 publishers'
   domains, which is a new outbound surface §10 would have to police and a
   licensing question nobody has answered. The only tint is the ring a
   verified organization gets. */
.monogram {
  width: 2.5rem; height: 2.5rem; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  text-decoration: none;
}
a.monogram:hover { color: var(--ink); }
.monogram.v { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }

/* A <p>, so `margin: 0` rather than letting the browser's 1em push the title
   away from the name it belongs to. */
.byline {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  margin: 0; line-height: 1.35; font-size: 0.735rem; color: var(--ink-3);
}
.record-byline .sub { margin: 0.15rem 0 0; font-size: 0.775rem; color: var(--ink-3); }
.byline .org {
  font-size: 0.895rem; font-weight: 600; letter-spacing: -0.002em;
  color: var(--ink); text-decoration: none;
}
.byline .org:hover { color: var(--accent-2); }
/* The handle. A domain, in mono, because it is an identifier — and because it
   is the thing verification proves. Never an alias: an alias can mean two
   organizations, which disqualifies it (ADR-035). */
.byline .domain { font-family: var(--mono); }
.byline time { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.byline .sep { color: var(--line-2); }
/* A second publisher, named without ranking either of them (ADR-061). */
.byline .with { color: var(--ink-3); }
.byline .with a { color: var(--ink-2); text-decoration: none; }
.byline .with a:hover { color: var(--accent-2); }

.feed h2, .feed h3 {
  margin: 0.2rem 0 0.25rem;
  font-size: 1.005rem; font-weight: 600; line-height: 1.34;
  letter-spacing: -0.004em; text-wrap: balance;
}
.feed h2 a, .feed h3 a { color: var(--ink); text-decoration: none; }
.feed h2 a:hover, .feed h3 a:hover { color: var(--accent-2); }

.excerpt {
  margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- the metadata strip ----
   Where a social app puts engagement counts. These are facts about the record:
   what kind it is, what it carries, what happened to it. */
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.6rem; }

.kind {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 500; white-space: nowrap;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.1rem 0.42rem;
}
.kind svg { opacity: 0.8; flex: none; }
.kind.type { color: var(--ink-2); background: var(--surface-2); border-color: transparent; }
.kind.topic { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.kind.here { color: var(--accent-2); background: var(--wash); border-color: transparent; font-weight: 600; }
/* Ochre: this record changed. */
.kind.revised {
  color: var(--signal); background: var(--signal-wash);
  border-color: color-mix(in srgb, var(--signal) 35%, transparent);
}
.kind.withdrawn { color: var(--signal); background: var(--signal-wash); border-color: var(--signal); font-weight: 600; }
/* Brick, and its own words: an observation about a URL, never a retraction. */
.kind.gone { color: var(--gone); background: var(--gone-wash); border-color: color-mix(in srgb, var(--gone) 40%, transparent); }
.kind.current-mark { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---- withdrawal, in a row ----
   Above the title rather than in the strip below it. A withdrawal is the first
   thing about a record, not the last (ADR-024, §75). */
.withdrawn-strip {
  grid-column: 2; margin: 0 0 0.55rem;
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  font-size: 0.775rem; font-weight: 600; color: var(--signal);
  background: var(--signal-wash); border-radius: 7px; padding: 0.3rem 0.55rem;
}
.withdrawn-strip span { font-weight: 400; color: var(--ink-2); }
.withdrawn-strip svg { flex: none; }

/* ============================================================================
   Page furniture
   ========================================================================== */

h1 { font-size: 1.6rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.014em; margin: 0 0 0.4rem; text-wrap: balance; }
h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.004em; margin: 2.2rem 0 0.7rem; }

.lede { margin-bottom: 1.6rem; }
.lede p { color: var(--ink-2); margin: 0 0 0.4rem; font-size: 0.9rem; }
.lede p:last-child { margin-bottom: 0; }

.crumbs { font-size: 0.78rem; color: var(--ink-3); margin-bottom: 1.2rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.crumbs a:hover { color: var(--accent-2); }

.empty { color: var(--ink-3); font-size: 0.9rem; }
.empty h2 { margin-top: 0; color: var(--ink); }
.hint { font-size: 0.8rem; color: var(--ink-3); margin: 0.35rem 0 0; line-height: 1.5; }

.section-count { font-family: var(--mono); font-size: 0.78rem; font-weight: 400; color: var(--ink-3); }

/* ---- publication ---- */
.publication h1 { font-size: 1.72rem; letter-spacing: -0.018em; margin: 1.2rem 0 0.7rem; }
.publication-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.2rem; }

/* The byline of a record page: monogram, name, mark, domain, and the one
   control an account is actually for. */
.record-byline { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.record-byline .monogram { width: 2.75rem; height: 2.75rem; font-size: 0.85rem; }
.record-byline .lines { min-width: 0; }
.record-byline .follow { margin-left: auto; }

/* The provenance claim. Never "verified" — see ADR-003. */
.provenance {
  display: inline-flex; align-items: center; gap: 0.4rem; margin: 0;
  background: var(--wash); color: var(--accent-2);
  font-size: 0.75rem; font-weight: 600;
  padding: 0.25rem 0.6rem; border-radius: 99px;
}
/* Keyed on the publication's own provenance, not the organization's status:
   this chip says where *this record* came from. Imported is the quiet default;
   the accent is reserved for the one the organization published here itself. */
.provenance[data-provenance="imported_official_source"] { background: var(--surface-2); color: var(--ink-2); }

.body { font-family: var(--read); font-size: 1.11rem; line-height: 1.66; margin-top: 1.4rem; max-width: 34rem; }
.body p { margin: 0 0 1rem; }
.body h2, .body h3 { font-family: var(--ui); font-size: 1rem; margin: 1.6rem 0 0.5rem; }
.body img { max-width: 100%; height: auto; }

.continues {
  max-width: 34rem; margin: 0.4rem 0 0; padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem; color: var(--ink-3);
}

.canonical { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.85rem; word-break: break-word; }
.url-gone { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--gone); }

/* Both of these are about what the page is not showing. Quiet on purpose: a
   record page is a record, not a place to be sold something. */
.no-summary {
  margin: 1.2rem 0 0; padding: 0.85rem 1rem; max-width: 34rem;
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-2);
  background: var(--surface-2); border-radius: 10px;
}
.no-summary strong { color: var(--ink); font-weight: 600; }

.claim-note {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem;
  margin-top: 1.3rem; padding: 0.85rem 1rem; border-radius: 10px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 0.83rem; line-height: 1.55;
}
.claim-note strong { color: var(--ink); }
.claim-note svg { color: var(--ink-3); margin-top: 0.15rem; flex: none; }

/* ---- withdrawal, on a page ----
   Not hidden, not softened, and before anything else on the page. */
.withdrawn-banner {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem;
  background: var(--signal-wash); box-shadow: inset 3px 0 0 var(--signal);
  border-radius: 10px; padding: 0.9rem 1rem; margin: 1.2rem 0 0;
}
.withdrawn-banner svg { color: var(--signal); margin-top: 0.15rem; flex: none; }
.withdrawn-mark {
  margin: 0 0 0.2rem;
  font-size: 0.8rem; font-weight: 700; color: var(--signal);
}
.withdrawn-banner p { margin: 0; font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; }
.withdrawn-note { margin-top: 0.5rem !important; font-style: italic; }

/* ---- topics ----
   A machine label is visually distinct from a publisher's own, because the
   difference between "they said this" and "we think this" is the product. */
.topics { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.9rem 0 0; }
.topic-chip {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.12rem 0.5rem; border-radius: 6px; text-decoration: none;
  background: var(--wash); color: var(--accent-2); border: 1px solid transparent;
}
/* Ours: outlined rather than filled, so it reads as an annotation. */
.topic-chip.ours { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.topic-chip:hover { border-color: var(--accent); color: var(--accent-2); }
.topics-note { font-size: 0.72rem; color: var(--ink-3); }

/* ---- attachments ----
   For a regulator the PDF is frequently the publication and the page is a
   wrapper around it (§24, ADR-072). */
.attachments ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.attachments { max-width: 34rem; }
.attachments li {
  border: 1px solid var(--line); border-radius: 9px; padding: 0.6rem 0.8rem;
}
.attachments li:hover { border-color: var(--accent); background: var(--wash); }
.attachments a { font-size: 0.85rem; font-weight: 500; text-decoration: none; word-break: break-word; color: var(--ink); }
.attachments a:hover { color: var(--accent-2); }
.attachments .kind {
  display: block; border: 0; padding: 0.15rem 0 0; font-family: var(--mono);
  font-size: 0.7rem; color: var(--ink-3);
}
.attachments .quiet { font-family: var(--ui); }

/* ---- revisions, on a record page ---- */
.revisions { margin-top: 2.2rem; }
.revisions h2 { font-size: 0.95rem; color: var(--signal); margin-bottom: 0.4rem; }
.revisions-lede { font-size: 0.83rem; color: var(--ink-2); margin: 0 0 0.6rem; }
.revisions ol { list-style: none; margin: 0; padding: 0; }
.revisions li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.9rem;
  padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.83rem; color: var(--ink-2);
}
.revisions li strong { font-family: var(--mono); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.revisions li.current strong { color: var(--accent); }
.revisions li.current { color: var(--ink); }
.was { color: var(--ink-3); font-style: italic; }

/* ---- provenance panel ---- */
.provenance-detail dl, .facts {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.45rem 1rem;
  font-size: 0.82rem; margin: 0;
}
.provenance-detail dt, .facts dt { color: var(--ink-3); }
.provenance-detail dd, .facts dd { margin: 0; color: var(--ink-2); word-break: break-word; }
code {
  font-family: var(--mono); font-size: 0.8em;
  background: var(--surface-2); padding: 0.1rem 0.32rem; border-radius: 4px;
}

/* ---- organization profile ----
   A banner and a large monogram, the shape a reader already knows from every
   profile they have ever seen. What is underneath it is a registry entry. */
.banner { height: 6.5rem; background: linear-gradient(115deg, var(--accent-2), var(--accent) 55%, var(--wash)); }
.org-profile .toprow { display: flex; align-items: flex-end; gap: 1rem; margin-top: -2.1rem; }
.org-profile .toprow > .monogram {
  width: 4.5rem; height: 4.5rem; border-radius: 14px; font-size: 1.25rem;
  box-shadow: 0 0 0 4px var(--surface);
}
.org-profile .toprow > .monogram.v { box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px var(--accent); }
.org-profile .acts { margin-left: auto; display: flex; gap: 0.45rem; align-items: center; padding-bottom: 0.3rem; }
.org-profile h1 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0.85rem 0 0.2rem; font-size: 1.45rem; letter-spacing: -0.016em; }
.org-profile .handle { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); margin: 0; }
.org-profile .description { font-size: 0.89rem; color: var(--ink-2); max-width: 34rem; margin: 0.8rem 0 0; line-height: 1.55; }
.org-profile .facts { margin-top: 1.1rem; }

.follow form { margin: 0; }
.action {
  display: inline-block; font: inherit; cursor: pointer; text-decoration: none;
  font-size: 0.8rem; font-weight: 600; padding: 0.35rem 1rem; border-radius: 99px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.action:hover { background: var(--accent-2); border-color: var(--accent-2); }
/* Following is a state, not an invitation — outlined, so the filled button
   always means "this will change something". */
.action.following { background: none; color: var(--ink-2); border-color: var(--line-2); }
.action.following:hover { color: var(--gone); border-color: var(--gone); background: none; }

.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li {
  display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
  padding: 0.5rem 0; border-top: 1px solid var(--line);
  font-size: 0.82rem; word-break: break-word;
}
.sources li:first-child { border-top: 0; }
.warn { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gone); }

/* ---- organizations index ---- */
.orgs { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.orgs th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem; font-weight: 600;
}
.orgs td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.orgs tr:hover td { background: var(--surface-2); }
.orgs .who { display: flex; align-items: center; gap: 0.6rem; }
.orgs .monogram { width: 1.9rem; height: 1.9rem; border-radius: 7px; font-size: 0.62rem; }
.orgs .name { font-weight: 600; color: var(--ink); text-decoration: none; }
.orgs .name:hover { color: var(--accent-2); }
.orgs .domain { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-3); }
.orgs .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); color: var(--ink-2); }
.status { font-size: 0.72rem; color: var(--ink-3); }
.status.claimed_verified { color: var(--accent); font-weight: 600; }
.status.claimed_unverified { color: var(--signal); font-weight: 600; }

/* A table is the wrong shape for a phone. Each row becomes a block. */
.table-scroll { overflow-x: auto; }

/* ---- following ---- */
.followed {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line);
}
.followed a {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  min-width: 4.4rem; text-decoration: none;
}
.followed .monogram { width: 2.2rem; height: 2.2rem; border-radius: 8px; font-size: 0.65rem; }
.followed small { font-size: 0.66rem; color: var(--ink-3); text-align: center; line-height: 1.2; }

/* ---- search ---- */
.org-hits { list-style: none; padding: 0; margin: 0; }
.org-hits li {
  display: flex; gap: 0.7rem; align-items: center;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line);
}
.org-hits .monogram { width: 2rem; height: 2rem; border-radius: 7px; font-size: 0.65rem; }
.org-hits .name { font-weight: 600; color: var(--ink); text-decoration: none; }
.org-hits .name:hover { color: var(--accent-2); }

/* Two questions, not a preference: newest-first is what a monitoring product
   answers by default, best-match is what a deepening archive needs. */
.ordering { display: flex; gap: 0.35rem; margin: -0.2rem 0 1rem; align-items: baseline; }
.ordering-link, .ordering-current {
  font-size: 0.76rem; padding: 0.22rem 0.65rem; border-radius: 99px; border: 1px solid transparent;
}
.ordering-link { color: var(--ink-2); text-decoration: none; border-color: var(--line-2); }
.ordering-link:hover { color: var(--accent-2); border-color: var(--accent); }
.ordering-current { color: var(--accent-2); font-weight: 600; background: var(--wash); }

/* ---- pagination ----
   A plain link, not infinite scroll: the URL carries the position, so a reader
   can bookmark where they were, and the page works without JavaScript. */
.more { padding: 1.4rem 1.25rem; }
.more-link {
  display: inline-block; font-size: 0.83rem; font-weight: 600;
  padding: 0.45rem 1rem; border: 1px solid var(--line-2); border-radius: 99px;
  text-decoration: none; color: var(--ink-2); background: var(--surface);
}
.more-link:hover { color: var(--accent-2); border-color: var(--accent); }

/* ---- revision history page ---- */
.revision-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.revision-list > li { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.revision-list > li:first-child { border-top: none; }
.revision-list > li.current { box-shadow: inset 3px 0 0 var(--accent); padding-left: 1rem; }
.revision-head { display: flex; gap: 0.55rem; align-items: baseline; flex-wrap: wrap; }
.revision-head a { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; text-decoration: none; }
.revision-title { font-size: 0.98rem; font-weight: 600; margin: 0.3rem 0 0.2rem; }
.revision-list time { font-size: 0.78rem; color: var(--ink-3); font-family: var(--mono); }

/* A correction to the record is part of the record (ADR-052). Styled like the
   withdrawal notice — something a reader must not scroll past — not a footnote. */
.repair-note {
  background: var(--signal-wash); box-shadow: inset 3px 0 0 var(--signal);
  border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0.9rem 0 0;
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-2);
}
.repair-note strong { color: var(--signal); }

/* ============================================================================
   Forms, accounts, flash
   ========================================================================== */

.form { max-width: 26rem; margin-top: 1.4rem; }
.form-wide { max-width: 40rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.3rem; }
.field input, .field select, .form textarea {
  font: inherit; font-size: 0.92rem; width: 100%; padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.form textarea { resize: vertical; }
.field input::placeholder { color: var(--ink-3); }
.field input:hover, .field select:hover, .form textarea:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--line-2)); }
.field input:focus-visible, .field select:focus-visible, .form textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
fieldset.field { border: 1px solid var(--line-2); border-radius: 8px; padding: 0.9rem 1rem; }
fieldset.field legend { font-size: 0.82rem; font-weight: 600; padding: 0 0.3rem; }
label.radio { display: block; font-weight: 400; font-size: 0.86rem; margin-bottom: 0.4rem; }

.button {
  font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  padding: 0.55rem 1.2rem; border: 1px solid var(--accent); border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
}
.button:hover { background: var(--accent-2); border-color: var(--accent-2); }
.button.danger { background: var(--gone); border-color: var(--gone); color: var(--on-accent); }

.linkish {
  font: inherit; font-size: 0.85rem; font-weight: 500; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--ink-2);
}
.linkish:hover { color: var(--ink); }

.form-errors {
  box-shadow: inset 3px 0 0 var(--gone); background: var(--gone-wash);
  padding: 0.8rem 1rem; margin-bottom: 1.2rem; border-radius: 10px; font-size: 0.86rem;
}
.form-errors p { margin: 0 0 0.4rem; font-weight: 600; color: var(--gone); }
.form-errors ul { margin: 0; padding-left: 1.1rem; }

/* A single refused submission, in the body of the form it belongs to. The same
   look as .form-errors, because it is the same kind of statement — and in the
   page rather than in a flash so that a re-render cannot take it away. */
.form-error {
  box-shadow: inset 3px 0 0 var(--gone); background: var(--gone-wash);
  padding: 0.7rem 1rem; margin: 0 0 1rem; border-radius: 10px;
  font-size: 0.86rem; font-weight: 600; color: var(--gone);
}
.form-alt { margin-top: 1.4rem; font-size: 0.86rem; color: var(--ink-2); }

.display-setting fieldset { border: 1px solid var(--line-2); border-radius: 8px; padding: 0.8rem 1rem; margin: 0 0 0.8rem; }
.display-setting .choice { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; font-size: 0.88rem; }

.review-form { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }
.review-form input[type="text"] {
  font: inherit; font-size: 0.82rem; padding: 0.35rem 0.7rem; flex: 1; min-width: 12rem;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.review-form input[type="submit"] {
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  padding: 0.35rem 0.85rem; border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface); color: var(--ink-2);
}
.review-form input[type="submit"]:hover { color: var(--accent-2); border-color: var(--accent); }

/* Sign in, register, reset. Inside the site's normal chrome, so moving between
   the archive and an account form is not a change of scene. */
.account { max-width: 23rem; margin: 1rem auto 0; }
.account-head { margin-bottom: 1.7rem; }
.account-kind {
  margin: 0 0 0.5rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-2);
}
.account h1 { font-size: 1.6rem; margin: 0; }
.account-standfirst { margin: 0.65rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }
.account-form .field { margin-bottom: 1.25rem; }
.account-form label { display: block; font-size: 0.76rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink); }
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.field-aside { font-size: 0.74rem; color: var(--ink-3); text-decoration: none; }
.field-aside:hover { color: var(--accent-2); text-decoration: underline; }
.account-form .hint { font-size: 0.75rem; line-height: 1.45; margin-top: 0.4rem; }
.account-form .button { width: 100%; margin-top: 0.4rem; padding: 0.62rem 1rem; }
.account-foot {
  margin-top: 1.5rem; padding-top: 1.05rem; border-top: 1px solid var(--line);
  font-size: 0.84rem; color: var(--ink-2);
}

.flashes { padding-bottom: 0.4rem; }
.flash {
  margin: 0 0 0.6rem; padding: 0.65rem 1rem; border-radius: 10px; font-size: 0.86rem;
  box-shadow: inset 3px 0 0 var(--accent); background: var(--wash); color: var(--accent-2);
}
.flash-alert { box-shadow: inset 3px 0 0 var(--gone); background: var(--gone-wash); color: var(--gone); }

/* ============================================================================
   Operator surfaces — /admin. Not linked from the public layout (§89).

   Colour is used more freely here than anywhere else: this is the one place
   where a problem must be visible before it is read.
   ========================================================================== */

.admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.2rem 0 0; }
.admin-actions form { margin: 0; }
.admin-actions .action, .admin-actions input[type="submit"] {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 0.4rem 0.9rem; border: 1px solid var(--line-2); border-radius: 99px;
  background: var(--surface); color: var(--ink-2); text-decoration: none; display: inline-block;
}
.admin-actions .action:hover, .admin-actions input[type="submit"]:hover {
  color: var(--accent-2); border-color: var(--accent); background: var(--surface);
}
.admin-source .provenance-detail dl { margin-bottom: 1rem; }

.state-summary { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; margin: 0 0 2rem; }
.state-summary li { border: 1px solid var(--line); border-radius: 10px; padding: 0.6rem 0.9rem; min-width: 6.5rem; }
.state-summary .tally { display: block; font-family: var(--mono); font-size: 1.4rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; }
.state-summary .label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.state-summary li.zero { opacity: 0.45; }
.state-summary li.state-never_succeeded:not(.zero),
.state-summary li.state-failing:not(.zero) { border-color: var(--gone); background: var(--gone-wash); }
.state-summary li.state-never_succeeded:not(.zero) .tally,
.state-summary li.state-failing:not(.zero) .tally { color: var(--gone); }

.attention { list-style: none; padding: 0; margin: 0; }
.attention li {
  box-shadow: inset 3px 0 0 var(--line-2); background: var(--surface);
  padding: 0.8rem 1rem; margin-bottom: 0.5rem; border-radius: 10px;
}
.attention li.state-never_succeeded, .attention li.state-failing {
  box-shadow: inset 3px 0 0 var(--gone); background: var(--gone-wash);
}
.attention .who { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 600; }
.attention .what { font-size: 0.83rem; color: var(--ink-2); margin-top: 0.15rem; }
.attention .why { margin-top: 0.4rem; font-size: 0.77rem; word-break: break-word; }

.all-clear {
  color: var(--accent-2); font-size: 0.88rem; padding: 0.7rem 1rem;
  background: var(--wash); box-shadow: inset 3px 0 0 var(--accent); border-radius: 10px;
}

.health { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.health th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 0.5rem; font-weight: 600;
}
.health td { padding: 0.5rem; border-bottom: 1px solid var(--line); }
.health .num, .health td.tally { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.health td.tally { width: 6rem; }
.pill {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem; border-radius: 5px; border: 1px solid var(--line);
  color: var(--ink-3); white-space: nowrap;
}
.pill.state-ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pill.state-never_succeeded, .pill.state-failing { color: var(--gone); border-color: var(--gone); background: var(--gone-wash); }

/* A bar per day, two elements and no library — six rows of operator-only
   numbers do not justify shipping a charting dependency. */
.spark { display: flex; align-items: flex-end; gap: 1px; height: 2.4rem; list-style: none; margin: 0; padding: 0; }
.spark li { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 2px; }
.spark li span { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 1px; }
.spark li span.empty { background: var(--line); min-height: 2px; }

.orgs td, .health td { vertical-align: middle; }
pre.secret {
  font-family: var(--mono); font-size: 0.8rem; background: var(--surface-2);
  padding: 0.8rem 1rem; border-radius: 10px; overflow-x: auto; margin: 0.8rem 0;
}

/* ============================================================================
   Accessibility furniture
   ========================================================================== */

/* Hidden until focused. The first thing a keyboard user reaches on any page,
   so they are not made to tab through the chrome to get to the records. */
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 40;
  padding: 0.5rem 0.9rem; border-radius: 0 0 8px 8px;
  background: var(--surface); color: var(--accent-2);
  border: 1px solid var(--line-2); border-top: 0;
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus-visible, .skip-link:focus { top: 0; }
/* `main` carries tabindex="-1" so it can take focus when the skip link is used
   and the next Tab continues from the content rather than the top of the page.
   No outline suppression: it is not in the tab order, so browsers paint no ring
   for programmatic focus, and suppressing one we would want elsewhere is how a
   blanket `outline: none` gets into a stylesheet. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

footer.site-foot { margin-top: 1.4rem; padding: 1.4rem 1.25rem 3rem; border-top: 1px solid var(--line); }
footer.site-foot p { margin: 0; max-width: 34rem; font-size: 0.78rem; color: var(--ink-3); line-height: 1.55; }

/* ============================================================================
   Narrow screens.

   The aside goes first — nothing in it is the record. Then the rail becomes an
   ordinary strip above the content and everything unsticks. No JavaScript, so
   there is no drawer to open and nothing to get stuck open.
   ========================================================================== */

@media (max-width: 76rem) {
  .shell { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .aside { display: none; }
}

@media (max-width: 54rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    padding: 0.85rem 1.1rem;
    border-right: 0; border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .tagline, .rail-topics, .rail-heading { display: none; }
  .rail { flex-direction: row; gap: 0.3rem; }
  .publish-cta { margin: 0 0 0 auto; padding: 0.42rem 0.9rem; }
  .sidebar-foot { margin: 0; padding: 0; }
  .user-menu .who { display: none; }
  /* Down rather than up: at the top of the page there is nothing above it. */
  .user-panel { bottom: auto; top: calc(100% + 0.4rem); left: auto; right: 0; min-width: 11rem; }
  .content { border-right: 0; }
  .wrap { padding-left: 1.1rem; padding-right: 1.1rem; }
  .feed > li, .more, .followed, footer.site-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (max-width: 34rem) {
  .provenance-detail dl, .facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .provenance-detail dt, .facts dt { margin-top: 0.55rem; }
  h1, .publication h1 { font-size: 1.4rem; }
  .account { max-width: none; }
  .feed > li { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.65rem; }
  .monogram { width: 2rem; height: 2rem; font-size: 0.62rem; border-radius: 7px; }
  .search { max-width: none; }
  .org-profile .toprow > .monogram { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
}

/* ==========================================================================
   The dashboard (§48, §50, TASK-105)

   Several standing queries side by side, because monitoring five things should
   not mean five tabs. Columns scroll horizontally rather than shrinking past
   readability: a column narrower than about twenty-two characters of title is
   not a column, it is a list of truncations.

   Independent loading and pagination per column is TASK-106; this is the
   arrangement, and it is deliberately the same row markup as every other
   surface (§49) rather than a denser variant invented for the dashboard.
   ========================================================================== */

.columns {
  display: flex; gap: 1px; align-items: flex-start;
  overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--line);
  scroll-snap-type: x proximity;
}
/* §51: 320–420px, and the *set* scrolls rather than the columns compressing as
   more are added. A column narrower than about twenty-two characters of title is
   not a column, it is a list of truncations — so adding a sixth column makes the
   row longer, never the columns thinner. */
.column {
  flex: 0 0 clamp(20rem, 23rem, 26rem); min-width: 0;
  display: flex; flex-direction: column;
  /* Each column scrolls on its own (§51 AC#2): reading to the bottom of one
     leaves the others where they were. */
  max-height: calc(100vh - 2.9rem);
  background: var(--surface); scroll-snap-align: start;
}
.column > turbo-frame { display: block; overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior-y: contain; }

/* TASK-115. What is new in a column. A word as well as a colour (AC#6): the mark
   says "New", and the line says how many and offers to clear them. */
.column-news { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.unseen-line, .column-news .arrived {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0; padding: 0.5rem 1.1rem; font-size: 0.78rem;
  border-bottom: 1px solid var(--line);
}
.unseen-line { color: var(--ink-2); background: var(--wash); }
.unseen-line p { margin: 0; }
.unseen-line strong { color: var(--accent-2); }
.unseen-line form { margin: 0; }
.unseen-line .mark-seen {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface);
  color: var(--accent-2); border-radius: 5px; padding: 0.2rem 0.55rem;
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.column-news .arrived { background: var(--signal-wash); }
.column-news .arrived[hidden] { display: none; }
.column-news .arrived a { color: var(--signal); font-weight: 600; }
.feed > li.unseen { box-shadow: inset 3px 0 0 var(--accent); }
.new-mark {
  display: inline-block; margin-right: 0.35rem; padding: 0 0.35rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); border-radius: 4px;
}

/* The reordering controls. Buttons in forms, so they work by keyboard, by touch
   and with a screen reader without any script (§51). */
.column-move { display: flex; align-items: center; gap: 0.25rem; }
.column-move form { margin: 0; }
.column-move .move {
  border: 1px solid var(--line); background: none; color: var(--ink-2);
  border-radius: 5px; width: 1.6rem; height: 1.6rem; line-height: 1;
  cursor: pointer; font-size: 0.8rem;
}
.column-move .move:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.column-move .move:disabled { opacity: 0.35; cursor: default; }
.column-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.9rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.column-head h2 { margin: 0; font-size: 0.95rem; letter-spacing: -0.01em; }
.column .no-summary, .column .quiet { padding: 0.9rem 1.25rem; margin: 0; }

/* The column picker. Visible on a phone, where only one column is shown; on a
   wide screen every column is already on the page, so the picker would be a
   control for something the reader can already see (§52). */
.column-tabs { display: none; }

/* §52, TASK-108. A four-column dashboard on a phone is four unreadable columns.
   One at a time, full width, with the picker above it — and no horizontal
   squeezing, because a column is either readable or it is not there. */
@media (max-width: 46rem) {
  .column-tabs {
    display: flex; gap: 0.25rem; overflow-x: auto;
    padding: 0.6rem 1.25rem; border-bottom: 1px solid var(--line);
  }
  .column-tabs a {
    flex: 0 0 auto; padding: 0.35rem 0.7rem; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink-2);
    font-size: 0.82rem; text-decoration: none; white-space: nowrap;
  }
  .column-tabs a.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }

  .columns { display: block; overflow-x: visible; background: var(--surface); }
  /* Not merely narrower: absent. A hidden lazy frame never fetches, so one
     column on a phone is one query rather than five. */
  .column { display: none; }
  .column.is-active { display: flex; flex: 1 1 auto; max-height: none; }
  .column.is-active > turbo-frame { overflow-y: visible; max-height: none; }
}

kbd {
  font: inherit; font-size: 0.78rem; padding: 0.05rem 0.35rem;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  background: var(--surface-2); color: var(--ink);
}

/* A column is focused when moving between them, so the focus has to be visible
   on the region itself — and a row focused inside a scrolled column must not sit
   flush against the sticky header (§118 AC#2). */
.column:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.column li:focus-within { scroll-margin-top: 3rem; }

/* Renaming a column, and saving a search as one (§84, TASK-110). Both are
   ordinary forms — a <details> to keep the control out of the way until it is
   wanted, and nothing that needs a script. */
.column-menu { position: relative; flex: 0 0 auto; }
.column-menu > summary {
  list-style: none; cursor: pointer; width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center; border-radius: 6px;
  color: var(--ink-2); font-size: 1rem; line-height: 1;
}
.column-menu > summary::-webkit-details-marker { display: none; }
.column-menu > summary:hover { background: var(--surface-2); color: var(--ink); }
.column-menu-body {
  position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 5; width: 13rem;
  display: grid; gap: 0.5rem; padding: 0.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
}
.column-menu-body form { display: flex; gap: 0.35rem; margin: 0; }
.column-menu-body input[type="text"] { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.82rem; }
.save-view { display: inline; }
.save-view input[type="submit"] { cursor: pointer; }

/* Alert frequency, chosen on the organization's own page (§85, TASK-111). Plain
   selects and form submits: a reader deciding how much mail to receive should not
   need JavaScript to do it (ADR-030). */
.alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.alerts form { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.alert-label { font-size: 0.8rem; color: var(--ink-2); }
.alerts select { font: inherit; font-size: 0.82rem; padding: 0.2rem 0.4rem; }
.alerts .quiet { margin: 0; font-size: 0.8rem; }

/* Making a column, on the dashboard (§48, §50). Three plain forms behind a
   <details>, open when there is nothing yet — the first thing a reader needs on an
   empty dashboard is the control, not an explanation of one. */
.new-column { border-bottom: 1px solid var(--line); padding: 0.7rem 1.25rem; }
.new-column > summary { font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.new-column-forms {
  display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.9rem;
}
.new-column-form {
  flex: 1 1 15rem; min-width: 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.new-column-form h3 { margin: 0; font-size: 0.85rem; }
.new-column-form label { font-size: 0.78rem; color: var(--ink-2); }
.new-column-form p { margin: 0; font-size: 0.8rem; }
.new-column-form input[type="text"], .new-column-form select { font: inherit; font-size: 0.85rem; }
.new-column-form input[type="submit"] { align-self: flex-start; cursor: pointer; }

/* Putting an organization into a column, from the organization's own page. */
.to-column { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; }
.to-column form { margin: 0; }
.to-column .quiet, .to-column .alert-label { margin: 0; font-size: 0.8rem; }
.to-column-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Choosing what kind of column to add: three choices, each saying what it is for,
   on a page of its own rather than three forms competing on the dashboard. */
.column-new { padding-top: 1.2rem; max-width: 34rem; }
.kind-choices { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.kind-choices a {
  display: block; padding: 0.85rem 1rem; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: var(--ink);
}
.kind-choices a:hover { background: var(--surface-2); border-color: var(--line-2); }
.kind-choices strong { display: block; font-size: 0.92rem; }
.kind-choices span { display: block; margin-top: 0.15rem; font-size: 0.84rem; color: var(--ink-2); }
.field-hint { margin: 0.2rem 0 0.4rem; font-size: 0.82rem; color: var(--ink-2); }

/* ==========================================================================
   The deck (TASK-161)

   The dashboard as a deck of columns: every column the window's full height,
   each scrolling on its own, nothing under them. Above the phone breakpoint the
   shell is exactly one window tall and the page itself never scrolls — the
   columns do. On a phone it is one column in ordinary flow (§52), so none of
   this applies there.
   ========================================================================== */
@media (min-width: 46.01rem) {
  .shell-deck { height: 100vh; height: 100dvh; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .shell-deck .content { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .shell-deck main { flex: 1 1 auto; min-height: 0; padding: 0; display: flex; flex-direction: column; }
  .shell-deck .columns { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .shell-deck .column { max-height: none; }
  .shell-deck .empty { padding-top: 2rem; }
}
/* Between the phone and the laptop the rail becomes a strip above the page, so
   the deck gets the rest of the window rather than a window of its own. */
@media (min-width: 46.01rem) and (max-width: 54rem) {
  .shell-deck { grid-template-rows: auto minmax(0, 1fr); }
}

/* Everything the dashboard can do, in the topbar's one row. */
.deck-bar { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex-wrap: wrap; }
.boards { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.boards > a {
  padding: 0.32rem 0.7rem; border-radius: 7px; color: var(--ink-2);
  font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.boards > a:hover { background: var(--surface-2); color: var(--ink); }
.boards > a.on { background: var(--ink); color: var(--surface); }

/* A toolbar control: a summary, a link or a button, all the same size. */
.tool {
  display: inline-flex; align-items: center; gap: 0.35rem; height: 2rem;
  padding: 0 0.7rem; border-radius: 7px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none;
}
.tool::-webkit-details-marker { display: none; }
.tool:hover { background: var(--surface-2); color: var(--ink); }
.tool-icon { width: 2rem; padding: 0; justify-content: center; }
.tool-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tool-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
details[open] > .tool { background: var(--surface-2); color: var(--ink); }

/* The popovers the toolbar opens. A <details> each, so none needs a script. */
.popover { position: relative; }
.pop {
  position: absolute; top: calc(100% + 0.4rem); left: 0; z-index: 20;
  min-width: 15rem; padding: 0.7rem; margin: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
}
.board-settings .pop, .shortcuts .pop { left: auto; right: 0; }
.pop-row { display: flex; gap: 0.35rem; align-items: center; }
.pop input[type="text"] { font: inherit; font-size: 0.84rem; padding: 0.3rem 0.5rem; min-width: 0; flex: 1 1 auto; }
.pop-label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-3); margin-bottom: 0.3rem; }
.board-settings-body { display: grid; gap: 0.6rem; width: 17rem; }
.board-settings-body form { margin: 0; }
.shortcuts .pop { width: 21rem; }
.shortcuts dl { display: grid; gap: 0.45rem; margin: 0; }
.shortcuts dl > div { display: flex; align-items: baseline; gap: 0.6rem; }
.shortcuts dt { margin: 0; flex: 0 0 4.2rem; }
.shortcuts dd { margin: 0; font-size: 0.82rem; color: var(--ink-2); }
.shortcuts p { margin: 0.7rem 0 0; font-size: 0.8rem; }

/* Adding a column over the dashboard. No padding on the <dialog> itself, so a
   click that lands on it is a click on the backdrop. */
.column-dialog {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem);
  padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
}
.column-dialog::backdrop { background: rgb(12 18 20 / 45%); }
.column-dialog > turbo-frame { display: block; padding: 0.4rem 0.4rem 1.2rem; }
.column-dialog .column-new { padding-top: 0.6rem; max-width: none; }
.column-dialog .crumbs { display: none; }
/* Inside the dialog the dropdown is part of the flow, so the dialog grows to hold
   it rather than clipping it at its own edge. */
.column-dialog .combo-options { position: static; margin-top: 0.25rem; box-shadow: none; }
.column-dialog-close { position: absolute; top: 0.7rem; right: 0.7rem; margin: 0; z-index: 1; }
.column-dialog-close .tool { border-color: transparent; font-size: 1.2rem; font-weight: 400; }

/* The organization picker: chosen ones as chips, a search with a dropdown. */
.chips { list-style: none; margin: 0 0 0.45rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem; border-radius: 999px;
  background: var(--wash); color: var(--accent-2); font-size: 0.82rem; font-weight: 600;
}
.chip button {
  border: 0; background: none; color: inherit; cursor: pointer;
  width: 1.3rem; height: 1.3rem; border-radius: 999px; font-size: 0.95rem; line-height: 1;
}
.chip button:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.combo { position: relative; }
.combo-options {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); z-index: 30;
  list-style: none; margin: 0; padding: 0.3rem; max-height: 16rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 12%);
}
.combo-options [role="option"] {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.86rem;
}
.combo-options [role="option"] small { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.combo-options [role="option"]:hover, .combo-options [role="option"].is-active { background: var(--surface-2); }
.combo-options [role="option"][aria-selected="true"] span::after { content: " ✓"; color: var(--accent); }
.combo-empty { padding: 0.45rem 0.6rem; font-size: 0.84rem; color: var(--ink-3); }
.quick-picks { border: 0; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.quick-picks legend { font-size: 0.78rem; font-weight: 600; color: var(--ink-3); margin-bottom: 0.35rem; padding: 0; }
.quick-picks label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; font-weight: 400; margin: 0; }
.quick-picks input { width: auto; padding: 0; margin: 0; }

/* The space right of the last column is the page, not a divider. */
.shell-deck .columns { gap: 0; background: var(--ground); }
.shell-deck .column { border-right: 1px solid var(--line); }
.column-head { align-items: center; }
.column-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On a phone the switcher gets a row of its own and scrolls sideways, the tools
   sit under it, and search under those. */
@media (max-width: 46rem) {
  .topbar:has(.deck-bar) { flex-wrap: wrap; }
  .deck-bar { flex: 1 1 100%; }
  .boards { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; }
  .deck-bar .pop { position: fixed; left: 1rem; right: 1rem; top: calc(100% + 0.3rem); width: auto; min-width: 0; }
}

/* The small secondary buttons inside the dashboard's popovers and column menus. */
.board-settings-body > *, .column-menu-body > * { min-width: 0; }
.pop .quiet-action, .column-menu-body .quiet-action {
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 0.3rem 0.65rem; border-radius: 6px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
}
.pop .quiet-action:hover, .column-menu-body .quiet-action:hover { background: var(--surface-2); color: var(--ink); }
.board-settings-body form.button_to .quiet-action, .column-menu-body form.button_to .quiet-action { width: 100%; text-align: left; }
.board-settings-body form.button_to[action$="/make_default"] + form .quiet-action,
.board-settings-body form.button_to input[name=_method][value=delete] ~ .quiet-action,
.column-menu-body form.button_to input[name=_method][value=delete] ~ .quiet-action { color: var(--gone); }

/* A frame standing in for part of the sidebar, laid out as if it were not there. */
turbo-frame.frame-contents { display: contents; }