/* ── Reset & base ────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Signal Room theme: dark graphite/blue-black workstation ───────────── */
  --bg:           #0b0f14;            /* page background — deep graphite */
  --bg-grid:      rgba(155, 200, 230, 0.035); /* faint cybernetic grid */
  --panel:        #11181f;            /* primary surface (cards, inputs) */
  --panel-2:      #161e26;            /* slightly raised surface */
  --panel-3:      #1c2530;            /* hover / active surface */
  --surface:      var(--panel);       /* legacy alias */
  --border:       #243140;            /* subtle blue-grey edge */
  --border-strong:#324558;            /* stronger panel edge */
  --border-focus: #00d4c0;            /* cyan focus ring */
  --text:         #e6eef5;            /* primary text — cool near-white */
  --text-muted:   #7d8b9b;            /* secondary text — cool grey */
  --text-dim:     #58697a;            /* tertiary, e.g. table chrome */
  --accent:       #00d4c0;            /* cyan — primary signal */
  --accent-hover: #4ee9d8;
  --accent-2:     #ff9b3e;            /* amber — warnings, secondary chips */
  --accent-violet:#a78bfa;            /* violet — categories, accents */
  --accent-acid:  #b6f560;            /* acid-green — success-y accents */
  --danger:       #ff6b6b;            /* alert red */
  --success:      #50d890;            /* success green */
  --shadow:       0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.25);
  --radius:       4px;                /* tighter, console-like */
  --font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
}

html { font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--bg);
  background-image:
    linear-gradient(to right, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(0, 212, 192, 0.25); color: var(--text); }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #0d141c 0%, #0a1117 100%);
  position: sticky;
  top: 0;
  z-index: 10;
  /* Thin cyan top stripe — workstation chrome */
  box-shadow: inset 0 1px 0 var(--accent), 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* Brand lockup: Delightful logo + "// Signal Room" product label.
   The image scales with width, height stays auto so it never distorts. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 120px;
  height: auto;
  max-height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-product {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header nav {
  display: flex;
  gap: 1rem;
}

.site-header nav a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}

.site-header nav a:hover { color: var(--text); background: var(--panel-3); }

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* ── Page header ─────────────────────────────────────────────────────────── */

.page-header { margin-bottom: 1.75rem; }

.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.page-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
}

.page-eyebrow-tag {
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0.12em;
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-subhead {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 1.25rem; }

.field { display: flex; flex-direction: column; gap: 0.375rem; }

label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.label-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

/* Small helper note that sits just under the Comment textarea, reminding
   the user that Markdown link syntax is the only supported formatting.
   Intentionally low-emphasis — there is no UI control to interact with. */
.comment-hint {
  margin-top: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--panel);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
  caret-color: var(--accent);
}

input[type="text"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder { color: var(--text-dim); }

input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(0, 212, 192, 0.15);
  background: var(--panel-2);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237d8b9b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  padding-right: 2rem;
  cursor: pointer;
}

select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300d4c0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

select option { background: var(--panel-2); color: var(--text); }

textarea { resize: vertical; min-height: 80px; font-family: var(--font); }

input[type="file"] {
  padding: 0.4rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
input[type="file"]::file-selector-button {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 0.3rem 0.7rem;
  margin-right: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--accent); color: #07101a; border-color: var(--accent); }

/* ── Actions ─────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #07101a;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 212, 192, 0.3), 0 0 12px rgba(0, 212, 192, 0.15);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 1px rgba(78, 233, 216, 0.4), 0 0 16px rgba(0, 212, 192, 0.25);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--panel);
}

.btn-secondary {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: var(--panel-3);
  border-color: var(--accent);
  color: var(--accent);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Status / alerts ─────────────────────────────────────────────────────── */

.status {
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}

.status.hidden { display: none; }

.status-info {
  background: rgba(0, 212, 192, 0.08);
  color: var(--accent);
  border-color: rgba(0, 212, 192, 0.3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.status-error {
  background: rgba(255, 107, 107, 0.08);
  color: var(--danger);
  border-color: rgba(255, 107, 107, 0.3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.alert {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.alert-error {
  background: rgba(255, 107, 107, 0.08);
  color: var(--danger);
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.error-box {
  background: rgba(255, 107, 107, 0.08);
  color: var(--danger);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
}

.alert-success {
  background: rgba(80, 216, 144, 0.08);
  color: var(--success);
  border: 1px solid rgba(80, 216, 144, 0.3);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-mono);
  margin-bottom: 1rem;
}

/* ── Issue actions / edit-links pages ───────────────────────────────────── */

.issue-actions {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0.5rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.issue-actions a { color: var(--accent); text-decoration: none; }
.issue-actions a:hover { text-decoration: underline; }
.issue-actions span { color: var(--text-dim); }

.links-edit-form { margin-top: 1rem; }

/* Horizontal-scroll wrapper around the bulk-edit table. Below the table's
   min-width, the wrapper scrolls horizontally rather than collapsing
   columns into single-character-wide URL cells. Scoped tightly to this
   wrapper so it doesn't affect /issues/:id/clicks's `.clicks-table`. */
.links-edit-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.links-edit-form .links-edit-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
}
.links-edit-form .links-edit-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
}
.links-edit-form .links-edit-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.links-edit-form .links-edit-table input[type="text"],
.links-edit-form .links-edit-table textarea,
.links-edit-form .links-edit-table select {
  width: 100%;
  font-size: 0.85rem;
}
.links-edit-form .links-edit-table textarea {
  font-family: var(--font);
  resize: vertical;
  min-height: 2.5rem;
}

/* Per-column widths sum to 100% of the 1080px table min-width. URL stays
   wide enough for a typical host+path; gentler `overflow-wrap: anywhere`
   replaces the prior `word-break: break-all` so URLs only break at
   character boundaries when they have to. */
.links-edit-form .links-edit-th-url      { width: 22%; }
.links-edit-form .links-edit-th-title    { width: 16%; }
.links-edit-form .links-edit-th-source   { width: 12%; }
.links-edit-form .links-edit-th-quote    { width: 22%; }
.links-edit-form .links-edit-th-type     { width: 14%; }
.links-edit-form .links-edit-th-category { width: 14%; }

.links-edit-form .links-edit-url {
  overflow-wrap: anywhere;
}
.links-edit-form .links-edit-url a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.links-edit-form .links-edit-url a:hover { text-decoration: underline; }
.links-edit-form .links-edit-meta {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.4rem;
}
.links-edit-form .links-edit-type select {
  min-width: 0;
}
.links-edit-form .links-edit-no-context {
  font-family: var(--font-mono);
  color: var(--text-dim);
}

/* ── Review page specifics ───────────────────────────────────────────────── */

.review-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
  overflow: hidden;
}

.review-url {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.review-url:hover { color: var(--accent-hover); text-decoration: underline; }
.review-url::before { content: "↳ "; color: var(--text-dim); }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--panel-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.badge-article   { background: rgba(0, 180, 255, 0.1);  color: #6cc5f5; border-color: rgba(0, 180, 255, 0.25); }
.badge-paywalled { background: rgba(255, 155, 62, 0.1); color: #ffb979; border-color: rgba(255, 155, 62, 0.3); }
.badge-video     { background: rgba(255, 107, 107, 0.1); color: #ff8f8f; border-color: rgba(255, 107, 107, 0.3); }
.badge-game      { background: rgba(182, 245, 96, 0.08); color: #c8f57a; border-color: rgba(182, 245, 96, 0.25); }
.badge-social    { background: rgba(167, 139, 250, 0.1); color: #c7b2ff; border-color: rgba(167, 139, 250, 0.3); }

.badge-quote-type {
  font-size: 0.68rem;
  font-weight: 400;
  background: var(--panel-3);
  color: var(--text-dim);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  border-color: var(--border);
}

/* ── Nav active state ────────────────────────────────────────────────────── */

.site-header nav a.nav-active {
  color: var(--accent);
  background: rgba(0, 212, 192, 0.08);
  box-shadow: inset 0 -1px 0 var(--accent);
}

/* ── Inbox ───────────────────────────────────────────────────────────────── */

.inbox-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.inbox-header h1 { margin-bottom: 0; }

/* Read-only link counter that sits just under "Incoming Signals" so the
   user can see at a glance how full the current issue is getting. Not
   included in clipboard / digest output — purely a meter. */
.inbox-link-counter {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.count {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.3em;
}

.category-group {
  margin-bottom: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem 0.25rem;
  position: relative;
  box-shadow: var(--shadow);
}

.category-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  opacity: 0.5;
  border-radius: var(--radius) var(--radius) 0 0;
}

.category-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding-bottom: 0.625rem;
  margin-bottom: 0;
}

.category-heading::before {
  content: "» ";
  color: var(--accent);
}

.link-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.link-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.link-row:first-child { border-top-color: rgba(255, 255, 255, 0.04); }

.link-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.link-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-width: 0;
}

.link-title {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent);
  word-break: break-word;
  transition: color 0.15s;
}

.link-title:hover { color: var(--accent-hover); text-decoration: underline; }

.link-source {
  font-size: 0.8125rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.link-quote {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  padding-left: 0;
}

.link-notes {
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding-left: 0;
}

/* ── Card preview line ───────────────���───────────────────────────────────── */

.card-preview {
  font-size: 0.9375rem;
  line-height: 1.55;
  flex: 1;
  min-width: 0;
}

.card-quote {
  font-style: italic;
  color: var(--text);
}

.card-source {
  font-style: italic;
  color: var(--accent-violet);
}

/* "Decks + other artifacts" cards render `Title: description [Source]`.
   The leading colon + description span is plain text (no curly quote
   marks) so the card preview matches the digest format for this
   category. Color is the same as body text — this isn't a pull-quote.
   Used in both the server-side card render (inbox.js linkRow) and the
   inline JS re-render (buildDisplay). */
.card-description {
  color: var(--text);
}
.shelf-link-description .card-description-text {
  color: var(--text);
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Per-link comment surfaced in the card preview / digest. Rendered as
   "// comment //" between the quote and the title; the wrapping marks
   come from the renderer (src/services/comment.js + the inline mirror
   in inbox.js), not from CSS pseudo-elements, so plain-text copy stays
   identical to what's on screen. */
.card-comment {
  font-style: italic;
  color: var(--accent-2);
}
.card-comment a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 155, 62, 0.5);
}
.card-comment a:hover {
  text-decoration-color: var(--accent-2);
}

.digest-comment {
  font-style: italic;
  color: var(--accent-2);
}
.digest-comment a {
  color: inherit;
  text-decoration: underline;
}

.copy-link-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0;
  transition: color 0.15s;
}
.copy-link-btn:hover { color: var(--accent); }

.digest-preview {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 0.25rem;
  padding-top: 0.375rem;
  border-top: 1px dashed var(--border);
}

.preview-link {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
}

.preview-link:hover { text-decoration: underline; }

.preview-source {
  font-style: italic;
}

.delete-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.1rem 0;
  transition: color 0.15s;
}

.delete-btn:hover:not(:disabled) { color: var(--danger); }
.delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.link-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }

.edit-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0;
  transition: color 0.15s;
}
.edit-btn:hover { color: var(--accent); }

/* ── Inline edit form ────────────────────────────────────────────────────── */

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.25rem 0 0.25rem;
}

.edit-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.edit-label::before {
  content: "▸ ";
  color: var(--accent);
}

/* ── Category select on card ─────────────────────────────────────────────── */

.link-category-row { padding-top: 0.375rem; }

.category-select {
  font-size: 0.8rem;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  color: var(--text-muted);
  border-color: var(--border);
  background-color: transparent;
}

.category-select:focus { color: var(--text); }

/* Auto-hide empty category sections */
.category-group:not(:has(li.link-row)) { display: none; }

/* ── Inbox: wider container + sources sidebar ─────────────────── */
main.main-wide { max-width: 960px; }

/* Wider container for the archive page so the sidebar+main grid still
   leaves room for the full-width All Issues table at typical desktop
   widths. Below 980px the layout collapses to a single column (see
   .archive-layout media query) and the extra width is unused. */
main.main-archive { max-width: 1280px; }

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 2rem;
  align-items: start;
}

.inbox-sidebar { position: sticky; top: 1.5rem; }

.sources-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem 1rem;
  position: relative;
  box-shadow: var(--shadow);
}

.sources-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-violet) 0%, transparent 60%);
  opacity: 0.5;
  border-radius: var(--radius) var(--radius) 0 0;
}

.sources-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sources-card-header h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}
.sources-card-header h2::before {
  content: "» ";
  color: var(--accent-violet);
}

.sources-summary {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.sources-list {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.sources-list li { margin: 0.15rem 0; }
.sources-list li::marker { color: var(--accent-violet); }
.sources-list a { color: var(--text); text-decoration: none; border-bottom: 1px dotted transparent; }
.sources-list a:hover { color: var(--accent-violet); border-bottom-color: var(--accent-violet); }
.sources-empty { font-size: 0.875rem; color: var(--text-muted); margin: 0; font-style: italic; }

.inbox-sidebar > .sources-card + .sources-card { margin-top: 1rem; }

.cited-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.cited-list li { margin: 0.15rem 0; }
.cited-list li::marker { color: var(--accent-violet); }
.cited-list a { color: var(--text); text-decoration: none; border-bottom: 1px dotted transparent; }
.cited-list a:hover { color: var(--accent-violet); border-bottom-color: var(--accent-violet); }

@media (max-width: 720px) {
  .inbox-layout { grid-template-columns: minmax(0, 1fr); }
  .inbox-sidebar { position: static; }
}

/* ── Scratch pad card ──────────────────────────────────────────────────────
   Private freeform notes for the in-progress issue. Sits at the top of the
   inbox column, above the images strip / category groups. Not part of the
   digest output — purely a drafting surface. */

.scratchpad-card {
  margin-bottom: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem 1rem;
  position: relative;
  box-shadow: var(--shadow);
}

.scratchpad-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-2) 0%, transparent 60%);
  opacity: 0.5;
  border-radius: var(--radius) var(--radius) 0 0;
}

