/* ============================================================
   DEVOPSER CRM — design direction B "Signal Console"
   Technical terminal / structural utilitarian.
   Shared stylesheet for the magic-link landing (/) and the
   submissions dashboard. Loaded as an external /static asset
   to satisfy the app's strict CSP (style-src 'self').
   Fonts: Martian Mono (display) · Spline Sans Mono (mono) · IBM Plex Sans (body)
   ============================================================ */
:root {
  /* — canvas / structure — */
  --bg:            #08090b;
  --bg-panel:      #0d0f12;
  --bg-inset:      #101317;
  --bg-hover:      #12151a;
  --bg-sel:        #14180f;                 /* signal-tinted selection */
  --rule:          #1c2026;
  --rule-strong:   #2a3038;
  --grid-faint:    rgba(198,255,58,.035);

  /* — ink — (lightened for legibility on near-black) */
  --ink:           #eff2f5;
  --ink-dim:       #b2bac3;   /* secondary text — was #8b939c */
  --ink-faint:     #828b95;   /* labels — was #565d66 */
  --ink-ghost:     #4c545d;   /* placeholder/disabled — was #353b42 */

  /* — single vivid signal accent: ACID GREEN — */
  --signal:        #c6ff3a;
  --signal-deep:   #9fd400;
  --signal-glow:   rgba(198,255,58,.16);
  --signal-wash:   rgba(198,255,58,.07);
  --signal-ink:    #0a0d04;

  /* — status — */
  --ok:            #c6ff3a;
  --warn:          #ffb74d;
  --warn-wash:     rgba(255,183,77,.1);
  --danger:        #ff5470;
  --danger-wash:   rgba(255,84,112,.1);

  --radius:        3px;
  --gut:           clamp(16px, 4vw, 40px);
  --nav-w:         210px;
  --list-w:        clamp(340px, 32vw, 420px);

  --font-display:  'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-mono:     'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-body:     'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--signal); color: var(--signal-ink); }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 100px; }
::-webkit-scrollbar-track { background: transparent; }

/* shared brand glyph + pulse dot */
.glyph {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.glyph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--signal-wash), transparent 60%);
}
.glyph svg { display: block; position: relative; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); flex: none;
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--signal-glow); }
  70%  { box-shadow: 0 0 0 6px rgba(198,255,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(198,255,58,0); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================
   SYSTEM BAR (shared chrome on the landing)
   =========================================================== */
.sysbar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: 38px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 var(--gut);
  background: rgba(8,9,11,.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .04em;
}
.sysbar b { color: var(--ink-dim); font-weight: 500; }
.sysbar .sep { color: var(--ink-ghost); }
.sysbar .right { margin-left: auto; display: flex; gap: 18px; }
.sysbar .sig { color: var(--signal); }

/* ===========================================================
   LANDING / MAGIC-LINK SIGN-IN
   =========================================================== */
.frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  padding-top: 38px;
  background-image:
    linear-gradient(var(--grid-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-faint) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
@media (max-width: 940px) {
  .frame { grid-template-columns: 1fr; }
  .frame .ledger { display: none; }
}

.auth {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vw, 96px) var(--gut);
  border-right: 1px solid var(--rule);
  position: relative;
}
.auth::before {
  content: ""; position: absolute; top: 28px; left: var(--gut);
  width: 9px; height: 9px;
  border-top: 1px solid var(--signal);
  border-left: 1px solid var(--signal);
  opacity: .7;
}

.lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 15px;
  letter-spacing: -.02em; text-transform: lowercase;
}
.wordmark .tld { color: var(--signal); }
.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 26px 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.auth h1 {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.08; letter-spacing: -.03em;
  margin: 0 0 12px;
}
.blink { color: var(--signal); animation: caret 1.05s steps(2,end) infinite; font-weight: 500; }
@keyframes caret { 50% { opacity: 0; } }
.lede { color: var(--ink-dim); max-width: 42ch; margin: 0 0 34px; font-size: 14px; }

.states { display: grid; gap: 22px; max-width: 460px; }
.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-panel);
  position: relative;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.card-head .num { color: var(--signal); font-weight: 600; }
