/* ═════════════════════════════════════════════════════════════
   FB Atlas — System Console
   Design language: Atlas Design System (fb-atlas-ui-kit.web.app)
   tokens.css        → every color / spacing / radius token
   atlas-components  → topbar, seg, login, loader, home button
   atlas-glass       → .atlas-glass-squircle card surfaces
   This file only styles what is unique to the console.
   Type rule: Futura PT, weights 300 (text/titles/values) and
   400 (labels, kickers, chips, buttons) — nothing heavier.
   Colors: tokens only + alpha derivations of token colors.
   ═════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  font-family: futura-pt, "Futura PT", "Futura", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--core-primary-text);
  background: var(--atlas-linen);
  overflow-x: hidden;
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; border: 0; outline: 0; -webkit-appearance: none; appearance: none; background: none; }
button { cursor: pointer; }
a { color: var(--core-primary-text); }
strong, b { font-weight: 400; } /* type rule: emphasis = 400, never browser bold */
svg { shape-rendering: geometricPrecision; }

/* Hide scrollbars everywhere — content still scrolls */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Local shorthands — pure token references / alpha derivations, no new colors */
:root {
  --ink:      var(--core-primary-text);
  --muted:    var(--core-primary);
  --faint:    var(--atlas-grey-icon);
  --ok:       var(--core-success);
  --warn:     var(--atlas-copper);         /* calm copper → rust escalation */
  --crit:     var(--atlas-rust);
  --hairline: rgba(139,129,126,.16);       /* --atlas-warm-grey @ .16 */
  --tint-ok:   rgba(0,120,63,.12);         /* --core-success tint */
  --tint-warn: rgba(214,129,55,.14);       /* --atlas-copper tint */
  --tint-crit: rgba(204,111,57,.14);       /* --atlas-rust tint */
}

/* ─────────────────────────────────────────────────────────────
   APP SHELL
   ───────────────────────────────────────────────────────────── */
.app-shell { display: none; position: relative; z-index: 1; }
.app-shell.visible { display: block; }
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px 40px;
  padding-top:    max(14px, env(safe-area-inset-top));
  padding-right:  max(18px, env(safe-area-inset-right));
  padding-bottom: max(160px, calc(env(safe-area-inset-bottom) + 140px)); /* room for the floating user pill */
  padding-left:   max(18px, env(safe-area-inset-left));
}

/* Topbar — canonical .atlas-topbar from the kit. Only the refresh button is local:
   the same glass circle recipe as .atlas-home. */
.atlas-topbar .right-actions { display: flex; align-items: center; gap: 8px; }
.atlas-topbar .topbar-iconbtn {
  width: 44px; height: 44px; border-radius: 100px; flex: none;
  display: grid; place-items: center;
  background: var(--atlas-glass);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid var(--atlas-glass);
  color: var(--core-primary-text); font-size: 19px;
  transition: transform .16s ease;
}
.atlas-topbar .topbar-iconbtn:active { transform: scale(.92); }
.atlas-topbar .topbar-iconbtn i { font-size: 19px; }
.atlas-topbar .topbar-iconbtn.spinning i { animation: spin .6s linear; display: inline-block; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   ALERT HERO — glass card, calm state tints (copper → rust)
   ───────────────────────────────────────────────────────────── */
.alert-hero {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform .16s ease;
}
.alert-hero:active { transform: scale(.995); }
/* state tint rides on top of the glass recipe (shadow list keeps the glass highlights) */
.alert-hero.warning { box-shadow: var(--atlas-glass-shadow), inset 0 0 0 999px rgba(214,129,55,.07); }
.alert-hero.failing { box-shadow: var(--atlas-glass-shadow), inset 0 0 0 999px rgba(204,111,57,.09); }
.alert-hero .ah-icon {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--tint-ok); color: var(--ok);
  display: grid; place-items: center;
}
.alert-hero .ah-icon i { font-size: 24px; }
.alert-hero .ah-text { flex: 1; min-width: 0; }
.alert-hero .ah-kicker {
  font-size: 12.5px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--core-primary); margin-bottom: 4px;
}
.alert-hero .ah-title { font-size: 21px; font-weight: 300; line-height: 1.25; color: var(--ink); }
.alert-hero .ah-sub { font-size: 13.5px; font-weight: 300; color: var(--muted); margin-top: 3px; }
.alert-hero .ah-cta {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}

/* ─────────────────────────────────────────────────────────────
   TABS — canonical .atlas-seg; local: count badges + h-scroll
   ───────────────────────────────────────────────────────────── */