.scratchpad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.scratchpad-header h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}
.scratchpad-header h2::before {
  content: "» ";
  color: var(--accent-2);
}

.scratchpad-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.scratchpad-status[data-state="saved"]  { color: var(--success); }
.scratchpad-status[data-state="saving"] { color: var(--text-muted); }
.scratchpad-status[data-state="dirty"]  { color: var(--accent-2); }
.scratchpad-status[data-state="error"]  { color: var(--danger); }

.scratchpad-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.scratchpad-textarea {
  width: 100%;
  min-height: 8rem;
  resize: vertical;
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
}
.scratchpad-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(0, 212, 192, 0.12);
}

@media (max-width: 720px) {
  .scratchpad-card { padding: 0.75rem 0.875rem 0.875rem; }
  .scratchpad-textarea { min-height: 6.5rem; font-size: 1rem; }
}

/* In demo mode, the scratch pad is read-only on the server. Reflect that
   in the UI — keep the card visible (notes may still be interesting to read)
   but disable input. */
body.is-demo .scratchpad-textarea { pointer-events: none; opacity: 0.7; }
body.is-demo .scratchpad-status { display: none; }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--text-muted);
}

/* ── Digest ──────────────────────────────────────────────────────────────── */

.digest-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.digest-header h1 { margin-bottom: 0; }

.digest-section { margin-bottom: 2rem; }

.digest-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.digest-row {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.digest-quote {
  color: var(--text);
}

.digest-title {
  font-weight: 500;
  text-decoration: none;
  color: var(--accent);
}

.digest-title:hover { color: var(--accent-hover); text-decoration: underline; }

.digest-source {
  color: var(--accent-violet);
  font-size: 0.875rem;
  font-style: italic;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

/* Safe-area insets for notched iPhones (standalone mode) */
@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
    height: calc(52px + env(safe-area-inset-top));
  }
  main {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 540px) {
  /* Header */
  .site-header {
    padding-left:  max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    gap: 0.75rem;
  }

  .site-header nav { gap: 0.875rem; }

  /* Main content */
  main {
    padding-top:   1.75rem;
    padding-left:  max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* Prevent iOS auto-zoom on focus: inputs must be >= 16px */
  input[type="text"],
  input[type="url"],
  select,
  textarea {
    font-size: 1rem;
  }

  /* Comfortable touch targets */
  .btn           { min-height: 44px; }
  .delete-btn    { min-height: 44px; padding: 0.5rem 0; }

  /* Stack form actions, full-width primary button */
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-ghost { text-align: center; }

  /* Inbox: give the remove button more breathing room */
  .link-top  { gap: 0.5rem; }
  .link-list { gap: 1.125rem; }

  /* Inbox header: stack actions below title on small screens */
  .inbox-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ── Archive layout: left sidebar (history) + main (dashboard) ──────────── */

.archive-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas: "sidebar main";
  gap: 1.5rem;
  align-items: start;
}

.archive-sidebar { grid-area: sidebar; min-width: 0; position: sticky; top: 1.5rem; }
.archive-main { grid-area: main; min-width: 0; }

.archive-sidebar-card { padding: 0.85rem 0.95rem; }
.archive-sidebar-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.archive-sidebar-heading::before { content: "» "; color: var(--accent); }
.archive-sidebar-action {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.65rem;
}
.archive-sidebar-action a { color: var(--accent); text-decoration: none; }
.archive-sidebar-action a:hover { text-decoration: underline; }

/* Preview-image admin card — sits below the archive history list. Same
   sidebar-card chrome as the history list above it, just a top margin
   so they don't visually fuse. The button submits a POST to the batch
   backfill endpoint; the route stamps a ?ok=... onto the redirect so
   the message lands in the page-level banner area. */
.preview-image-admin-card { margin-top: 1rem; }
.preview-image-admin-summary,
.preview-image-admin-remaining {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
  line-height: 1.4;
}
.preview-image-admin-form { margin-top: 0.4rem; }
.preview-image-admin-form button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Archive-import warnings list — small, muted, with a left amber bar */
.archive-import-warnings {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.archive-import-warnings li {
  padding: 0.35rem 0.6rem;
  border-left: 2px solid var(--accent-2);
  background: var(--panel-2);
  margin-bottom: 0.25rem;
  word-break: break-word;
}

.archive-sidebar-scroll {
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  padding-right: 0.25rem;
  /* Hide the scrollbar gutter when nothing to scroll, keep light when scrolling */
  scrollbar-gutter: stable;
}

/* Below ~980px the sidebar drops underneath the main content (DOM order
   inside .archive-layout is sidebar-then-main, so we override areas to
   put main first when stacking). Static positioning + uncapped height
   so a long history list scrolls with the page rather than its own
   container. */
@media (max-width: 980px) {
  .archive-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "sidebar";
  }
  .archive-sidebar { position: static; }
  .archive-sidebar-scroll { max-height: none; overflow-y: visible; }
}

/* Issues row styles below — sized for the narrower 280px sidebar column. */

.issues-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.issues-row {
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.issues-row:first-child { border-top: none; padding-top: 0.25rem; }

.issues-row-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.issues-row-title:hover { color: var(--accent); }
.issues-row-title .muted { color: var(--text-dim); font-style: italic; font-weight: 400; }

.issues-row-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.issues-row-action {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
}

.issues-row-action:hover { color: var(--accent-hover); text-decoration: underline; }

/* Right-side affordance cluster on each archive row: the existing
   "View clicks" / "Import clicks" link plus the public-URL status
   ("Public issue ↗" outbound link, or quieter "No public URL"). */
.issues-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.85rem;
}

.issues-row-public {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.issues-row-public:not(.issues-row-public-missing) {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.issues-row-public:not(.issues-row-public-missing):hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.issues-row-public-missing { color: var(--text-dim); font-style: italic; }

/* Inline edit form per issue row: single URL input + Save button.
   Quiet by default so it doesn't compete with the row title/meta. */
.issues-row-public-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
}
.issues-row-public-form input[type="url"] {
  flex: 1 1 auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
}
.btn-small {
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
}

/* Focus highlight after a public-URL save redirect ?issue=<id>. */
.issues-row-focused {
  outline: 1px solid rgba(0, 212, 192, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
  background: rgba(0, 212, 192, 0.04);
}

/* ── Clicked-link cards (shared by Summary, lists, Issues) ──────────────── */

.click-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.875rem 0.875rem;
  position: relative;
  box-shadow: var(--shadow);
}

.click-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  opacity: 0.45;
  border-radius: var(--radius) var(--radius) 0 0;
}

.click-card h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.click-card h3::before { content: "» "; color: var(--accent); }

.click-card-empty { font-size: 0.875rem; color: var(--text-muted); }
.click-unmatched-tag { color: var(--text-muted); font-size: 0.75rem; }

/* Primary stats — large, prominent (used in Summary card) */
.stat-primary {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}
.stat-primary-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stat-primary-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Two-column key-value list — label left, number right */
.kv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}
.kv-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.kv-list li:first-child { border-top: none; }
.kv-list .kv-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-list .kv-num {
  color: var(--accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  white-space: nowrap;
}
.kv-list a { color: var(--text); text-decoration: none; }
.kv-list a:hover { color: var(--accent); }

/* Secondary stat block in Summary card — smaller, more muted */
.kv-list-secondary {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
}
.kv-list-secondary li { padding: 0.15rem 0; border-top: none; }
.kv-list-secondary .kv-label { color: var(--text-muted); }

/* ── Headline form on clicks page ───────────────────────────────────────── */

.headline-form { margin: 0 0 1.25rem; }
.headline-form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.headline-form-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.headline-form-row input[type="text"] { flex: 1; min-width: 0; }

/* ── Click-import category dropdowns ────────────────────────────────────── */

.cat-select {
  font-size: 0.85rem;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  margin-top: 0.25rem;
  max-width: 100%;
}

/* ── Archive bar (Digest page) ───────────────────────────────────────────── */

.archive-bar {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}

.archive-form {
  margin-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archive-form p { font-size: 0.875rem; color: var(--text-muted); }

.archive-form-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.archive-form-row label {
  font-size: 0.875rem;
  font-weight: 500;
}

.archive-form-row input[type="number"] {
  width: 5rem;
  font-size: 0.9375rem;
}

#archive-status {
  font-size: 0.875rem;
  color: var(--danger);
}

/* ── Images divider ────────────────────────────────────────────────────────── */

.images-divider {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 0.75rem 0;
}

/* ── Inbox image list ──────────────────────────────────────────────────────── */

.inbox-images-strip {
  margin-bottom: 2.25rem;
}

.image-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.image-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 140px;
}

.inbox-image-thumb {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
}

.image-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8125rem;
}

.image-title {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Digest image list ─────────────────────────────────────────────────────── */

.digest-image-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.digest-image-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 180px;
}

.digest-image {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
}

.digest-image-meta {
  font-size: 0.8125rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.digest-image-title {
  font-weight: 500;
  color: var(--text);
}

/* ── Unified Archive page (history + click-performance dashboard) ───────── */

.archive-section { margin: 1.25rem 0 1.5rem; }
.archive-section:first-of-type { margin-top: 0.5rem; }
.archive-section-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.archive-section-heading::before { content: "▸ "; color: var(--accent); }

/* One-line caveat that sits between an archive section's heading and its
   card — used for the "X was added YYYY-MM-DD" note above Category
   performance. Intentionally low-emphasis. */
.archive-section-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin: -0.25rem 0 0.6rem;
}

.archive-dashboard-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}
.archive-dashboard-coverage strong { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }

.archive-dashboard-fullrow { margin-bottom: 1rem; }
.archive-dashboard-fullrow:last-child { margin-bottom: 0; }

.archive-dashboard-grid-equal {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.archive-dashboard-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .archive-dashboard-grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .archive-dashboard-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

.archive-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.archive-dashboard-stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  position: relative;
  box-shadow: var(--shadow);
}
.archive-dashboard-stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  opacity: 0.5;
  border-radius: var(--radius) var(--radius) 0 0;
}
.archive-dashboard-stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.archive-dashboard-stat-value {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--accent);
}
.archive-dashboard-stat-detail {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .archive-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.archive-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
}
@media (max-width: 720px) {
  .archive-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}

.archive-dashboard-card { padding: 1rem 1.1rem 1.1rem; }

.archive-dashboard-toggles {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.archive-dashboard-toggle {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.archive-dashboard-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.archive-dashboard-toggle.is-active {
  background: rgba(0, 212, 192, 0.12);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0, 212, 192, 0.2);
}

.archive-dashboard-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.archive-dashboard-bar {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr auto;
  gap: 0.6rem;
  align-items: center;
  font-family: inherit;
  font-size: 0.8125rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.archive-dashboard-bar:hover { background: rgba(255, 255, 255, 0.03); }
.archive-dashboard-bar.is-selected {
  border-color: var(--accent);
  background: rgba(0, 212, 192, 0.06);
}
.archive-dashboard-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.archive-dashboard-bar-track {
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  display: block;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.archive-dashboard-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-violet));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 212, 192, 0.4);
}
.archive-dashboard-bar.is-selected .archive-dashboard-bar-fill { background: var(--accent-2); box-shadow: 0 0 8px rgba(255, 155, 62, 0.4); }
.archive-dashboard-bar-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--accent);
  min-width: 3rem;
  text-align: right;
}

.archive-dashboard-selected-head { margin-bottom: 0.6rem; }
.archive-dashboard-selected-issue { font-weight: 600; font-size: 0.95rem; }
.archive-dashboard-selected-title { color: var(--text); font-size: 0.95rem; }
.archive-dashboard-selected-title .muted { color: var(--text-muted); font-style: italic; }
.archive-dashboard-selected-stats {
  list-style: none; padding: 0; margin: 0.25rem 0 0.6rem;
  display: flex; flex-direction: column; gap: 0.05rem;
}
.archive-dashboard-selected-stats li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
}
.archive-dashboard-selected-stats li:first-child { border-top: none; }
.archive-dashboard-selected-k { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; }
.archive-dashboard-selected-v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.archive-dashboard-selected-link { font-size: 0.8125rem; }
.archive-dashboard-selected-link a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.archive-dashboard-selected-link a:hover { color: var(--accent-hover); }

.archive-dashboard-axis-note { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }

.archive-dashboard-bubble { width: 100%; }
.archive-dashboard-svg { width: 100%; height: auto; display: block; }
.archive-dashboard-axis-line { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; }
.archive-dashboard-grid-line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.archive-dashboard-tick { font-size: 10px; fill: var(--text-muted); font-family: var(--font-mono); }
.archive-dashboard-axis-label { font-size: 10px; fill: var(--text-muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.archive-dashboard-bubble-g { cursor: pointer; }
.archive-dashboard-bubble-circle {
  fill: var(--accent);
  fill-opacity: 0.2;
  stroke: var(--accent);
  stroke-width: 1;
}
.archive-dashboard-bubble-g:hover .archive-dashboard-bubble-circle { fill-opacity: 0.38; }
.archive-dashboard-bubble-g.is-selected .archive-dashboard-bubble-circle {
  fill: var(--accent-2);
  fill-opacity: 0.45;
  stroke: var(--accent-2);
  stroke-width: 2;
}
.archive-dashboard-bubble-label { font-size: 10px; fill: var(--text); font-family: var(--font-mono); pointer-events: none; }

/* The table now lives in a full-width row, so it should fit without
   horizontal scroll at typical desktop widths. We keep overflow-x: auto
   only as a safety net for narrow viewports. */
.archive-dashboard-table-wrap { width: 100%; overflow-x: auto; }
.archive-dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  table-layout: auto;
}
.archive-dashboard-table th,
.archive-dashboard-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}
.archive-dashboard-th {
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-strong);
}
.archive-dashboard-sort-btn {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.archive-dashboard-sort-indicator { display: inline-block; width: 0.7em; margin-left: 0.2em; }
.archive-dashboard-th.is-sorted-asc .archive-dashboard-sort-indicator::after { content: '▲'; font-size: 0.7em; }
.archive-dashboard-th.is-sorted-desc .archive-dashboard-sort-indicator::after { content: '▼'; font-size: 0.7em; }
.archive-dashboard-th-left { text-align: left; }
.archive-dashboard-th-right { text-align: right; }
.archive-dashboard-td-left { text-align: left; }
.archive-dashboard-td-right { text-align: right; font-variant-numeric: tabular-nums; }
/* Title column gets the leftover space: no max-width cap at desktop, wraps
   gracefully if a headline runs long. The numeric columns (right-aligned,
   tabular-nums) absorb their natural width. */
.archive-dashboard-td-title {
  white-space: normal;
  overflow-wrap: anywhere;
}
.archive-dashboard-td-title .muted { color: var(--text-muted); font-style: italic; }
.archive-dashboard-th-left,
.archive-dashboard-td-left { white-space: nowrap; }
.archive-dashboard-th-left[data-key="title"],
.archive-dashboard-td-title { white-space: normal; }
.archive-dashboard-tr { cursor: pointer; }
.archive-dashboard-tr:hover { background: rgba(255, 255, 255, 0.03); }
.archive-dashboard-tr.is-selected { background: rgba(255, 155, 62, 0.08); }
.archive-dashboard-tr a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.archive-dashboard-tr a:hover { color: var(--accent-hover); }

.archive-dashboard-learnings {
  background: linear-gradient(180deg, #0d141c 0%, #0a1117 100%);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0.5rem 0 0.75rem;
  position: relative;
  box-shadow: 0 0 24px rgba(0, 212, 192, 0.08), inset 0 1px 0 rgba(0, 212, 192, 0.15);
}
.archive-dashboard-learnings::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-violet) 50%, transparent 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}
.archive-dashboard-learnings h3 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.archive-dashboard-learnings h3::before { content: "» "; }
.archive-dashboard-learnings-caveat { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.85rem; font-style: italic; }
.archive-dashboard-learnings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .archive-dashboard-learnings-grid { grid-template-columns: 1fr; }
}
.archive-dashboard-learning {
  background: rgba(0, 212, 192, 0.04);
  border: 1px solid rgba(0, 212, 192, 0.15);
  border-radius: 3px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.archive-dashboard-learning.is-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.archive-dashboard-learning.is-clickable:hover { background: rgba(0, 212, 192, 0.08); border-color: var(--accent); }
.archive-dashboard-learning-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.archive-dashboard-learning-text { font-size: 0.875rem; line-height: 1.45; margin: 0; color: var(--text); }

.archive-dashboard-footnote { font-size: 0.75rem; color: var(--text-muted); margin: 0.5rem 0 0; font-family: var(--font-mono); letter-spacing: 0.02em; }

/* ── Status chip (utility) ──────────────────────────────────────────────── */

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  background: var(--panel-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.status-chip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
}
.status-chip.is-live { color: var(--accent); border-color: rgba(0, 212, 192, 0.3); }
.status-chip.is-live::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* ── Click-import page: dark-theme overrides for inline styles ──────────── */
/* clickImport.js uses inline borders/colors that were tuned for the light
   theme. Override them with high-specificity selectors so the table chrome
   blends with the Signal Room theme without rewriting that view. */

.clicks-table { color: var(--text); }
.clicks-table tr { border-color: var(--border) !important; }
.clicks-table thead tr { border-bottom-color: var(--border-strong) !important; }
.clicks-table th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.clicks-table td a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.clicks-table td a:hover { color: var(--accent-hover); }

/* Horizontal-scroll wrapper around the clicks-table. Below the table's
   min-width, the wrapper scrolls horizontally rather than collapsing the
   URL/Title column to one-character-per-line wrapping. Replaces the prior
   inline `word-break: break-all` on URL cells (now `class="clicks-url"`),
   which forced character-by-character breaks at any column width. */
.clicks-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.clicks-table-wrap > .clicks-table {
  min-width: 720px;
}
.clicks-table .clicks-url {
  overflow-wrap: anywhere;
  min-width: 240px;
}

/* ── Archive-import preview: 6-column form layout ───────────────────────── */
/* The archive-import preview adds two <select> columns (Newsletter category
   and Page section / type) that need predictable, clickable widths even when
   the table has to scroll horizontally inside its wrapper. Scoped tightly
   under .archive-import-preview so the other .clicks-table renderings
   (issue clicks page, click-import preview, unmatched-categorize) keep
   their existing column behavior. */
.clicks-table-wrap.archive-import-preview { background: var(--panel); }
.clicks-table-wrap.archive-import-preview > .clicks-table { min-width: 880px; }

.archive-import-preview .archive-import-th-rank   { width: 36px; }
.archive-import-preview .archive-import-th-url    { width: auto; }
.archive-import-preview .archive-import-th-clicks { width: 64px; }
.archive-import-preview .archive-import-th-rate   { width: 64px; }
.archive-import-preview .archive-import-th-cat    { width: 220px; }
.archive-import-preview .archive-import-th-ctx    { width: 200px; }

/* Ensure the per-row select cells are always wide enough that the <select>
   element is comfortably clickable; the overflow-x: auto wrapper handles
   anything narrower than the table's min-width. */
.archive-import-preview select[name="cat_value[]"],
.archive-import-preview select[name="ctx_value[]"] {
  min-width: 180px;
}

.click-summary { color: var(--accent); font-family: var(--font-mono); letter-spacing: 0.04em; }
.text-muted { color: var(--text-muted); }
.required { color: var(--danger); }
.field-hint { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.7rem; text-transform: none; letter-spacing: 0.02em; margin-left: 0.4rem; }

/* ── Empty state polish ─────────────────────────────────────────────────── */

.empty-state {
  background: var(--panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  margin: 1rem 0;
}
.empty-state p {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.empty-state p::before { content: "// "; color: var(--text-dim); }
.empty-state a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.empty-state a::before { content: ""; }
.empty-state a:hover { color: var(--accent-hover); }

/* ── Add-image page tweaks ──────────────────────────────────────────────── */
.add-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Headline form refinement ───────────────────────────────────────────── */
.headline-form label {
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.headline-form label::before { content: "▸ "; color: var(--accent); }

/* ── Archive sub-page back link ─────────────────────────────────────────── */
.archive-back-link {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.archive-back-link a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 0.15s, border-color 0.15s;
}
.archive-back-link a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── /archive top clicked links card: caption + "See full list" link ────── */
.click-card-caption {
  margin: -0.25rem 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.click-card-action {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.click-card-action a { color: var(--accent); text-decoration: none; }
.click-card-action a:hover { text-decoration: underline; }

/* ── /archive/top-links page ────────────────────────────────────────────── */
.top-links-controls { margin: 0.5rem 0 0.5rem; }

.top-links-toggles {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.top-links-toggle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s;
}
.top-links-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.top-links-toggle.is-active {
  background: rgba(0, 212, 192, 0.12);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0, 212, 192, 0.2);
}

.top-links-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

.top-links-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 900px) {
  .top-links-layout { grid-template-columns: minmax(0, 1fr); }
}

.top-links-main, .top-links-side { min-width: 0; }

/* Bar chart card */
.top-links-chart-card { padding: 1rem 1.1rem 1.1rem; }
.top-links-bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  counter-reset: top-links-bar;
}
.top-links-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.85rem;
}
.top-links-bar-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.top-links-bar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.top-links-bar-title a { color: var(--text); text-decoration: none; }
.top-links-bar-title a:hover { color: var(--accent); }
.top-links-bar-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.top-links-source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.top-links-bar-track {
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  display: block;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.top-links-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-violet));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 212, 192, 0.4);
}
.top-links-bar-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--accent);
  min-width: 3rem;
  text-align: right;
}

/* Ranked top-50 list */
.top-links-list-card { padding: 0.85rem 1rem; }
.top-links-rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-links-rank-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  align-items: baseline;
}
.top-links-rank-row:first-child { border-top: none; padding-top: 0.25rem; }
.top-links-rank-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.top-links-rank-body { min-width: 0; }
.top-links-rank-title {
  font-size: 0.92rem;
  line-height: 1.35;
  word-wrap: break-word;
}
.top-links-rank-title a { color: var(--text); text-decoration: none; }
.top-links-rank-title a:hover { color: var(--accent); }
.top-links-rank-meta {
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Paste-ready by-category card */
.top-links-paste-card { padding: 0.85rem 1rem 1rem; }
.top-links-paste-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 540px) {
  .top-links-paste-head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
  }
}
.top-links-paste-help {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  flex: 1;
  min-width: 0;
}
.top-links-paste-cat { margin-top: 0.85rem; }
.top-links-paste-cat:first-of-type { margin-top: 0.4rem; }
.top-links-paste-cat-heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 0.35rem;
}
.top-links-paste-cat-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ── /archive Learnings card + /archive/learnings page ──────────────────── */
.learnings-card { padding: 0.85rem 1rem 1rem; }

.learnings-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.learnings-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.45rem;
}
.learnings-row:first-child { border-top: none; padding-top: 0; }
.learnings-headline {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 0.15rem;
}
.learnings-body {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.learnings-tentative {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  background: rgba(255, 155, 62, 0.08);
  vertical-align: middle;
  margin-left: 0.35rem;
}

/* Bucket / table-like rows on the full Learnings page */
.learnings-bucket-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.learnings-bucket-row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  grid-template-areas:
    "label track num"
    "label meta meta";
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.learnings-bucket-row:first-child { border-top: none; padding-top: 0; }
.learnings-bucket-label {
  grid-area: label;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.learnings-bucket-name {
  font-size: 0.85rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.learnings-bucket-track {
  grid-area: track;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  min-width: 0;
}
.learnings-bucket-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-violet));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(0, 212, 192, 0.4);
}
.learnings-bucket-num {
  grid-area: num;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--accent);
  white-space: nowrap;
}
.learnings-bucket-meta {
  grid-area: meta;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.learnings-bucket-empty {
  grid-area: meta;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  font-style: italic;
}
.learnings-bucket-row.is-uncategorized .learnings-bucket-name {
  color: var(--text-muted);
  font-style: italic;
}
.learnings-uncat-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
  margin-top: 0.1rem;
  align-self: flex-start;
}

@media (max-width: 600px) {
  .learnings-bucket-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label num"
      "track track"
      "meta meta";
  }
}