.state-tag {
  margin-left: auto; font-size: 9.5px; padding: 2px 7px;
  border: 1px solid var(--rule-strong); border-radius: 100px;
  color: var(--ink-dim); letter-spacing: .1em;
}
.state-tag.live { color: var(--signal); border-color: rgba(198,255,58,.4); }
.card-body { padding: 18px 16px 20px; }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 8px;
}
.field-shell {
  display: flex; align-items: stretch;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-inset);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field-shell:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-wash); }
.field-shell .at {
  display: grid; place-items: center; width: 38px;
  color: var(--ink-faint); font-family: var(--font-mono);
  border-right: 1px solid var(--rule); font-size: 13px;
}
.field-shell input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--ink); font-family: var(--font-mono);
  font-size: 14px; padding: 12px 14px; letter-spacing: .01em;
}
.field-shell input.code { letter-spacing: .42em; text-align: center; font-size: 18px; }
.field-shell input::placeholder { color: var(--ink-ghost); letter-spacing: normal; }

.btn {
  margin-top: 16px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 18px;
  border: 1px solid var(--signal); border-radius: var(--radius);
  background: var(--signal); color: var(--signal-ink);
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  transition: transform .08s ease, box-shadow .14s ease, background .14s ease, opacity .14s;
  box-shadow: 0 0 0 0 var(--signal-glow);
}
.btn:hover { box-shadow: 0 6px 26px -8px var(--signal-glow); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .kbd { font-size: 10px; border: 1px solid rgba(10,13,4,.35); border-radius: 3px; padding: 1px 5px; opacity: .8; }
.btn .arr { transition: transform .14s ease; }
.btn:hover .arr { transform: translateX(3px); }

.meta-row {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono);
}
.meta-row .badge {
  color: var(--signal); border: 1px solid rgba(198,255,58,.3);
  border-radius: 3px; padding: 1px 6px; font-size: 10px; letter-spacing: .08em;
}

/* google/oauth divider + button */
.or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-ghost);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.oauth-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px; text-decoration: none;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--bg-inset); color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  transition: border-color .14s, color .14s;
}
.oauth-btn:hover { border-color: var(--rule-strong); color: var(--ink); }

/* status / error messages */
.note { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; min-height: 1em; }
.note.err { color: var(--danger); }
.note.ok  { color: var(--signal); }

/* trace (confirmation animation) */
.env { display: flex; align-items: center; gap: 14px; padding: 4px 2px 16px; }
.env-icon {
  width: 42px; height: 42px; flex: none;
  border: 1px solid rgba(198,255,58,.4); border-radius: var(--radius);
  background: var(--signal-wash); display: grid; place-items: center; position: relative;
}
.env-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(90deg, transparent, var(--signal-glow), transparent);
  background-size: 200% 100%; animation: scan 2.4s linear infinite;
}
@keyframes scan { 0% { background-position: 200% 0; } 100% { background-position: -120% 0; } }
.confirm h3 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 3px; letter-spacing: -.02em; }
.confirm .sub { color: var(--ink-dim); font-size: 13px; margin: 0; }
.confirm .sub b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }

.confirm-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.ghost-btn {
  background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 13px; border-radius: var(--radius);
  transition: border-color .14s ease, color .14s ease;
}
.ghost-btn:hover { border-color: var(--signal); color: var(--ink); }
.ghost-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.auth-foot {
  margin-top: 38px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint);
  display: flex; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--rule); padding-top: 16px; max-width: 460px;
}
.auth-foot a { color: var(--ink-dim); text-decoration: none; }
.auth-foot a:hover { color: var(--signal); }
.auth-foot .ver { margin-left: auto; color: var(--ink-ghost); }

