*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:           #0b0f14;
  --bg-grid:      rgba(155, 200, 230, 0.035);
  --panel:        #11181f;
  --panel-2:      #161e26;
  --panel-3:      #1c2530;
  --surface:      var(--panel);
  --border:       #243140;
  --border-strong:#324558;
  --border-focus: #00d4c0;
  --text:         #e6eef5;
  --text-muted:   #7d8b9b;
  --text-dim:     #58697a;
  --accent:       #00d4c0;
  --accent-hover: #4ee9d8;
  --accent-2:     #ff9b3e;
  --accent-violet:#a78bfa;
  --accent-acid:  #b6f560;
  --danger:       #ff6b6b;
  --success:      #50d890;
  --shadow:       0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.25);
  --radius:       4px;
  --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); }
.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;
  box-shadow: inset 0 1px 0 var(--accent), 0 1px 0 rgba(0, 0, 0, 0.5);
}
.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 { 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 { 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);
}
.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 {
  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 {
  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;
}
.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); }
.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);
}
.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-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.inbox-header h1 { margin-bottom: 0; }
.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 {
  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);
}
.card-description {
  color: var(--text);
}
.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);
}
.card-preview-stacked .link-title {
  font-size: 1rem;
  font-weight: 600;
}
.card-second-line {
  display: inline-block;
  margin-top: 0.2rem;
  font-family: "Iowan Old Style", Charter, "Palatino Linotype", Palatino,
               "Book Antiqua", Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
}
.card-second-line .card-via a { white-space: nowrap; }
.link-row:has(.card-preview-stacked) { padding: 1rem 0; }
.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); }
.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);
}
.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); }
.category-group:not(:has(li.link-row)) { display: none; }
main.main-wide { max-width: 960px; }
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; }
.via-section-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  padding: 1rem 1.25rem 1.125rem;
  margin: 0 0 2.25rem;
}
.via-section-card .field { margin-bottom: 0; }
.via-section-card .reading-input { width: 100%; box-sizing: border-box; }
.via-section-list {
  margin: 0.875rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
}
.via-section-list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-violet);
}
.via-section-list a:hover { color: var(--accent-violet); }
.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; }
}
.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; }
}
body.is-demo .scratchpad-textarea { pointer-events: none; opacity: 0.7; }
body.is-demo .scratchpad-status { display: none; }
.reading-card {
  margin-top: 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);
}
.reading-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.reading-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.reading-status[data-state="saved"]  { color: var(--success); }
.reading-status[data-state="saving"] { color: var(--text-muted); }
.reading-status[data-state="dirty"]  { color: var(--accent-2); }
.reading-status[data-state="error"]  { color: var(--danger); }
.reading-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}
.reading-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.reading-cover {
  flex: 0 0 auto;
  width: 130px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reading-cover-img {
  width: 130px;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
}
.reading-cover-empty {
  width: 130px;
  min-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin: 0;
  padding: 0.5rem;
}
.reading-cover-actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.reading-cover-label { text-align: center; cursor: pointer; }
.reading-cover-status {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  min-height: 1em;
}
.reading-cover-status[data-state="error"] { color: var(--danger); }
.reading-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.reading-input {
  width: 100%;
  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.5rem 0.75rem;
}
.reading-textarea { resize: vertical; min-height: 6rem; }
.reading-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(0, 212, 192, 0.12);
}
@media (max-width: 720px) {
  .reading-card { padding: 0.75rem 0.875rem 0.875rem; }
  .reading-body { flex-direction: column; }
  .reading-cover, .reading-cover-img, .reading-cover-empty { width: 100%; }
  .reading-cover-empty { min-height: 8rem; }
}
body.is-demo .reading-input,
body.is-demo .reading-cover-actions { pointer-events: none; opacity: 0.7; }
body.is-demo .reading-status,
body.is-demo .reading-cover-status { display: none; }
.footer-card .reading-hint code {
  font-family: var(--font-mono);
  font-size: 0.78em;
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 0;
  color: var(--text-muted);
}
.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;
}
@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) {
  .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 {
    padding-top:   1.75rem;
    padding-left:  max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  input[type="text"],
  input[type="url"],
  select,
  textarea {
    font-size: 1rem;
  }
  .btn           { min-height: 44px; }
  .delete-btn    { min-height: 44px; padding: 0.5rem 0; }
  .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-ghost { text-align: center; }
  .link-top  { gap: 0.5rem; }
  .link-list { gap: 1.125rem; }
  .inbox-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
.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; }
.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;
}
.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); }
.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); }
.cat-select {
  font-size: 0.85rem;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
  margin-top: 0.25rem;
  max-width: 100%;
}
.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-form-sent-date .field-hint {
  flex: 1 0 100%;
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
}
#archive-status {
  font-size: 0.875rem;
  color: var(--danger);
}
.images-divider {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 0.75rem 0;
}
.image-pool {
  margin: 0 0 2.25rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
}
.image-pool[hidden] { display: none; }
.image-pool-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style: none;
}
.image-pool-summary::-webkit-details-marker { display: none; }
.image-pool-summary::before {
  content: "\25b8";
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
.image-pool[open] > .image-pool-summary::before { transform: rotate(90deg); }
.image-pool-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.image-pool-status {
  font-size: 0.8125rem;
  color: var(--muted, #888);
}
.image-pool-list {
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.pool-image {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 180px;
}
.image-frame {
  position: relative;
  display: block;
}
.pool-image-img {
  width: 180px;
  height: 135px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--bg, #111);
  border: 1px solid var(--border);
}
.image-delete-btn {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  padding: 0;
}
.image-delete-btn:hover { background: rgba(180, 30, 30, 0.9); }
.image-delete-btn:disabled { opacity: 0.5; cursor: default; }
.image-actions {
  display: flex;
  gap: 0.5rem;
}
.main-image-block {
  margin: 0 0 2.25rem;
}
.main-image-label {
  margin: 0 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #888);
}
.main-image-block .category-image {
  margin-bottom: 0;
}
.category-image {
  margin: 0 0 1.25rem;
  max-width: 640px;
}
.category-image-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.category-image-source {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  word-break: break-all;
}
.category-image .image-actions { margin-top: 0.5rem; }
.image-editor {
  margin-top: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg, #111);
  max-width: 420px;
}
.image-editor[hidden] { display: none; }
.image-editor-filename {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted, #888);
  word-break: break-all;
}
.image-editor-hint {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted, #888);
}
.image-editor .field { margin-bottom: 0.625rem; }
.image-editor input,
.image-editor select {
  width: 100%;
  box-sizing: border-box;
}
.image-editor .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.image-editor-status {
  font-size: 0.8125rem;
  color: var(--muted, #888);
}
.image-editor-status[data-state="error"] { color: var(--error, #e0685f); }
.add-image-no-categories {
  margin: 0 0 1rem;
}
.archive-stored-images {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted, #888);
}
.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);
}
.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); }
.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; }
.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; }
.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 {
  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); }