.learnings-card-foot {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Uncategorized high performers section */
.learnings-uncat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.learnings-uncat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title  cta"
    "meta   cta";
  gap: 0.15rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.learnings-uncat-row:first-child { border-top: none; padding-top: 0.25rem; }
.learnings-uncat-title {
  grid-area: title;
  font-size: 0.92rem;
  line-height: 1.35;
  word-wrap: break-word;
}
.learnings-uncat-title a { color: var(--text); text-decoration: none; }
.learnings-uncat-title a:hover { color: var(--accent); }
.learnings-uncat-meta {
  grid-area: meta;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.learnings-source {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.learnings-categorize {
  grid-area: cta;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0.3rem 0.6rem;
  background: rgba(0, 212, 192, 0.06);
  align-self: center;
}
.learnings-categorize:hover {
  background: rgba(0, 212, 192, 0.16);
  color: var(--accent-hover);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive pass — preserves desktop look; tightens spacing/typography and
   stacks action rows on phones/tablets. Builds on the existing
   `@media (max-width: 540px)` block above; rules here apply at wider phone
   breakpoints (≤700px) plus a tighter pass for ≤480px.
   ──────────────────────────────────────────────────────────────────────────── */

/* Belt-and-braces: never let a stray fixed-width element create a horizontal
   scrollbar on mobile. Images already get max-width via card styles; this
   covers any future authored content. */
img, svg, video, canvas, iframe { max-width: 100%; }

@media (max-width: 700px) {
  /* Header — compact padding so the title + 4 nav items fit a phone row.
     The header still flexes title-on-left / nav-on-right; the nav itself
     wraps if needed. */
  .site-header {
    padding-left: max(0.875rem, env(safe-area-inset-left));
    padding-right: max(0.875rem, env(safe-area-inset-right));
    height: auto;
    min-height: 52px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .site-header nav {
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .site-header nav a {
    padding: 0.35rem 0.5rem;
  }
  /* Brand: shrink the Delightful mark so it doesn't dominate the row. */
  .brand-logo { width: 100px; max-height: 28px; }

  /* Main container — slightly tighter padding, no horizontal overflow. */
  main {
    padding: 1.5rem 1rem 3rem;
    max-width: 100%;
  }
  main.main-wide,
  main.main-archive { max-width: 100%; }

  /* Page header — slightly smaller h1, tighter eyebrow letter-spacing. */
  .page-header { margin-bottom: 1.25rem; }
  .page-header h1 { font-size: 1.25rem; }
  .page-eyebrow { letter-spacing: 0.12em; }

  /* Inbox header — stack title above actions and let actions span full width. */
  .inbox-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .header-actions {
    width: 100%;
    gap: 0.5rem;
  }
  .header-actions .btn { flex: 1 1 calc(50% - 0.25rem); min-width: 0; }

  /* Archive confirmation — keep label inline, but let the input span the row
     and put the two buttons on a tidy 2-up under that. */
  .archive-form-row {
    gap: 0.5rem;
  }
  .archive-form-row label { width: 100%; }
  .archive-form-row input[type="number"] { width: 100%; flex: 1 1 auto; }
  .archive-form-row .btn { flex: 1 1 calc(50% - 0.25rem); }

  /* Inbox link cards — stack the row's preview text above its action buttons
     so long titles/quotes don't push actions off-screen. The card-preview
     already had `flex: 1; min-width: 0`, so wrapping was already correct on
     desktop; on mobile the cleanest move is a vertical stack with actions
     pinned to the right edge. */
  .link-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .link-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
  }

  /* Category card — slightly tighter padding so the cyan top stripe and
     content reach close to the viewport edges without feeling cramped. */
  .category-group { padding: 0.75rem 0.875rem 0.25rem; }

  /* Inbox images strip — let thumbs flex with the viewport rather than
     locking to 140px when the row only has room for one. */
  .image-row { width: calc(50% - 0.375rem); }
  .inbox-image-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  /* Edit form action row — primary first, ghost second, both full width. */
  .edit-form .actions { flex-direction: column; align-items: stretch; }
  .edit-form .actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  /* Tighter brand lockup on very narrow phones so the nav still fits. */
  .brand-logo { width: 90px; }
  .brand-product { font-size: 0.65rem; letter-spacing: 0.1em; }

  main { padding: 1.25rem 0.875rem 2.75rem; }

  .page-header h1 { font-size: 1.125rem; }
  .page-header { margin-bottom: 1rem; }

  /* Stack capture/copy/archive buttons one per row at very narrow widths —
     two-column gets cramped under ~360–400px. */
  .header-actions { flex-direction: column; gap: 0.45rem; }
  .header-actions .btn { width: 100%; flex: none; }

  /* Archive confirm/cancel still 2-up under 480 — that pair fits cleanly. */
  .archive-form-row .btn { flex: 1 1 calc(50% - 0.25rem); }

  /* Slightly tighter card paddings */
  .category-group { padding: 0.625rem 0.75rem 0.25rem; }

  /* Card text wraps anywhere when a long URL has no break opportunities. */
  .card-preview, .link-title { overflow-wrap: anywhere; }

  /* Image thumbs single column at the smallest sizes. */
  .image-row { width: 100%; }
}

/* ── Collection tags ────────────────────────────────────────────────────────
   Optional "shelves" surfaced on review + inbox cards. Pills are compact and
   intentionally low-emphasis so they don't compete with the quote/title row.
   Never rendered in the digest output. */

.link-tags-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.tag-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}

.tag-pill {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(167, 139, 250, 0.08);
  color: #c7b2ff;
  border: 1px solid rgba(167, 139, 250, 0.25);
  white-space: nowrap;
}

.tag-pills-empty {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
}

.tag-edit-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.1rem 0;
  transition: color 0.15s;
}
.tag-edit-btn:hover { color: var(--accent); }

.link-tags-row.tag-editing {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.tag-editor-hint,
.tag-editor-empty {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.tag-options {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  margin: 0;
  padding: 0;
}

.tag-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}

.tag-option input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.tag-option .tag-pill {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border-color: var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tag-option input[type="checkbox"]:checked + .tag-pill {
  background: rgba(167, 139, 250, 0.12);
  color: #c7b2ff;
  border-color: rgba(167, 139, 250, 0.4);
}

.tag-editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-editor-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}
.tag-editor-status[data-state="error"] { color: var(--danger); }
.tag-editor-status[data-state="saving"] { color: var(--text-muted); }

/* ── Review page: suggested + other collection tags ─────────────────────── */

.collections-field .tag-suggestions,
.collections-field .tag-all {
  margin-top: 0.625rem;
}

.tag-suggestions-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

.tag-empty-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

.tag-option-suggested .tag-pill {
  background: rgba(0, 212, 192, 0.08);
  color: var(--accent);
  border-color: rgba(0, 212, 192, 0.35);
}

.tag-option-suggested input[type="checkbox"]:checked + .tag-pill {
  background: rgba(0, 212, 192, 0.18);
  color: var(--accent-hover);
  border-color: var(--accent);
}

/* ── Readers clicked (top-3 from last archived issue with click data) ──────
   Sits between the scratch pad and the captured-link sections. Server-side
   helper buildReadersClickedView() in src/views/inbox.js produces the
   visible card + a hidden plain/HTML pair that the Copy-all clipboard
   handler splices in above the captured-link payload. Hidden entirely
   when no archived issue has click data yet. */

.readers-clicked-section {
  margin-bottom: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  position: relative;
  box-shadow: var(--shadow);
}

.readers-clicked-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-violet, var(--accent)) 0%, transparent 60%);
  opacity: 0.5;
  border-radius: var(--radius) var(--radius) 0 0;
}

.readers-clicked-section .category-heading {
  padding-bottom: 0.25rem;
}

.readers-clicked-hint {
  margin: 0 0 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* Waiting state — latest archived issue exists but its click report
   has not been imported yet. Visible on the page, intentionally NOT
   included in Copy all (the view omits the hidden clipboard pair). */
.readers-clicked-waiting {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.readers-clicked-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.readers-clicked-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.readers-clicked-rank {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 1.5rem;
  flex-shrink: 0;
}

/* ── /settings/tags — collection tag management UI v1 ──────────────────────
   Server-rendered table + per-row form. POST → redirect → reload; no JS
   required. Visual style matches the archive/inbox cards (panel surface,
   muted mono headings) without inventing a new design system. */

.tags-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tags-table th,
.tags-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.tags-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  background: var(--panel-2);
  border-bottom-color: var(--border);
}

.tags-table tbody tr:last-child td { border-bottom: none; }

.tags-col-name        { width: 14%; }
.tags-col-slug        { width: 12%; }
.tags-col-description { width: 38%; }
.tags-col-usage       { width: 7%;  text-align: right; }
.tags-col-status      { width: 9%;  }
.tags-col-actions     { width: 20%; }

.tags-cell-name   { font-weight: 600; color: var(--text); }
.tags-cell-slug code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  background: transparent;
  padding: 0;
}
.tags-cell-description { color: var(--text-muted); line-height: 1.45; }
.tags-cell-usage  { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.tags-muted       { color: var(--text-dim); }

.tags-row-inactive .tags-cell-name,
.tags-row-inactive .tags-cell-description,
.tags-row-inactive .tags-cell-slug code {
  opacity: 0.7;
}

.tags-group-divider td {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  background: var(--panel-2);
  padding: 0.5rem 0.85rem;
}

.tag-status-pill {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid;
}
.tag-status-active {
  background: rgba(0, 212, 192, 0.08);
  color: var(--accent);
  border-color: rgba(0, 212, 192, 0.35);
}
.tag-status-inactive {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-color: var(--border);
}

.tags-cell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  align-items: center;
}
.tags-inline-form { display: inline; margin: 0; padding: 0; }
.tags-action-btn {
  background: none;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tags-action-btn:hover {
  color: var(--accent);
  border-color: var(--border);
  background: var(--panel-2);
}

/* Inline editing row */
.tags-row-editing td { background: var(--panel-2); }
.tags-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}
.tags-edit-grid .tags-edit-description { grid-column: 1 / -1; }
.tags-edit-form input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Add tag card */
.tags-add-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow);
}
.tags-add-card h2 {
  margin-top: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* Status banner (?error=… / ?ok=…) */
.alert {
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  border: 1px solid;
}
.alert-error {
  background: rgba(255, 107, 107, 0.08);
  color: #ff8f8f;
  border-color: rgba(255, 107, 107, 0.35);
}
.alert-ok {
  background: rgba(0, 212, 192, 0.08);
  color: var(--accent);
  border-color: rgba(0, 212, 192, 0.35);
}

@media (max-width: 760px) {
  /* Hide secondary columns on narrow viewports — keep Name / Status /
     Actions visible, fold slug + description into the name cell via
     overflow wrapping. */
  .tags-col-slug, .tags-cell-slug,
  .tags-col-description, .tags-cell-description {
    display: none;
  }
  .tags-edit-grid { grid-template-columns: 1fr; }
}

/* Small footer link beneath /settings/tags pointing to /archive/tagging.
   Low-emphasis cross-link, not a primary nav entry. */
.tags-footer-link {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tags-footer-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.tags-footer-link a:hover { color: var(--accent-hover); }

/* Shelf management entry point on /settings/tags. Sits below the tag
   table + footer link, with a visible divider so it doesn't blur into
   the tag list above. Each list item pairs the link with a one-line
   helper. */
.settings-section { margin-top: 1.75rem; }
.settings-section-divider {
  border: 0;
  border-top: 1px dashed var(--border);
  margin: 0 0 1rem;
}
.settings-section-heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.settings-section-help {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.settings-shelf-management-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.settings-shelf-management-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted var(--accent);
}
.settings-shelf-management-link:hover { color: var(--accent-hover); }
.settings-shelf-management-help {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Admin backlink on /settings/shelves/:slug — quiet "← View public shelf"
   under the header so the editor can hop to the reader surface. */
.admin-shelf-backlink {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.admin-shelf-backlink a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}
.admin-shelf-backlink a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── /archive/tagging — retroactive collection tagging ─────────────────────
   Server-rendered POST + redirect per row. Inactive tag pills render via
   .tag-pill-inactive (muted) so the "history preserved" invariant stays
   visible without clashing with the active-tag pill style above. */

.archive-tagging-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.archive-tagging-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.archive-tagging-filter input[type="checkbox"] {
  width: auto;
  margin-right: 0.4rem;
  accent-color: var(--accent);
}

.archive-tagging-filter > span:not(.archive-tagging-filter-label) {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text);
  display: inline;
}

.archive-tagging-filter-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.archive-tagging-filter select {
  min-width: 12rem;
}

.archive-tagging-filter-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.archive-tagging-count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.archive-tagging-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1.25rem;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.archive-tagging-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.archive-tagging-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow);
}

.archive-tagging-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.archive-tagging-issue {
  color: var(--accent);
}

.archive-tagging-category {
  color: var(--text-dim);
}

.archive-tagging-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.archive-tagging-title a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}
.archive-tagging-title a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.archive-tagging-source {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

.archive-tagging-tags { margin-bottom: 0.5rem; }

.archive-tagging-pills .tag-pill-inactive {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-color: var(--border);
  font-style: italic;
}

.archive-tagging-options {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
}

.archive-tagging-form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 760px) {
  .archive-tagging-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .archive-tagging-filter-actions { margin-left: 0; }
}

/* ── /shelves and /shelves/:slug — read-only collection shelf pages ───────
   Index renders a grid of shelf cards (each is a link to the detail page).
   Detail renders one row per tagged link with a "Current issue" or
   "Issue #N" chip and the link's other collection pills.
   Reuses .tag-pill / .tag-pill-inactive from above. */

/* Index: /shelves — one tile per active tag.
   Renamed from `.shelf-card` so the `.shelf-card` namespace is free for
   per-link cards on /shelves/:slug. */

.shelves-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.shelves-grid-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.shelves-grid-card:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px rgba(0, 212, 192, 0.18), 0 4px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.shelves-grid-card-link {
  display: block;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
}

.shelves-grid-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.shelves-grid-card-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.shelves-grid-card-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  white-space: nowrap;
}

.shelves-grid-card-description {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.shelves-grid-card-slug code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  background: transparent;
  padding: 0;
}

/* Detail page: /shelves/:slug — curated reading-shelf layout.
   Two sections (Featured / All) of `.shelf-card` tiles in responsive
   grids. Each card carries a `.shelf-card-media` block at the top (a
   CSS-only fallback tile today; a real <img> later) above a
   `.shelf-card-body` with title → source → quote → pills. */