/* right: ledger / proof column */
.ledger {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 80px) var(--gut);
  display: flex; flex-direction: column; justify-content: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 27px, var(--rule) 27px 28px),
    var(--bg);
}
.ledger::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(620px 420px at 78% 18%, var(--signal-wash), transparent 70%);
  pointer-events: none;
}
.ledger-inner { position: relative; max-width: 420px; }
.ledger-title {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
}
.ledger-title::before { content: "▸"; color: var(--signal); }
.ticker { border: 1px solid var(--rule); border-radius: var(--radius); background: rgba(13,15,18,.6); overflow: hidden; }
.ticker-head, .ticker-row { display: grid; grid-template-columns: 84px 1fr 52px; gap: 10px; padding: 9px 14px; }
.ticker-head {
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-ghost);
}
.ticker-row { align-items: center; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; }
.ticker-row:last-child { border-bottom: 0; }
.ticker-row .form { color: var(--signal); }
.ticker-row .who { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker-row .who span { color: var(--ink-faint); }
.ticker-row .ago { color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.ticker-row:first-of-type { animation: flashin .6s ease; }
@keyframes flashin { from { background: var(--signal-wash); } to { background: transparent; } }
.stat-grid {
  margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.stat { padding: 16px 14px; border-right: 1px solid var(--rule); }
.stat:last-child { border-right: 0; }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat .n em { color: var(--signal); font-style: normal; }
.stat .l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
.ledger-foot { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); line-height: 1.7; }
.ledger-foot code { color: var(--signal); }

/* state visibility helper (driven by external JS) */
[data-state-hidden] { display: none !important; }

/* ===========================================================
   DASHBOARD — submissions inbox
   =========================================================== */
.app { display: grid; grid-template-columns: var(--nav-w) var(--list-w) 1fr; grid-template-rows: 100vh; height: 100vh; overflow: hidden; }
body.is-app { overflow: hidden; height: 100%; }

.nav {
  border-right: 1px solid var(--rule); background: var(--bg-panel);
  display: flex; flex-direction: column; min-width: 0;
  background-image:
    linear-gradient(var(--grid-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-faint) 1px, transparent 1px);
  background-size: 24px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 1px solid var(--rule); }
.brand .glyph { width: 28px; height: 28px; background: var(--bg-inset); }
.brand .wm { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: -.02em; text-transform: lowercase; }
.brand .wm .tld { color: var(--signal); }

.op { margin: 12px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-inset); display: flex; align-items: center; gap: 9px; }
.op .av {
  width: 24px; height: 24px; flex: none; border-radius: var(--radius);
  background: var(--signal-wash); border: 1px solid rgba(198,255,58,.3);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--signal);
}
.op .meta { min-width: 0; }
.op .meta .nm { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op .meta .em { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-sect { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-ghost); padding: 16px 18px 7px; }
.nav-list { list-style: none; margin: 0; padding: 0 8px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: var(--radius); color: var(--ink-dim); font-size: 13px;
  text-decoration: none; position: relative; transition: background .12s ease, color .12s ease;
}
.nav-item .ic { width: 16px; display: grid; place-items: center; opacity: .85; }
.nav-item .ct { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 100px; padding: 0 6px; line-height: 16px; }
.nav-item .kb { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-ghost); }
.nav-item .mono { font-family: var(--font-mono); font-size: 12px; }
.nav-item:hover { background: var(--bg-hover); color: var(--ink); }
.nav-item:focus-visible { outline: 1px solid var(--signal); outline-offset: -1px; }
.nav-item.active { background: var(--bg-sel); color: var(--ink); }
.nav-item.active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 2px; background: var(--signal); border-radius: 2px; }
.nav-item.active .ic { color: var(--signal); opacity: 1; }
.nav-item.active .ct { color: var(--signal); border-color: rgba(198,255,58,.35); }
.dot-live { color: var(--signal); }
.dot-idle { color: var(--ink-ghost); }
.nav-spacer { flex: 1; }
.nav-foot { border-top: 1px solid var(--rule); padding: 12px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.nav-foot .dot { width: 6px; height: 6px; }

.colhead { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--rule); background: var(--bg-panel); }
.colhead h2 { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: -.01em; margin: 0; }
.pill { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 100px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.pill.sig { color: var(--signal); border-color: rgba(198,255,58,.35); }
.pill.push { margin-left: auto; }

.list { border-right: 1px solid var(--rule); display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.list-tools { height: 38px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--rule); background: var(--bg-panel); }
.search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--bg-inset); border: 1px solid var(--rule); border-radius: var(--radius); padding: 5px 9px; transition: border-color .12s ease; }
.search:focus-within { border-color: var(--rule-strong); }
.search input { flex: 1; background: transparent; border: 0; outline: 0; min-width: 0; color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; }
.search input::placeholder { color: var(--ink-ghost); }
.search .slash { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0 5px; }
.seg { display: flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.seg button { background: transparent; border: 0; color: var(--ink-faint); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; padding: 5px 9px; text-transform: uppercase; border-right: 1px solid var(--rule); transition: background .12s, color .12s; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--signal-wash); color: var(--signal); }
.seg button:hover:not(.on) { color: var(--ink-dim); }

