:root {
  --bg: #0f1115;
  --card: #181b22;
  --line: #2a2f3a;
  --fg: #e7eaf0;
  --muted: #9aa3b2;
  --accent: #5b8cff;
  --danger: #ff6b6b;
}
* { box-sizing: border-box; }
/* The `hidden` attribute must win over any `display` an element's class sets (e.g. the reader
   shell's `display: grid` or the article overlay's `display: flex`), otherwise toggling
   `el.hidden` via show() does nothing and the element renders anyway. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
/* Reader header lays the title and the action cluster out on one row; the admin pages keep the
   bare single-child header, which this still centers fine. */
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ghost-link { color: var(--muted); text-decoration: none; font-size: 14px; }
.ghost-link:hover { color: var(--accent); }
header h1 { margin: 0; font-size: 20px; font-weight: 700; }
header h1 span { color: var(--muted); font-weight: 400; }
header h1 a { color: inherit; text-decoration: none; }
main { max-width: 880px; margin: 0 auto; padding: 24px; }
main.narrow { max-width: 460px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 8px; font-size: 16px; }
.muted { color: var(--muted); margin: 0 0 12px; }

input, select, button, textarea {
  font: inherit;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 9px 12px;
  background: #11141a;
  color: var(--fg);
}
textarea { width: 100%; resize: vertical; }
input::placeholder, textarea::placeholder { color: #5c6577; }
button {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.ghost { background: transparent; color: var(--fg); }
button.danger { color: var(--danger); border-color: var(--danger); }
button.danger.solid { background: var(--danger); color: #fff; } /* a destructive confirm */

/* A link styled as a button (e.g. the "Create your account" jump from sign-in). */
.button-link {
  display: inline-block; text-align: center; text-decoration: none;
  border-radius: 8px; padding: 9px 12px;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
}
.button-link:hover { filter: brightness(1.08); }

/* Username claim: the fixed @domain suffix sits inline after the local-part input. */
.suffix-row { display: flex; align-items: center; gap: 6px; }
.suffix-row input { flex: 1 1 auto; }
.suffix { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row input { flex: 1 1 160px; }
.row.spread { justify-content: space-between; }
.row.spread h2 { margin: 0; }
.check { color: var(--muted); display: flex; align-items: center; gap: 6px; }

.bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; color: var(--muted);
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }

.tag { color: var(--danger); font-size: 12px; border: 1px solid var(--danger); border-radius: 6px; padding: 0 5px; }

/* ── Admin: the apps' five-tab Admin section (Allowlist … Danger) ────────────── */
.tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.tabs .tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 7px 12px; border-radius: 8px;
}
.tabs .tab:hover { color: var(--fg); filter: none; }
.tabs .tab.active { background: var(--card); border-color: var(--line); color: var(--accent); }

/* Admin card lists — mirror the native apps' Admin screens (headline + badges + detail
   lines + actions), one card per allowlist entry / user / feedback / captured error. */
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-empty { padding: 8px 2px; }
.admin-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.admin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-title { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0; word-break: break-word; }
.badges { display: flex; gap: 6px; flex: none; }
.admin-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--muted); border-radius: 4px; padding: 1px 5px;
}
.admin-badge.accent { color: var(--accent); border-color: var(--accent); }
.admin-detail { color: var(--muted); font-size: 13px; word-break: break-word; }
.admin-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.admin-when { color: var(--muted); font-size: 12px; margin-left: auto; flex: none; }
.push-right { margin-left: auto; }
.fb-cat { color: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.fb-plat { color: var(--muted); font-size: 12px; }
.fb-msg { white-space: pre-wrap; word-break: break-word; }
.err-card .src { color: var(--accent); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.err-card .tgt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }

/* Site Health: stat cells (Database + error counts), then one entry per captured error. */
.stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat {
  flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px;
  background: #11141a; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.stat-num { font-size: 20px; font-weight: 700; }
.stat-num.bad { color: var(--danger); }

.err-msg { white-space: pre-wrap; word-break: break-word; }
.err-card .mono { word-break: break-all; }
.code {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: #11141a; border: 1px dashed var(--accent); color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); font-size: 12px; }
td.msg { white-space: pre-wrap; word-break: break-word; max-width: 32ch; }
.error { color: var(--danger); min-height: 1.2em; }
#auth .error { margin-top: 4px; }

/* Sign-in page: stacked credential form + passkey fallback. (Scoped to direct children so
   the admin "Your account" form, which wraps its inputs in a .row, is unaffected.) */
#auth #pw-form { display: flex; flex-direction: column; gap: 10px; }
#auth #pw-form > input, #auth #pw-form > button { width: 100%; }
.or { color: var(--muted); text-align: center; margin: 14px 0 10px; font-size: 13px; }
#passkey-btn { width: 100%; }

/* ── The shell (res/nav.js): rail + top bar + main column ─────────────────────── */
/* Two navigation tiers, the web form of the apps' bottom tabs → top bar: the left rail is
   primary (My Content · Account · Admin · Sign out), the bar across the top of the main column
   is secondary (the section's pages). Every signed-in page renders this shell. */
.shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  min-height: 100vh;
}
.rail {
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.shell-body { min-width: 0; display: flex; flex-direction: column; }
.brand { font-size: 18px; font-weight: 700; padding: 4px 10px 12px; }
.brand a { color: inherit; text-decoration: none; }
.brand span { color: var(--muted); font-weight: 400; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }

/* A rail row: leading icon + label, full-width, active = tinted pill. Element-agnostic (the
   sections are anchors, Sign out is a button). */
.rail .nav {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--fg);
  padding: 8px 10px;
  border-radius: 8px;
  width: 100%;
  font-size: 15px;
  text-decoration: none; cursor: pointer;
}
.rail .nav:hover { background: var(--card); filter: none; }
.rail .nav.active { background: var(--card); color: var(--accent); }
.rail .nav .nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; }
/* Sign out, pinned to the bottom of the rail. */
.rail-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }

/* Secondary: the section's pages as tabs, sticky across the top of the main column; the
   signed-in email and the "Posting as" switcher at its right end. */
.topbar {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar-tabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; }
.topbar .tab {
  flex: none;
  color: var(--muted); text-decoration: none;
  padding: 7px 12px; border-radius: 8px; border: 1px solid transparent;
  font-size: 14px; white-space: nowrap;
}
.topbar .tab:hover { color: var(--fg); }
.topbar .tab.active { background: var(--card); border-color: var(--line); color: var(--accent); }
.topbar-right {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.topbar-email {
  color: var(--muted); font-size: 12px;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .persona-switch select { font-size: 13px; padding: 3px 6px; max-width: 240px; }

/* Activity → Updates rows: feed title, "N new" count pill, view/dismiss actions. */
.update-row { flex-wrap: nowrap; }
.update-row .update-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.update-row .update-count {
  flex: none;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 1px 8px;
  font-size: 11px; font-weight: 700; line-height: 16px;
}

/* Footer pinned to the bottom of the rail. */
/* Pages inside the shell (account.html, personas.html, …) keep the account pages' narrow
   measure inside the main column. */
.reader-main .page-narrow { max-width: 460px; }

/* Environment chip (config.js ENVIRONMENT): flags a non-production deployment on every
   page — next to the reader's brand and the auth pages' header h1. */
.env-chip {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 1px 8px;
  border: 1px solid var(--danger); border-radius: 999px;
  color: var(--danger);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}

.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
.acct-who { display: flex; align-items: center; gap: 8px; color: var(--muted); min-width: 0; }
.acct-who strong { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.reader-main { min-width: 0; padding: 0 24px 24px; }
/* The page title row (the top bar above it is the sticky element). */
.content-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg);
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.content-head h2 { margin: 0; font-size: 20px; }

.item-list { display: flex; flex-direction: column; gap: 12px; }
.empty { padding: 24px 0; }
/* Feed item card — mirrors the native iOS/Android cards: a vertical stack of header
   (source + absolute date), a content area chosen by type (post blocks / image+caption /
   article), optional decorator+photo banners, then the action row. No read-dimming — seen
   state is expressed by the list-level "Seen" separator instead (like the apps). */
.item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.item-head { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px 8px; }
.item-source {
  font-size: 15px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.item-source { text-decoration: none; cursor: pointer; }
a.item-source:hover { color: var(--accent); }
.item-date { color: var(--muted); font-size: 12px; }
.item-meta { color: var(--muted); font-size: 13px; }

/* Full-bleed hero at the top of the content area — aspect-hugging, never cropped. */
.item-hero {
  display: block; width: 100%; height: auto; max-height: 560px;
  object-fit: contain; background: #11141a; cursor: pointer;
}

/* ARTICLE: title (3 lines) + summary (3 lines), both HTML-stripped. */
.item-body { display: flex; flex-direction: column; gap: 4px; padding: 8px 14px 10px; cursor: pointer; }
.item-title {
  margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.item-desc {
  margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* IMAGE: the title acts as a caption under the hero (2 lines). */
.item-caption {
  margin: 0; padding: 8px 14px 10px; color: var(--muted); font-size: 13px; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* POST: member-authored blocks rendered natively (mirrors the apps' BlockList). */
.item-blocks { padding: 6px 14px 8px; }
.blk-title { font-size: 18px; font-weight: 700; margin: 10px 0 4px; }
.blk-text { font-size: 15px; line-height: 1.55; margin: 6px 0; white-space: pre-wrap; word-wrap: break-word; }
.blk-text :where(p, ul, ol, blockquote) { margin: 6px 0; }
.blk-text a { color: var(--accent); }
.blk-img {
  display: block; width: 100%; height: auto; max-height: 560px;
  object-fit: contain; border-radius: 8px; margin: 8px 0; background: #11141a;
}
.blk-caption { color: var(--muted); font-size: 12px; font-style: italic; margin: -2px 0 8px; }
.blk-quote { border-left: 3px solid var(--line); padding-left: 12px; margin: 10px 0; }
.blk-quote-text { font-style: italic; font-size: 16px; }
.blk-quote-attr { color: var(--muted); font-size: 12px; margin-top: 2px; }
.blk-card {
  display: block; background: #11141a; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; margin: 8px 0; text-decoration: none; color: inherit;
}
a.blk-card:hover { border-color: var(--accent); }
.blk-kicker { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.blk-link-title { color: var(--accent); font-size: 15px; font-weight: 500; margin-top: 3px; }
.blk-sub { color: var(--muted); font-size: 12px; margin-top: 2px; word-break: break-word; }
.blk-card img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: 6px; margin: 6px 0; }

/* Decorator (event/reminder) + photo-request banners. */
.item-banner { margin: 6px 14px 0; background: #11141a; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

/* Action row: save / archive / repost, then a trailing share. */
.item-actions { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-top: 1px solid var(--line); }
.item-spacer { flex: 1 1 auto; }
button.ghost.on { color: var(--accent); }
.item-share { color: var(--muted); }

/* Divider between unseen (top) and already-seen (bottom) items in feed views. */
.seen-sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 4px 2px; }
.seen-sep::before, .seen-sep::after { content: ""; height: 1px; background: var(--line); flex: 1 1 auto; }
button.small { padding: 5px 10px; font-size: 13px; }

.chan-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.chan-row input { flex: 1 1 auto; }
#sub-table td .mono { margin-top: 2px; }
#sub-table .check { display: inline-flex; margin-right: 12px; }

/* ── My Content (create.html, posts.html, my-feeds.html): the apps' member creator section ─────────────────── */
.stack { display: flex; flex-direction: column; gap: 10px; }

/* A list entry (post / personal feed / shared feed / person) inside a card. */
.entry-row {
  padding: 12px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.entry-row:last-child { border-bottom: none; padding-bottom: 2px; }
.entry-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entry-title { font-weight: 600; }
.entry-when { color: var(--muted); font-size: 12px; margin-left: auto; }
.entry-summary {
  color: var(--muted); font-size: 14px; margin: 0; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* A message body (Account → Messages): full text, no line clamp. */
.msg-body { font-size: 14px; white-space: pre-wrap; word-break: break-word; }

.badge {
  font-size: 12px; border: 1px solid var(--line); border-radius: 6px;
  padding: 0 6px; color: var(--muted); text-transform: capitalize; flex: none;
}
.badge.accent { color: var(--accent); border-color: var(--accent); }
.badge.draft { color: #ffb454; border-color: #8a6a34; }
.chip {
  font-size: 12px; background: #11141a; border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px; color: var(--muted); flex: none;
}
.counter { color: var(--muted); font-size: 12px; text-align: right; }
.img-preview { max-width: 260px; max-height: 200px; border-radius: 8px; display: block; }
.img-preview.small { max-width: 140px; max-height: 100px; }
.feed-url a { color: var(--muted); }
.feed-url a:hover { color: var(--accent); }

/* Rule builder: one dashed box per AND-group, "— or —" separators between groups. */
.rule-group {
  border: 1px dashed var(--line); border-radius: 8px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.or-sep { color: var(--muted); text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
.cond-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.cond-row input { flex: 1 1 140px; }

/* Decorator (event / reminder attachment) inside the new-post form. */
.decorator { border-top: 1px dashed var(--line); padding-top: 10px; }
.muted-label { color: var(--muted); font-size: 13px; flex: none; }

/* The unified feeds page: section labels inside cards + the new-feed type picker. */
.section-label {
  color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 6px;
}
.feed-type-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 10px 12px;
}
.feed-type-choice .muted { font-size: 12px; font-weight: normal; }

/* Direct-feed members panel + People feed picker. */
.members-panel {
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.member-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.check-grid { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Pop-up dialogs (res/dialog.js) reuse the reader overlay with a narrower panel: the
   management pages create, edit, confirm and join in one of these, never in place. */
.reader-panel.dialog { max-width: 460px; padding-bottom: 22px; }
.reader-panel.dialog.wide { max-width: 640px; }
.reader-panel.dialog .reader-head { margin-bottom: 12px; }
.dialog-title { margin: 0; font-size: 18px; }
.dialog-body .row input { flex: 1 1 140px; }
.dialog-actions { justify-content: flex-end; margin-top: 12px; }
.dialog-section { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.reader-panel.dialog .error:empty { display: none; }

/* A management list (Feeds): one row per item — its facts on the left, Edit / Delete on
   the right — inside a single card with no section headings. */
.list-card { padding: 4px 20px; }
.list-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: none; }
.list-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.list-meta { display: flex; flex-direction: column; gap: 4px; }
.list-meta .entry-summary { font-size: 13px; }
.list-actions { flex: none; display: flex; gap: 6px; align-items: center; padding-top: 2px; }
.list-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }
.list-empty, .list-ok { padding: 12px 0; }
.list-row .avatar-block { flex: none; padding-top: 2px; }
.list-row .avatar-sm { width: 40px; height: 40px; margin: 0; }
.list-row .avatar-sm svg { width: 20px; height: 20px; }
.list-row .status-pill { flex: none; }
.list-row a.domain-name { font-size: 16px; }
.chip.ok { color: #7bd88f; border-color: #2f5a3a; }
/* Inline facts (Domains): label + value pairs across one line. */
.list-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fact-inline { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 13px; }
.fact-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-value.dim { color: var(--muted); }
.fact-value.accent { color: var(--accent); font-weight: 600; }
/* A button that reads as a link — the row's one next action. */
button.linkish {
  background: none; border: none; padding: 0; color: var(--accent);
  font-size: 13px; cursor: pointer; text-align: left;
}
button.linkish:hover { filter: none; text-decoration: underline; }
button.linkish[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.dialog-body .search-bar { margin-bottom: 0; }
.dialog-body .list-row.result { padding: 10px 0 4px; border-bottom: none; }
.dialog-body .list-actions { align-items: center; }
.dialog-body .steps { margin-bottom: 4px; }

/* Identity (identity.html): the public face, centred like the /u/ profile card. */
.identity-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 6px; }
.identity-card .avatar, .identity-card .avatar-fallback { width: 96px; height: 96px; margin: 0 0 12px; }
.identity-card .avatar-fallback { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.identity-handle { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.identity-bio { margin: 6px 0 0; max-width: 520px; font-size: 15px; line-height: 1.5; }
.identity-note { margin: 8px 0 12px; max-width: 520px; }
.identity-link { overflow-wrap: anywhere; max-width: 100%; }
.identity-doors { justify-content: center; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
#identity .feed-list li { display: flex; align-items: center; gap: 8px; }
.chip.pending { color: #ffb454; border-color: #8a6a34; }
.feed-url { display: flex; align-items: center; gap: 8px; min-width: 0; }
.feed-url a { overflow-wrap: anywhere; }
.feed-url .copy { padding: 1px 7px; font-size: 12px; }

/* Article overlay — a centered reading panel over a dimmed backdrop. */
body.reader-open { overflow: hidden; }
.reader-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  display: flex; justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.reader-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  width: 100%; max-width: 720px; height: max-content;
  padding: 22px 26px 32px;
}
.reader-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.reader-panel h1 { margin: 0 0 6px; font-size: 26px; line-height: 1.25; }
.reader-panel #reader-extract { margin: 14px 0 0; }
.reader-content { margin-top: 18px; font-size: 16px; line-height: 1.7; word-break: break-word; }
.reader-content img { max-width: 100%; height: auto; border-radius: 8px; }
.reader-content a { color: var(--accent); }
.reader-content pre { overflow-x: auto; background: #11141a; padding: 12px; border-radius: 8px; }
.reader-content h1, .reader-content h2, .reader-content h3 { line-height: 1.3; }

/* ── Public profile page (/u/{handle}) — the native member card as a shareable web page ─── */
.profile-card { text-align: center; padding: 28px 24px 30px; }
.avatar,
.avatar-fallback {
  width: 112px; height: 112px; border-radius: 50%;
  margin: 0 auto 16px;
  background: #11141a; border: 1px solid var(--line);
}
.avatar { object-fit: cover; display: block; }
.avatar-fallback { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.avatar-fallback svg { width: 56px; height: 56px; }
.avatar-sm { width: 56px; height: 56px; margin: 0; }
.avatar-sm svg { width: 28px; height: 28px; }
.profile-username { font-size: 20px; font-weight: 700; margin: 0 0 12px; word-break: break-word; }
.profile-bio { color: var(--fg); white-space: pre-wrap; word-break: break-word; margin: 0; }
.profile-bio.empty { color: var(--muted); font-style: italic; }
.profile-website { margin: 12px 0 0; }
.profile-website a { color: var(--accent); text-decoration: none; word-break: break-all; }
.profile-website a:hover { text-decoration: underline; }
.profile-feeds { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.profile-feeds h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.profile-feeds ul { list-style: none; margin: 0; padding: 0; }
.profile-feeds li { padding: 4px 0; word-break: break-word; }
.profile-feeds a { color: var(--accent); text-decoration: none; }
.profile-feeds a:hover { text-decoration: underline; }
.profile-feeds .feed-kind { margin-left: 8px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; vertical-align: 1px; }
.profile-follow { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.profile-follow form { text-align: left; margin-top: 12px; }
.profile-follow .row { display: flex; gap: 8px; }
.profile-follow input { flex: 1; }
.profile-foot { text-align: center; margin-top: 4px; }
.profile-foot a { color: var(--muted); text-decoration: none; font-size: 13px; }
.profile-foot a:hover { color: var(--accent); }

@media (max-width: 760px) {
  /* The rail collapses to a horizontal strip above the top bar (brand, then the sections and
     Sign out in one wrapping row); the top bar keeps scrolling sideways. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .rail {
    position: static; height: auto; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--line);
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 12px 12px 8px;
  }
  .brand { width: 100%; padding-bottom: 8px; }
  .nav-group { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; }
  .rail .nav { width: auto; padding: 6px 10px; font-size: 14px; }
  .rail-foot { margin: 0 0 0 auto; padding: 0; border: none; }
  .topbar { padding: 8px 16px; flex-wrap: wrap; }
  .topbar-right { margin-left: 0; width: 100%; }
  .reader-main { padding: 0 16px 16px; }
}

/* My Content (create.html, posts.html, my-feeds.html): the composer, the post list and the
   feed list sit in a wider column than the account pages, and the composer card lights up as
   a drop target. */
.reader-main .page-content { max-width: 720px; }
.composer.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; }
.composer .drop-hint { margin: 0; font-size: 13px; }
.type-picker { margin: 8px 0; }
/* Feeds' new-feed wizard: the kind choices read as cards, not solid buttons, so each blurb
   stays legible; the accent arrives on hover. */
.feed-type-choice { background: transparent; color: var(--fg); border-color: var(--line); }
.feed-type-choice:hover { border-color: var(--accent); filter: none; }
.feed-type-choice .muted { color: var(--muted); }
.persona-switch { display: flex; align-items: center; gap: 6px; }
.persona-switch select { max-width: 220px; }
.ghost-link { color: var(--accent); font-size: 13px; }

/* ── Domain settings / account / personas pages (prodSite/README.md#domain-design §4.E) ─────── */
.choice-group { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.choice-group.compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
.choice { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.choice input[type="radio"] { margin-top: 4px; flex: none; }
.choice > span { display: flex; flex-direction: column; }
.choice-group.compact .choice > span { flex-direction: row; }
.muted-line { color: var(--muted); font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field input, .field textarea { width: 100%; }
.table-wrap { overflow-x: auto; margin: 6px 0 10px; }
.dns-table td, .dns-table th { padding: 6px 8px; font-size: 13px; }
.dns-table .wrap { word-break: break-all; }
.snippets { margin: 8px 0 12px; }
.snippets .tabs { margin-bottom: 8px; padding-bottom: 6px; }
.snippet { position: relative; }
.snippet .copy { position: absolute; top: 6px; right: 6px; }
.snippet pre { margin: 0; padding: 12px 84px 12px 14px; background: #11141a; border: 1px solid var(--line);
  border-radius: 8px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.feed-list { margin: 0 0 8px; padding-left: 18px; }
.feed-list li { word-break: break-all; }
.feed-list a { color: var(--accent); text-decoration: none; }
.feed-list a:hover { text-decoration: underline; }
.button-link.ghost-button { background: transparent; color: var(--fg); border-color: var(--line); }
/* Personas: the handle in a list row; Edit's avatar line. */
.persona-handle { font-size: 15px; overflow-wrap: anywhere; }
.dialog-body .avatar-actions { gap: 10px; }
.dialog-body .avatar-actions .avatar-block { flex: none; }
#mint-form .row input { flex: 1 1 200px; }
/* Create Post's Posting-as card: one line — the label + handle or the switcher. */
.posting-as { padding: 12px 18px; }
.posting-as .row { margin: 0; align-items: baseline; }
.posting-as .persona-switch select { max-width: 320px; }
.danger-text { color: var(--danger); }
#pw-form input, #tz-form input { width: 100%; }

/* ── Domains (domains.html + its New Domain pop-up, domain.html) ────────────────────────── */
/* The shell centres `main` with auto margins inside a flex column, which also shrinks it to
   its content; these pages want a fixed measure (title row and cards flush) instead. */
.reader-main.wide { width: 100%; max-width: 768px; }
/* The title row: a breadcrumb back to the list on the sub-pages, the section's actions
   (Claim / Buy) at the right on the list, the domain's status pill on its page. */
.content-head .crumb { color: var(--muted); text-decoration: none; font-weight: 500; }
.content-head .crumb:hover { color: var(--accent); }
.content-head .crumb-sep { color: var(--line); margin: 0 8px; font-weight: 400; }
.content-head .row { flex: none; }
.button-link.small { padding: 5px 10px; font-size: 13px; }

/* A status pill: one word, toned. */
.status-pill {
  flex: none; display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 999px; padding: 2px 8px; line-height: 16px;
  color: var(--muted); background: #11141a; border: 1px solid var(--line);
}
.status-pill.ok { color: #7bd88f; border-color: #2f5a3a; background: #14201a; }
.status-pill.warn { color: #ffb454; border-color: #6b4d1f; background: #221b12; }
.status-pill.bad { color: var(--danger); border-color: #6b2f2f; background: #241416; }

/* The list: one card per domain — name + status + actions on the first row, then a strip of
   facts (Handle · Website · Feeds · Renews). */
.domain-name { color: var(--fg); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.domain-name:hover { color: var(--accent); }

.empty-state .row { justify-content: center; }

/* The search bar (buy) and the claim input: one wide field with its button. */
.search-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.search-bar input { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 11px 14px; }
.search-bar button { flex: none; padding: 11px 18px; }
.list-row.result.taken .domain-name { color: var(--muted); }
.domain-price { color: var(--accent); font-weight: 700; }
.alt-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.alt-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--card); color: var(--fg); border: 1px solid var(--line);
  padding: 10px 14px;
}
.alt-row:hover { border-color: var(--accent); filter: none; }

/* Claim ceremony: three steps across the top, the active one lit. */
.steps {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; gap: 6px; counter-reset: step;
}
.steps li {
  flex: 1 1 0; display: flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; border: 1px solid var(--line);
}
.steps li.active { color: var(--fg); border-color: var(--accent); }
.steps li.active::before { background: var(--accent); border-color: var(--accent); color: #fff; }
.steps li.done { color: var(--muted); }
.steps li.done::before { content: "✓"; color: #7bd88f; border-color: #2f5a3a; }

@media (max-width: 760px) {
  .content-head { flex-wrap: wrap; }
  .steps li { padding: 8px; font-size: 12px; }
}