.shelf-stats {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.shelf-section { margin-bottom: 1.5rem; }
.shelf-section:last-child { margin-bottom: 0; }

.shelf-section-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.shelf-featured .shelf-section-heading { color: var(--accent); }

/* Card grid containers. `auto-fit` + `minmax` gives free responsive
   behavior: 3-up on wide screens for Featured, 2-up for All, stacking
   to 1 column when the viewport is too narrow to honor the minmax. */
.shelf-card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.shelf-card-grid-featured {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.shelf-card-grid-all {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* Card base. */
.shelf-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.shelf-card:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px rgba(0, 212, 192, 0.18), 0 4px 16px rgba(0, 0, 0, 0.25);
}

.shelf-card-featured {
  /* Slightly stronger surface treatment than the All-links cards. */
  border-color: rgba(0, 212, 192, 0.22);
}
.shelf-card-featured:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0, 212, 192, 0.28), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Media tile. Future-proofed: a real preview image would slot in as
   <img class="shelf-card-media-image"> inside this block, with the
   fallback hidden via :has() or a server-side flag. For now the
   fallback is always present and is the only thing rendered.
   `aria-hidden="true"` in the markup keeps screen readers off it —
   every label in here is duplicated in `.shelf-card-body`. */
.shelf-card-media {
  position: relative;
  width: 100%;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.shelf-card-featured .shelf-card-media { aspect-ratio: 16 / 9; }
.shelf-card-all      .shelf-card-media { aspect-ratio: 24 / 7; }

/* Article-level preview image (when `links.preview_image_url` is set).
   Fills the aspect-ratio box; the patterned fallback below is NOT
   rendered in this case (the view emits one or the other, never both).
   If the remote asset 404s the inline `onerror` handler hides the
   <img>; the corner badge stays positioned on the empty tile. */
.shelf-card-media-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Surface color shows through while the asset is loading and as the
     final layer beneath a transparent / partially-loaded image. */
  background: var(--panel-2);
}

/* Animated CSS-only fallback tile for cards with no `preview_image_url`.
   Six deterministic variants (`.variant-0`..`.variant-5`) — the view
   layer picks one stably per card via `pickFallbackVariant` in
   src/views/shelves.js. Each variant overrides a small set of CSS
   custom properties so the same base recipe lands as a different
   visual on each card without needing per-variant rule blocks.
   Visuals built up in three layers:
     1. The element itself: dark panel + faint phosphor dot-grid +
        horizontal scanlines, slowly drifting via background-position.
     2. `::before`: the existing cyan top-stripe, per-variant direction
        and intensity. Sits above the sweep so the editorial anchor
        line stays present.
     3. `::after`: a slow diagonal sweep (rotating linear gradient).
        Always-on but very low contrast. Sits below the stripe and the
        source label, so neither becomes hard to read.
   `prefers-reduced-motion: reduce` disables the loops but keeps every
   visual layer in place (see the @media block below). */
.shelf-card-media-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  overflow: hidden;

  /* Per-variant tuning surface — defaults here mirror variant-0; each
     `.variant-N` rule below overrides the ones it cares about. */
  --shelf-fallback-grid-angle: 20deg;
  --shelf-fallback-scanline-step: 3px;
  --shelf-fallback-scanline-alpha: 0.045;
  --shelf-fallback-accent-alpha: 0.10;
  --shelf-fallback-stripe-direction: 90deg;
  --shelf-fallback-sweep-duration: 18s;
  --shelf-fallback-drift-duration: 28s;
  --shelf-fallback-drift-distance: 120px;

  background-color: var(--panel-2);
  background-image:
    /* horizontal scanlines */
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent calc(var(--shelf-fallback-scanline-step) - 1px),
      rgba(255, 255, 255, var(--shelf-fallback-scanline-alpha)) calc(var(--shelf-fallback-scanline-step) - 1px),
      rgba(255, 255, 255, var(--shelf-fallback-scanline-alpha)) var(--shelf-fallback-scanline-step)
    ),
    /* phosphor dot-grid, tinted with the variant's accent intensity */
    radial-gradient(circle at 1px 1px,
      rgba(0, 212, 192, var(--shelf-fallback-accent-alpha)) 1px,
      transparent 1.6px);
  background-size: 100% 100%, 12px 12px;
  background-position: 0 0, 0 0;
  /* The whole tile drifts: scanlines stay put (100%/100% means there's
     no room to translate), the dot-grid slowly cycles its Y offset. */
  animation: shelf-fallback-drift var(--shelf-fallback-drift-duration) linear infinite;
}

.shelf-card-media-fallback::before {
  /* Top-stripe accent — the editorial anchor line we've always had,
     now per-variant (direction + featured-variant intensity bump). */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(var(--shelf-fallback-stripe-direction), var(--accent) 0%, transparent 70%);
  opacity: 0.35;
  z-index: 1;
}
.shelf-card-featured .shelf-card-media-fallback::before { opacity: 0.6; }

.shelf-card-media-fallback::after {
  /* Slow rotating sweep. Inset is negative so the rotated rectangle
     covers the tile through the whole 360° cycle. Z-index 0 puts it
     below the stripe and the source label. */
  content: "";
  position: absolute;
  inset: -25%;
  background: linear-gradient(
    var(--shelf-fallback-grid-angle),
    transparent 35%,
    rgba(0, 212, 192, calc(var(--shelf-fallback-accent-alpha) * 1.4)) 50%,
    transparent 65%
  );
  pointer-events: none;
  animation: shelf-fallback-sweep var(--shelf-fallback-sweep-duration) linear infinite;
  z-index: 0;
}

@keyframes shelf-fallback-drift {
  /* Move only the dot-grid layer (2nd background-image); the scanlines
     stay anchored, which keeps the horizontal lines visually stable. */
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 0, 0 var(--shelf-fallback-drift-distance); }
}

@keyframes shelf-fallback-sweep {
  /* Translate so the rotation center stays roughly over the tile,
     then rotate a full cycle. Slow durations + low gradient contrast
     keep this from feeling like a spinner. */
  0%   { transform: translate(-12%, -12%) rotate(0deg); }
  100% { transform: translate(-12%, -12%) rotate(360deg); }
}

/* Six deterministic variants. Sweep angle, scanline density, accent
   intensity, stripe direction, and the two cycle durations are tuned
   so two adjacent cards look noticeably different at a glance. All
   six share the same base recipe — no extra HTML elements per variant. */
.shelf-card-media-fallback.variant-0 {
  --shelf-fallback-grid-angle: 20deg;
  --shelf-fallback-scanline-step: 3px;
  --shelf-fallback-scanline-alpha: 0.045;
  --shelf-fallback-accent-alpha: 0.10;
  --shelf-fallback-stripe-direction: 90deg;
  --shelf-fallback-sweep-duration: 16s;
  --shelf-fallback-drift-duration: 26s;
}
.shelf-card-media-fallback.variant-1 {
  --shelf-fallback-grid-angle: 70deg;
  --shelf-fallback-scanline-step: 4px;
  --shelf-fallback-scanline-alpha: 0.035;
  --shelf-fallback-accent-alpha: 0.08;
  --shelf-fallback-stripe-direction: 270deg;
  --shelf-fallback-sweep-duration: 22s;
  --shelf-fallback-drift-duration: 32s;
}
.shelf-card-media-fallback.variant-2 {
  --shelf-fallback-grid-angle: 110deg;
  --shelf-fallback-scanline-step: 5px;
  --shelf-fallback-scanline-alpha: 0.05;
  --shelf-fallback-accent-alpha: 0.12;
  --shelf-fallback-stripe-direction: 90deg;
  --shelf-fallback-sweep-duration: 19s;
  --shelf-fallback-drift-duration: 36s;
}
.shelf-card-media-fallback.variant-3 {
  --shelf-fallback-grid-angle: 160deg;
  --shelf-fallback-scanline-step: 3px;
  --shelf-fallback-scanline-alpha: 0.03;
  --shelf-fallback-accent-alpha: 0.07;
  --shelf-fallback-stripe-direction: 270deg;
  --shelf-fallback-sweep-duration: 28s;
  --shelf-fallback-drift-duration: 24s;
}
.shelf-card-media-fallback.variant-4 {
  --shelf-fallback-grid-angle: 220deg;
  --shelf-fallback-scanline-step: 4px;
  --shelf-fallback-scanline-alpha: 0.04;
  --shelf-fallback-accent-alpha: 0.11;
  --shelf-fallback-stripe-direction: 90deg;
  --shelf-fallback-sweep-duration: 17s;
  --shelf-fallback-drift-duration: 30s;
}
.shelf-card-media-fallback.variant-5 {
  --shelf-fallback-grid-angle: 290deg;
  --shelf-fallback-scanline-step: 6px;
  --shelf-fallback-scanline-alpha: 0.045;
  --shelf-fallback-accent-alpha: 0.09;
  --shelf-fallback-stripe-direction: 270deg;
  --shelf-fallback-sweep-duration: 24s;
  --shelf-fallback-drift-duration: 34s;
}

/* Respect reduced-motion preference. Keep every visual layer (dot
   grid, scanlines, stripe, sweep colors) so the design system stays
   coherent; just stop the loops. The static result is still
   variant-distinct because the per-variant CSS custom properties
   change the painted gradient angles + scanline densities. */
@media (prefers-reduced-motion: reduce) {
  .shelf-card-media-fallback,
  .shelf-card-media-fallback::after {
    animation: none;
  }
}

.shelf-card-media-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(7, 16, 26, 0.55);
  border: 1px solid var(--border);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  max-width: calc(100% - 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  /* Sits above the preview image / fallback tile. Subtle drop shadow
     keeps the pill readable over a bright photo without needing a
     heavier scrim. */
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* When the archived issue has a public Substack URL, the badge is an
   outbound link. Tint the text and lift the border-color so the
   affordance reads at a glance without competing with the title. */
a.shelf-card-media-badge.shelf-card-media-badge-link {
  color: var(--accent);
  border-color: rgba(0, 212, 192, 0.45);
  background: rgba(0, 212, 192, 0.08);
}
a.shelf-card-media-badge.shelf-card-media-badge-link:hover,
a.shelf-card-media-badge.shelf-card-media-badge-link:focus-visible {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  background: rgba(0, 212, 192, 0.15);
}

/* Card body. Splits into two stacks:
     .shelf-card-main   — title → source → quote (top of card body)
     .shelf-card-footer — tag pills (bottom of card body)
   The body itself is a flex column with the main block sized to its
   content and the footer pushed to the bottom via `margin-top: auto`
   on the footer. Within a grid row, sibling cards stretch to the
   tallest card, so footers align consistently across the row. */
.shelf-card-body {
  padding: 0.85rem 1rem 0.95rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.shelf-card-main {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.shelf-card-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Quote block. Only rendered when the link actually has quote text
   (the no-quote case omits the paragraph entirely), so we no longer
   reserve a minimum height — cards without a quote just shrink that
   row, and the footer's `margin-top: auto` keeps tag pills pinned to
   the bottom of the card. Long quotes are clamped (ellipsis on the
   final line) so a single oversized pull-quote never blows up the
   row height. */
.shelf-link-quote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shelf-card-featured .shelf-link-quote {
  -webkit-line-clamp: 5;
}
.shelf-card-all .shelf-link-quote {
  font-size: 0.9rem;
  -webkit-line-clamp: 4;
}
.shelf-link-quote .card-quote {
  color: var(--text-muted);
  font-style: italic;
}

/* Title block. Clamp to 2 lines AND reserve 2 lines of min-height so the
   source/meta line below sits at a consistent Y position across cards
   in the same grid row. */
.shelf-link-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.7em; /* 2 lines × 1.35 */
}
.shelf-card-all .shelf-link-title { font-size: 0.98rem; }
.shelf-link-title-anchor {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}
.shelf-link-title-anchor:hover { color: var(--accent); border-bottom-color: var(--accent); }

.shelf-link-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.shelf-link-source { color: var(--text); }

/* (Footer issue chip was removed: the issue label now appears once,
   in the `.shelf-card-media-badge` corner pill. Linked-badge styles
   live with the badge rules above.) */

.shelf-link-pills {
  margin: 0;
  opacity: 0.9;
}
.shelf-link-pills .tag-pill {
  font-size: 0.65rem;
  padding: 0.12rem 0.45rem;
}
.shelf-link-pills .tag-pill-inactive {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-color: var(--border);
  font-style: italic;
}

/* Narrow viewports: collapse both grids to a single column with a
   tighter media tile so cards don't waste vertical space. Drop the
   reserved title height too — cards no longer sit side-by-side, so
   the alignment guarantee isn't worth the empty space short titles
   would otherwise leave. Line-clamp stays in place so very long
   titles or quotes still don't run away. */
@media (max-width: 640px) {
  .shelf-card-grid-featured,
  .shelf-card-grid-all {
    grid-template-columns: 1fr;
  }
  .shelf-card-featured .shelf-card-media { aspect-ratio: 16 / 8; }
  .shelf-card-all .shelf-card-media { aspect-ratio: 16 / 5; }
  .shelf-link-title { min-height: 0; }
}

/* ── Demo mode (DEMO_MODE=true) ──────────────────────────────────────────────
   Server-side, demoReadOnlyGuard in src/app.js rejects every non-GET. These
   rules hide the controls that would have invoked those endpoints so a
   demo visitor doesn't see broken buttons. The body.is-demo class is added
   by src/views/layout.js when isDemoMode() is true. */

.demo-banner {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.55rem 1rem;
  background: linear-gradient(180deg, #1a2330 0%, #131a23 100%);
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: inset 0 2px 0 var(--accent-2);
  position: sticky;
  top: 0;
  z-index: 11;
}

/* Hide direct mutation entry points: inbox link/image add buttons, archive
   bar, inbox row Edit/Remove buttons, archive sidebar import link, the per-
   issue edit-action links, and any "Import archived issue" anchors. */
body.is-demo .header-actions a[href="/add"],
body.is-demo .header-actions a[href="/add-image"],
body.is-demo #archive-bar,
body.is-demo #archive-toggle-btn,
body.is-demo .link-actions .edit-btn,
body.is-demo .link-actions .delete-btn,
body.is-demo .tag-edit-btn,
body.is-demo .tags-action-btn,
body.is-demo .tags-add-card,
body.is-demo .archive-tagging-form,
body.is-demo .issues-row-public-form,
body.is-demo .image-meta .delete-btn,
body.is-demo .archive-sidebar-action,
body.is-demo .issue-actions,
body.is-demo .preview-image-admin-card,
body.is-demo a[href="/archive/import"] {
  display: none !important;
}

/* Disable any submit-style button on form pages reachable by direct URL
   (/add, /add-image, /review/:token, /archive/import, /archive/import/preview,
   /issues/:id/edit, /issues/:id/links/edit, /issues/:id/clicks paste form).
   The server still 403s the POST; this gives a visual cue that the form
   is inert. */
body.is-demo form button[type="submit"],
body.is-demo form .btn-primary,
body.is-demo form button.btn-primary,
body.is-demo form button.btn-secondary {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Archive data-quality report (/archive/quality) ────────────────────── */

.archive-quality-link-card { margin-top: 1rem; }
.archive-quality-link-summary {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
  line-height: 1.4;
}

.archive-quality-back {
  display: inline-block;
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
}
.archive-quality-back:hover { text-decoration: underline; }

.archive-quality-card { padding: 1rem 1.1rem 1.1rem; }

.archive-quality-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 0.5rem;
}

.archive-quality-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.archive-quality-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.4rem 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.archive-quality-table tbody td,
.archive-quality-table tbody th {
  padding: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}

.archive-quality-table tbody tr:last-child td,
.archive-quality-table tbody tr:last-child th {
  border-bottom: none;
}

.archive-quality-table tbody tr:hover td,
.archive-quality-table tbody tr:hover th {
  background: rgba(0, 212, 192, 0.03);
}

.archive-quality-issue {
  text-align: left;
  font-weight: 400;
  min-width: 12rem;
  max-width: 18rem;
}
.archive-quality-issue-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  margin-right: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.archive-quality-issue-headline {
  color: var(--text);
  word-break: break-word;
}
.archive-quality-issue .muted { color: var(--text-dim); font-style: italic; }

.archive-quality-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.archive-quality-num-quiet { color: var(--text-muted); }
.archive-quality-num-warn { color: var(--accent-2); }
.archive-quality-pct {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.archive-quality-public {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-decoration: none;
}
.archive-quality-public:not(.archive-quality-public-missing) {
  color: var(--accent);
}
.archive-quality-public:not(.archive-quality-public-missing):hover {
  text-decoration: underline;
}
.archive-quality-public-missing {
  color: var(--accent-2);
  font-style: italic;
}

.archive-quality-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.archive-quality-status-ok { color: var(--accent-acid); }
.archive-quality-status-missing { color: var(--accent-2); }

.archive-quality-warnings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.archive-quality-warnings li {
  font-size: 0.78rem;
  color: var(--accent-2);
  padding-left: 0.55rem;
  border-left: 2px solid var(--accent-2);
  line-height: 1.35;
}

@media (max-width: 720px) {
  .archive-quality-table { font-size: 0.8rem; min-width: 760px; }
}

/* Issue cell on the quality table is a link to the per-issue cleanup page. */
.archive-quality-issue-link {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  gap: 0.05rem;
}
.archive-quality-issue-link:hover .archive-quality-issue-headline {
  color: var(--accent);
  text-decoration: underline;
}

.archive-quality-warning-link {
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-2);
}
.archive-quality-warning-link:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* ── Per-issue metadata cleanup (/archive/issues/:num/links) ──────────── */

.archive-cleanup-back {
  display: inline-block;
  margin-left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
}
.archive-cleanup-back:hover { text-decoration: underline; }

.archive-cleanup-intro {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 1.25rem;
  max-width: 60ch;
  line-height: 1.5;
}

.archive-cleanup-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.archive-cleanup-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  box-shadow: var(--shadow);
}
.archive-cleanup-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  opacity: 0.45;
  border-radius: var(--radius) var(--radius) 0 0;
}
.archive-cleanup-card-focused {
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.archive-cleanup-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.archive-cleanup-card-id {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.archive-cleanup-card-url {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.4;
}
.archive-cleanup-card-url:hover { text-decoration: underline; }

.archive-cleanup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem 1rem;
}
.archive-cleanup-quote-field { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .archive-cleanup-grid { grid-template-columns: minmax(0, 1fr); }
}

.archive-cleanup-card-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.25rem;
}

/* Tag editor inside each cleanup card. Spans both grid columns so the
   pill wrap has the full width to flow into; reuses the existing
   `.tag-option`/`.tag-pill` chrome from the inbox + review surfaces so
   the checkbox styling and focus states stay consistent. */
.archive-cleanup-tags-field { grid-column: 1 / -1; }

.archive-cleanup-tag-options {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin: 0;
  padding: 0;
}

/* Inactive companion pills sit above the active-tag checkboxes, muted
   so it's clear they're not selectable — they live on the link but the
   editor can't touch them from this surface (matching the `/archive/tagging`
   convention). */
.archive-cleanup-inactive-pills {
  margin: 0 0 0.5rem;
}
.archive-cleanup-inactive-pills .tag-pill-inactive {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  border-color: var(--border);
  font-style: italic;
}

/* Soft-remove section sits BELOW the metadata save form on every visible
   cleanup card. The action is a `<details>` collapsed by default so it
   stays visually secondary; the inner form posts to /exclude with a
   required confirm checkbox. */
.archive-cleanup-remove {
  margin-top: 0.6rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
}
.archive-cleanup-remove > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.2rem 0;
}
.archive-cleanup-remove > summary::-webkit-details-marker { display: none; }
.archive-cleanup-remove > summary::before {
  content: "▸ ";
  color: var(--accent-2);
}
.archive-cleanup-remove[open] > summary::before { content: "▾ "; }
.archive-cleanup-remove > summary:hover { color: var(--text); }