.rows { overflow-y: auto; flex: 1; }
.row { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--rule); cursor: pointer; position: relative; transition: background .1s ease; }
.row:hover { background: var(--bg-hover); }
.row.sel { background: var(--bg-sel); }
.row.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--signal); }
.row .lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-top: 5px; box-shadow: 0 0 8px var(--signal-glow); }
.row.read .lamp { background: var(--rule-strong); box-shadow: none; }
.row.spam .lamp { background: var(--danger); box-shadow: 0 0 8px var(--danger-wash); }
.row .main { min-width: 0; }
.row .l1 { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.row .form { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--signal); }
.row.read .form { color: var(--ink-dim); }
.row.spam .form { color: var(--danger); }
.row .who { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .snip { color: var(--ink-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.unread .snip { color: var(--ink-dim); }
.row .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.row .ts { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 100px; border: 1px solid var(--rule-strong); color: var(--ink-faint); }
.tag.new { color: var(--signal); border-color: rgba(198,255,58,.4); background: var(--signal-wash); }
.tag.spam { color: var(--danger); border-color: rgba(255,84,112,.4); background: var(--danger-wash); }
.tag.flag { color: var(--warn); border-color: rgba(255,183,77,.4); background: var(--warn-wash); }
.list-foot { flex: none; height: 30px; display: flex; align-items: center; gap: 14px; padding: 0 14px; border-top: 1px solid var(--rule); background: var(--bg-panel); font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.list-foot b { color: var(--ink-dim); font-weight: 500; }
.list-foot .push { margin-left: auto; }

/* empty state */
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; }
.empty .big { font-family: var(--font-display); font-size: 16px; color: var(--ink-dim); }
.empty .sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); max-width: 36ch; line-height: 1.6; }
.empty code { color: var(--signal); }

/* detail pane */
.detail { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.detail-top { flex: none; border-bottom: 1px solid var(--rule); background: var(--bg-panel); }
.endpoint { display: flex; align-items: stretch; height: 48px; border-bottom: 1px solid var(--rule); background: linear-gradient(90deg, var(--signal-wash), transparent 55%); }
.endpoint .lab { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-right: 1px solid var(--rule); white-space: nowrap; }
.endpoint .lab .meth { color: var(--signal); font-weight: 700; border: 1px solid rgba(198,255,58,.4); border-radius: 3px; padding: 1px 5px; letter-spacing: .04em; }
.endpoint .url { flex: 1; display: flex; align-items: center; gap: 0; padding: 0 14px; min-width: 0; overflow: hidden; font-family: var(--font-mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.endpoint .url .scheme { color: var(--ink-faint); }
.endpoint .url .host { color: var(--ink-dim); }
.endpoint .url .id { color: var(--signal); font-weight: 600; }
.endpoint .copy { display: flex; align-items: center; gap: 8px; padding: 0 16px; background: transparent; border: 0; border-left: 1px solid var(--rule); color: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: background .12s, color .12s; white-space: nowrap; }
.endpoint .copy:hover { background: var(--signal-wash); color: var(--signal); }
.endpoint .copy:focus-visible { outline: 1px solid var(--signal); outline-offset: -2px; }
.endpoint .copy.copied { color: var(--signal); }

.dhead { padding: 16px 20px; }
.dhead .crumbs { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); letter-spacing: .04em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dhead .crumbs .form { color: var(--signal); }
.dhead .crumbs .sep { color: var(--ink-ghost); }
.dhead .subj { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; margin: 0 0 12px; }
.dhead .ident { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dhead .ava { width: 36px; height: 36px; border-radius: var(--radius); background: var(--signal-wash); border: 1px solid rgba(198,255,58,.3); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; color: var(--signal); }
.dhead .person .nm { font-weight: 500; font-size: 14px; }
.dhead .person .em { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); }
.dhead .actions { margin-left: auto; display: flex; gap: 7px; }
.act { background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-dim); border-radius: var(--radius); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; display: flex; align-items: center; gap: 6px; transition: border-color .12s, color .12s, background .12s; text-decoration: none; }
.act:hover { border-color: var(--signal); color: var(--ink); }
.act:focus-visible { outline: 1px solid var(--signal); outline-offset: 1px; }
.act.primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); font-weight: 600; }
.act.primary:hover { background: var(--signal-deep); }
.act.danger:hover { border-color: var(--danger); color: var(--danger); }

.detail-body { overflow-y: auto; flex: 1; padding: 4px 20px 24px; }
.meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 14px 0 20px; }
.meta-cell { padding: 11px 13px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.meta-cell:nth-child(4n) { border-right: 0; }
.meta-cell:nth-last-child(-n+4) { border-bottom: 0; }
.meta-cell .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.meta-cell .v { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-cell .v.ok { color: var(--signal); }
.meta-cell .v.lo { color: var(--ink-dim); }
.sect-rule { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 12px; }
.sect-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.payload { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.payload .pr { display: grid; grid-template-columns: 150px 1fr; border-bottom: 1px solid var(--rule); }
.payload .pr:last-child { border-bottom: 0; }
.payload .pk { padding: 11px 14px; background: var(--bg-inset); border-right: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); word-break: break-word; }
.payload .pv { padding: 11px 14px; font-size: 13px; color: var(--ink); word-break: break-word; }
.payload .pv.msg { line-height: 1.55; color: var(--ink-dim); }
.payload .pv a { color: var(--signal); text-decoration: none; }
.raw { margin-top: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: #060708; overflow: hidden; }
.raw-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.raw-head .gr { display: flex; gap: 5px; margin-right: 4px; }
.raw-head .gr i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); display: block; }
.raw pre { margin: 0; padding: 14px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: var(--ink-dim); overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.detail-foot { flex: none; height: 32px; display: flex; align-items: center; gap: 18px; padding: 0 20px; border-top: 1px solid var(--rule); background: var(--bg-panel); font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); }
.detail-foot kbd, .list-foot kbd { border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0 5px; color: var(--ink-dim); margin-right: 5px; font-family: var(--font-mono); }
.detail-foot .push { margin-left: auto; color: var(--ink-ghost); }

@media (max-width: 1080px) {
  .app { grid-template-columns: 64px var(--list-w) 1fr; }
  .brand .wm, .op .meta, .nav-item .lbl, .nav-sect, .nav-foot span, .nav-item .kb { display: none; }
  .nav-item { justify-content: center; }
  .nav-item .ct { position: absolute; top: 3px; right: 3px; margin: 0; }
  .op { justify-content: center; padding: 8px; }
}
@media (max-width: 780px) {
  .app { grid-template-columns: 1fr; }
  .nav, .list { display: none; }
}

/* ===========================================================
   READABILITY TUNING — larger sizes + looser spacing for the
   smallest mono labels and the content you actually read.
   Kept in one block so legibility is easy to tune in future.
   =========================================================== */
/* tiny uppercase labels: 9–10.5px -> ~11px, less aggressive tracking */
.kicker, .field-label, .nav-sect, .card-head, .state-tag,
.meta-cell .k, .stat .l, .ticker-head, .raw-head, .sect-rule,
.endpoint .lab, .ledger-title, .colhead .pill, .pill,
.detail-foot, .list-foot, .nav-foot { font-size: 11px; letter-spacing: .1em; }

/* primary nav + operator identity */
.nav-item { font-size: 14.5px; padding: 9px 10px; }
.nav-item .mono { font-size: 13px; }
.nav-item .ct { font-size: 11px; }
.op .meta .nm { font-size: 13px; }
.op .meta .em { font-size: 11px; }

/* submissions list rows — the core reading surface */
.row { padding: 13px 14px 13px 12px; }
.row .form { font-size: 12.5px; }
.row .who { font-size: 12.5px; }
.row .snip { font-size: 13.5px; line-height: 1.5; }
.row .ts { font-size: 11px; }

/* detail pane content */
.dhead .subj { font-size: 19px; }
.dhead .person .nm { font-size: 15px; }
.dhead .person .em { font-size: 12.5px; }
.meta-cell .v { font-size: 13px; }
.payload .pk { font-size: 12px; }
.payload .pv { font-size: 14px; line-height: 1.6; }
.payload .pv.msg { font-size: 14px; }
.endpoint .url { font-size: 14px; }
.raw pre { font-size: 12.5px; line-height: 1.75; }

/* sign-in surfaces */
.lede { font-size: 15px; line-height: 1.6; }
.field-shell input { font-size: 15px; }
.meta-row { font-size: 13px; }
.note { font-size: 13px; }
.ticker-row { font-size: 13px; }
.ledger-foot { font-size: 12.5px; }
.act, .btn, .ghost-btn { letter-spacing: .06em; }