.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); }
.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;
}
.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; }
.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 {
  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-form { display: flex; flex-direction: column; gap: 1.25rem; }
.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);
}
.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; }
.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; }
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.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);
}
img, svg, video, canvas, iframe { max-width: 100%; }
@media (max-width: 700px) {
  .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-logo { width: 100px; max-height: 28px; }
  main {
    padding: 1.5rem 1rem 3rem;
    max-width: 100%;
  }
  main.main-wide,
  main.main-archive { max-width: 100%; }
  .page-header { margin-bottom: 1.25rem; }
  .page-header h1 { font-size: 1.25rem; }
  .page-eyebrow { letter-spacing: 0.12em; }
  .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-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); }
  .link-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .link-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .category-group { padding: 0.75rem 0.875rem 0.25rem; }
  .pool-image { width: calc(50% - 0.5rem); }
  .pool-image-img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .edit-form .actions { flex-direction: column; align-items: stretch; }
  .edit-form .actions .btn { width: 100%; }
}
@media (max-width: 480px) {
  .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; }
  .header-actions { flex-direction: column; gap: 0.45rem; }
  .header-actions .btn { width: 100%; flex: none; }
  .archive-form-row .btn { flex: 1 1 calc(50% - 0.25rem); }
  .category-group { padding: 0.625rem 0.75rem 0.25rem; }
  .card-preview, .link-title { overflow-wrap: anywhere; }
  .pool-image { width: 100%; }
  .image-editor { max-width: 100%; }
  .image-delete-btn { width: 2rem; height: 2rem; font-size: 1.25rem; }
}
.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-pills .tag-group-pill { margin-left: -0.125rem; }
.link-tags-row .catalogue-group select,
.review-groups .catalogue-group select {
  width: auto;
  min-width: 12rem;
}
.link-tags-row .catalogue-groups,
.review-groups { margin-top: 0.75rem; }
.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); }
.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);
}
.collections-field .shelf-exclusion-option {
  margin-top: 0.625rem;
  gap: 0.4rem 0.5rem;
  cursor: pointer;
  user-select: none;
}
.shelf-exclusion-option input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--danger);
  cursor: pointer;
}
.shelf-exclusion-option input[type="checkbox"]:checked ~ .shelf-exclusion-text {
  color: var(--danger);
}
.collections-field.is-shelf-excluded .tag-suggestions,
.collections-field.is-shelf-excluded .tag-all,
.collections-field.is-shelf-excluded .review-groups {
  opacity: 0.4;
}
.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);
}
.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;
}
.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-catalogued { color: var(--accent); font-size: 0.85em; margin-left: 0.2rem; }
.shelf-groups-card { margin-bottom: 1.25rem; }
.shelf-groups-help {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.shelf-groups-table { margin-bottom: 1rem; }
.shelf-groups-table .tags-cell-usage { white-space: nowrap; }
.shelf-groups-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.shelf-groups-row-retired .shelf-group-pill { opacity: 0.6; }
.shelf-groups-add { margin-top: 0.25rem; }
.shelf-groups-add-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.75rem 1.25rem;
  align-items: start;
}
.shelf-groups-add-grid .field { margin: 0; }
.shelf-groups-swatch-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.swatch-options { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.swatch-option { position: relative; cursor: pointer; }
.swatch-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.swatch-option .shelf-group-pill { cursor: pointer; }
.swatch-option input:checked + .shelf-group-pill {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.swatch-option input:focus-visible + .shelf-group-pill {
  outline: 2px solid var(--accent-hover, var(--accent));
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .shelf-groups-add-grid { grid-template-columns: minmax(0, 1fr); }
}
.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);
}
.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; }
.suggestions-col-url    { width: 34%; }
.suggestions-col-note   { width: 34%; }
.suggestions-col-when   { width: 12%; white-space: nowrap; }
.suggestions-col-actions,
.suggestions-col-status { width: 20%; }
.suggestions-cell-url a { word-break: break-all; }
.suggestions-cell-note  { white-space: pre-wrap; }
.suggestions-cell-when  { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.suggestions-none       { color: var(--text-muted); }
.suggestions-actions,
.sources-actions        { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.suggestions-actions form,
.sources-actions form   { display: inline; margin: 0; }
.sources-add-card--top  { margin-bottom: 1.75rem; }
.sources-col-name       { width: 22%; }
.sources-col-kind       { width: 12%; }
.sources-col-blurb      { width: 34%; }
.sources-col-order      { width: 6%; text-align: right; }
.sources-col-actions    { width: 26%; }
.sources-cell-order     { text-align: right; font-family: var(--font-mono); color: var(--text-muted); }
.sources-domain         { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.tags-edit-form input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.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);
}
.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) {
  .tags-col-slug, .tags-cell-slug,
  .tags-col-description, .tags-cell-description {
    display: none;
  }
  .tags-edit-grid { grid-template-columns: 1fr; }
}
.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); }
.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);
}
.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); }
.catalogue-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: var(--panel, #121820);
  border: 1px solid var(--border, #223041);
  border-radius: 8px;
}
.catalogue-filter { display: flex; flex-direction: column; gap: 0.25rem; }
.catalogue-filter-search { flex: 1 1 16rem; }
.catalogue-filter-search input { width: 100%; }
.catalogue-filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7d8fa3);
}
.catalogue-filter-check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted, #7d8fa3);
}
.catalogue-filter-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.catalogue-gaps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.catalogue-gaps-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7d8fa3);
  margin-right: 0.3rem;
}
.catalogue-gap-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border, #223041);
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text, #d8e2ec);
  background: var(--panel, #121820);
}
.catalogue-gap-chip:hover { border-color: var(--accent, #4da3ff); }
.catalogue-gap-chip.is-active {
  background: var(--accent, #4da3ff);
  border-color: var(--accent, #4da3ff);
  color: #08121c;
  font-weight: 600;
}
.catalogue-gap-chip-zero { opacity: 0.45; }
.catalogue-gap-chip-count {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  opacity: 0.85;
}
.catalogue-count {
  font-size: 0.85rem;
  color: var(--muted, #7d8fa3);
  margin: 0 0 0.75rem;
}
.catalogue-list { display: flex; flex-direction: column; gap: 1rem; }
.catalogue-row {
  border: 1px solid var(--border, #223041);
  border-radius: 8px;
  background: var(--panel, #121820);
  padding: 1rem 1.1rem;
}
.catalogue-row.is-shelf-excluded { opacity: 0.72; border-style: dashed; }
.catalogue-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border, #223041);
}
.catalogue-row-ident { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.catalogue-chip {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--chip-bg, #1b2531);
  color: var(--muted, #7d8fa3);
  font-variant-numeric: tabular-nums;
}
.catalogue-chip-inbox { background: #24401f; color: #b6e5a5; }
.catalogue-row-id { font-size: 0.75rem; color: var(--muted, #7d8fa3); }
.catalogue-badge {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.catalogue-badge-warn { background: #4a2b16; color: #f0b98a; }
.catalogue-badge-off { background: #3c1f2c; color: #f0a0bd; }
.catalogue-row-url {
  font-size: 0.78rem;
  color: var(--muted, #7d8fa3);
  word-break: break-all;
  margin-left: auto;
  max-width: 100%;
}
.catalogue-row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.75rem 1rem;
}
.catalogue-field-wide { grid-column: 1 / -1; }
.catalogue-field input,
.catalogue-field select,
.catalogue-field textarea { width: 100%; }
.catalogue-block-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #7d8fa3);
  margin-bottom: 0.4rem;
}
.catalogue-block-label .label-hint {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}
.catalogue-tags { margin-top: 1rem; }
.catalogue-tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.catalogue-inactive-pills { margin-bottom: 0.4rem; }
.catalogue-tag-catalogued { opacity: 0.7; }
.catalogue-tags-status,
.catalogue-group-status,
.catalogue-row-status {
  display: inline-block;
  min-height: 1em;
  font-size: 0.75rem;
  color: var(--muted, #7d8fa3);
  margin-left: 0.5rem;
}
.catalogue-tags-status.is-error,
.catalogue-group-status.is-error,
.catalogue-row-status.is-error { color: #ff8b8b; }
.catalogue-groups { margin-top: 1rem; }
.catalogue-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
.catalogue-group[hidden] { display: none; }
.catalogue-group-shelf {
  min-width: 10rem;
  font-size: 0.8rem;
  text-transform: capitalize;
  color: var(--text, #d8e2ec);
}
.catalogue-group.is-orphan { border-left: 2px solid #d08a3c; padding-left: 0.6rem; }
.catalogue-group-orphan-note { font-size: 0.72rem; color: #e0a969; }
.catalogue-groups-empty {
  font-size: 0.8rem;
  color: var(--muted, #7d8fa3);
  margin: 0.2rem 0 0;
}
.catalogue-row-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border, #223041);
}
.catalogue-remove {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.catalogue-remove-confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.catalogue-remove-confirm input[type="text"] {
  width: 16rem;
  max-width: 100%;
  font-size: 0.8rem;
  padding: 0.3rem 0.5rem;
}
.catalogue-row.is-archive-excluded .catalogue-row-head { opacity: 0.75; }
.catalogue-field-note {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.catalogue-row.is-touched {
  border-color: #7a6a2e;
  background: linear-gradient(0deg, rgba(190, 150, 40, 0.05), rgba(190, 150, 40, 0.05)), var(--panel, #121820);
}
.catalogue-row.is-resolved {
  border-color: #2f6b45;
  background: linear-gradient(0deg, rgba(60, 190, 120, 0.06), rgba(60, 190, 120, 0.06)), var(--panel, #121820);
}
.catalogue-row.is-shelf-excluded { border-style: dashed; }
.catalogue-row-state {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}
.catalogue-row.is-touched .catalogue-row-state { background: #4a3f16; color: #e8cd85; }
.catalogue-row.is-resolved .catalogue-row-state { background: #1e4530; color: #94e0b4; }
.catalogue-row-toggle {
  background: none;
  border: none;
  color: var(--muted, #7d8fa3);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
}
.catalogue-row-toggle:hover { color: var(--text, #d8e2ec); }
.catalogue-row.is-collapsed { padding: 0.55rem 1.1rem; }
.catalogue-row.is-collapsed .catalogue-row-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.catalogue-row-summary {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--muted, #7d8fa3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catalogue-progress {
  margin-left: 0.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: #1e4530;
  color: #94e0b4;
  font-size: 0.78rem;
}
.catalogue-more {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 2rem;
}
.catalogue-more-note { font-size: 0.8rem; color: var(--muted, #7d8fa3); }
@media (max-width: 760px) {
  .catalogue-filters { flex-direction: column; align-items: stretch; }
  .catalogue-filter-actions { margin-left: 0; }
  .catalogue-row-url { margin-left: 0; }
  .catalogue-group-shelf { min-width: 0; flex-basis: 100%; }
}
   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. */
.shelf-stats {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
/* 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. */
/* Card base. */
/* 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. */
/* 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). */
@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); }
}
/* 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. */
/* 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. */
/* 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. */
/* 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. */
.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;
}
body.is-demo .suggestions-actions,
body.is-demo .sources-actions,
body.is-demo .sources-add-card { display: none; }
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 .catalogue-tags,
body.is-demo .catalogue-groups,
body.is-demo .catalogue-row-foot,
body.is-demo .catalogue-row-toggle,
body.is-demo .issue-record-form .actions,
body.is-demo .shelf-groups-add,
body.is-demo .shelf-groups-actions,
body.is-demo .image-delete-btn,
body.is-demo .image-edit-btn,
body.is-demo .preview-image-admin-card {
  display: none !important;
}
body.is-demo .catalogue-row-grid input,
body.is-demo .catalogue-row-grid select,
body.is-demo .catalogue-row-grid textarea {
  pointer-events: none;
  opacity: 0.6;
}
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-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; }
}
.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);
}
.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; }
.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-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; }
}
.manage-tools {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 1.1rem 1rem;
  margin-bottom: 1.25rem;
}
.manage-tools-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem 1.25rem;
}
.manage-tools-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.manage-tools-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
}
.manage-tools-link:hover { text-decoration: underline; }
.manage-tools-help-line {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.manage-tools-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem 1.25rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.manage-tools-job.preview-image-admin-card { margin-top: 0; }
.manage-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;
}
.manage-tools-subheading::before { content: "» "; color: var(--accent); }
.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;
}
.issue-record-headline {
  font-weight: 400;
  color: var(--text-muted);
}
.issue-record-details { margin-bottom: 1.5rem; }
.issue-record-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.issue-record-section-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0;
}
.issue-record-section-title::before { content: "» "; color: var(--accent); }
.issue-record-actions {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.issue-record-actions a { color: var(--accent); text-decoration: none; }
.issue-record-actions a:hover { text-decoration: underline; }
.issue-record-actions span { color: var(--text-dim); }
.issue-record-public-missing { color: var(--text-dim); }
.issue-record-grid {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.75rem 1rem;
}
.issue-record-field-date { grid-column: 1 / 2; }
.issue-record-field-url { grid-column: 2 / 3; }
.issue-record-grid .field { margin: 0; }
.issue-record-form .actions { margin-top: 0.85rem; }
@media (max-width: 640px) {
  .issue-record-grid { grid-template-columns: minmax(0, 1fr); }
  .issue-record-field-date,
  .issue-record-field-url { grid-column: auto; }
}
.issue-record-clicks h3 { margin-top: 1.5rem; }
.archive-issues-datetag {
  display: inline-block;
  margin-left: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, rgba(255, 255, 255, 0.45));
}
.archive-issues-datetag-sent {
  color: var(--accent, #00d4c0);
}
.archive-issues-table {
  width: 100%;
  min-width: 980px;
  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; }
}
.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;
}
.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; }
.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;
}
.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); }
.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;
}
.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;
}
.shelf-group-pill-swatch-teal       { background: rgba(0, 212, 192, 0.12);    border-color: rgba(0, 212, 192, 0.4);    color: #6fe7d8; }
.shelf-group-pill-swatch-sky        { background: rgba(56, 189, 248, 0.12);   border-color: rgba(56, 189, 248, 0.4);   color: #7dd3fc; }
.shelf-group-pill-swatch-mint       { background: rgba(80, 216, 144, 0.12);   border-color: rgba(80, 216, 144, 0.4);   color: #8ee9b4; }
.shelf-group-pill-swatch-indigo     { background: rgba(99, 102, 241, 0.16);   border-color: rgba(99, 102, 241, 0.45);  color: #a5b4fc; }
.shelf-group-pill-swatch-blue       { background: rgba(96, 165, 250, 0.14);   border-color: rgba(96, 165, 250, 0.45);  color: #a8c8ff; }
.shelf-group-pill-swatch-periwinkle { background: rgba(120, 119, 255, 0.14);  border-color: rgba(120, 119, 255, 0.45); color: #b1b0ff; }
.shelf-group-pill-swatch-slate      { background: rgba(125, 139, 155, 0.16);  border-color: rgba(125, 139, 155, 0.4);  color: #c1cad6; }
.shelf-group-pill-swatch-violet     { background: rgba(167, 139, 250, 0.14);  border-color: rgba(167, 139, 250, 0.4);  color: #c8b6ff; }
.shelf-group-pill-swatch-lime       { background: rgba(182, 245, 96, 0.12);   border-color: rgba(182, 245, 96, 0.4);   color: #d8f99c; }
.shelf-group-pill-swatch-gold       { background: rgba(202, 138, 4, 0.14);    border-color: rgba(202, 138, 4, 0.45);   color: #e8c069; }
.shelf-group-pill-swatch-yellow     { background: rgba(250, 204, 21, 0.12);   border-color: rgba(250, 204, 21, 0.4);   color: #fde68a; }
.shelf-group-pill-swatch-coral      { background: rgba(255, 107, 107, 0.12);  border-color: rgba(255, 107, 107, 0.4);  color: #ffb1b1; }
.shelf-group-pill-swatch-pink       { background: rgba(255, 107, 174, 0.12);  border-color: rgba(255, 107, 174, 0.4);  color: #ffb1d4; }
.shelf-group-pill-swatch-orange     { background: rgba(255, 155, 62, 0.12);   border-color: rgba(255, 155, 62, 0.4);   color: #ffc48a; }
.shelf-group-pill-unsorted       { background: rgba(255, 255, 255, 0.03); border-color: var(--border);             color: var(--text-dim); font-style: italic; }
.shelf-filter-chip[class*="shelf-group-pill-"] { color: inherit; }
.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); }
.shelf-directory-th-manage { width: 5rem; text-align: center; }
.shelf-directory-cell-manage { width: 5rem; text-align: center; }
.shelf-remove-form { display: inline; margin: 0; }
.shelf-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.4rem;
  background: var(--panel-3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.shelf-remove-btn:hover {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--panel-2);
}
.shelf-remove-btn:focus { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.shelf-remove-icon { display: inline-block; }
@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-shell {
  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); }
.delightful-public-shell {
  --xt-bg: #0a0b0e;
  --xt-bg-deep: #14171d;
  --xt-rule: #356b71;
  --xt-quote-ink: #d8dbff;
}
.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);
}
.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-pathbar-status { display: flex; align-items: baseline; gap: 0.6rem; flex-shrink: 0; }
.delightful-public-shell .xt-status-word {
  display: inline-block;
  min-width: 17ch;
  text-align: left;
  white-space: pre;
}
.delightful-public-shell .xt-status-cursor.is-blinking {
  animation: xt-status-caret-blink 1.1s steps(1) infinite;
}
@keyframes xt-status-caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .delightful-public-shell .xt-status-cursor.is-blinking { animation: none; }
}
.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;
}
.xt-pane-main {
  grid-column: 2; grid-row: 2;
  overflow: hidden auto;
  min-width: 0;
  padding: 0;
  max-width: none;
  margin: 0;
}
.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: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.78rem;
}
.xt-cmd-info {
  flex: 1 1 360px;
  min-width: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}
.xt-footer-signal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.xt-footer-signal-copy { color: var(--xt-gray); font-size: 0.7rem; min-width: 0; }
.xt-footer-signal-key { color: var(--xt-gray); text-transform: uppercase; letter-spacing: 0.08em; }
.xt-footer-signal .xt-signal-chip { flex-shrink: 0; }
.xt-frame--detail {
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
}
.xt-frame--detail .xt-pane-tree { grid-column: 1; grid-row: 2; border-right: 1px solid var(--xt-rule); }
.xt-frame--detail .xt-pane-main { grid-column: 2; grid-row: 2; padding: 0 0.4rem 0 0; }
.xt-frame--detail .xt-commandbar { grid-column: 1 / span 2; grid-row: 3; }
.xt-rail {
  position: absolute;
  left: -5px; top: 6px; bottom: 6px;
  width: 8px;
  color: var(--xt-cyan);
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25% 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25% 75%, currentColor 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}
.delightful-public-shell .xt-tree-row { text-decoration: none; }
.delightful-public-shell .xt-tree-folder,
.delightful-public-shell .xt-tree-folder:hover { color: var(--xt-yellow); }
.delightful-public-shell .xt-tree-file,
.delightful-public-shell .xt-tree-file:hover { color: var(--xt-cyan); }
@font-face {
  font-family: 'DelightfulRetroChrome';
  src: url('/fonts/retro-chrome.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
.delightful-public-shell .xt-pane-tree {
  --xt-font-label: 'DelightfulRetroChrome', Menlo, Consolas, "Cascadia Mono", "Courier New", monospace;
}
.delightful-public-shell .xt-tree-heading {
  margin: 0 0 0.4rem;
  padding: 0 0.75rem;
  color: var(--xt-gray);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;
}
.delightful-public-shell .xt-tree-spacer {
  height: 0.5rem;
  pointer-events: none;
}
.delightful-public-shell .xt-mobile-nav { display: none; }
.xt-main-inner { padding: 0; max-width: none; text-align: left; }
.xt-main-head { padding: 1.1rem 1rem 0.45rem; }
.xt-rail-meta { padding: 0.85rem 0.75rem 0.5rem; border-top: 1px solid var(--xt-rule); margin-top: 0.5rem; }
.xt-rail-desc { margin: 0; color: var(--xt-gray); font-size: 0.72rem; line-height: 1.5; }
.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); }
@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: none; border-right: 0; padding: 0; overflow: visible; }
  .xt-rail-meta { margin-top: 0; }
  .xt-frame--detail .xt-pane-main { padding-right: 0; order: 1; }
  .xt-frame--detail .xt-pane-tree { max-height: none; order: 2; }
  .xt-frame--detail .xt-commandbar { order: 3; }
  .delightful-public-shell .xt-mobile-nav { display: block; }
  .delightful-public-shell .xt-mobile-nav-summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
  }
  .delightful-public-shell .xt-mobile-nav-summary::-webkit-details-marker { display: none; }
  .delightful-public-shell .xt-mobile-nav-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--xt-rule);
    color: var(--xt-yellow);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .delightful-public-shell .xt-mobile-nav-summary:hover .xt-mobile-nav-chip,
  .delightful-public-shell .xt-mobile-nav-summary:focus-visible .xt-mobile-nav-chip {
    background: var(--xt-sel-bg);
    color: var(--xt-sel-fg);
    border-color: var(--xt-sel-bg);
  }
  .delightful-public-shell .xt-mobile-nav-bar { display: none; }
  .delightful-public-shell { --xt-mobile-bar-h: 3.75rem; }
  .delightful-public-shell .xt-mobile-nav[open] {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--xt-mobile-bar-h);
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--xt-bg);
  }
  .delightful-public-shell .xt-mobile-nav[open] .xt-mobile-nav-summary {
    height: var(--xt-mobile-bar-h);
    box-sizing: border-box;
  }
  .delightful-public-shell .xt-mobile-nav[open] .xt-mobile-nav-summary {
    justify-content: space-between;
    background: var(--xt-bg-deep);
    border-bottom: 1px solid var(--xt-rule);
  }
  .delightful-public-shell .xt-mobile-nav[open] .xt-mobile-nav-chip { display: none; }
  .delightful-public-shell .xt-mobile-nav[open] .xt-mobile-nav-bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  .delightful-public-shell .xt-mobile-nav-open {
    color: var(--xt-yellow);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .delightful-public-shell .xt-mobile-nav-x {
    border: 1px solid var(--xt-rule);
    padding: 0.4rem 0.7rem;
    color: var(--xt-yellow);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  @supports selector(:has(*)) {
    .delightful-public-shell .xt-tree-block { display: none; }
    .delightful-public-shell .xt-frame:has(.xt-mobile-nav[open]) .xt-tree-block {
      display: block;
    }
    .delightful-public-shell .xt-frame:has(.xt-mobile-nav[open]) .xt-pane-tree {
      position: fixed;
      inset: var(--xt-mobile-bar-h) 0 0 0;
      z-index: 59;
      overflow-y: auto;
      background: var(--xt-bg);
      padding: 0.85rem 0;
    }
    .delightful-public-shell .xt-frame:has(.xt-mobile-nav[open]) .xt-tree-row {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
    }
  }
  @supports not selector(:has(*)) {
    .delightful-public-shell .xt-mobile-nav { display: none; }
  }
  .xt-main-head { padding: 1.25rem 1rem 0.85rem; }
  .xt-header { flex-wrap: nowrap; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; }
  .xt-header-logo img { height: 20px; }
  .xt-pathbar-status { display: none; }
  .delightful-public-shell .xt-header .xt-mobile-nav { flex: 0 0 auto; }
  .delightful-public-shell .xt-header .xt-mobile-nav:not([open]) .xt-mobile-nav-summary { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .delightful-public-shell * { animation: none !important; transition: none !important; }
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  src: url('/fonts/literata-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Town20Inline';
  src: url('/fonts/town20-inline-stroke.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Town20Inline';
  src: url('/fonts/town20-inline-black.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.delightful-public-shell--bone {
  --xt-bg: #f5f2ec;
  --xt-bg-deep: #fbf9f5;
  --xt-white: #221f1a;
  --xt-gray: #5c564c;
  --xt-dim: #918a7d;
  --xt-side-value: #5c564c;
  --xt-cyan: #33518f;
  --xt-yellow: #221f1a;
  --xt-rule: #e2dcd1;
  --xt-rule-strong: #e2dcd1;
  --xt-sel-bg: #ccff33;
  --xt-sel-fg: #221f1a;
  --xt-quote-ink: #5c564c;
  --xt-accent: #33518f;
  --xt-accent-wash: rgba(51, 81, 143, 0.10);
  --xt-sunk: #ece7dd;
  --xt-hairline: #ebe6dc;
  --xt-font-reader: 'Jost', 'Century Gothic', 'Avenir Next', 'Futura', sans-serif;
}
.delightful-public-shell--bone a:hover,
.delightful-public-shell--bone .xt-issue-link:hover,
.delightful-public-shell--bone .xt-tree-folder:hover {
  color: var(--xt-accent);
}
.delightful-public-shell--bone .xt-tree-row:focus-visible,
.delightful-public-shell--bone .xt-select:focus-visible {
  outline: 2px solid var(--xt-accent);
  outline-offset: 1px;
}
.delightful-public-shell--bone a:focus-visible,
.delightful-public-shell--bone summary:focus-visible,
.delightful-public-shell--bone button:focus-visible {
  outline: 2px solid var(--xt-accent);
  outline-offset: 2px;
}
.delightful-public-shell--bone .xt-tree-folder:not(.is-selected) {
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-status-word {
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-signal-chip {
  color: var(--xt-accent);
  border-color: var(--xt-rule);
}
.delightful-public-shell--bone .xt-signal-chip:hover,
.delightful-public-shell--bone .xt-signal-chip:focus-visible,
.delightful-public-shell--bone .xt-signal-chip:focus-visible {
  color: var(--xt-accent);
  border-color: var(--xt-accent);
  background: var(--xt-bg-deep);
}
@media (max-width: 860px) {
  .delightful-public-shell--bone .xt-mobile-nav-open,
  .delightful-public-shell--bone .xt-mobile-nav-x {
    color: var(--xt-accent);
  }
  .delightful-public-shell--bone .xt-mobile-nav-chip {
    color: var(--xt-accent);
    border-color: var(--xt-rule);
  }
}
.delightful-public-shell--bone .xt-reading-room {
  padding: 0.5rem 1rem 2.5rem;
}
.delightful-public-shell--bone .xt-sec,
.delightful-public-shell--bone .xt-unfiled {
  margin: 0 0 3.75rem;
}
.delightful-public-shell--bone .xt-sec:last-child,
.delightful-public-shell--bone .xt-unfiled:last-child { margin-bottom: 0; }
.delightful-public-shell--bone .xt-sec-head {
  display: flex;
  align-items: baseline;
  gap: 0.95rem;
  margin-bottom: 1.5rem;
}
.delightful-public-shell--bone .xt-sec-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--xt-white);
  white-space: nowrap;
}
.delightful-public-shell--bone .xt-title {
  font-size: clamp(1.9rem, 3.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.06;
}
.delightful-public-shell--bone .xt-sec-title--quiet {
  font-family: var(--xt-font-label);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xt-gray);
  font-weight: 400;
}
.delightful-public-shell--bone .xt-sec-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--xt-rule);
}
.delightful-public-shell--bone .xt-sec-count {
  flex: 0 0 auto;
  font-family: var(--xt-font-label);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--xt-dim);
  white-space: nowrap;
}
.delightful-public-shell--bone .xt-sec-grid {
  display: grid;
  gap: 1.6rem 1.35rem;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}
.delightful-public-shell--bone .xt-read-card {
  min-width: 0;
}
.delightful-public-shell--bone .xt-read-title {
  margin: 0.7rem 0 0;
  font-size: 1.06rem;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.008em;
}
.delightful-public-shell--bone .xt-read-title a {
  color: var(--xt-white);
  text-decoration: none;
}
.delightful-public-shell--bone .xt-read-title a:hover,
.delightful-public-shell--bone .xt-read-title a:focus-visible {
  color: var(--xt-accent);
  text-decoration: none;
  background-image: linear-gradient(
    180deg,
    transparent 14%,
    var(--xt-accent-wash) 14%,
    var(--xt-accent-wash) 86%,
    transparent 86%
  );
  margin: 0 -0.22em;
  padding: 0 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.delightful-public-shell--bone .xt-read-meta {
  margin: 0.45rem 0 0;
  font-family: var(--xt-font-label);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-read-pub { color: var(--xt-gray); font-weight: 500; }
.delightful-public-shell--bone .xt-read-date { color: var(--xt-dim); }
.delightful-public-shell--bone .xt-date-label { opacity: 0.72; }
.delightful-public-shell--bone .xt-meta-sep {
  margin: 0 0.42em;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-read-quote {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--xt-quote-ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.delightful-public-shell--bone .xt-read-card--lead {
  grid-column: 1 / -1;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--xt-hairline);
}
.delightful-public-shell--bone .xt-read-card--lead .xt-read-title {
  margin-top: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.12;
}
.delightful-public-shell--bone .xt-read-card--lead .xt-read-quote {
  font-size: 1rem;
  margin-top: 0.7rem;
  -webkit-line-clamp: none;
  display: block;
  overflow: visible;
}
.delightful-public-shell--bone .xt-read-card--lead .xt-read-meta { margin-top: 0.7rem; }
@media (min-width: 660px) {
  .delightful-public-shell--bone .xt-read-card--lead {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.5rem;
    align-items: center;
  }
}
.delightful-public-shell--bone .xt-tile {
  --tA: rgba(51, 81, 143, 0.22);
  --tB: rgba(120, 98, 58, 0.15);
  --tC: rgba(34, 31, 26, 0.09);
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--xt-sunk);
  border: 1px solid var(--xt-hairline);
}
.delightful-public-shell--bone .xt-read-card--lead .xt-tile { aspect-ratio: 3 / 2; }
.delightful-public-shell--bone .xt-tile-pat { position: absolute; inset: 0; }
.delightful-public-shell--bone .xt-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.delightful-public-shell--bone .xt-tile-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  font-family: var(--xt-font-label);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.4rem;
  background: var(--xt-bg-deep);
  color: var(--xt-gray);
  border-top: 1px solid var(--xt-hairline);
  border-right: 1px solid var(--xt-hairline);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.delightful-public-shell--bone a.xt-tile-badge-link:hover,
.delightful-public-shell--bone a.xt-tile-badge-link:focus-visible {
  color: var(--xt-sel-fg);
  background: var(--xt-sel-bg);
}
.delightful-public-shell--bone .xt-tile.variant-0 .xt-tile-pat {
  background:
    radial-gradient(circle at 1px 1px, var(--tA) 1.1px, transparent 1.8px) 0 0/7px 7px,
    linear-gradient(155deg, var(--tB), transparent 66%);
}
.delightful-public-shell--bone .xt-tile.variant-1 .xt-tile-pat {
  background:
    repeating-linear-gradient(45deg, var(--tA) 0 1px, transparent 1px 7px),
    linear-gradient(200deg, var(--tB), transparent 72%);
}
.delightful-public-shell--bone .xt-tile.variant-2 .xt-tile-pat {
  background:
    repeating-radial-gradient(circle at 82% 18%, transparent 0 11px, var(--tC) 11px 12px),
    linear-gradient(180deg, var(--tB), transparent 70%);
}
.delightful-public-shell--bone .xt-tile.variant-3 .xt-tile-pat {
  background:
    repeating-linear-gradient(90deg, var(--tA) 0 1px, transparent 1px 6px, var(--tC) 6px 7px, transparent 7px 15px);
}
.delightful-public-shell--bone .xt-tile.variant-4 .xt-tile-pat {
  background:
    radial-gradient(ellipse at 28% 72%, var(--tA), transparent 62%),
    radial-gradient(ellipse at 78% 26%, var(--tB), transparent 58%);
}
.delightful-public-shell--bone .xt-tile.variant-5 .xt-tile-pat {
  background:
    linear-gradient(118deg, transparent 34%, var(--tA) 50%, transparent 66%),
    linear-gradient(0deg, var(--tC), transparent 55%);
}
.delightful-public-shell--bone .xt-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.delightful-public-shell--bone .xt-more-head {
  margin: 1.9rem 0 0.5rem;
  font-family: var(--xt-font-label);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-linkrow {
  display: flex;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0;
  padding: 0.85rem 0;
}
.delightful-public-shell--bone .xt-linkrow-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--xt-white);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.35;
}
.delightful-public-shell--bone .xt-linkrow-title:hover,
.delightful-public-shell--bone .xt-linkrow-title:focus-visible {
  color: var(--xt-accent);
  text-decoration: none;
  background-image: linear-gradient(
    180deg,
    transparent 14%,
    var(--xt-accent-wash) 14%,
    var(--xt-accent-wash) 86%,
    transparent 86%
  );
  margin: 0 -0.22em;
  padding: 0 0.22em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.delightful-public-shell--bone .xt-linkrow-pub {
  flex: 0 0 auto;
  font-family: var(--xt-font-label);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-linkrow-date {
  flex: 0 0 auto;
  font-family: var(--xt-font-label);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-linkrow-issue {
  flex: 0 0 auto;
  font-family: var(--xt-font-label);
  font-size: 0.6rem;
}
.delightful-public-shell--bone .xt-linkrow--quoted {
  flex-wrap: wrap;
}
.delightful-public-shell--bone .xt-linkrow--quoted .xt-linkrow-title {
  flex: 1 1 0;
}
.delightful-public-shell--bone .xt-linkrow-break {
  flex: 1 0 100%;
  height: 0;
}
.delightful-public-shell--bone .xt-linkrow-quote {
  flex: 1 1 auto;
  margin: 0.45rem 0 0;
  max-width: 68ch;
  font-size: 0.83rem;
  line-height: 1.35;
  color: var(--xt-gray);
}
@media (max-width: 560px) {
  .delightful-public-shell--bone .xt-reading-room { padding: 0.5rem 0.85rem 2rem; }
  .delightful-public-shell--bone .xt-home { padding-bottom: 2rem; }
  .delightful-public-shell--bone .xt-sec-grid { gap: 1.4rem 1rem; }
  .delightful-public-shell--bone .xt-linkrow {
    flex-wrap: wrap;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
  }
  .delightful-public-shell--bone .xt-linkrow-title { flex: 1 0 100%; }
  .delightful-public-shell--bone .xt-linkrow--quoted .xt-linkrow-title { flex: 1 0 100%; }
  .delightful-public-shell--bone .xt-linkrow-quote { margin-top: 0.15rem; }
}
.delightful-public-shell--bone .xt-masthead .xt-lead {
  font-size: 1.12rem;
}
.delightful-public-shell--bone .xt-home-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin: 2.25rem 0 0;
  padding: 0 1rem;
}
.delightful-public-shell--bone .xt-home-figure {
  margin: 0;
  padding: 0;
}
.delightful-public-shell--bone .xt-home-figure img {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  border: 1px solid var(--xt-hairline);
}
.delightful-public-shell--bone .xt-home-intro {
  max-width: 31.25rem;
}
.delightful-public-shell--bone .xt-home-intro-heading {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
}
.delightful-public-shell--bone .xt-home-intro p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-home-intro p:last-child {
  margin-bottom: 0;
}
.delightful-public-shell--bone .xt-home-intro-signoff {
  margin-top: 1.15rem;
}
@media (min-width: 1400px) {
  .delightful-public-shell--bone .xt-home-body {
    grid-template-columns: 26rem minmax(0, 1fr);
    gap: 2rem;
  }
  .delightful-public-shell--bone .xt-home-intro {
    max-width: 36.25rem;
  }
}
.delightful-public-shell--bone .xt-home {
  padding-bottom: 2.5rem;
}
.delightful-public-shell--bone .xt-home-shelves {
  margin: 2.6rem 0 0;
  padding: 0 1rem;
}
.delightful-public-shell--bone .xt-home-shelves-head {
  margin: 0 0 0.9rem;
  font-family: var(--xt-font-label);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-home-shelf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.15rem 2.5rem;
  max-width: 68rem;
}
.delightful-public-shell--bone .xt-home-shelf > a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--xt-white);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.3;
}
.delightful-public-shell--bone .xt-home-shelf > a:hover .xt-home-shelf-name,
.delightful-public-shell--bone .xt-home-shelf > a:focus-visible .xt-home-shelf-name {
  color: var(--xt-accent);
}
.delightful-public-shell--bone .xt-home-shelf-name {
  flex: 0 1 auto;
}
.delightful-public-shell--bone .xt-home-shelf-count {
  flex: 0 0 auto;
  font-family: var(--xt-font-label);
  font-size: 0.62rem;
  color: var(--xt-dim);
  font-variant-numeric: tabular-nums;
}
.delightful-public-shell--bone .xt-home-shelf p {
  margin: 0.15rem 0 0;
  max-width: 40ch;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-home-sources {
  margin-top: 2.6rem;
}
.delightful-public-shell--bone .xt-home-sources-head {
  margin: 0 0 1.2rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  max-width: 40ch;
}
.delightful-public-shell--bone .xt-home-source-group + .xt-home-source-group {
  margin-top: 1.6rem;
}
.delightful-public-shell--bone .xt-home-source-kind {
  margin-bottom: 0.7rem;
}
.delightful-public-shell--bone .xt-home-source-domain {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--xt-font-label);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: var(--xt-dim);
  overflow-wrap: anywhere;
}
.delightful-public-shell--bone .xt-suggest-form,
.delightful-public-shell--bone .xt-suggest-sent {
  max-width: 34rem;
  margin: 1.6rem 0 0;
  padding: 0 1rem;
}
.delightful-public-shell--bone .xt-suggest-field {
  margin: 0 0 1.1rem;
}
.delightful-public-shell--bone .xt-suggest-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--xt-font-label);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-suggest-hint {
  margin-left: 0.4rem;
  letter-spacing: 0.04em;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-suggest-field input,
.delightful-public-shell--bone .xt-suggest-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  font-family: var(--xt-font-reader);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--xt-white);
  background: var(--xt-bg-deep);
  border: 1px solid var(--xt-rule);
  border-radius: 0;
}
.delightful-public-shell--bone .xt-suggest-field textarea {
  resize: vertical;
  min-height: 6rem;
}
.delightful-public-shell--bone .xt-suggest-field input:focus-visible,
.delightful-public-shell--bone .xt-suggest-field textarea:focus-visible {
  outline: 2px solid var(--xt-accent);
  outline-offset: 1px;
  border-color: var(--xt-accent);
}
.delightful-public-shell--bone .xt-suggest-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.delightful-public-shell--bone button.xt-signal-chip {
  cursor: pointer;
  background: transparent;
  font-family: var(--xt-font-label);
  font-size: 0.62rem;
  padding: 0.6rem 0.8rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.delightful-public-shell--bone .xt-suggest-error {
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--xt-accent);
  color: var(--xt-white);
  font-size: 0.95rem;
  line-height: 1.45;
}
.delightful-public-shell--bone .xt-suggest-fineprint {
  margin: 1.2rem 0 0;
  max-width: 46ch;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-suggest-sent p {
  margin: 0 0 0.8rem;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.5;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
.delightful-public-shell--bone.xt-shelf-page .xt-read-title { font-size: 1.12rem; }
.delightful-public-shell--bone.xt-shelf-page .xt-read-card--lead .xt-read-title { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.delightful-public-shell--bone.xt-shelf-page .xt-read-quote { font-size: 0.95rem; }
.delightful-public-shell--bone.xt-shelf-page .xt-read-card--lead .xt-read-quote { font-size: 1.05rem; }
.delightful-public-shell--bone.xt-shelf-page .xt-lead { font-size: 1.12rem; }
.delightful-public-shell--bone.xt-shelf-page .xt-linkrow-title { font-size: 1rem; }
.delightful-public-shell--bone .xt-suggest .xt-title,
.delightful-public-shell--bone.xt-shelf-page .xt-title,
.delightful-public-shell--bone .xt-masthead .xt-wordmark {
  font-family: 'Town20Inline', 'Avenir Next', 'Century Gothic', 'Futura', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.14;
  margin-right: -0.09em;
}
.delightful-public-shell--bone .xt-masthead .xt-wordmark {
  font-size: clamp(2.4rem, 4.4vw, 3.1rem);
  line-height: 1.05;
}
.delightful-public-shell--bone.xt-shelf-page .xt-sec-title {
  font-family: 'Town20Inline', 'Avenir Next', 'Century Gothic', 'Futura', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1.3rem;
  margin-right: -0.07em;
}
.delightful-public-shell--bone.xt-shelf-page .xt-read-title {
  font-weight: 400;
}
.delightful-public-shell--bone.xt-shelf-page .xt-sec-title--quiet {
  font-family: var(--xt-font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.68rem;
}
.delightful-public-shell--bone .xt-header {
  border-bottom: 0;
  background: linear-gradient(180deg, var(--xt-bg-deep) 0%, var(--xt-bg) 100%);
}
@media (min-width: 861px) {
  .delightful-public-shell--bone .xt-frame--detail {
    background: linear-gradient(180deg, var(--xt-bg-deep) 0, var(--xt-bg) 4.75rem);
  }
  .delightful-public-shell--bone .xt-frame--detail .xt-header {
    grid-column: 2;
    grid-row: 1;
    background: transparent;
    justify-content: flex-end;
    padding: 1.1rem 1rem 1.5rem;
  }
  .delightful-public-shell--bone .xt-frame--detail .xt-pane-tree {
    grid-column: 1;
    grid-row: 1 / 3;
    border-right: 1px solid var(--xt-rule);
    padding: 0;
  }
  .delightful-public-shell--bone .xt-rail-sticky {
    position: sticky;
    top: 5px;
    padding: 1.1rem 0 1.5rem;
  }
  .delightful-public-shell--bone .xt-frame--detail .xt-header-logo { display: none; }
  .delightful-public-shell--bone .xt-rail-logo {
    display: block;
    padding: 0 0.75rem;
    margin-bottom: 1.4rem;
    line-height: 0;
  }
  .delightful-public-shell--bone .xt-rail-logo img {
    display: block;
    height: 34px;
    width: auto;
  }
}
@media (max-width: 860px) {
  .delightful-public-shell--bone .xt-rail-logo { display: none; }
}
.delightful-public-shell--bone .xt-rail {
  display: none;
}
.delightful-public-shell--bone .xt-title {
  margin-bottom: 0.4rem;
}
.delightful-public-shell--bone .xt-lead {
  margin-top: 0;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-shelf-dateline {
  margin: 0.55rem 0 0;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--xt-dim);
}
.delightful-public-shell--bone .xt-frame--detail {
  height: auto;
  min-height: calc(100vh - 6px);
  grid-template-rows: auto 1fr auto;
}
.delightful-public-shell--bone .xt-frame--detail .xt-pane-main {
  overflow: visible;
}
.delightful-public-shell--bone .xt-frame--detail .xt-pane-tree {
  overflow: visible;
  align-self: stretch;
}
.delightful-public-shell--bone .xt-rail-meta {
  border-top: 0;
  margin-top: 2.25rem;
  padding: 0 0.75rem;
}
@media (max-width: 860px) {
  .delightful-public-shell--bone .xt-rail-meta { padding-bottom: 2.75rem; }
}
.delightful-public-shell--bone .xt-tree-signal-copy {
  margin: 0 0 0.7rem;
  font-family: var(--xt-font-reader);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-tree-signal .xt-signal-chip {
  display: inline-block;
  font-size: 0.62rem;
  padding: 0.6rem 0.8rem;
  letter-spacing: 0.1em;
}
.delightful-public-shell--bone .xt-tree-signal--suggest {
  margin-top: 1.4rem;
}
.delightful-public-shell--bone .xt-studio-note {
  margin-top: 1.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--xt-hairline);
}
.delightful-public-shell--bone .xt-studio-copy {
  margin: 0;
  font-family: var(--xt-font-reader);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--xt-gray);
}
.delightful-public-shell--bone .xt-studio-copy a {
  color: var(--xt-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.delightful-public-shell--bone .xt-studio-copy a:hover,
.delightful-public-shell--bone .xt-studio-copy a:focus-visible {
  color: var(--xt-white);
}
.delightful-public-shell--bone .xt-cmd-info:empty {
  display: none;
}
.delightful-public-shell--bone .xt-commandbar {
  border-top: 1px solid var(--xt-rule);
  background: transparent;
  padding: 1.35rem 1rem 1.5rem;
  font-size: 0.94rem;
}
.delightful-public-shell--bone .xt-reading-footer {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}
.delightful-public-shell--bone .xt-reading-footer-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.delightful-public-shell--bone .xt-reading-footer-credit {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--xt-gray);
  text-align: right;
}
.delightful-public-shell--bone .xt-reading-footer-legal {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--xt-dim);
  text-align: right;
}
.delightful-public-shell--bone .xt-signal-chip {
  padding: 0.7rem 1.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  border-color: var(--xt-accent);
  white-space: nowrap;
}
.delightful-public-shell--bone .xt-signal-chip:hover,
.delightful-public-shell--bone .xt-signal-chip:focus-visible {
  background: var(--xt-accent);
  color: var(--xt-bg-deep);
  border-color: var(--xt-accent);
  box-shadow: none;
}