.archive-cleanup-remove-form {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.archive-cleanup-remove-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 60ch;
}
.archive-cleanup-remove-confirm {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-2);
  cursor: pointer;
}
.archive-cleanup-remove-confirm input[type="checkbox"] { width: auto; margin: 0; }
.archive-cleanup-remove-actions {
  display: flex;
  justify-content: flex-end;
}

/* "Remove from archive" button — visually distinct from the cyan Save.
   Uses the existing --danger token for the accent so the styling fits
   the Signal Room palette without inventing a new color. Muted by
   default; warms up on hover so the destructive intent reads only at
   the point of action. */
.btn-danger {
  background: rgba(255, 107, 107, 0.08);
  color: var(--danger);
  border-color: rgba(255, 107, 107, 0.35);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(255, 107, 107, 0.18);
  border-color: rgba(255, 107, 107, 0.55);
  color: #ff8f8f;
}

/* Removed-links section — lower-priority list of soft-removed archived
   links with a Restore action. Compact, muted, and slightly indented so
   the visual weight stays below the main editable list above. */
.archive-cleanup-removed {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.archive-cleanup-removed-heading {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.archive-cleanup-removed-heading::before {
  content: "▸ ";
  color: var(--accent-2);
}
.archive-cleanup-removed-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}
.archive-cleanup-removed-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 60ch;
  line-height: 1.4;
}
.archive-cleanup-removed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.archive-cleanup-removed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  opacity: 0.85;
}
.archive-cleanup-removed-main { flex: 1 1 0; min-width: 0; }
.archive-cleanup-removed-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.archive-cleanup-removed-title:hover { color: var(--accent); }
.archive-cleanup-removed-title .muted { font-style: italic; color: var(--text-dim); font-weight: 400; }
.archive-cleanup-removed-source {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-violet);
  margin-left: 0.4rem;
}
.archive-cleanup-removed-meta {
  margin: 0.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
.archive-cleanup-removed-reason {
  color: var(--accent-2);
  font-style: italic;
}
.archive-cleanup-removed-form { flex: 0 0 auto; }

@media (max-width: 480px) {
  .archive-cleanup-removed-row { flex-direction: column; align-items: stretch; }
  .archive-cleanup-removed-form button { width: 100%; }
}

/* ── Duplicate-link report (/archive/duplicates) ─────────────────────── */

.archive-quality-side-links {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.archive-quality-side-links a {
  color: var(--accent-2);
  text-decoration: none;
}
.archive-quality-side-links a:hover { text-decoration: underline; }

.archive-sidebar-action-secondary { margin-top: 0.25rem; }
.archive-sidebar-action-secondary a { color: var(--accent-2); }

.duplicate-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.duplicate-summary-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.duplicate-summary-num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.duplicate-summary-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.duplicate-section {
  margin-top: 1.5rem;
}
.duplicate-section-heading {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.25rem;
}
.duplicate-section-heading::before { content: "» "; color: var(--accent); }
.duplicate-section-blurb {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 70ch;
  line-height: 1.45;
}

.duplicate-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.duplicate-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 0.85rem 0.85rem;
}
.duplicate-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.duplicate-group-key {
  flex: 1 1 0;
  min-width: 0;
}
.duplicate-group-key-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-right: 0.5rem;
}
.duplicate-group-key-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  word-break: break-all;
}
.duplicate-group-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-2);
  background: rgba(255, 196, 90, 0.08);
  border: 1px solid rgba(255, 196, 90, 0.35);
  border-radius: var(--radius);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

.duplicate-group-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.duplicate-row {
  background: var(--panel-2, var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.duplicate-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}
.duplicate-row-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.duplicate-row-title:hover { color: var(--accent); }
.duplicate-row-title .muted { color: var(--text-dim); font-style: italic; font-weight: 400; }
.duplicate-row-source {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-violet);
}
.duplicate-row-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}
.duplicate-row-location {
  color: var(--accent);
  text-decoration: none;
}
.duplicate-row-location:hover { text-decoration: underline; }
.duplicate-row-category { color: var(--text-muted); }
.duplicate-row-tags { margin: 0.1rem 0 0; }
.duplicate-row-url {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  word-break: break-all;
}
.duplicate-row-url a {
  color: var(--text-dim);
  text-decoration: none;
}
.duplicate-row-url a:hover { color: var(--accent); text-decoration: underline; }

.duplicate-group-excluded-note {
  margin: 0.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.duplicate-excluded-chip {
  display: inline-block;
  font-style: italic;
  color: var(--text-dim);
  margin-right: 0.35rem;
}

.duplicate-intro-note {
  margin: 0.5rem 0 1.25rem;
  padding: 0.65rem 0.85rem;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  max-width: 80ch;
}
.duplicate-intro-note a {
  color: var(--accent);
  text-decoration: none;
}
.duplicate-intro-note a:hover { text-decoration: underline; }

/* ── Click attribution audit (/archive/click-attribution) ────────────── */

.click-attribution-intro {
  margin: 0.5rem 0 1.25rem;
  padding: 0.65rem 0.85rem;
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  max-width: 80ch;
}
.click-attribution-intro p { margin: 0 0 0.5rem; line-height: 1.5; }
.click-attribution-intro p:last-child { margin-bottom: 0; }
.click-attribution-intro-detail { color: var(--text-muted); font-size: 0.85rem; }
.click-attribution-legend {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.click-attribution-legend code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--panel-2, var(--panel));
  padding: 0 0.25rem;
  border-radius: 3px;
  color: var(--text-dim);
}

.click-attribution-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-2, var(--panel));
  color: var(--text-muted);
  white-space: nowrap;
}
.click-attribution-pill-issue {
  color: var(--accent);
  border-color: rgba(78, 196, 255, 0.35);
  background: rgba(78, 196, 255, 0.08);
}
.click-attribution-pill-lifetime {
  color: var(--accent-acid);
  border-color: rgba(160, 240, 80, 0.35);
  background: rgba(160, 240, 80, 0.08);
}
.click-attribution-pill-placement {
  color: var(--accent-violet);
  border-color: rgba(180, 140, 255, 0.35);
  background: rgba(180, 140, 255, 0.08);
}

.click-attribution-list { gap: 1rem; }
.click-attribution-group { padding-bottom: 1rem; }
.click-attribution-totals {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-end;
}

.click-attribution-flags {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.click-attribution-flag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-2, var(--panel));
  white-space: nowrap;
}
.click-attribution-flag-info {
  color: var(--accent);
  border-color: rgba(78, 196, 255, 0.35);
  background: rgba(78, 196, 255, 0.08);
}
.click-attribution-flag-warn {
  color: var(--accent-2);
  border-color: rgba(255, 196, 90, 0.35);
  background: rgba(255, 196, 90, 0.08);
}

.click-attribution-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 0.4rem;
}
.click-attribution-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.35rem 0.45rem 0.45rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.click-attribution-table tbody td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.click-attribution-th-right,
.click-attribution-td-right {
  text-align: right;
  white-space: nowrap;
}

.click-attribution-issue-link {
  font-family: var(--font-mono);
  color: var(--accent);
  text-decoration: none;
}
.click-attribution-issue-link:hover { text-decoration: underline; }
.click-attribution-issue-headline {
  color: var(--text-muted);
  font-family: inherit;
}

.click-attribution-saved-link {
  margin-bottom: 0.25rem;
}
.click-attribution-saved-link:last-child { margin-bottom: 0; }
.click-attribution-link-anchor {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-decoration: none;
  margin-right: 0.25rem;
}
.click-attribution-link-anchor:hover { text-decoration: underline; }
.click-attribution-source {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-violet);
}
.click-attribution-category {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.click-attribution-excluded {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-2);
  font-style: italic;
}

