/* ATHEX registry chrome.
   Loaded after style.css. Overrides the palette and adds the archival
   furniture (masthead, stamps, file headers); all layout and component
   rules still come from style.css, so the two stay in one system rather
   than competing. */

:root {
  --bg: #0e0f12;
  --fg: #d8d4c8;
  --muted: #8a8578;
  --border: #2a2b31;
  --accent: #c8a24a;
  --code-bg: #15161b;
  --bubble-user: #1a1d25;
  --bubble-user-fg: #d8d4c8;
  --bubble-assistant: #15161b;
  --bubble-assistant-fg: #cdc9bd;

  --paper: #16171c;
  --rule: #2a2b31;
  --stamp: #9e3b30;
  --stamp-dim: rgba(158, 59, 48, 0.5);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

/* The archive commits to one look in both themes -- a reading room does not
   have a light mode. Redeclared here so a light-preference browser does not
   inherit style.css's light values. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #0e0f12; --fg: #d8d4c8; --muted: #8a8578; --border: #2a2b31;
    --accent: #c8a24a; --code-bg: #15161b;
    --bubble-user: #1a1d25; --bubble-user-fg: #d8d4c8;
    --bubble-assistant: #15161b; --bubble-assistant-fg: #cdc9bd;
  }
}

body {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    var(--bg);
  color: var(--fg);
}

/* ---------- masthead ---------- */

.atx-masthead {
  border-bottom: 2px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.atx-masthead-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.atx-sigil { color: var(--accent); font-size: 18px; line-height: 1; }
.atx-abbr {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--fg);
  text-decoration: none;
}
.atx-abbr:hover { color: var(--accent); }
.atx-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.atx-motto {
  margin-left: auto;
  font-size: 10.5px;
  font-style: italic;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.atx-registry-line {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- nav ---------- */

.site-nav {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
}
.site-nav a { color: var(--muted); border-radius: 0; }
.site-nav a:hover { background: rgba(200,162,74,0.08); color: var(--fg); }
.site-nav a.active {
  color: var(--accent);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--accent);
  font-weight: 700;
}

/* ---------- headings ---------- */

.page-list h1, .conv-header h1 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 19px;
}
.list-header h1 .muted { letter-spacing: 0.1em; font-size: 12px; }

/* ---------- collection sigla (replaces the provider badges) ---------- */

.badge {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  border-radius: 0;
  padding: 2px 6px;
  background: transparent !important;
  border: 1px solid currentColor;
}
.badge-claude { color: #d97757; }
.badge-deepseek { color: #6d86ff; }
.badge-grok { color: #9aa0ad; }
.badge-chatgpt { color: #2bb98f; }

/* ---------- registry rows ---------- */

.conv-row { border-bottom: 1px solid var(--rule); padding: 10px 0; }
.conv-row:hover { background: rgba(200,162,74,0.035); }

.atx-desig {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.conv-row:hover .atx-desig { color: var(--accent); }

.conv-title { font-weight: 600; }
.conv-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; }

.atx-class {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 1px 5px;
  border: 1px solid var(--rule);
  color: var(--muted);
  white-space: nowrap;
}
.atx-class-FRAGMENT  { color: #7b8794; }
.atx-class-STABLE    { color: #6f9c72; }
.atx-class-EXTENDED  { color: #c8a24a; }
.atx-class-RECURSIVE { color: #cf7a3c; border-color: rgba(207,122,60,0.45); }
.atx-class-UNBOUNDED { color: #d0483c; border-color: rgba(208,72,60,0.5); }

/* ---------- the file header (conversation page) ---------- */

.atx-filehead {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 12px 14px;
  margin: 10px 0 4px;
}
.atx-filehead-desig {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.atx-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px 18px;
  margin-top: 10px;
}
.atx-field { min-width: 0; }
.atx-field-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}
.atx-field-value {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.atx-stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--stamp);
  border: 2px solid var(--stamp-dim);
  padding: 3px 8px;
  transform: rotate(-2.5deg);
  opacity: 0.9;
}

/* The condensed sticky header drops the whole file block -- the designation
   is already restated in the header line, and a 5-field grid pinned to the
   top of a long transcript eats a third of the viewport. */
.conv-header.condensed .atx-filehead { display: none; }

/* ---------- transcript ---------- */

.msg-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.bubble { border-radius: 2px; border: 1px solid var(--rule); }
.msg-row.user .bubble { border-left: 2px solid var(--accent); }
.msg-row.assistant .bubble { border-left: 2px solid var(--rule); }

/* ---------- controls ---------- */

.filters input[type=text], .filters select, .filters button,
.orig-link, .pager-num, .pager-arrow, .pager-current,
.pager-goto input, .pager-goto button, .settings-form button {
  border-radius: 0;
  font-family: var(--mono);
  letter-spacing: 0.06em;
}
.filters button, .settings-form button, .pager-goto button {
  text-transform: uppercase;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 7px 14px;
}
.filters button:hover, .settings-form button:hover, .pager-goto button:hover {
  background: var(--accent);
  color: var(--bg);
}
.orig-link { font-size: 11px; text-transform: uppercase; }
.pager-current { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.search-context-banner {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  border-left: 3px solid var(--accent);
  background: var(--paper);
}

.toc { font-family: var(--mono); font-size: 11px; }

/* ---------- charter page ---------- */

/* The standing-orders page keeps a readable measure for its prose without
   narrowing the page itself. Shrinking the container moved the masthead,
   nav and classification banner every time you opened the document, which
   read as the page collapsing. */
/* The body used to stop at a 78ch measure while the document control block,
   the headings' rules and the tables above it ran the full width -- so the
   page read as half empty below the fold. The column the contents leaves is
   about 90ch, which is a measure in its own right, so the body simply fills
   it and the document is one width from top to bottom. */
.atx-doc p,
.atx-doc .lede,
.atx-doc h2 { max-width: none; }
.atx-doc .atx-table { max-width: 100%; }
.atx-doc h2 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  margin-top: 34px;
}
.atx-doc p { line-height: 1.65; }
.atx-doc .lede { font-size: 16px; line-height: 1.7; color: var(--fg); }

.atx-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 14px 0; }
.atx-table th, .atx-table td {
  border-bottom: 1px solid var(--rule);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.atx-table th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.atx-table td.num, .atx-table th.num { text-align: right; font-family: var(--mono); }
.atx-table code { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }

.atx-stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 18px 0 6px; }
.atx-stat-value {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  display: block;
}
.atx-stat-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.atx-note {
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.atx-foot {
  margin-top: 46px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ================= front desk, subject index, dossiers ================= */

.atx-wide { max-width: 1180px; }

.atx-desk-lede { margin: 18px 0 4px; }
.atx-desk-lede .lede { font-size: 15.5px; line-height: 1.7; max-width: 78ch; }

.atx-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 20px 0 26px;
}
.atx-counter {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  background: var(--paper);
  padding: 14px 14px 12px;
  text-decoration: none;
  display: block;
}
.atx-counter:hover { background: #1b1c22; border-top-color: #e0bb63; }
.atx-counter-value {
  display: block;
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.atx-counter-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 7px;
}
.atx-counter-sub {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 5px;
}

.atx-desk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.atx-panel {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 14px 16px 16px;
}
.atx-panel-wide { grid-column: 1 / -1; }
.atx-panel-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
.atx-panel-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; }
.atx-panel-body { font-size: 13.5px; line-height: 1.7; margin: 0; max-width: 82ch; }
.atx-panel-more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.atx-table-tight th, .atx-table-tight td { padding: 4px 8px; font-size: 12.5px; }
.atx-bar-cell { width: 45%; }
.atx-bar {
  display: block;
  height: 8px;
  background: var(--accent);
  min-width: 1px;
}
.atx-bar-FRAGMENT  { background: #7b8794; }
.atx-bar-STABLE    { background: #6f9c72; }
.atx-bar-EXTENDED  { background: #c8a24a; }
.atx-bar-RECURSIVE { background: #cf7a3c; }
.atx-bar-UNBOUNDED { background: #d0483c; }

/* ---------- cryptonyms + subject rows ---------- */

.atx-crypt {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.atx-crypt:hover { text-decoration: underline; }

.atx-subject-list { list-style: none; margin: 0; padding: 0; }
.atx-subject-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.atx-subject-list li:last-child { border-bottom: none; }
.atx-subject-name { flex: 1; min-width: 120px; font-weight: 600; font-size: 13px; }
.atx-subject-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}

.atx-dense .conv-row { padding: 6px 4px; }
.atx-dense .conv-title { font-size: 13.5px; }

/* Persistence bands reuse the disposition chip, with their own colours --
   the class names come from subject_store._persistence_band(), spaces
   replaced with hyphens in the template. */
.atx-class-SINGLE-CONTACT { color: #7b8794; }
.atx-class-BURST          { color: #d0483c; border-color: rgba(208,72,60,0.5); }
.atx-class-SHORT-SERIES   { color: #c8a24a; }
.atx-class-SUSTAINED      { color: #cf7a3c; border-color: rgba(207,122,60,0.45); }
.atx-class-LONGITUDINAL   { color: #6f9c72; border-color: rgba(111,156,114,0.5); }
.atx-class-INDETERMINATE  { color: #7b8794; }

/* ---------- dossier header ---------- */

.atx-dossier-head {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 16px 18px;
  margin: 16px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.atx-dossier-crypt {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.atx-dossier-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  flex: 1;
  min-width: 160px;
}
.atx-dossier-stamps { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.atx-fields-boxed {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 14px 18px;
  margin-bottom: 16px;
}

/* ---------- diurnal histogram ---------- */

.atx-hours {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 96px;
  border-bottom: 1px solid var(--rule);
  margin-top: 12px;
}
.atx-hour-col { flex: 1; display: flex; align-items: flex-end; min-width: 4px; }
.atx-hour-bar { width: 100%; background: var(--accent); min-height: 1px; }
.atx-hours-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- recurring vocabulary ---------- */

.atx-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.atx-term {
  font-family: var(--mono);
  font-size: 11.5px;
  border: 1px solid var(--rule);
  padding: 2px 6px;
  color: var(--fg);
  white-space: nowrap;
}
.atx-term-n {
  color: var(--muted);
  font-size: 9px;
  margin-left: 5px;
}

/* ---------- subject block on a case file ---------- */

.atx-subject-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: 3px 8px;
}
.atx-subject-link:hover { background: rgba(200,162,74,0.08); }
.atx-subject-link .muted { font-size: 10px; }

/* ===================== institutional page chrome ===================== */

/* Classification banner. Marked at head and foot of every page: material
   marked only at the head reads as a graphic, not a marking. */
.atx-clsbar {
  background: var(--stamp);
  color: #f4ece4;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  padding: 4px 10px;
  margin: 0 -16px 14px;
  /* Wraps rather than scrolls: a nowrap banner on a narrow viewport put a
     horizontal scrollbar across the top of every page. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.atx-clsbar-foot { margin: 14px -16px 0; }

.atx-seal {
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
  border: 1px solid var(--accent);
  padding: 4px 7px;
}
.atx-subtitle {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.atx-name { line-height: 1.5; }

.atx-session {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
}
.atx-session-spacer { flex: 1; }

/* Sectioned navigation. The archive has four functions and the nav should
   say so; ten equal links in a row said nothing about how the place is
   organised. */
.atx-nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding-bottom: 6px;
}
.atx-navgroup { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.atx-navgroup-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5d5a52;
  margin-right: 8px;
  border-right: 1px solid var(--rule);
  padding-right: 10px;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* The specimen dossier generator, in the terminal.

   The output deliberately reuses the dossier's own classes rather than
   getting a look of its own -- the whole point is to show what a dossier
   looks like, and a specimen drawn in different furniture would be showing
   something else. Only the form and the frame around it are new. */
.atx-specimen-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: end;
  gap: 12px;
  margin: 4px 0;
}
.atx-specimen-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.atx-specimen-field .atx-field-label { font-size: 9px; letter-spacing: 0.2em; }
/* The same controls as the query page's filters. A default white box in the
   middle of a dark terminal is the one element on the page that came from
   the browser rather than from the site. */
.atx-specimen-form input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 8px 10px;
}
.atx-specimen-form input[type="text"]:focus { outline: none; border-color: var(--accent); }
.atx-specimen-form input::placeholder { color: var(--muted); letter-spacing: 0.03em; }
.atx-specimen-form button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 8px 18px;
  cursor: pointer;
}
.atx-specimen-form button:hover { background: transparent; color: var(--accent); }
/* Rolling again is the secondary action and should not compete with Draw. */
.atx-specimen-form button.atx-gen {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.atx-specimen-form button.atx-gen:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  .atx-specimen-form { grid-template-columns: 1fr; align-items: stretch; }
}

/* A named topic among the withheld terms. The same chip as its neighbours,
   so it reads as one entry in the list that happens not to be starred. */
.atx-term-topic { color: var(--accent); border-color: var(--accent); }
.atx-specimen-out {
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}
/* The dossier head carries its own top margin on a page of its own; inside
   a panel that reads as a gap nobody asked for. */
.atx-specimen-out .atx-dossier-head { margin-top: 14px; }

/* The board.

   Notices are read once and acted on, so they are set as filed paper rather
   than as a feed: a rule above each one, the date and the office that issued
   it in small caps, then the heading. Nothing is clickable except the room,
   because nothing else on a notice is an action. */
.atx-board-standing {
  color: var(--muted);
  font-size: 12.5px;
  margin: 0 0 22px;
}
.atx-board { display: flex; flex-direction: column; gap: 0; }
.atx-notice-card {
  border-top: 1px solid var(--rule);
  padding: 20px 0 22px;
}
.atx-notice-card:last-child { border-bottom: 1px solid var(--rule); }
.atx-notice-meta {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.atx-notice-by { color: var(--stamp); }
.atx-notice-title {
  font-size: 17px;
  margin: 8px 0 10px;
  letter-spacing: 0.01em;
}
/* white-space: pre-line so a notice keeps the paragraph breaks it was filed
   with, without the body having to carry markup an operator would have to
   learn to type.

   No measure limit. A notice is read once and acted on, not settled into,
   and the wall it is pinned to is as wide as the wall. */
.atx-notice-body {
  white-space: pre-line;
  line-height: 1.65;
  color: var(--fg);
}
.atx-notice-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--stamp-dim);
  padding: 6px 10px;
  text-decoration: none;
  word-break: break-all;
}
.atx-notice-link:hover { border-color: var(--accent); }

/* Filing one, in the terminal. */
.atx-board-form { margin: 14px 0 6px; }
.atx-board-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.atx-board-row .atx-field-label { font-size: 9px; letter-spacing: 0.2em; }
.atx-board-form input[type="text"],
.atx-board-form textarea {
  /* The full width of the panel, like everything else on this page. A field
     that stops two thirds of the way across looks like it is still loading. */
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  padding: 9px 11px;
  /* Not draggable: the handle is the only thing on this page that can be
     pulled about, and dragging it only ever misaligns the panel. */
  resize: none;
}
.atx-board-form input[type="text"]:focus,
.atx-board-form textarea:focus { outline: none; border-color: var(--accent); }
.atx-board-form ::placeholder { color: var(--muted); }

/* The council room.

   Laid out as a chat window rather than as a messenger: one column, oldest
   at the top, every remark on the same side. The bubbles-facing-each-other
   arrangement this replaced reads well for two people and falls apart for
   four, because "mine on the right" only distinguishes one speaker from
   everybody else. A named column distinguishes all of them.

   A run of remarks from one person is named once. Repeating the name above
   every line is what makes a chat look like a syslog. */
.atx-council-panel { position: relative; }

.atx-council-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.atx-council-head .atx-panel-head { margin: 0; }
.atx-council-standing {
  flex: 1 1 auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.atx-council-kept::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--accent);
}
.atx-council-unkept { color: var(--stamp); }

.atx-council-log {
  height: 60vh;
  min-height: 340px;
  max-height: 620px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 14px 16px 10px;
  margin: 14px 0 12px;
}

/* The room, drawn as the page.

   The log used to be a 60vh box inside a page that scrolled behind it, which
   meant two scrollbars and neither of them where the hand expected. Here the
   page itself does not scroll at all: the nav is pinned at the top, the
   composer at the bottom, and the log takes everything left over, so the one
   scrollbar on screen belongs to the messages. */
body.atx-room {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body.atx-room > .page-list {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 18px;
}
.atx-room .atx-council-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.atx-room .atx-council-logwrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.atx-room .atx-council-log {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
}

/* The scrollbar. Left native everywhere else on the site; here it is the
   one piece of furniture in constant view, so it is drawn to match the room
   rather than the operating system -- no stepper arrows, no track, just the
   thumb. */
.atx-council-log { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.atx-council-log::-webkit-scrollbar { width: 10px; }
.atx-council-log::-webkit-scrollbar-track { background: transparent; }
.atx-council-log::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 3px solid var(--bg);
  border-radius: 6px;
}
.atx-council-log::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* The stepper arrows at each end, which no chat window has ever needed. */
.atx-council-log::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
/* While the room is opening: the log holds its place and the composer is
   shut, so nothing is offered that cannot yet be done. */
.atx-council-opening .atx-council-bar { opacity: 0.55; }
.atx-council-opening .atx-council-clip { pointer-events: none; }
@keyframes atx-council-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .atx-council-opening .atx-council-empty { animation: none; }
}

.atx-council-empty {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Scroll-back. Hidden when the first page is the whole room. */
.atx-council-top { text-align: center; padding: 4px 0 12px; }
.atx-council-top button {
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 16px;
  cursor: pointer;
}
.atx-council-top button:hover { color: var(--accent); border-color: var(--accent); }
.atx-council-top button:disabled { opacity: 0.5; cursor: default; }

/* A day rule, so a long room does not read as one endless afternoon. */
.atx-council-day {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.atx-council-day::before,
.atx-council-day::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--rule);
}

/* One remark. The gutter is a fixed column so every byline and every line of
   text starts at the same x, which is the whole reason this layout is easier
   to read down than facing bubbles. */
.atx-council-row {
  display: flex;
  gap: 12px;
  padding: 3px 6px 3px 0;
  margin-top: 12px;
  border-radius: 2px;
}
.atx-council-row.atx-council-run { margin-top: 0; }
.atx-council-row:hover { background: rgba(255, 255, 255, 0.022); }

.atx-council-gutter {
  flex: 0 0 34px;
  display: flex;
  justify-content: center;
  padding-top: 0;
}
.atx-council-reply-row .atx-council-gutter { padding-top: 25px; }
/* The seal: a mark derived from a speaker's designation, not a picture of
   them and no longer their number in a box.

   Round, which is the one circle on this site. It is deliberate: a column of
   avatars is the one place a rectangle reads as a form field rather than as a
   person, and the mark inside is drawn on a radius anyway. The faint disc
   behind it keeps a three-spoke sigil from looking like it is floating. */
.atx-council-seal {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Named apart from the masthead's .atx-sigil, which sets a colour of its
   own and would override the ink inherited from the seal. */
.atx-opsigil { width: 100%; height: 100%; display: block; }
/* The time takes the gutter on continued lines, appearing on hover so a run
   stays quiet until somebody wants to know when something was said. */
.atx-council-rowtime {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  opacity: 0;
  padding-top: 4px;
}
.atx-council-row:hover .atx-council-rowtime { opacity: 0.75; }

/* Four inks, from the site's own palette. An arbitrary hue per operator
   looks like a different website. */
.atx-ink-a { color: var(--accent); }
.atx-ink-b { color: #7f9dc4; }
.atx-ink-c { color: #b98a6a; }
.atx-ink-d { color: #8f9c7a; }

.atx-council-body { flex: 1 1 auto; min-width: 0; }
.atx-council-byline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}
.atx-council-who {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
/* Own remarks are marked by the accent on the name, not by changing side. */
.atx-council-mine .atx-council-who { color: var(--accent); }
.atx-council-time {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  opacity: 0.6;
}
.atx-council-row:hover .atx-council-time { opacity: 1; }

.atx-council-said {
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.atx-council-attachment-only {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.6;
}
.atx-council-attachment-icon {
  position: relative;
  display: inline-flex;
  width: 17px;
  height: 17px;
  margin-left: 5px;
  border-radius: 3px;
  background: var(--fg);
  vertical-align: -3px;
}
.atx-council-attachment-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 11px;
  height: 8px;
  background: linear-gradient(135deg, transparent 42%, var(--paper) 43% 57%, transparent 58%),
              linear-gradient(45deg, transparent 36%, var(--paper) 37% 62%, transparent 63%);
}
.atx-council-reply-attachment-only { font-style: italic; }
.atx-council-body { position: relative; min-width: 0; }
/* A line this terminal cannot open. Shown rather than dropped: a line
   silently missing from a conversation is worse than one that says why. */
.atx-council-said.atx-council-shut {
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--stamp-dim);
  padding-left: 8px;
}
.atx-council-reply-action {
  position: absolute;
  z-index: 2;
  top: -15px;
  right: 8px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  background: var(--paper);
  color: var(--muted);
  font-size: 19px;
  line-height: 16px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease, background .12s ease;
}
.atx-council-row:hover .atx-council-reply-action,
.atx-council-reply-action:focus { opacity: 1; transform: translateY(0); }
.atx-council-row:hover .atx-council-reply-action { opacity: 1; transform: translateY(0); }
.atx-council-reply-action:hover { background: var(--bg); color: var(--fg); }
.atx-council-jumped {
  animation: atx-council-jumped .9s ease-out;
}
@keyframes atx-council-jumped {
  0%, 55% { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  100% { background: transparent; }
}
.atx-council-reply,
.atx-council-reply-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  background: transparent;
  font-size: 11px;
}
.atx-council-reply {
  position: relative;
  width: calc(100% - 8px);
  margin: 0 0 4px 8px;
  padding: 2px 8px 2px 18px;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  border-left: 0;
  color: var(--muted);
}
.atx-council-reply::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 7px;
  width: 29px;
  height: 14px;
  border-left: 1px solid var(--muted);
  border-top: 1px solid var(--muted);
  border-radius: 8px 0 0 0;
}
.atx-council-reply:hover { color: var(--fg); }
.atx-council-reply-mark { color: var(--muted); font-size: 16px; line-height: 1; }
.atx-council-reply-avatar { width: 16px; height: 16px; flex: 0 0 16px; }
.atx-council-reply-avatar svg { width: 16px; height: 16px; display: block; }
.atx-council-reply-text,
.atx-council-reply-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atx-council-reply-tray { padding: 6px 12px; margin-top: 8px; border-left: 1px solid var(--muted); }
.atx-council-reply-label { color: var(--accent); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; flex: 0 0 auto; }
.atx-council-reply-cancel { margin-left: auto; border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }

/* Only shown when the reader has scrolled away from the present. */
/* The whole bar is the control.

   It used to be pulled up under the log by a negative margin, which put its
   top edge beneath the log's own box and left only the line of text reliably
   clickable -- a target the width of the page that has to be hit on the
   letters is worse than no target. It sits in its own space now, above
   anything it borders, and every pixel of it answers. */
.atx-council-jump {
  display: block;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rule);
  border-top: none;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 7px;
  margin: 0 0 10px;
  cursor: pointer;
}
.atx-council-jump:hover { background: var(--bg); }

.atx-council-form { flex: 0 0 auto; }

/* What is waiting to go. Sits above the bar rather than inside it: the
   picture is the message, and it should be the size of a thing you can
   check before sending, not a chip. */
.atx-council-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 10px 0;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  background: var(--bg);
  margin-bottom: -1px;
}
.atx-council-staged {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
  max-width: 230px;
}
.atx-council-staged img {
  display: block;
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}
.atx-council-staged-what {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.atx-council-staged-name {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atx-council-staged-size {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex: 0 0 auto;
}
.atx-council-staged-off {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.atx-council-staged-off:hover { color: var(--stamp); border-color: var(--stamp); }
/* The bar squares off where the tray meets it, so the two read as one. */
.atx-council-tray:not([hidden]) + .atx-council-bar { border-radius: 0 0 9px 9px; }

/* One bar. The border belongs to the bar, not to the field inside it, so
   attach, type and send read as a single control the way they do in every
   chat window anyone has used. */
.atx-council-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  padding: 4px 6px;
  transition: border-color 0.12s ease;
}
.atx-council-bar:focus-within { border-color: var(--rule); }

.atx-council-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 9px 4px;
  resize: none;
  overflow-y: auto;
  /* Same reasoning as the log: a one-line field showing stepper arrows is
     the artefact the bar was redrawn to be rid of. */
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.atx-council-form textarea::-webkit-scrollbar { width: 8px; }
.atx-council-form textarea::-webkit-scrollbar-track { background: transparent; }
.atx-council-form textarea::-webkit-scrollbar-thumb {
  background: var(--rule);
  border: 2px solid var(--bg);
  border-radius: 5px;
}
.atx-council-form textarea::-webkit-scrollbar-button {
  display: none; height: 0; width: 0;
}
.atx-council-form textarea:focus { outline: none; }
.atx-council-form ::placeholder { color: var(--muted); }

.atx-council-form button[type="submit"] {
  flex: 0 0 auto;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 9px 12px;
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.atx-council-form button[type="submit"]:hover {
  background: var(--accent);
  color: var(--bg);
}
.atx-council-form button[type="submit"]:disabled {
  opacity: 0.5; cursor: default; background: transparent; color: var(--muted);
}

/* The incinerator.

   Marked in the stamp colour, which on this site means a thing that cannot
   be taken back. It is the only control here that destroys anything, so it
   is the only one allowed to look like it. */
.atx-incin { position: relative; flex: 0 0 auto; }
.atx-incin-handle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--stamp-dim);
  color: var(--stamp);
  background: transparent;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
}
.atx-incin-handle::-webkit-details-marker { display: none; }
.atx-incin-handle:hover,
.atx-incin[open] .atx-incin-handle {
  background: var(--stamp);
  color: #f4ece4;
  border-color: var(--stamp);
}
.atx-incin-mark { font-size: 11px; line-height: 1; }

.atx-incin-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 286px;
  border: 1px solid var(--stamp-dim);
  border-top: 2px solid var(--stamp);
  background: var(--paper);
  padding: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.atx-incin-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}
.atx-incin-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: pointer;
}
.atx-incin-opt:last-child { margin-bottom: 0; }
.atx-incin-opt:hover { border-color: var(--stamp); }
.atx-incin-opt:disabled { opacity: 0.5; cursor: default; }
.atx-incin-reach {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.atx-incin-all .atx-incin-reach { color: var(--stamp); }

@media (max-width: 800px) {
  .atx-council-log { height: 56vh; padding: 12px 10px 8px; }
  /* The room still measures itself against the page here, not against the
     viewport a second time. */
  .atx-room .atx-council-log { height: auto; }
  .atx-council-gutter { flex-basis: 28px; }
  .atx-council-seal { width: 28px; height: 28px; }
  .atx-incin-menu { width: min(286px, calc(100vw - 48px)); }
}

/* Foldable panel sections.

   <details> rather than a scripted toggle, so the thing works before the
   script loads and keeps working if it never does. The marker is drawn by
   hand because the browser default triangle sits at the wrong baseline
   against a panel heading. */
.atx-fold > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.atx-fold > summary::-webkit-details-marker { display: none; }
.atx-fold > summary::before {
  /* ASCII rather than a triangle: the glyph has to exist in whatever mono
     the reader has, and a tofu box mid-heading is worse than a plus sign. */
  content: "[+]";
  font-family: var(--mono);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
}
.atx-fold[open] > summary::before { content: "[-]"; }
.atx-fold > summary:hover::before { color: var(--accent); }
.atx-fold-head { margin-bottom: 0; }
.atx-fold[open] > .atx-fold-head { margin-bottom: 12px; }

/* Waiting transfers, beside the nav link.

   Not a round red bubble. This site reads as paper, and a notification dot
   from a phone would be the one element on it that came from somewhere else
   -- so the count is set as a stamped annotation, the same mono and the same
   --stamp red as the handling caveats on a file header. It says the same
   thing a bubble says, in the typeface the rest of the archive is written
   in. */
.atx-nav-count {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--stamp);
  border: 1px solid var(--stamp-dim);
  border-radius: 2px;
  padding: 1px 4px;
  margin-left: 6px;
  vertical-align: 1px;
  line-height: 1.2;
}

/* ---------- handling caveats on a file header ---------- */

.atx-caveats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.atx-caveat-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.atx-caveat {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--stamp);
  border: 1px solid var(--stamp-dim);
  padding: 2px 6px;
}
.atx-caveat-note {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------- document control block ---------- */

.atx-docctl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 10px 14px;
  margin: 14px 0 18px;
}

/* ---------- retrieval scope blocks ---------- */

/* Each retrieval facility states its own method, scope, cost and access
   condition before the query box. Two facilities that look identical but
   behave differently is the confusion this is meant to remove. */
.atx-scope {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 10px 14px;
  margin: 14px 0 16px;
}
.atx-scope-elevated { border-left-color: var(--stamp); }

.atx-scope-row {
  display: flex;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.atx-scope-row:last-child { border-bottom: none; }
.atx-scope-row-alt { padding-top: 8px; }

.atx-scope-key {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 0 0 82px;
  padding-top: 3px;
}
.atx-scope-val { font-size: 12.5px; line-height: 1.6; flex: 1; min-width: 0; }
.atx-scope-val code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
}
.atx-elevated { color: var(--stamp); letter-spacing: 0.08em; }

/* ---------- access tier chip on a result row ---------- */

.atx-tier {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: 1px 5px;
  white-space: nowrap;
}

/* ===================== selector graph / workspace ===================== */

.atx-lookup {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0 6px;
  flex-wrap: wrap;
}
.atx-lookup-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.atx-lookup input {
  flex: 1;
  min-width: 260px;
  padding: 11px 13px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.atx-lookup button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 11px 20px;
  font-weight: 700;
}
.atx-lookup-note { font-size: 12px; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }

.atx-resultbar {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg);
  border-left: 3px solid var(--accent);
  background: var(--paper);
  padding: 8px 12px;
  margin-bottom: 14px;
}
.atx-resultbar code { color: var(--accent); }

/* ---------- dense result grid ---------- */

.atx-grid { font-size: 12.5px; }
.atx-grid tbody tr:hover { background: rgba(200,162,74,0.05); }
.atx-grid td { vertical-align: middle; }
.atx-grid .conv-title { font-size: 12.5px; }

/* ---------- selector chips and types ---------- */

.atx-kind {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  border: 1px solid var(--rule);
  padding: 1px 5px;
  color: var(--muted);
  white-space: nowrap;
}
.atx-kind-EMAIL      { color: #d0483c; border-color: rgba(208,72,60,0.45); }
.atx-kind-PHONE      { color: #cf7a3c; border-color: rgba(207,122,60,0.45); }
.atx-kind-CREDENTIAL { color: #d0483c; border-color: rgba(208,72,60,0.6); }
.atx-kind-WALLET     { color: #b06fd0; border-color: rgba(176,111,208,0.45); }
.atx-kind-DOMAIN     { color: #6f9c72; }
.atx-kind-HANDLE     { color: #c8a24a; }
.atx-kind-IPV4       { color: #6d86ff; border-color: rgba(109,134,255,0.4); }

.atx-selector {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.atx-selector:hover { color: var(--accent); text-decoration: underline; }
.atx-selector-head { font-size: 19px; overflow-wrap: anywhere; }

.atx-selector-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--rule);
  padding: 1px 5px;
  margin: 1px 3px 1px 0;
  color: var(--muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.atx-selector-chip:hover { border-color: var(--accent); color: var(--accent); }

.atx-linkflag {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid rgba(200,162,74,0.4);
  padding: 1px 4px;
  white-space: nowrap;
}
.atx-pivot {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- facet bar ---------- */

/* The filter panel. Every control stays visible -- these are the questions
   the page exists to answer -- but on a grid rather than a wrapping flex row.
   Wrapping gave each control whatever width its content asked for, so the
   columns never lined up and the last row trailed off into empty space; the
   panel read as a heap of controls rather than a form.

   Twelve tracks, because the controls divide naturally into halves, thirds
   and quarters and the search line wants the full width. */
.atx-facets {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 16px;
  align-items: end;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--paper);
  padding: 16px 18px;
  margin: 14px 0 10px;
}
.atx-facet {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  grid-column: span 3;
}
/* The line most searches start with gets the width to show what was typed. */
.atx-facet:first-child { grid-column: span 6; }
.atx-facet input, .atx-facet select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 8px 10px;
}
.atx-facet input:focus, .atx-facet select:focus {
  outline: none;
  border-color: var(--accent);
}
.atx-facet input::placeholder { color: var(--muted); letter-spacing: 0.03em; }
.atx-facet .atx-field-label { font-size: 9px; letter-spacing: 0.2em; }

/* Run and Reset sit on their own row, right-aligned, so the eye reaches them
   after the controls rather than in the middle of them. */
.atx-facet-actions {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--rule);
}
.atx-facets button {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  font-weight: 700;
  padding: 8px 20px;
}
.atx-facets button:hover { background: transparent; color: var(--accent); }

@media (max-width: 1100px) {
  .atx-facet { grid-column: span 4; }
  .atx-facet:first-child { grid-column: span 8; }
}
@media (max-width: 720px) {
  .atx-facet, .atx-facet:first-child { grid-column: 1 / -1; }
}
.atx-facets button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 8px 18px;
  font-weight: 700;
}

/* ---------- link graph ---------- */

.atx-graphwrap {
  border: 1px solid var(--rule);
  background: var(--paper);
  margin: 14px 0 16px;
  overflow-x: auto;
}
.atx-graph { display: block; min-width: 640px; }
.atx-edge { stroke: #3b3d46; }
.atx-edge-label {
  fill: #6f6b62;
  font-family: var(--mono);
  font-size: 9px;
  text-anchor: middle;
  letter-spacing: 0.08em;
}
.atx-node {
  fill: #1c1e26;
  stroke: var(--accent);
  stroke-width: 1.5;
}
.atx-node:hover { fill: #2a2c36; }
.atx-node-focus { fill: #3a2f18; stroke-width: 2.5; }
.atx-node-label {
  fill: var(--accent);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.08em;
}
.atx-node-sub {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  text-anchor: middle;
}

.atx-selectors-row { align-items: flex-start; }
.atx-chip-n {
  color: var(--accent);
  font-weight: 700;
  margin-left: 5px;
  font-size: 9px;
}

/* Transcript column keeps a readable measure while the page chrome stays
   the same width as every other page. */
.page-conv .chat { max-width: 860px; }
.page-conv .atx-filehead,
.page-conv .conv-header-top,
.page-conv .conv-sub { max-width: none; }

/* ========================= access control ========================= */

/* The sign-in page is the one page with no content to push the closing
   banner down, so it is laid out as a full-height column: the form takes
   the slack and the banner sits on the bottom edge rather than floating
   mid-viewport. */
.atx-loginpage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.atx-loginwrap {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.atx-loginbox {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  background: var(--paper);
  padding: 26px 28px 22px;
}
.atx-login-masthead {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}
.atx-login-masthead .atx-abbr { font-size: 20px; display: block; }
.atx-loginform { display: flex; flex-direction: column; gap: 6px; }
.atx-loginform input {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.atx-loginform input:focus { outline: none; border-color: var(--accent); }
.atx-loginform button {
  margin-top: 8px;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 11px 18px;
}
.atx-login-error {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stamp);
  border-left: 2px solid var(--stamp);
  padding: 6px 10px;
  margin: 4px 0 6px;
}
.atx-login-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.6;
}
.atx-tiertable { border: 1px solid var(--rule); background: var(--paper); padding: 14px; }

/* ---------- tiers, denials, redaction ---------- */

.atx-tier-req { color: var(--stamp); border-color: var(--stamp-dim); }

.atx-denied {
  border: 1px solid var(--stamp-dim);
  border-left: 3px solid var(--stamp);
  background: var(--paper);
  padding: 22px 24px;
  margin: 20px 0;
}
.atx-denied-mark {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--stamp);
  margin-bottom: 18px;
}
.atx-denied-table { max-width: 620px; }
.atx-denied-table th {
  text-align: left;
  width: 120px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.atx-denied-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.atx-redacted { margin-top: 18px; opacity: 0.75; }
.atx-withheld {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--stamp);
}
.atx-withheld-snippet {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border-left-color: var(--stamp) !important;
  letter-spacing: 0.04em;
}
.atx-masked {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.atx-row-locked td { opacity: 0.62; }
.atx-row-locked:hover td { opacity: 0.85; }

.atx-ok { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: #6f9c72; }
.atx-deny { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--stamp); }
.atx-logtarget { font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .atx-loginwrap { grid-template-columns: 1fr; }
}

.atx-signout {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 2px 7px;
}
.atx-signout:hover { color: var(--stamp); border-color: var(--stamp-dim); }

/* Sign-in banners span the viewport: this page has no padded container for
   the negative margins to cancel against. */
.atx-loginpage > .atx-clsbar { margin: 0; }
.atx-loginpage > .atx-clsbar-foot { margin: 0; }

/* ---------- closing banner pins to the bottom of the viewport ----------
   Short pages (an empty search, the terminal, a denial) do not fill the
   window, so the closing classification banner used to sit wherever the
   content happened to stop, halfway up the screen. The page column is
   full-height and the footer takes the slack, so the banner is on the
   bottom edge on short pages and directly after the content on long ones.
   Children are held at their natural height: without flex-shrink:0 a flex
   column compresses tall tables to fit. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .page-list,
body > .page-conv {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
body > .page-list > *,
body > .page-conv > * { flex-shrink: 0; }
.page-list > .atx-foot,
.page-conv > .atx-foot { margin-top: auto; }

/* The transcript column is centred inside the now-flex page container. */
.page-conv > .chat { align-self: center; width: 100%; }

/* ===================== terminal: operators and issue ===================== */

/* Notices sit above the fold and reuse the stamp/accent palette rather than
   introducing a third signal colour. */
.atx-notice {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin: 0 0 16px;
}
.atx-notice-ok { border-left: 2px solid var(--accent); color: var(--fg); }
.atx-notice-bad { border-left: 2px solid var(--stamp); color: var(--fg); }

/* The one screen where a passcode is ever visible. Deliberately loud. */
.atx-issued { border-color: var(--accent); }
.atx-issued-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 40px;
  align-items: baseline;
}
.atx-issued-value {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--code-bg);
  border: 1px solid var(--rule);
  padding: 7px 11px;
  margin-top: 4px;
  user-select: all;
}

.atx-warn { color: var(--stamp); }

/* Script digests.
 *
 * Name and hash, adjacent. This was an atx-grid table, which is built to fill
 * its container -- fine for the access log, wrong for eight fixed pairs, since
 * it pushed the digest to the far right and left the reader tracking across
 * empty space to find which file it belonged to.
 *
 * max-content on both columns keeps the pair together at whatever width the
 * longest filename needs, and the whole thing stacks below.
 */
.atx-digests {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 3px 20px;
  margin: 12px 0 0;
  font-size: 11px;
  align-items: baseline;
}
.atx-digests dt {
  font-family: var(--mono);
  color: var(--muted);
}
.atx-digests dd {
  margin: 0;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  word-break: break-all;
}

@media (max-width: 560px) {
  /* One column: a 32 character hash and a filename do not sit side by side on
     a phone without one of them wrapping into nonsense. */
  .atx-digests { grid-template-columns: 1fr; gap: 0; }
  .atx-digests dt { margin-top: 8px; }
  .atx-digests dd { margin-bottom: 2px; }
}

/* Refused key material.
 *
 * Inserted at the very top of the body by groupkey.js when a clearance secret
 * does not match the commitment published in the source. It is the loudest
 * thing on the site on purpose: it means somebody has put a public key in the
 * roll whose private half they hold, and the operator reading it is the only
 * party in a position to notice. Nothing was accepted and nothing was written
 * -- the notice is the whole point, so it must not be dismissible or subtle.
 */
.atx-anchor-alarm {
  border: 2px solid var(--stamp);
  color: var(--stamp);
  background: var(--paper, transparent);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  padding: 14px 16px;
  margin: 0 0 14px;
}
.atx-self { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; }

/* An operator's key fingerprint under their id on the roll. Its own line, a
   size down, so it reads as an attribute of the operator rather than another
   column -- and never wrapped, because half a fingerprint on each of two lines
   is not a thing anybody can read down a phone. */
.atx-fp {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--muted);
}

/* The operator's own key fingerprint in the session line.
   Inherits everything -- family, size, tracking and colour -- so it reads as
   one more field in the bar rather than an announcement. It carries no label:
   TERMINAL, OPERATOR, CLEARANCE and SESSION are all things you would otherwise
   confuse for each other, and a hyphenated hex string is not. */
.atx-session-key code {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* A revoke button lives inside a table cell, so its form must not add
   block layout of its own. */
.atx-inline-form { display: inline; margin: 0; }
.settings-form button.atx-danger {
  border-color: var(--stamp-dim);
  color: var(--stamp);
  padding: 4px 10px;
}
.settings-form button.atx-danger:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--fg);
}

.atx-issue-form { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.atx-issue-row { display: flex; align-items: center; gap: 14px; }
.atx-issue-row .atx-field-label { flex: 0 0 92px; }
.atx-issue-control { display: flex; gap: 8px; flex: 1; align-items: center; }
.atx-issue-control input[type=text], .atx-issue-control select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 8px 10px;
}
.atx-issue-control input[type=text]:focus,
.atx-issue-control select:focus { outline: none; border-color: var(--accent); }
.atx-issue-control input::placeholder { color: var(--muted); letter-spacing: 0.04em; }

/* Generate reads as secondary to Issue: muted until hovered. */
.settings-form button.atx-gen {
  flex: 0 0 auto;
  border-color: var(--rule);
  color: var(--muted);
  padding: 8px 12px;
}
.settings-form button.atx-gen:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.settings-form button.atx-gen:disabled { opacity: 0.5; cursor: default; }

.atx-issue-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.atx-issue-actions .atx-panel-note { margin: 0; }

@media (max-width: 620px) {
  .atx-issue-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .atx-issue-row .atx-field-label { flex: none; }
}

/* ---------- sign in: derived-credential states ---------- */

/* The error box is present but empty until there is something to say, so
   the layout does not jump when a message appears. */
.atx-login-error[hidden] { display: none; }
.atx-loginform input:disabled,
.atx-loginform button:disabled { opacity: 0.55; cursor: default; }

/* Shown only while the derivation script has not run yet. */
.atx-nojs {
  color: var(--muted);
  border-color: var(--rule);
}

.atx-issued-tier { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }

/* ===================== the reading room ===================== */

.atx-reading { margin-top: 22px; }
.atx-reading-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.atx-reading-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.atx-reading-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* States reuse the withheld stamp so a sealed record and a denied one read
   as the same kind of object, which they are. */
.atx-transcript-state {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule);
  background: var(--paper);
  padding: 20px 22px;
}
.atx-transcript-state .atx-denied-mark { margin: 0; }
.atx-transcript-state .atx-panel-note { max-width: 68ch; }
.atx-state-sealed { border-left-color: var(--accent); }
.atx-state-error { border-left-color: var(--stamp); }
.atx-state-working { border-left-color: var(--rule); color: var(--muted); }

/* ---------- the transcript itself ---------- */

.atx-transcript {
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: exchange;
}

/* A file, not a chat app: flat rows separated by rules, the speaker in the
   margin, no bubbles and no avatars. */
.atx-msg {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.atx-msg:last-child { border-bottom: none; }
.atx-msg-user { background: linear-gradient(90deg, rgba(200,162,74,0.035), transparent 42%); }

.atx-msg-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 2px;
}
.atx-msg-who {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.atx-msg-assistant .atx-msg-who { color: var(--muted); }
.atx-msg-n, .atx-msg-at {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.atx-msg-n::before { content: "№ "; }

.atx-msg-body { min-width: 0; }
.atx-msg-text {
  font-size: 14px;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 10px;
}
.atx-msg-text:last-child { margin-bottom: 0; }

.atx-msg-tool {
  border: 1px solid var(--rule);
  background: var(--code-bg);
  padding: 9px 11px;
  margin: 10px 0;
}
.atx-tool-error { border-color: var(--stamp-dim); }
.atx-tool-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 6px;
}
.atx-tool-error .atx-tool-label { color: var(--stamp); }
.atx-tool-body {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}
.atx-msg-notice {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--stamp);
  margin: 8px 0;
}

@media (max-width: 720px) {
  .atx-msg { grid-template-columns: 1fr; gap: 8px; }
  .atx-msg-head { flex-direction: row; align-items: baseline; gap: 10px; }
}

/* ---------- the other block types ---------- */

/* Reasoning is folded: usually longer than the answer, and not what someone
   opened the record to read. */
.atx-msg-think {
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 11px;
  margin: 10px 0;
}
.atx-msg-think summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.atx-msg-think summary::-webkit-details-marker { display: none; }
.atx-msg-think summary::before { content: "▸ "; color: var(--muted); }
.atx-msg-think[open] summary::before { content: "▾ "; }
.atx-think-body {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.68;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.atx-msg-action {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 7px 0;
}
.atx-msg-action::before { content: "— "; }

.atx-msg-sources { margin: 10px 0; }
.atx-cite-list {
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.atx-cite-list li { padding-left: 12px; border-left: 1px solid var(--rule); }
.atx-cite-link {
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.atx-cite-link:hover { text-decoration: underline; }
.atx-cite-snippet {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 2px;
}

.atx-msg-xpost {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--paper);
  margin: 10px 0;
  padding: 9px 12px;
}
.atx-xpost-body {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 5px 0 6px;
}

.atx-msg-attach {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px dashed var(--rule);
  padding: 6px 10px;
  margin: 9px 0;
  display: inline-block;
}

/* ---------- transfer ---------- */

/* Reuses the issue form's furniture -- same label column, same controls, same
   secondary-button treatment -- because the transfer desk and the terminal
   are the same office doing two jobs, and an operator should not have to
   relearn a form to use the other one. */

/* .settings-form caps at 640px, which is right for issuing a credential and
   wrong here: this form sits in a full-width panel above two full-width
   tables, and stopping halfway across looked like a rendering fault. */
.atx-transfer-form { display: flex; flex-direction: column; gap: 16px;
  max-width: none; }
.atx-transfer-row { display: flex; gap: 14px; align-items: flex-start; }
.atx-transfer-row > .atx-field-label { flex: 0 0 92px; padding-top: 8px; }
.atx-transfer-control { flex: 1; min-width: 0; }
.atx-transfer-inline { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.atx-transfer-control textarea,
.atx-transfer-control input[type=text],
.atx-transfer-inline select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  padding: 8px 10px;
  box-sizing: border-box;
  /* Not draggable. Dragging it only ever pulls the panel out of line, and
     the row it sits in is already the width of the page. */
  resize: none;
}
.atx-transfer-inline select { width: auto; }
.atx-transfer-control textarea:focus,
.atx-transfer-control input[type=text]:focus,
.atx-transfer-inline select:focus { outline: none; border-color: var(--accent); }
.atx-transfer-control input::placeholder,
.atx-transfer-control textarea::placeholder {
  color: var(--muted);
  letter-spacing: 0.03em;
}
.atx-transfer-control input[type=file] {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.atx-modes { display: flex; margin-bottom: 12px; }
.atx-modes label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 7px 18px;
  /* Collapsed borders: one segmented control, not two buttons. */
  margin-right: -1px;
  cursor: pointer;
}
.atx-modes label:hover { color: var(--fg); }
.atx-modes label:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(200, 162, 74, 0.08);
  /* Above the neighbour so the shared edge is the accent one. */
  position: relative;
  z-index: 1;
}
/* The radio itself has nothing to add once the label is the control. */
.atx-modes input { display: none; }

.atx-burn {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
/* Burning is the destructive option, so it carries the stamp colour the
   revoke button does rather than reading as one more checkbox. */
.atx-burn:has(input:checked) { color: var(--stamp); }
.atx-burn input[type=checkbox]:checked { border-color: var(--stamp); }
.atx-burn input[type=checkbox]:checked::after { background: var(--stamp); }

/* The address line.

   Each recipient is a piece with its own way of being taken off, the way an
   address line is drawn everywhere else. The box is the field: it takes the
   border and the focus ring, and the input inside it is invisible furniture
   that grows to whatever is left of the row. */
.atx-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  min-height: 39px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 5px 7px;
  cursor: text;
}
.atx-chips:focus-within { border-color: var(--accent); }
.atx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(200, 162, 74, 0.12);
  border: 1px solid var(--rule);
  color: var(--accent);
  padding: 3px 4px 3px 8px;
  font-size: 12px;
}
.atx-chip code {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: inherit;
  background: none;
  padding: 0;
}
.atx-chip-off {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.atx-chip-off:hover { color: var(--stamp); }
.atx-chip-entry {
  flex: 1 1 120px;
  min-width: 120px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 4px 2px;
}
.atx-chip-entry:focus { outline: none; }


/* The opened panel is the one place plaintext exists on this page, so it is
   marked out: the accent rule says "this is open" the way the stamp says
   "this is denied". */
.atx-transfer-open { border-left: 2px solid var(--accent); }
.atx-transfer-text {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin: 10px 0 0;
  max-height: 60vh;
  overflow-y: auto;
}
.atx-transfer-download {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 8px 14px;
  margin-top: 10px;
  text-decoration: none;
}
.atx-transfer-download:hover { background: var(--accent); color: var(--bg); }
.atx-transfer-preview {
  display: block;
  max-width: 100%;
  margin-top: 14px;
  border: 1px solid var(--rule);
}

/* A burned row stays on the page rather than vanishing, so the operator can
   see what happened -- struck through, because it is gone rather than just
   read. */
.atx-transfer-burned { opacity: 0.45; }
.atx-transfer-burned code { text-decoration: line-through; }

@media (max-width: 720px) {
  .atx-transfer-row { flex-direction: column; gap: 6px; }
  .atx-transfer-row > .atx-field-label { flex: none; padding-top: 0; }
}

/* Open sits beside Withdraw in the outbox; the two must not collide. */
.atx-outbox-actions { display: flex; gap: 8px; align-items: center; }


/* ---------- native controls ---------- */

/* The browser's own checkbox, radio, select arrow and file button arrive in
   the platform's palette -- rounded, blue, white -- and no amount of
   surrounding mono type survives sitting next to one. These are the same
   four shapes the rest of the page already uses: a square, a hairline rule,
   uppercase mono, and the accent for anything chosen.

   Registry-wide rather than per page: there are fourteen of these controls
   across the whole site, and one styled page beside four default ones is
   worse than none. */

.atx-wide input[type=checkbox],
.atx-wide input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  position: relative;
}
.atx-wide input[type=checkbox]:hover,
.atx-wide input[type=radio]:hover { border-color: var(--muted); }
.atx-wide input[type=checkbox]:checked,
.atx-wide input[type=radio]:checked { border-color: var(--accent); }
/* A filled square inside a ruled one -- a box ticked in the file, rather
   than a glyph the font may or may not carry. */
.atx-wide input[type=checkbox]:checked::after,
.atx-wide input[type=radio]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--accent);
}
.atx-wide input[type=checkbox]:focus-visible,
.atx-wide input[type=radio]:focus-visible,
.atx-wide select:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* The select keeps its own arrow otherwise, which is the one part of the
   control the border and background cannot reach. Drawn as a caret in the
   muted colour; data: is permitted by the policy's img-src. */
.atx-wide select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8578' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 5px;
  padding-right: 28px;
}
.atx-wide select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c8a24a' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* "Choose File" is the loudest default on the page. Same treatment as the
   Generate button on the terminal: secondary until hovered. */
.atx-wide input[type=file]::file-selector-button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--muted);
  padding: 7px 14px;
  margin-right: 12px;
  cursor: pointer;
}
.atx-wide input[type=file]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Open sits in a table cell, not in a form, so it matched none of the form
   button rules and arrived as a native grey button in the middle of the
   inbox. Same secondary treatment as Generate on the terminal; the more
   specific .settings-form rule still wins where that one applies. */
button.atx-gen {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--muted);
  padding: 6px 12px;
  cursor: pointer;
}
button.atx-gen:hover { border-color: var(--accent); color: var(--accent); }
button.atx-gen:disabled { opacity: 0.5; cursor: default; }

/* One recipient and its READ mark travel together; the pairs sit apart. */
.atx-sent-to { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.atx-sent-one { display: inline-flex; align-items: baseline; gap: 5px; }

/* ---------- confirmation dialog ---------- */

/* Replaces window.confirm, which draws the platform's own dialog titled with
   the host name over a page that has gone to some trouble not to look like
   that. Same furniture as a panel: paper ground, hairline rule, mono head. */

.atx-dialog-back {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 7, 9, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.atx-dialog {
  background: var(--paper);
  border: 1px solid var(--rule);
  /* The stamp edge marks it as the destructive question it always is. */
  border-left: 2px solid var(--stamp);
  max-width: 460px;
  width: 100%;
  padding: 20px 22px 18px;
}
.atx-dialog-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.atx-dialog-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 18px;
}
/* A figure to be read aloud: set large, spaced, and on its own ground so it
   can be checked against another screen without being hunted for. */
.atx-dialog-code {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-align: center;
  color: var(--accent);
  background: var(--code-bg);
  border: 1px solid var(--rule);
  padding: 12px 10px;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}

.atx-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.atx-dialog-actions button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--muted);
  padding: 8px 16px;
  cursor: pointer;
}
.atx-dialog-actions button:hover { border-color: var(--muted); color: var(--fg); }
/* Qualified by the actions row. `.atx-dialog-go` alone loses to the
   `.atx-dialog-actions button` above it on specificity, which left the
   confirm button looking exactly like Cancel. */
.atx-dialog-actions .atx-dialog-go {
  border-color: var(--accent);
  color: var(--accent);
}
.atx-dialog-actions .atx-dialog-go:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.atx-dialog-actions .atx-dialog-danger {
  border-color: var(--stamp-dim);
  color: var(--stamp);
}
.atx-dialog-actions .atx-dialog-danger:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--fg);
}
.atx-dialog-actions button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
/* The page behind does not scroll while the question stands. */
body.atx-dialog-close { overflow: hidden; }

/* The sender's note, on an opened transfer. It is the one thing on the panel
   a person wrote rather than the system, so it is set at reading size with
   the accent edge the opened panel already carries, not as a muted aside. */
.atx-open-note {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--code-bg);
  border-left: 2px solid var(--accent);
  padding: 10px 14px;
  margin: 12px 0 0;
  max-width: 82ch;
  overflow-wrap: anywhere;
}
/* "from OP-0002" and its handling mark, beside the panel head. */
.atx-transfer-open .atx-panel-head .muted {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The file option below clearance IV. Dimmed and inert rather than hidden:
   an operator should be able to see that the desk moves files and that this
   is the clearance for it. The route refuses it independently. */
.atx-modes label.atx-mode-off { opacity: 0.4; cursor: not-allowed; }
.atx-modes label.atx-mode-off:hover { color: var(--muted); }

/* A file, marked in the inbox. The server knows the kind because the two
   clearances arrive at two endpoints; it still cannot read either. */
.atx-kindmark {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 2px 5px;
  margin-right: 6px;
}

/* Material index chips, on the selector page. Same device as a selector
   kind, coloured by what the category costs to read: stamp for the two that
   need Directorate, warmer for the identifying ones, quiet for the rest. */
.atx-kind-CREDENTIALS { color: var(--stamp); border-color: var(--stamp-dim); }
.atx-kind-FINANCIAL   { color: #b06fd0; border-color: rgba(176,111,208,0.45); }
.atx-kind-IDENTIFIERS { color: #cf7a3c; border-color: rgba(207,122,60,0.45); }
.atx-kind-PLACE       { color: #cf7a3c; border-color: rgba(207,122,60,0.35); }
.atx-kind-ATTRIBUTED  { color: #6f9c72; }
.atx-kind-ENCLOSURES  { color: var(--muted); }
.atx-kind-NETWORK     { color: #5f8fb0; border-color: rgba(95,143,176,0.4); }

/* ---------- findings ---------- */

/* Why a record sits where it does, shown in the reading room. Sealed with
   the transcript, so it is on screen only for someone who could already read
   the text it points at.

   Marked, not highlighted. A highlighter is for a reader's own notes; this is
   the office's mark on a document it has reviewed, so it takes the stamp
   colour and an underline rather than a wash of colour behind the words. */

.atx-findings {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.atx-finding-chip { text-decoration: none; }
a.atx-finding-chip:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--fg);
}
/* Tier IV and below are a lesser mark than Directorate material: same
   device, quieter ink, so a page of them does not read as an alarm. */
.atx-finding-chip[data-tier="4"] { color: #cf7a3c; border-color: rgba(207,122,60,0.45); }
.atx-finding-chip[data-tier="3"],
.atx-finding-chip[data-tier="2"] { color: var(--muted); border-color: var(--rule); }

.atx-finding { background: none; color: inherit; }
/* The underline carries the meaning and belongs to the quoted text alone;
   the text itself stays exactly as written. */
.atx-finding-text {
  border-bottom: 1px dashed var(--stamp);
  padding-bottom: 1px;
}
.atx-finding[data-tier="4"] .atx-finding-text { border-bottom-color: #cf7a3c; }
.atx-finding[data-tier="3"] .atx-finding-text,
.atx-finding[data-tier="2"] .atx-finding-text { border-bottom-color: var(--muted); }

/* The category, set in the margin the way an annotation would be. Kept out
   of the flow so a mark never reflows the sentence it sits under. */
.atx-finding-flag {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stamp);
  white-space: nowrap;
  margin: 0 5px 0 6px;
  vertical-align: 2px;
  opacity: 0.85;
}
.atx-finding[data-tier="4"] .atx-finding-flag { color: #cf7a3c; }
.atx-finding[data-tier="3"] .atx-finding-flag,
.atx-finding[data-tier="2"] .atx-finding-flag { color: var(--muted); }

/* Arriving from a chip. Brief, and only the ring moves -- the text under it
   must not shift while someone is reading. */
.atx-finding:target {
  outline: 1px solid var(--stamp);
  outline-offset: 3px;
  animation: atx-found 1.4s ease-out 1;
}
@keyframes atx-found {
  from { background: var(--stamp-dim); }
  to   { background: none; }
}

/* ---------- attachments ---------- */

/* The registry used to show a name and say the file was elsewhere. The bytes
   are held now, sealed under the record's own clearance, so the block offers
   to open what the record actually contained.

   Set as a filed enclosure rather than as a media card: a ruled box, a mono
   header, and the preview beneath it. It is evidence in a file, not a photo
   in a feed. */

.atx-msg-attach {
  border: 1px dashed var(--rule);
  padding: 10px 12px;
  margin: 9px 0;
  display: block;
}
.atx-file-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.atx-file-kind {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 2px 6px;
}
.atx-file-name { color: var(--fg); overflow-wrap: anywhere; }
.atx-file-size { color: var(--muted); }
.atx-file-head .atx-gen { margin-left: auto; }

.atx-file-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.atx-file-note:empty { display: none; }

/* An attachment is unreviewed by definition, so a file that turns out to
   carry a position is worth marking as plainly as a caveat chip. */
.atx-file-gps {
  color: var(--stamp);
  border: 1px solid var(--stamp-dim);
  padding: 1px 6px;
  font-weight: 700;
}

.atx-file-body:empty { display: none; }
.atx-file-preview {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  margin: 10px 0 0;
  border: 1px solid var(--rule);
}
.atx-file-text {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--code-bg);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  margin: 10px 0 0;
  max-height: 50vh;
  overflow-y: auto;
}
.atx-file-save {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 6px 12px;
  margin-top: 10px;
  text-decoration: none;
}
.atx-file-save:hover { background: var(--accent); color: var(--bg); }

/* A date that wraps mid-timestamp reads as two numbers rather than one. */
.atx-when { white-space: nowrap; }

/* Pictures in the council room.

   Sized from dimensions measured before the upload, so the log holds its
   shape while an image is still decrypting rather than reflowing everything
   below it each time one arrives. */
.atx-council-logwrap { position: relative; }

.atx-council-pic {
  margin: 6px 0 2px;
  max-width: 420px;
  border: 1px solid var(--rule);
  background: var(--code-bg);
  overflow: hidden;
  line-height: 0;
}
.atx-council-pic img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}
/* Waiting on the fetch and the decrypt. A faint pulse rather than a spinner:
   there is already enough going on in a log that redraws itself. */
.atx-council-pic-wait {
  animation: atx-pic-wait 1.4s ease-in-out infinite;
  border-style: dashed;
}
@keyframes atx-pic-wait {
  0%, 100% { background: var(--code-bg); }
  50% { background: rgba(200, 162, 74, 0.07); }
}
@media (prefers-reduced-motion: reduce) {
  .atx-council-pic-wait { animation: none; }
}
.atx-council-pic-shut { border-color: var(--stamp-dim); border-style: dashed; }
.atx-council-pic figcaption {
  line-height: 1.5;
  padding: 8px 10px;
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}

/* Full size. Over everything, closes on Escape, the backdrop, or the button. */
.atx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(6, 7, 9, 0.92);
  cursor: zoom-out;
}
/* The stage clips, so a magnified picture is moved around inside the viewer
   rather than spilling over the page. touch-action is off because the pinch
   and the drag are handled in council.js; leaving it on lets the browser
   scroll the room underneath instead. */
.atx-lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.atx-lightbox-stage.atx-zoomed { cursor: grab; }
.atx-lightbox-stage.atx-zoomed:active { cursor: grabbing; }

.atx-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--rule);
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.atx-lightbox-tools {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 5px;
  cursor: default;
}
.atx-lightbox-tools button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  padding: 6px 11px;
  cursor: pointer;
}
.atx-lightbox-tools button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.atx-lightbox-tools button:disabled { color: #43444b; cursor: default; }
/* Qualified so it beats the button rule above on specificity rather than
   on source order. */
.atx-lightbox-tools .atx-lightbox-fit {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 12px;
}
.atx-lightbox-level {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  min-width: 44px;
  text-align: center;
}
.atx-lightbox-shut {
  position: absolute;
  top: 16px;
  right: 16px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}
.atx-lightbox-shut:hover { border-color: var(--accent); color: var(--accent); }

/* Shown only while a file is dragged over the log. */
/* The veil.

   A chat window has to do three things before it is worth looking at: read
   the room, draw it, and put the end of it under the reader's eye. Each of
   those was visible in turn -- an empty room, the oldest messages, then a
   jump. None of it is information, so none of it is shown: the log is
   blurred out until all three are done, and what fades in is the room as it
   actually stands. */
.atx-council-veil {
  position: absolute;
  inset: 14px 0 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.22s ease;
}
.atx-council-veil span { animation: atx-council-breathe 1.4s ease-in-out infinite; }
/* Not hidden, faded: the log is drawn and scrolled underneath while this is
   still opaque, and it lifts once that is finished. */
.atx-council-veil.atx-council-lifted { opacity: 0; }
.atx-council-opening .atx-council-log { filter: blur(6px); }
.atx-council-log { transition: filter 0.22s ease; }
@media (prefers-reduced-motion: reduce) {
  .atx-council-veil span { animation: none; }
  .atx-council-veil, .atx-council-log { transition: none; }
}

.atx-council-drop {
  position: absolute;
  inset: 14px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 15, 18, 0.92);
  border: 1px dashed var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

/* The attach control. A label over a hidden input, so it is reachable by
   keyboard and needs no script to open the picker. */
.atx-council-clip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 3px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.atx-council-clip:hover,
.atx-council-clip:focus-within { color: var(--bg); background: var(--accent); }
.atx-council-clip span[aria-hidden] { font-size: 17px; line-height: 1; }
/* The word is for a screen reader and for the tooltip; the plus says it. */
.atx-council-clip-say {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 800px) {
  .atx-council-pic { max-width: 100%; }
  .atx-lightbox { padding: 16px; }
  .atx-lightbox-tools { bottom: 10px; gap: 2px; padding: 4px; }
  .atx-lightbox-tools button { padding: 6px 9px; }
}

/* Re-keying by hand. Not marked in the stamp colour: minting a key is a
   safe, repeatable act -- the destructive control next to it is the one
   allowed to look dangerous. */
.atx-council-rekey {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
}
.atx-council-rekey:hover { border-color: var(--accent); color: var(--accent); }
.atx-council-rekey:disabled { opacity: 0.5; cursor: default; }

/* Controls that sit outside a .settings-form.

   .settings-form carries the button styling on this page, and three
   controls are not inside one: the board's File notice and Withdraw, whose
   forms never had the class, and the clearance selector, which is a div. All
   three were rendering as the browser's own white buttons in the middle of a
   dark terminal. Styled by where they are rather than by adding the class to
   the markup, so nothing else inherits a change. */
.atx-issue-actions button,
.atx-clearance button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 7px 14px;
  cursor: pointer;
}
.atx-issue-actions button:hover,
.atx-clearance button:hover { background: var(--accent); color: var(--bg); }
.atx-clearance button:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}

/* Withdraw is destructive wherever it sits. The .settings-form rule is more
   specific and still wins where it applies. */
button.atx-danger {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--stamp-dim);
  color: var(--stamp);
  padding: 7px 14px;
  cursor: pointer;
}
button.atx-danger:hover { background: var(--stamp); color: #f4ece4; }

/* The clearance selector on the operator roll. */
/* The last cell of an operator row: the clearance control and Revoke, on one
   line. They used to stack, because the clearance control carried a full-width
   note under it and the revoke form sat below that -- three bands of controls
   for one row, with a red button adrift at the bottom. The fingerprint moved
   to its own column and the rest fits on a single line. */
.atx-rowactions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.atx-rowactions > form { margin: 0; }

.atx-clearance {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* background-color, not the background shorthand: this rule sits below the
   .atx-wide select one, and the shorthand reset that rule's repeat, position
   and size back to their initials while leaving :hover free to put the caret
   image back. The result was a row of gold chevrons tiled across the whole
   control the moment you pointed at it. */
.atx-clearance select {
  border-radius: 0;
  background-color: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  /* Room on the right for the caret. The longest option, III - IDENTIFIER
     ACCESS, ran straight into it otherwise. */
  padding: 6px 26px 6px 8px;
}
.atx-clearance select:focus { outline: none; border-color: var(--accent); }
/* The result line the script writes after a clearance change. Full width so
   it drops below the controls instead of stretching the row, and left aligned
   against a cell whose contents are otherwise pushed right. */
.atx-clearance-why,
.atx-clearance-said {
  flex: 1 1 100%;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}
.atx-clearance-said.atx-clearance-bad { color: var(--stamp); }

/* ------------------------------------------------------------- vault

   The vault tab. Records are drawn by vault.js from ciphertext the browser
   opened, so none of the markup below exists except in a signed-in tab that
   holds the key. */

.atx-btn {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}
.atx-btn:disabled { opacity: 0.5; cursor: default; }
.atx-btn-quiet {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.atx-btn-quiet:hover { color: var(--fg); border-color: var(--accent); }

#vault .atx-panel { margin-bottom: 18px; }
#vault .atx-panel[hidden] { display: none; }

.vt-say {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 14px;
  min-height: 1.4em;
}
.vt-say.vt-bad { color: var(--stamp); }

.vt-acts { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.vt-steps {
  margin: 4px 0 14px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  max-width: 74ch;
}
.vt-steps li { margin: 6px 0; }
.vt-steps b { color: var(--accent); font-weight: 600; }
.vt-steps a { color: var(--accent); }
.vt-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vt-toolbar input[type="search"] {
  flex: 1 1 auto;
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 10px;
}
.vt-toolbar input[type="search"]:focus { outline: none; border-color: var(--accent); }

.vt-person { border-top: 1px solid var(--rule); padding: 12px 0; }
.vt-person header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vt-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--code-bg);
  object-fit: cover;
}
.vt-name { font-weight: 700; font-size: 13px; }
.vt-at, .vt-when {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.vt-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
}
.vt-when { margin-left: auto; }
.vt-facts {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin: 0 0 6px 42px;
}
.vt-bio {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
  margin: 0 0 10px 42px;
  max-width: 70ch;
}
.vt-off {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.vt-off:hover { color: var(--stamp); }

.vt-row { display: flex; align-items: center; gap: 10px; margin: 3px 0; min-width: 0; }
.vt-platform {
  flex: 0 0 auto;
  min-width: 96px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The handle is the button, because copying it is the whole point. */
.vt-handle {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: 1px solid transparent;
  background: var(--code-bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vt-handle:hover { border-color: var(--accent); }
.vt-open {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.vt-open:hover { text-decoration: underline; }
.vt-none { font-size: 12px; color: var(--muted); padding: 16px 0 4px; }
.vt-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin: -1px 0 4px 106px;
  line-height: 1.5;
}


/* Privacy / Terms under the sign-in box. Present as required, quiet by
   design -- monospace to sit with the terminal, dimmed until hovered. */
.atx-login-legal {
  margin-top: 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.atx-login-legal a { color: var(--muted); text-decoration: none; }
.atx-login-legal a:hover { color: var(--accent); text-decoration: underline; }
.atx-login-legal span { margin: 0 6px; color: var(--muted); }

/* A count held above the reader's clearance. Marked in the stamp colour so
   it reads as withheld rather than as a zero or a rendering fault. */
.atx-withheld {
  color: var(--stamp);
  letter-spacing: 0.16em;
  cursor: help;
}

/* ---------- access log: time column and operator search ---------- */

/* The timestamps were right-aligned as numbers, which pushed them to the far
   side of a wide column and left "13 September 2026, 4:40 pm" sitting an inch
   from the heading it belongs under. They are a phrase, not a quantity, so
   they read left-aligned like every other word on the row. Tabular figures
   keep the clock times in a column of their own regardless. */
.atx-logtime {
  text-align: left;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.atx-logsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 12px;
}
/* Left bare, an input and a button come back as a white box and a grey chrome
   button on a dark page. Every control on the site is drawn from the same
   tokens, so these are too: paper ground, hairline border, accent on focus,
   and the outline button the filters and settings forms already use. */
.atx-logsearch input {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 11ch;
  padding: 5px 8px;
}
.atx-logsearch input:focus { outline: none; border-color: var(--accent); }
.atx-logsearch input::placeholder {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.04em;
}
.atx-logsearch button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--accent);
  padding: 6px 12px;
  cursor: pointer;
}
.atx-logsearch button:hover { background: var(--accent); color: var(--bg); }
.atx-logsearch a { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ===================== referrals ===================== */

/* A signup link is a credential written in a URL, and the commonest way one
   of those leaks is a screen somebody else happens to be looking at. So the
   list arrives covered, and the cover is a button rather than a blur: a blur
   invites leaning in, and this is a decision to make deliberately. */
.atx-spoiler { margin-top: 12px; }
.atx-spoiler-cover {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px dashed var(--rule);
  border-radius: 0;
  background: var(--code-bg);
  color: var(--fg);
  padding: 18px 20px;
  cursor: pointer;
  font-family: inherit;
}
.atx-spoiler-cover:hover { border-color: var(--accent); }
.atx-spoiler-title {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.atx-spoiler-note {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 6px;
  max-width: 62ch;
}
.atx-spoiler-do {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 12px;
}
.atx-spoiler-cover:hover .atx-spoiler-do {
  background: var(--accent);
  color: var(--bg);
}

.atx-invite-card {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--code-bg);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.atx-invite-head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 11.5px;
}
.atx-invite-op {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.atx-invite-linkrow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
}
.atx-invite-link {
  flex: 1 1 28ch;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 8px 10px;
  overflow-wrap: anywhere;
  user-select: all;
}
.atx-invite-lost { color: var(--muted); user-select: auto; }
/* The copy and withdraw buttons sit outside .atx-issue-actions, so they are
   drawn from the same tokens here rather than inheriting the browser's. */
.atx-invite-card button {
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 7px 13px;
  cursor: pointer;
}
.atx-invite-card button:hover { background: var(--accent); color: var(--bg); }
.atx-invite-card button.atx-danger {
  border-color: var(--stamp);
  color: var(--stamp);
}
.atx-invite-card button.atx-danger:hover {
  background: var(--stamp);
  color: var(--bg);
}
.atx-invite-card button:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: var(--border);
  color: var(--muted);
  background: transparent;
}

/* ---------- admission by referral ---------- */

.atx-joinbox { max-width: 60ch; }
.atx-join-head {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.atx-join-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 14px;
}
.atx-join-note.muted { color: var(--muted); }
.atx-join-ref { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.atx-join-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  align-items: baseline;
  margin-bottom: 16px;
}
/* The passcode exists in exactly one place in the world while this is on
   screen, and it will not exist there once the tab closes. The panel says so
   in the loudest voice this palette has. */
.atx-join-warn {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--code-bg);
  border: 1px solid var(--stamp);
  border-left: 3px solid var(--stamp);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.atx-join-warn strong { color: var(--stamp); display: block; margin-bottom: 4px; }
.atx-join-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 14px;
  cursor: pointer;
}
.atx-join-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  cursor: pointer;
}
.atx-join-check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.atx-join-check input:focus-visible { outline: 1px solid var(--accent); }
#atx-join-open {
  /* Centred, and the only control in its step: the checkbox above it is a
     line of text with a box on it, and a button left-aligned under that read
     as another item in the list rather than as the thing being decided. */
  display: block;
  margin: 0 auto;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 1px solid var(--accent);
  padding: 11px 18px;
  cursor: pointer;
}
#atx-join-open:disabled { opacity: 0.5; cursor: default; }
.atx-join-signin {
  /* Centred like the button it replaces, so the last step does not shift the
     one control on the page an inch to the left. */
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  padding: 10px 16px;
}
.atx-join-signin:hover { background: var(--accent); color: var(--bg); }