#tabs-nav {
  margin: 4px 0 20px;
  max-width: 100%;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
#tabs-nav .tab-btn { flex-shrink: 0; white-space: nowrap; }
.tab-btn .tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: var(--r-full);
  font-size: 9px; font-weight: 400; line-height: 1;
  background: rgba(0,0,0,.10); color: var(--core-primary);
  flex-shrink: 0;
}
.tab-btn.is-on .tab-count { background: rgba(255,255,255,.22); color: var(--core-tertiary); }
.tab-btn .tab-count.warn { background: var(--warn); color: var(--core-tertiary); }
.tab-btn .tab-count.err  { background: var(--crit); color: var(--core-tertiary); }

.tab-panel { display: none; }
.tab-panel.active { display: flex; flex-direction: column; gap: 16px; }
.tab-panel.active .card { animation: cardIn .55s cubic-bezier(.22,.8,.28,1) backwards; }
.tab-panel.active .card:nth-child(2) { animation-delay: .05s; }
.tab-panel.active .card:nth-child(3) { animation-delay: .1s; }
.tab-panel.active .card:nth-child(4) { animation-delay: .15s; }
.tab-panel.active .card:nth-child(n+5) { animation-delay: .2s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────────────────────
   SECTIONS — each list/feed section is a glass squircle card;
   heading = the Atlas card-kicker (12.5px · 400 · .18em · primary)
   ───────────────────────────────────────────────────────────── */
.section.card { padding: 22px 24px; }
.section > h2 {
  font-size: 12.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--core-primary);
  margin: 0 0 14px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.section .meta {
  font-size: 11.5px; font-weight: 300;
  text-transform: none; letter-spacing: .04em;
  color: var(--faint);
}

/* ─────────────────────────────────────────────────────────────
   KPI TILES — each tile is its own glass card (bento grid)
   ───────────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
@media (max-width: 640px) { .kpi-grid { gap: 13px; } }
.kpi {
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 140px;
  text-align: left;
  transition: transform .16s ease;
}
.kpi[onclick] { cursor: pointer; }
.kpi[onclick]:hover { transform: translateY(-2px); }
.kpi[onclick]:active { transform: scale(.98); }
.kpi .kpi-header { display: flex; align-items: center; gap: 12px; }
.kpi .kpi-icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(139,129,126,.12); color: var(--muted);
}
.kpi .kpi-icon i { font-size: 17px; }
.kpi.s-ok   .kpi-icon { background: var(--tint-ok);   color: var(--ok); }
.kpi.s-warn .kpi-icon { background: var(--tint-warn); color: var(--warn); }
.kpi.s-err  .kpi-icon { background: var(--tint-crit); color: var(--crit); }
.kpi .kpi-label {
  font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .14em;
  color: var(--core-primary); line-height: 1.3;
}
.kpi .kpi-value {
  font-size: 38px; font-weight: 300; letter-spacing: .01em;
  color: var(--ink); line-height: 1.05;
  margin: 4px 0;
  font-variant-numeric: tabular-nums;
}
.kpi .kpi-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: 11px; color: var(--faint);
}
.kpi .kpi-state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.kpi.s-warn .kpi-state-dot { background: var(--warn); }
.kpi.s-err  .kpi-state-dot { background: var(--crit); }
.kpi .kpi-state-label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .10em; color: var(--muted); }
.kpi .kpi-note { margin-left: auto; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); text-align: right; }

/* ─────────────────────────────────────────────────────────────
   STATUS ROWS — the workhorse list pattern (inside glass cards)
   ───────────────────────────────────────────────────────────── */
.status-list { display: flex; flex-direction: column; gap: 4px; }
.status-row {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: background .18s ease;
  text-align: left;
}
.status-row:hover { background: rgba(255,255,255,.5); }
.status-row:active { background: rgba(255,255,255,.65); }
.status-row > .icon-circle {
  flex: 0 0 36px; width: 36px; height: 36px;
  background: rgba(139,129,126,.10);
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--muted);
}
.status-row > .icon-circle i { font-size: 17px; }
.status-row > .name {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.status-row > .name > .label {
  font-size: 14px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-row > .name > .meta {
  font-size: 12px; font-weight: 300; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.status-row > .pill { flex: 0 0 auto; }
.status-row > .last {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 300; color: var(--faint);
  white-space: nowrap; text-align: right;
}
.status-row > .row-chevron {
  flex: 0 0 16px; display: grid; place-items: center;
  color: var(--faint);
  transition: color .18s ease, transform .18s ease;
}
.status-row > .row-chevron i { font-size: 15px; }
.status-row:hover > .row-chevron { color: var(--ink); transform: translateX(2px); }
@media (max-width: 720px) {
  .status-row > .last { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   PILLS / CHIPS — solid, calm chips like the cashflow verdicts
   ───────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 12px;
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
  background: rgba(139,129,126,.14); color: var(--muted);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok   { background: var(--ok);   color: var(--core-tertiary); }
.pill.warn { background: var(--warn); color: var(--core-tertiary); }
.pill.err  { background: var(--crit); color: var(--core-tertiary); }

.tier-tag, .demo-chip, .live-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 12px;
  border-radius: var(--r-full);
  font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .12em;
}
.demo-chip { background: rgba(139,129,126,.14); color: var(--muted); }
.live-chip { background: var(--ok); color: var(--core-tertiary); }

/* Function chips inside detail sections */
.fn-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; margin: 2px;
  border-radius: var(--r-full);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 400;
  background: var(--atlas-linen); color: var(--core-info);
}
.fn-chip.bad { background: var(--tint-crit); color: var(--atlas-rust-deep); }

/* ─────────────────────────────────────────────────────────────
   BUTTONS — Atlas CTA recipe (ink pill, tertiary label) + quiet ghost
   ───────────────────────────────────────────────────────────── */
button.primary {
  width: 100%; height: 52px; padding: 0 20px;
  background: var(--core-primary-background); color: var(--core-tertiary);
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 400; letter-spacing: .18em; text-indent: .18em; text-transform: uppercase;
  transition: transform .16s ease, opacity .16s ease;
}
button.primary:hover { opacity: .88; }
button.primary:active { transform: scale(.97); }
button.primary:disabled { opacity: .45; cursor: not-allowed; }

button.secondary {
  height: 36px; padding: 0 16px;
  background: transparent; color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(139,129,126,.3);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 400; letter-spacing: .10em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .16s ease;
}
button.secondary:hover {
  background: var(--core-primary-background); color: var(--core-tertiary);
  box-shadow: inset 0 0 0 1px var(--core-primary-background);
}
button.secondary:active { transform: scale(.97); }
button.secondary:disabled { opacity: .45; cursor: not-allowed; }
button.secondary.danger {
  background: var(--core-primary-background); color: var(--core-tertiary);
  box-shadow: none;
}
button.secondary.danger:hover { opacity: .88; }

.iconbtn {
  width: 44px; height: 44px; padding: 0;
  color: var(--muted); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.iconbtn:hover { background: rgba(139,129,126,.12); color: var(--ink); }

/* ─────────────────────────────────────────────────────────────
   MODAL — web echo of the .atlas-sheet: scrim60, radius 35,
   kicker eyebrow, 300-weight title, stacked pill CTAs
   ───────────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; z-index: 60;
  background: var(--atlas-scrim-6-0);
  display: none; align-items: center; justify-content: center;
  padding: 32px;
}
.modal-bg.open { display: flex; }
.modal {
  position: relative;
  width: min(560px, 100%);
  background: var(--core-secondary-background);
  color: var(--core-primary-text);
  font-weight: 300;
  border-radius: 35px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  box-shadow: 0 1px 3px var(--sem-card-shadow);
  animation: modalIn .38s cubic-bezier(.25,.9,.3,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-header {
  position: relative; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px 24px 12px;
}
.modal-eyebrow {
  font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--core-primary);
}
.modal-header h3 {
  margin: 0 44px 0 0;
  font-size: 22px; font-weight: 300; line-height: 1.2;
  color: var(--ink);
}
.modal-subtitle {
  margin: 2px 44px 0 0;
  font-size: 14px; font-weight: 300; line-height: 1.5;
  color: var(--core-primary);
}
.modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 100px;
  background: var(--atlas-linen); color: var(--core-primary);
  display: grid; place-items: center;
  font-size: 22px; font-weight: 300; line-height: 1;
  transition: transform .16s ease, background .18s ease;
}
.modal-close:hover { background: var(--core-secondary); color: var(--ink); }
.modal-close:active { transform: scale(.92); }
.modal-body {
  padding: 12px 24px 20px;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 20px;
}
.modal-footer {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  padding: 4px 24px 24px;
  flex-shrink: 0;
}
.modal-footer button {
  width: 100%; height: 52px;
  font-size: 12px; letter-spacing: .18em; text-indent: .18em;
}
@media (max-width: 640px) {
  .modal-bg {
    padding: max(24px, env(safe-area-inset-top)) 20px
             max(32px, calc(24px + env(safe-area-inset-bottom))) 20px;
  }
  .modal { border-radius: 30px; max-height: calc(100vh - 120px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); }
  .modal-header { padding: 20px 20px 10px; }
  .modal-body { padding: 10px 20px 16px; }
  .modal-footer { padding: 4px 20px 20px; }
  .modal-header h3 { font-size: 19px; }
}
/* hide the floating user pill while a modal is open (it covered the CTA) */
body.modal-open .user-pill { display: none !important; }

/* Detail sections — editorial groupings inside the modal body */
.detail-section { display: flex; flex-direction: column; gap: 8px; }
.detail-section + .detail-section { padding-top: 16px; border-top: 1px solid var(--hairline); }
.detail-section h4 {
  margin: 0;
  font-size: 10.5px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--core-primary);
}
.detail-section .v { font-size: 13.5px; font-weight: 300; color: var(--ink); line-height: 1.5; word-break: break-word; }
.detail-section .v.muted, .detail-section .v .muted, .v.muted { color: var(--core-primary); font-size: 12.5px; }
.detail-section .v strong, .detail-section .v b { font-weight: 400; }

/* Monospace wells — sunken linen, never a nested card */
.err-block {
  background: var(--atlas-linen);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--core-info);
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.55;
  max-height: 220px; overflow-y: auto;
}

/* Suggested-fix banner — champagne tint (warm accent), rust tint when severe */
.suggested-fix {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(177,155,125,.16);          /* --atlas-champagne tint */
  color: var(--ink);
  font-size: 12.5px; font-weight: 300; line-height: 1.5;
}
.suggested-fix.err { background: var(--tint-crit); }
.suggested-fix .icon-wrap {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--core-secondary-background);
  display: grid; place-items: center;
  color: var(--atlas-champagne);
}
.suggested-fix.err .icon-wrap { color: var(--crit); }
.suggested-fix .text { flex: 1; min-width: 0; }
.suggested-fix .label {
  display: block; margin-bottom: 2px;
  font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--core-primary);
}
.suggested-fix .body { color: var(--ink); }