.click-attribution-match {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.click-attribution-match-saved     { color: var(--accent-acid); }
.click-attribution-match-url       { color: var(--accent); }
.click-attribution-match-excluded  { color: var(--accent-2); font-style: italic; }
.click-attribution-match-unmatched { color: var(--text-muted); }
.click-attribution-match-no-clicks { color: var(--text-dim); }

.click-attribution-excluded-note { opacity: 0.85; }
.click-attribution-excluded-reason {
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 720px) {
  .click-attribution-table { font-size: 0.78rem; }
  .click-attribution-totals { align-items: flex-start; }
}

/* ── Archive tools card (/archive sidebar, top) ─────────────────────────── */

.archive-tools-card { padding: 0.9rem 1rem 1rem; }
.archive-tools-help {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
  line-height: 1.4;
}
.archive-tools-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.archive-tools-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.archive-tools-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.archive-tools-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
}
.archive-tools-link:hover { text-decoration: underline; }
.archive-tools-help-line {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.archive-tools-subheading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin: 0 0 0.4rem;
}
.archive-tools-subheading::before { content: "» "; color: var(--accent); }
.archive-tools-preview-block {
  margin-top: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Recent issues card (/archive sidebar) ──────────────────────────────── */

.archive-recent-issues-card { margin-top: 1rem; }
.archive-recent-issues-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0 0 0.45rem;
  line-height: 1.35;
}
.archive-recent-issues-viewall {
  margin-top: 0.7rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── /archive/issues (full archived-issue index) ────────────────────────── */

.archive-issues-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.archive-issues-search-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.archive-issues-search input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.archive-issues-search input[type="search"]:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.archive-issues-search-reset {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
}
.archive-issues-search-reset:hover { color: var(--accent); text-decoration: underline; }

.archive-issues-card { padding: 1rem 1.1rem 1.1rem; }

.archive-issues-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.archive-issues-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.archive-issues-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.4rem 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.archive-issues-table tbody td,
.archive-issues-table tbody th {
  padding: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}
.archive-issues-table tbody tr:last-child td,
.archive-issues-table tbody tr:last-child th {
  border-bottom: none;
}
.archive-issues-table tbody tr:hover td,
.archive-issues-table tbody tr:hover th {
  background: rgba(0, 212, 192, 0.03);
}

.archive-issues-issue {
  text-align: left;
  font-weight: 400;
  min-width: 14rem;
  max-width: 22rem;
}
.archive-issues-issue-link {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  gap: 0.05rem;
}
.archive-issues-issue-link:hover .archive-issues-issue-headline {
  color: var(--accent);
  text-decoration: underline;
}
.archive-issues-issue-number {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.archive-issues-issue-headline {
  color: var(--text);
  word-break: break-word;
}
.archive-issues-issue .muted { color: var(--text-dim); font-style: italic; }

.archive-issues-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.archive-issues-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.archive-issues-num-quiet { color: var(--text-muted); }

.archive-issues-public {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-decoration: none;
}
.archive-issues-public:not(.archive-issues-public-missing) {
  color: var(--accent);
}
.archive-issues-public:not(.archive-issues-public-missing):hover {
  text-decoration: underline;
}
.archive-issues-public-missing { color: var(--text-dim); }

.archive-issues-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.archive-issues-status-ok      { color: var(--accent-acid); }
.archive-issues-status-missing { color: var(--text-dim); font-style: italic; }

.archive-issues-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.archive-issues-actions a {
  color: var(--accent);
  text-decoration: none;
}
.archive-issues-actions a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .archive-issues-table { font-size: 0.8rem; min-width: 720px; }
}

/* ── /archive: Issue performance card ──────────────────────────────────── */
.issue-performance-card .issue-performance-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .issue-performance-card .issue-performance-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}
.issue-performance-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.issue-performance-heading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.35rem;
}
.issue-performance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.issue-performance-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  min-width: 0;
}
.issue-performance-title {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
a.issue-performance-title:hover { color: var(--accent); }
.issue-performance-metrics {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.issue-performance-reason {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--accent-2, var(--accent));
  text-transform: uppercase;
}
.issue-performance-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── /archive: Clickiness trend card ──────────────────────────────────── */
.clickiness-trend-card .clickiness-trend-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.clickiness-trend-stats {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
}
.clickiness-trend-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0;
}
.clickiness-trend-grid { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.clickiness-trend-axis-line { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.clickiness-trend-tick {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-muted);
  letter-spacing: 0.04em;
}
.clickiness-trend-axis-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.clickiness-trend-line {
  stroke: var(--accent-2);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  fill: none;
  opacity: 0.85;
}
.clickiness-actual-line {
  stroke: var(--accent);
  stroke-width: 1.75;
  fill: none;
}
.clickiness-trend-dot {
  fill: var(--accent);
  stroke: var(--panel);
  stroke-width: 1;
  transition: r 0.15s;
}
.clickiness-trend-dot-g:hover .clickiness-trend-dot { r: 5; }

/* ── Shelves: directory layout (Creative Tools etc.) ──────────────────── */
/*
   The directory layout replaces the standard shelf-card grid for shelves
   with a manual group catalog in services/shelfGroups.js. The page keeps
   the standard header chrome (page-eyebrow + h1 + subhead + stats) and
   adds three pieces: filter chips, a sortable table, and per-row admin
   selects. The whole section sits inside `.shelf-directory[data-shelf-slug]`
   so the inline client script can scope its filter/sort/save wiring.
*/

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

.shelf-directory {
  margin-top: 1.5rem;
}

/* Filter chips ─────────────────────────────────────────────────────────── */
.shelf-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.1rem;
}
.shelf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.shelf-filter-chip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.shelf-filter-chip.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(0, 212, 192, 0.10);
  box-shadow: 0 0 0 1px rgba(0, 212, 192, 0.25) inset;
}
.shelf-filter-chip-count {
  font-size: 0.62rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.shelf-filter-chip.is-active .shelf-filter-chip-count { color: var(--text-muted); }

/* Table layout ─────────────────────────────────────────────────────────── */
.shelf-directory-table-wrap {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.shelf-directory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.shelf-directory-th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.shelf-directory-th.is-sortable .shelf-directory-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.shelf-directory-th.is-sortable:hover { color: var(--text); }
.shelf-directory-sort-indicator {
  display: inline-block;
  width: 0.6rem;
  text-align: center;
  color: var(--text-dim);
}
.shelf-directory-th.is-sorted-asc .shelf-directory-sort-indicator::after { content: '▲'; color: var(--accent); }
.shelf-directory-th.is-sorted-desc .shelf-directory-sort-indicator::after { content: '▼'; color: var(--accent); }

.shelf-directory-row {
  border-top: 1px solid var(--border);
  transition: background 0.12s;
}
.shelf-directory-row:first-child { border-top: 0; }
.shelf-directory-row:hover { background: var(--panel-2); }
.shelf-directory-cell {
  padding: 0.7rem 0.85rem;
  vertical-align: top;
  color: var(--text);
}
.shelf-directory-cell-tool { width: 22%; }
.shelf-directory-cell-type { width: 18%; }
.shelf-directory-cell-use  { width: 30%; }
.shelf-directory-cell-source { width: 16%; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; }
.shelf-directory-cell-issue  { width: 14%; }

.shelf-directory-tool-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}
.shelf-directory-tool-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.shelf-directory-use {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.shelf-directory-use-empty,
.shelf-directory-source-empty { color: var(--text-dim); }

.shelf-directory-issue-link,
.shelf-directory-issue {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-decoration: none;
}
.shelf-directory-issue-link:hover { color: var(--accent); }

.shelf-directory-empty td {
  padding: 1.5rem 0.85rem;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* Group pills ─────────────────────────────────────────────────────────── */
.shelf-group-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  vertical-align: middle;
}

/* Per-group muted-color variants. Each pair sets a tinted background
   + matching border + readable foreground; the colors are pulled from
   the existing Signal Room theme variables so a future theme tweak
   carries through. Keep these in sync with the catalog in
   src/services/shelfGroups.js. */
.shelf-group-pill-design    { background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.4); color: #c8b6ff; }
.shelf-group-pill-inspo     { background: rgba(182, 245, 96, 0.12);  border-color: rgba(182, 245, 96, 0.4);  color: #d8f99c; }
.shelf-group-pill-decks     { background: rgba(255, 155, 62, 0.12);  border-color: rgba(255, 155, 62, 0.4);  color: #ffc48a; }
.shelf-group-pill-research  { background: rgba(0, 212, 192, 0.12);   border-color: rgba(0, 212, 192, 0.4);   color: #6fe7d8; }
.shelf-group-pill-writing   { background: rgba(255, 107, 174, 0.12); border-color: rgba(255, 107, 174, 0.4); color: #ffb1d4; }
.shelf-group-pill-ai        { background: rgba(120, 119, 255, 0.14); border-color: rgba(120, 119, 255, 0.45); color: #b1b0ff; }
.shelf-group-pill-analysis  { background: rgba(80, 216, 144, 0.12);  border-color: rgba(80, 216, 144, 0.4);  color: #8ee9b4; }
.shelf-group-pill-ios       { background: rgba(200, 210, 224, 0.10); border-color: rgba(200, 210, 224, 0.35); color: #d8dee8; }
.shelf-group-pill-utility   { background: rgba(125, 139, 155, 0.16); border-color: rgba(125, 139, 155, 0.4);  color: #c1cad6; }
.shelf-group-pill-archive   { background: rgba(255, 107, 107, 0.10); border-color: rgba(255, 107, 107, 0.35); color: #ffb1b1; }
.shelf-group-pill-unsorted  { background: rgba(255, 255, 255, 0.03); border-color: var(--border);            color: var(--text-dim); font-style: italic; }

/* Chip variants borrow the same color rule via class composition — the
   chip carries .shelf-filter-chip + .shelf-group-pill-<slug>, and the
   .is-active state overrides the background so the highlighted chip is
   always readable. */
.shelf-filter-chip[class*="shelf-group-pill-"] { color: inherit; }

/* Admin select + save status ──────────────────────────────────────────── */
.shelf-group-select-label {
  display: inline-block;
  margin-left: 0.45rem;
}
.shelf-group-select {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.4rem;
  background: var(--panel-3);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
}
.shelf-group-select:hover { border-color: var(--border-strong); }
.shelf-group-select:focus { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.shelf-group-save-status {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 3.5rem;
}
.shelf-group-save-status.is-error { color: var(--danger); }

/* Mobile: collapse the table into a stacked card list at narrow widths
   so iPhone-portrait reads cleanly. The thead disappears; each cell
   gets a label from the `data-label` attribute on the rendered row. */
@media (max-width: 720px) {
  .shelf-directory-table-wrap { border: 0; background: transparent; }
  .shelf-directory-table,
  .shelf-directory-table thead,
  .shelf-directory-table tbody,
  .shelf-directory-table tr,
  .shelf-directory-table th,
  .shelf-directory-table td { display: block; width: auto; }
  .shelf-directory-table thead { display: none; }
  .shelf-directory-row {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel);
    margin-bottom: 0.7rem;
    padding: 0.4rem 0.55rem;
  }
  .shelf-directory-row:hover { background: var(--panel); }
  .shelf-directory-cell {
    padding: 0.35rem 0.25rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.04);
  }
  .shelf-directory-cell:first-child { border-top: 0; }
  .shelf-directory-cell::before {
    content: attr(data-label) " · ";
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-right: 0.4rem;
  }
  .shelf-directory-cell-tool::before { display: none; }
  .shelf-directory-cell-tool { font-size: 1rem; padding-bottom: 0.45rem; }
  .shelf-directory-use { -webkit-line-clamp: 3; }
}
/* ============================================================================
   DELIGHTFUL PUBLIC SHELVES — faithful port of the Delightful XTree shell
   ----------------------------------------------------------------------------
   This block is a server-rendered port of the live Delightful site's
   file-manager chrome. Reference (read-only): the Site Redesign repo at
   /Users/stevebryant/Claude Code Projects/Site Redesign/
     - src/styles/global.css                  (tokens, .xtree-label recipe)
     - src/components/FileBrowser/*.tsx        (shell structure)
   Design intent: docs/xtree-design-rules-for-shelves.md.

   Everything is scoped under `.delightful-public-shell` (the <body> class) so
   the private authenticated app is never touched. Tokens mirror the real
   --xt-* values (DOS blue #0000aa ground, chartreuse #ccff33 selection,
   frosted-blue #76e5fc links). Custom Delightful @font-face files are NOT
   copied across repos — we use the same system fallback stacks the site
   declares, so the typography roles (mono chrome / serif editorial) match
   without a new dependency. No animation in this pass.
   ========================================================================== */

.delightful-public-shell {
  /* Real Delightful palette (src/styles/global.css). */
  --xt-bg: #0000aa;
  --xt-bg-deep: #00008a;
  --xt-white: #ffffff;
  --xt-gray: #aaaaaa;
  --xt-dim: #6c6cd0;
  --xt-side-value: #c8c8c8;
  --xt-cyan: #76e5fc;          /* frosted-blue — links / file names */
  --xt-yellow: #ccff33;        /* chartreuse — folders / active / headings */
  --xt-sel-bg: #ccff33;
  --xt-sel-fg: #0000aa;
  --xt-rule: #4bc0d9;          /* sky-surge — fine dividers */
  --xt-rule-strong: #6457a6;   /* dusty-grape — outer frame */

  /* Font roles via system fallback stacks (the site's --font-* fallbacks). */
  --xt-font-label: Menlo, Consolas, "Cascadia Mono", "Courier New", monospace;
  --xt-font-content: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --xt-font-reader: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, "Times New Roman", Times, serif;

  margin: 0;
  min-height: 100vh;
  background: var(--xt-bg);
  background-image: none;
  color: var(--xt-white);
  font-family: var(--xt-font-content);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.delightful-public-shell ::selection { background: var(--xt-sel-bg); color: var(--xt-sel-fg); }
.delightful-public-shell a { color: var(--xt-cyan); text-decoration: underline; text-underline-offset: 2px; }
.delightful-public-shell a:hover { color: var(--xt-yellow); }

/* Typography role recipes (mirror .xtree-label / .xtree-chrome / serif). */
.delightful-public-shell .xtree-label {
  font-family: var(--xt-font-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.delightful-public-shell .xtree-chrome {
  font-family: var(--xt-font-content);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.delightful-public-shell .xt-editorial {
  font-family: var(--xt-font-reader);
  letter-spacing: -0.01em;
}

/* ── Outer ground + 2px frame ── */
.xt-app-shell {
  background: var(--xt-bg);
  padding: 3px;
  min-height: 100vh;
}
.xt-frame {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-rows: auto 1fr minmax(130px, 11rem) auto;
  height: calc(100vh - 6px);
  border: 2px solid var(--xt-rule-strong);
}

/* ── Path bar (row 1, span 3) ── */
/* ── Header (row 1, span 3) — enhanced path bar holding the larger Delightful
   logo + path + public explanation copy + system status. Still chrome (deep
   ground, fine rule), with enough presence for direct-from-Substack arrivals.
   This is where the identity/explanation lives — NOT the main pane. ── */
.xt-header {
  grid-column: 1 / span 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--xt-rule);
  background: var(--xt-bg-deep);
  padding: 0.6rem 0.85rem;
}
.xt-header-logo { display: block; flex-shrink: 0; line-height: 0; }
.xt-header-logo img { display: block; height: 34px; width: auto; }
.xt-header-id { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.xt-path { color: var(--xt-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt-header-blurb { margin: 0; color: var(--xt-white); font-size: 0.95rem; line-height: 1.3; }
.xt-pathbar-status { display: flex; align-items: baseline; gap: 0.6rem; flex-shrink: 0; }
.xt-status-key { color: var(--xt-gray); }
.xt-status-word { color: var(--xt-yellow); text-transform: uppercase; }

/* ── Panes ── */
.xt-pane { min-width: 0; min-height: 0; }
.xt-pane-tree {
  grid-column: 1; grid-row: 2;
  position: relative;
  border-right: 1px solid var(--xt-rule);
  overflow-y: auto;
  padding: 0.75rem 0;
}
/* padding:0 here overrides any global `main { padding }` from the app stylesheet
   so the flush register can reach the pane's vertical chrome borders. */
.xt-pane-main { grid-column: 2; grid-row: 2; overflow: hidden auto; min-width: 0; padding: 0; }
.xt-pane-inspector {
  grid-column: 3; grid-row: 2 / span 2;
  border-left: 1px solid var(--xt-rule);
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
}
.xt-inspector-body { flex: 1 1 auto; }
.xt-pane-dir {
  grid-column: 1 / span 2; grid-row: 3;
  position: relative;
  border-top: 1px solid var(--xt-rule);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.xt-commandbar {
  grid-column: 1 / span 3; grid-row: 4;
  border-top: 1px solid var(--xt-rule);
  background: var(--xt-bg-deep);
  padding: 0.5rem 0.75rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  font-size: 0.78rem;
}

/* Decorative CP437 rail straddling the pane's left border (static). */
.xt-rail {
  position: absolute;
  left: -5px; top: 6px; bottom: 6px;
  width: 8px;
  color: var(--xt-cyan);
  pointer-events: none;
  overflow: hidden;
  white-space: pre;
  line-height: 1;
  z-index: 1;
  background-image: repeating-linear-gradient(
    to bottom,
    currentColor 0, currentColor 6px,
    transparent 6px, transparent 9px
  );
  opacity: 0.5;
}

/* ── Tree ── */
.xt-tree { display: block; }
.xt-tree-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.05rem 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xt-tree-row:hover { background: var(--xt-bg-deep); }
.xt-tree-prefix { color: var(--xt-dim); white-space: pre; flex-shrink: 0; }
.xt-tree-folder { color: var(--xt-yellow); }
.xt-tree-file { color: var(--xt-cyan); }
.xt-tree-row.is-selected { background: var(--xt-sel-bg); }
.xt-tree-row.is-selected .xt-tree-label,
.xt-tree-row.is-selected .xt-tree-prefix { color: var(--xt-sel-fg); }
.xt-tree-row:hover .xt-tree-label { color: var(--xt-yellow); }
.xt-tree-row.is-selected:hover .xt-tree-label { color: var(--xt-sel-fg); }

/* ── Main pane ── */
/* The main pane has NO outer padding so the register can run flush to the
   pane's vertical chrome borders (the outer shell grid still constrains the
   pane width). The intro text block gets its own padding via .xt-main-head;
   the register-wrap stays edge-to-edge. */
.xt-main-inner { padding: 0; max-width: none; text-align: left; }
/* Compact, left-aligned intro block (title + metadata + optional lead). Padded
   so the text doesn't touch the chrome, while the register below stays flush. */
.xt-main-head { padding: 1.25rem 1rem 0.85rem; }
.xt-title {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--xt-yellow);
  line-height: 1.1;
}
.xt-caption { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin: 0 0 1rem; }
.xt-lead { color: var(--xt-white); font-size: 1.0625rem; line-height: 1.6; max-width: 68ch; margin: 0 0 1.25rem; }
.xt-code { font-family: var(--xt-font-label); color: var(--xt-cyan); }
.xt-empty { color: var(--xt-gray); border: 1px solid var(--xt-rule); padding: 1rem; }

/* ── Register table ── */
.xt-register-wrap { border: 1px solid var(--xt-rule); overflow-x: auto; }
/* Flush register: edge-to-edge inside the main pane. Top/bottom rules only —
   the left/right chrome borders are the tree's right border and the
   inspector's left border, so the register meets them cleanly with no side
   buffer. The shell grid still bounds the pane; only the internal margin goes. */
.xt-register-flush { border-left: 0; border-right: 0; border-top: 0; }
/* table-layout: fixed keeps the register inside the main pane so it can never
   bleed over the inspector column; long cell content wraps/ellipsizes. */
.xt-register { width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; }
.xt-th, .xt-cell { overflow-wrap: anywhere; word-break: break-word; }
.xt-th {
  text-align: left;
  color: var(--xt-gray);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--xt-rule);
  background: var(--xt-bg-deep);
}
.xt-th-num { text-align: right; white-space: nowrap; }
.xt-record { border-bottom: 1px solid var(--xt-rule); }
.xt-record:last-child { border-bottom: 0; }
.xt-record:hover { background: var(--xt-bg-deep); }
.xt-cell { padding: 0.6rem 0.7rem; vertical-align: top; color: var(--xt-white); }
.xt-cell-num { text-align: right; white-space: nowrap; }
.xt-empty-cell { color: var(--xt-gray); }
.xt-file { color: var(--xt-cyan); text-decoration: none; font-family: var(--xt-font-label); font-weight: 600; letter-spacing: 0.02em; }
.xt-file:hover { color: var(--xt-yellow); text-decoration: underline; }
.xt-num { color: var(--xt-side-value); font-variant-numeric: tabular-nums; }
.xt-register-desc { display: block; max-width: 56ch; }
.xt-quote { margin: 0.4rem 0 0; color: var(--xt-side-value); font-size: 0.98rem; line-height: 1.55; max-width: 70ch; }
.xt-issue-link { color: var(--xt-cyan); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xt-issue-link:hover { color: var(--xt-yellow); text-decoration: underline; }
.xt-issue { color: var(--xt-gray); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Pills (collection tags + creative-tools group/type). */
.xt-pills { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.xt-pill, .xt-grouppill {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--xt-rule);
  padding: 0.08rem 0.4rem;
  white-space: nowrap;
}
.xt-pill { color: var(--xt-cyan); }
.xt-pill-inactive { color: var(--xt-dim); }
.xt-grouppill { color: var(--xt-yellow); }
/* Detail register column widths. With Source removed, fixed widths go to the
   Preview / Type / Issue chrome columns and the Record column (auto) absorbs
   the rest, so title + quote get more breathing room. */
.xt-cell-type { width: 7rem; }
.xt-cell-num { width: 5rem; }
.xt-cell-name { width: 30%; }
.xt-cell-img, .xt-th-img { width: 5rem; }

/* Media preview tile — a small bordered file-preview frame (XTree media
   cell), NOT a modern card thumbnail. Stores already-extracted og:image
   URLs only; a ▣ glyph frame shows when absent or when the remote image
   fails (inline onerror adds .is-broken). */
.xt-thumb {
  position: relative;
  display: block;
  width: 3rem;
  height: 2.25rem;
  border: 1px solid var(--xt-rule);
  background: var(--xt-bg-deep);
  overflow: hidden;
}
.xt-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xt-thumb-fallback,
.xt-thumb-frame {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--xt-dim);
  font-size: 1.1rem;
  line-height: 1;
}
.xt-thumb.is-broken .xt-thumb-img { display: none; }
.xt-thumb.is-broken .xt-thumb-fallback { display: flex; }
.xt-thumb-empty { display: flex; align-items: center; justify-content: center; }
.xt-thumb-empty .xt-thumb-frame { position: static; display: flex; }

/* ── Dir-contents pane ── */
.xt-dir-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-bottom: 1px solid var(--xt-rule);
  color: var(--xt-gray);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
}
.xt-dir-head-dir { color: var(--xt-yellow); }
.xt-dir-head-ext { color: var(--xt-gray); }
.xt-dir-empty { padding: 0.75rem; color: var(--xt-gray); text-align: center; }
.xt-dir-list {
  list-style: none; margin: 0; padding: 0.4rem 0.75rem;
  columns: 2; column-gap: 1.5rem;
}
/* Six columns on desktop; steps down responsively so nothing overflows. */
.xt-dir-list-6 { columns: 6; }
@media (max-width: 1200px) { .xt-dir-list-6 { columns: 4; } }
@media (max-width: 900px)  { .xt-dir-list-6 { columns: 3; } }
.xt-dir-item { break-inside: avoid; }
.xt-dir-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.05rem 0.15rem;
  color: var(--xt-cyan);
  text-decoration: none;
  line-height: 1.4;
}
.xt-dir-link:hover { background: var(--xt-bg-deep); color: var(--xt-yellow); }
.xt-dir-base { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-dir-ext { flex-shrink: 0; color: var(--xt-dim); }

/* ── Inspector ── */
.xt-inspector-title { color: var(--xt-yellow); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.75rem; }
.xt-inspector-section { margin-bottom: 0.25rem; }
.xt-inspector-head { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; margin-bottom: 0.5rem; }
.xt-inspector-divider { border-top: 1px solid var(--xt-rule-strong); margin: 1rem 0; }
.xt-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.8rem; }
.xt-meta-row { display: contents; }
.xt-meta-key { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.06em; }
.xt-meta-val { margin: 0; color: var(--xt-side-value); word-break: break-word; }

/* ── SIGNAL (Substack) — adapted from the live site's NewsletterSignupBox.
   Pinned to the bottom of the inspector column (bottom-right of the shell). ── */
.xt-signal { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--xt-rule); }
.xt-signal-title { color: var(--xt-yellow); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.5rem; }
.xt-signal-copy { color: var(--xt-gray); font-size: 0.72rem; line-height: 1.5; margin: 0 0 0.75rem; }
.xt-signal-chip {
  display: inline-block;
  border: 1px solid var(--xt-rule);
  padding: 0.25rem 0.5rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--xt-yellow);
  text-decoration: none;
}
.xt-signal-chip:hover { background: var(--xt-sel-bg); color: var(--xt-sel-fg); }

/* ── Command bar ── */
.xt-cmd-label { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.xt-cmd-dir { color: var(--xt-cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-cmd-list { color: var(--xt-gray); text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; }
.xt-cmd { white-space: nowrap; }
.xt-cmd-key { color: var(--xt-yellow); font-weight: 700; }
.xt-cmd-file { color: var(--xt-yellow); display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.xt-cmd-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt-cmd-copy { color: var(--xt-dim); margin-left: auto; white-space: nowrap; }

/* ── Mobile: stack the shell into a single column ── */
@media (max-width: 860px) {
  .xt-app-shell { padding: 0; }
  .xt-frame {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    border: 0;
  }
  .xt-rail { display: none; }
  .xt-pane-tree { max-height: 40vh; }
  .xt-pane-inspector { border-left: 0; border-top: 1px solid var(--xt-rule); }
  .xt-pane-dir { border-top: 1px solid var(--xt-rule); }
  /* Keep the register flush on tablet/mobile too — only the intro text block
     gets horizontal padding. */
  .xt-main-head { padding: 1.25rem 1rem 0.85rem; }
  .xt-header { flex-wrap: wrap; }
  .xt-header-logo img { height: 28px; }
  .xt-cmd-copy { display: none; }
}
@media (max-width: 680px) {
  .xt-dir-list { columns: 1; }
  /* Stacked cards get a little side breathing room since the register is
     otherwise flush to the edges. */
  .xt-register-flush { padding: 0 0.5rem; }
  .xt-register, .xt-register thead, .xt-register tbody,
  .xt-register tr, .xt-register th, .xt-register td { display: block; width: auto; }
  .xt-register thead { display: none; }
  .xt-record { border: 1px solid var(--xt-rule); margin-bottom: 0.6rem; padding: 0.4rem 0.5rem; }
  .xt-record:hover { background: transparent; }
  .xt-cell { padding: 0.3rem 0; border-top: 1px dashed var(--xt-rule); text-align: left; }
  .xt-cell:first-child { border-top: 0; }
  .xt-cell-num { text-align: left; }
  .xt-cell::before {
    content: attr(data-label) " · ";
    color: var(--xt-gray);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.58rem;
    font-family: var(--xt-font-label);
    margin-right: 0.35rem;
  }
  .xt-cell-record::before, .xt-cell-name::before { display: none; }
  .xt-cell-record, .xt-cell-name { font-size: 1rem; padding-bottom: 0.35rem; }
  .xt-quote { max-width: none; }
}

/* Reduced motion: no animations exist in this pass; guard future additions. */
@media (prefers-reduced-motion: reduce) {
  .delightful-public-shell * { animation: none !important; transition: none !important; }
}