/* ─────────────────────────────────────────────────────────────
   TOAST — frosted glass pill with a colored status dot
   ───────────────────────────────────────────────────────────── */
.toast-live {
  position: fixed; z-index: 100;
  left: 50%;
  top: max(24px, calc(env(safe-area-inset-top) + 12px));
  transform: translateX(-50%) translateY(-8px);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 6px 10px 6px 16px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 1px 3px var(--sem-card-shadow);
  color: var(--ink);
  font-size: 11.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast-live.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.toast-live.success .dot { background: var(--ok); }
.toast-live.warning .dot { background: var(--warn); }
.toast-live.error   .dot { background: var(--crit); }
.toast-live #toast-msg { flex: 1; text-align: center; }
.toast-live .close {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: rgba(0,0,0,.06); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  transition: background .18s ease;
}
.toast-live .close:hover { background: rgba(0,0,0,.12); }

/* ─────────────────────────────────────────────────────────────
   LOG ENTRIES — alerts, fixes, backups, security, doc audit
   ───────────────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 3px; max-height: 520px; overflow-y: auto; }
.log-entry {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  transition: background .18s ease;
}
.log-entry[onclick]:hover { background: rgba(255,255,255,.5); }
.log-entry .lvl {
  flex: none; margin-top: 2px;
  min-width: 58px; text-align: center;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: .14em;
  white-space: nowrap;
  background: rgba(139,129,126,.14); color: var(--muted);
}
.log-entry .lvl.ok   { background: var(--ok);          color: var(--core-tertiary); }
.log-entry .lvl.warn { background: var(--warn);        color: var(--core-tertiary); }
.log-entry .lvl.err  { background: var(--crit);        color: var(--core-tertiary); }
.log-entry .lvl.info { background: var(--atlas-stone); color: var(--core-tertiary); }
.log-entry .ts { flex: none; margin-top: 4px; font-size: 11px; font-weight: 300; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-entry .msg { flex: 1; min-width: 0; margin-top: 2px; font-weight: 300; color: var(--ink); overflow-wrap: anywhere; }
.log-entry .who { font-weight: 400; }
.log-entry .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.log-entry .body .top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-size: 13.5px; color: var(--ink);
}
.log-entry .body .top .when { font-size: 11px; font-weight: 300; color: var(--faint); }
.log-entry .body .reason {
  font-size: 12px; font-weight: 300; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .log-entry { flex-wrap: wrap; }
  .log-entry .body .reason { white-space: normal; }
}

/* Access log rows (Activity tab) */
.access-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  transition: background .18s ease;
}
.access-row:hover { background: rgba(255,255,255,.5); }
.access-row .ar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); justify-self: center; }
.access-row.denied .ar-dot { background: var(--core-alternate); }
.access-row .ar-title { font-size: 13.5px; font-weight: 400; color: var(--ink); }
.access-row .ar-meta {
  font-size: 11.5px; font-weight: 300; color: var(--faint); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.access-row .ar-when { font-size: 11px; font-weight: 300; color: var(--faint); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   EMPTY STATES & SKELETONS
   ───────────────────────────────────────────────────────────── */
.empty-state {
  padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  color: var(--faint);
  font-size: 12.5px; font-weight: 300;
}
.empty-state i { font-size: 22px; opacity: .6; }

.skel-shimmer {
  background-color: rgba(139,129,126,.10);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 40% 100%;
  background-position: -40% 0;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes shimmer { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.skel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
}
.skel-name   { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.skel-circle { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.skel-pill   { width: 60px; height: 18px; border-radius: var(--r-full); }
.skel-bar    { height: 12px; flex: 1; min-width: 0; }
.skel-bar.short  { max-width: 40%; }
.skel-bar.medium { max-width: 70%; }
.skel-chev   { width: 16px; height: 16px; border-radius: 50%; }
.skel-feed-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }

/* Paginator — Prev / page info / Next under long feeds */
.paginator {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px 2px;
}
.paginator .pgn {
  height: 30px; padding: 0 16px;
  border-radius: var(--r-full);
  box-shadow: inset 0 0 0 1px rgba(139,129,126,.3);
  color: var(--muted);
  font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.paginator .pgn:hover:not(:disabled) {
  background: var(--core-primary-background); color: var(--core-tertiary);
  box-shadow: inset 0 0 0 1px var(--core-primary-background);
}
.paginator .pgn:disabled { opacity: .35; cursor: not-allowed; }
.paginator .pgn-info { font-size: 11px; font-weight: 300; color: var(--faint); letter-spacing: .04em; }

/* ─────────────────────────────────────────────────────────────
   FLOATING USER PILL — glass pill, bottom right
   ───────────────────────────────────────────────────────────── */
.user-pill {
  position: fixed; z-index: 50;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: max(20px, env(safe-area-inset-right));
  display: none; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-radius: var(--r-full);
  box-shadow: 0 1px 3px var(--sem-card-shadow);
  max-width: calc(100vw - 32px);
}
.user-pill.visible { display: inline-flex; }
.user-pill .up-avatar {
  width: 36px; height: 36px; flex: none;
  background: var(--core-primary-background); color: var(--core-tertiary);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 400; letter-spacing: .04em;
}
.user-pill .up-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.user-pill .up-name {
  font-size: 13px; font-weight: 400; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.user-pill .up-role {
  font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .14em;
  color: var(--core-primary);
}
.user-pill .up-actions { display: flex; align-items: center; gap: 4px; padding-left: 8px; }
.user-pill .up-iconbtn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  transition: background .18s ease, color .18s ease;
}
.user-pill .up-iconbtn:hover { background: rgba(139,129,126,.14); color: var(--ink); }
.user-pill .up-iconbtn.up-danger:hover { background: var(--tint-crit); color: var(--crit); }
.user-pill .up-iconbtn i { font-size: 18px; }
@media (max-width: 520px) { .user-pill .up-text { display: none; } }

/* ─────────────────────────────────────────────────────────────
   FOOTERS
   ───────────────────────────────────────────────────────────── */
.probe-footer {
  margin-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 10px; font-weight: 400; color: var(--faint);
  text-transform: uppercase; letter-spacing: .14em;
}
.console-footer {
  margin-top: 28px; padding: 20px 0;
  text-align: center;
  font-size: 11.5px; font-weight: 300; line-height: 1.6;
  color: var(--faint);
}
.console-footer strong {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 400;
  color: var(--core-primary);
  letter-spacing: .18em; text-transform: uppercase;
}
.console-footer .legal-divider { display: inline-block; margin: 0 8px; color: var(--hairline); }

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY & UTILITY
   ───────────────────────────────────────────────────────────── */
@media (hover: none) {
  /* iOS auto-zooms inputs with font-size < 16px on focus */
  input[type="email"], input[type="password"], input[type="text"],
  input[type="search"], input[type="number"], textarea, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
.hidden { display: none !important; }
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}