/* ============================================================
   comms — design system
   Single stylesheet. All templates import this. No inline <style>.
   Dark-only. Homelab/terminal-adjacent. Density over whitespace.
   ============================================================ */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root {
  /* surfaces — five steps, deepest → highest */
  --bg-0: #0d1426;            /* deepest, page outside cards */
  --bg-1: #131c34;            /* card / sidebar */
  --bg-2: #182547;            /* raised inside card (credential block, snippet) */
  --bg-input: #0a1124;        /* form inputs sit BELOW bg-1 */

  /* lines */
  --line: #1f3563;
  --line-strong: #2a4a8a;

  /* accents */
  --accent-danger: #e94560;   /* identity, primary actions, "shown once" */
  --accent-danger-hover: #f25972;
  --accent-danger-pressed: #c73652;
  --accent-info: #4fc3f7;     /* section headings, links */
  --accent-info-hover: #7fd4fa;
  --accent-success: #4caf50;
  --accent-success-hover: #5cba60;
  --accent-warning: #ff9800;
  --accent-token: #ffe082;    /* the literal token characters */

  /* text */
  --text: #e6e7ee;
  --text-muted: #9ba0b3;
  --text-dim: #6b7088;

  /* tinted backgrounds for alerts (very dark, sit on bg-0) */
  --tint-success: #0c2418;
  --tint-warning: #2a1b04;
  --tint-danger:  #2a0e16;
  --tint-info:    #0a1f33;

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* sizes (rem-anchored, 14px base) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  /* radius */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;

  /* focus */
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent-info);
}

/* ---------- 2. Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type roles — distinct, not all-the-same.
   Headings: sans, weighted. Body: sans. Identifiers/code/tokens: mono. */

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

h1 { font-size: var(--fs-3xl); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl);  line-height: 1.2; }
h3 { font-size: var(--fs-md);  line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-info); }
h4 { font-size: var(--fs-md);  line-height: 1.3; }

p  { margin: 0; }

a {
  color: var(--accent-info);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s, color .12s;
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }

code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.95em; }
code {
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  color: var(--text);
}

::selection { background: var(--accent-danger); color: #fff; }

/* universal focus ring for keyboard users */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }

/* ---------- 3. Layout: standalone page wrapper --------------------------- */
/*  Used by setup / login / redeem / redeem_complete / token_rotated / no_invite */
.page {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: var(--s-8) var(--s-5);
}

.page-card {
  width: 100%;
  max-width: 520px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-7) var(--s-7) var(--s-6);
}
.page-card--wide { max-width: 720px; }

.page-card > .page-header { margin-bottom: var(--s-5); }
.page-header .eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}
.page-header h1 { color: var(--accent-danger); }
.page-header h1 .lede { color: var(--text); font-weight: 600; }
.page-header .subhead {
  color: var(--text-muted);
  margin-top: var(--s-3);
  max-width: 56ch;
}

/* ---------- 4. Layout: dashboard shell ----------------------------------- */
#layout {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

#sidebar {
  width: 240px;
  flex: 0 0 240px;
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-1);
  z-index: 1;
}

.viewer {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.viewer-name {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-danger);
  font-size: var(--fs-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer-org {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.logout-btn {
  font-family: var(--font-sans);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 4px 10px;
  border-radius: var(--r-1);
  transition: color .12s, border-color .12s;
}
.logout-btn:hover { border-color: var(--accent-danger); color: var(--accent-danger); }

.sidebar-section { padding: var(--s-4) var(--s-4) var(--s-2); }
.sidebar-section + .sidebar-section { border-top: 1px solid var(--line); }
.sidebar-section h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--s-2);
  font-weight: 600;
}

/* sidebar list */
.sidebar-section ul { list-style: none; padding: 0; margin: 0; }
.sidebar-section li {
  padding: 0;
  border: 0;
  margin: 0;
}
.sidebar-section li > a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-2);
  margin: 0 calc(-1 * var(--s-2));
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  color: var(--text);
  border-bottom: 0;
}
.sidebar-section li > a:hover { background: var(--bg-2); }
.sidebar-section li.is-active > a { background: var(--bg-2); color: var(--accent-info); }
.sidebar-section li > a > .name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.role {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.topic { color: var(--text-dim); font-size: var(--fs-xs); margin-left: var(--s-2); }
.meta  { color: var(--text-muted); font-size: var(--fs-sm); }

.badge {
  background: var(--accent-danger);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.presence-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex: 0 0 8px;
}
.presence-active  .presence-dot { background: var(--accent-success); box-shadow: 0 0 0 2px rgba(76,175,80,0.18); }
.presence-idle    .presence-dot { background: var(--accent-warning); }
.presence-away    .presence-dot { background: #f44336; }
.presence-offline .presence-dot { background: var(--text-dim); }

.sidebar-actions {
  margin-top: auto;
  padding: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-2);
  margin: 0 calc(-1 * var(--s-2));
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-muted);
  border-radius: var(--r-1);
  border-bottom: 0;
}
.sidebar-link::before { content: "›"; color: var(--text-dim); }
.sidebar-link:hover { background: var(--bg-2); color: var(--accent-info); }
.sidebar-link:hover::before { color: var(--accent-info); }

/* ---------- 5. Main pane ------------------------------------------------- */
#main-pane {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-0);
}

.fragment-pane {
  padding: var(--s-6) var(--s-7);
  max-width: 880px;
}
.fragment-pane > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.fragment-pane > h2 .crumb {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- 6. Banners (identity affirmation) ---------------------------- */
.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  border: 1px solid;
  margin: 0 0 var(--s-4);
  font-size: var(--fs-base);
}
.banner__icon {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-weight: 700;
  margin-top: 1px;
}
.banner__body { flex: 1; }
.banner strong { color: var(--text); font-family: var(--font-mono); }

.banner--success {
  background: var(--tint-success);
  border-color: var(--accent-success);
  color: #a5d6a7;
}
.banner--success .banner__icon { color: var(--accent-success); }

.banner--info {
  background: var(--tint-info);
  border-color: var(--accent-info);
  color: #b3e5fc;
}
.banner--info .banner__icon { color: var(--accent-info); }

.banner--warning {
  background: var(--tint-warning);
  border-color: var(--accent-warning);
  color: #ffcc80;
}
.banner--warning .banner__icon { color: var(--accent-warning); }

.banner--danger {
  background: var(--tint-danger);
  border-color: var(--accent-danger);
  color: #ff8a9e;
}
.banner--danger .banner__icon { color: var(--accent-danger); }

/* ---------- 7. Credential block ------------------------------------------ */
/* The "shown once" surface. Designed to demand attention. */
.credential {
  position: relative;
  margin: var(--s-4) 0;
  background: var(--bg-2);
  border: 2px solid var(--accent-danger);
  border-radius: var(--r-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  /* subtle glow on the perimeter so it stands apart from regular cards */
  box-shadow: 0 0 0 1px rgba(233,69,96,0.15), 0 12px 28px rgba(0,0,0,0.35);
}
.credential--info { border-color: var(--accent-info); box-shadow: 0 0 0 1px rgba(79,195,247,0.18), 0 12px 28px rgba(0,0,0,0.35); }
.credential--info .credential__copy { background: var(--accent-info); color: var(--bg-0); }
.credential--info .credential__copy:hover { background: var(--accent-info-hover); }

.credential__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-2);
}
.credential__shown-once {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-warning);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.credential__shown-once::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-warning);
  box-shadow: 0 0 0 3px rgba(255,152,0,0.18);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,152,0,0.10); }
  50%      { box-shadow: 0 0 0 6px rgba(255,152,0,0.04); }
}

.credential__value {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  word-break: break-all;
  color: var(--accent-token);
  display: block;
  padding: var(--s-3) 0;
  user-select: all;
  line-height: 1.5;
}

.credential__actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  border-top: 1px dashed var(--line);
  padding-top: var(--s-2);
  margin-top: var(--s-1);
}
.credential__copy {
  font-family: var(--font-sans);
  background: var(--accent-danger);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: var(--r-1);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .12s;
}
.credential__copy:hover { background: var(--accent-danger-hover); }
.credential__copy:active { background: var(--accent-danger-pressed); }
.credential__copy.is-copied { background: var(--accent-success); }

.credential__hint {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* ---------- 8. Code / snippet block (reference, not a secret) ------------ */
.snippet {
  position: relative;
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-2);
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  white-space: pre;
  overflow-x: auto;
  color: #c8cee0;
  line-height: 1.55;
  margin: 0;
}
.snippet-wrap { margin: var(--s-3) 0; }
.snippet-wrap .credential__copy { margin-top: var(--s-2); background: var(--bg-2); color: var(--text); border: 1px solid var(--line); }
.snippet-wrap .credential__copy:hover { border-color: var(--accent-info); color: var(--accent-info); }

/* ---------- 9. Step / card-section --------------------------------------- */
.section {
  margin: var(--s-5) 0;
  padding: var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.section > h3 {
  margin-bottom: var(--s-2);
}
.section > .section__intro {
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  max-width: 64ch;
}
.section > * + * { margin-top: var(--s-3); }
.section > h3 + .section__intro { margin-top: var(--s-1); }

/* details / alt */
.alt { margin-top: var(--s-3); }
.alt summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.alt summary::-webkit-details-marker { display: none; }
.alt summary::before { content: "▸"; color: var(--text-dim); transition: transform .12s; display: inline-block; }
.alt[open] summary::before { transform: rotate(90deg); }
.alt summary:hover { color: var(--accent-info); }

/* ---------- 10. Forms ---------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: end; gap: var(--s-4); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label,
.field-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  background: var(--bg-input);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 11px;
  border-radius: var(--r-2);
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
textarea { font-family: var(--font-sans); resize: vertical; min-height: 70px; }

input:hover,
select:hover,
textarea:hover { border-color: var(--line-strong); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-info);
  box-shadow: 0 0 0 3px rgba(79,195,247,0.18);
  background: var(--bg-0);
}

input::placeholder, textarea::placeholder { color: var(--text-dim); }

input[readonly] { color: var(--text-muted); cursor: default; background: var(--bg-1); }
input[readonly]:hover { border-color: var(--line); }

/* radios — segmented look */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.radio-group > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg-input);
  text-transform: none;
  letter-spacing: 0;
}
.radio-group > label:hover { border-color: var(--line-strong); color: var(--text); }
.radio-group input[type="radio"] {
  appearance: none;
  width: 12px; height: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  margin: 0;
  position: relative;
  background: var(--bg-0);
}
.radio-group input[type="radio"]:checked {
  border-color: var(--accent-info);
}
.radio-group input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent-info);
}
.radio-group > label:has(input:checked) {
  border-color: var(--accent-info);
  color: var(--text);
  background: var(--tint-info);
}

/* ---------- 11. Buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-base);
  padding: 10px 18px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, transform .04s;
  letter-spacing: 0.01em;
  user-select: none;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--focus-ring); }

.btn--primary {
  background: var(--accent-danger);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-danger-hover); }
.btn--primary:active { background: var(--accent-danger-pressed); }

.btn--success {
  background: var(--accent-success);
  color: #fff;
}
.btn--success:hover { background: var(--accent-success-hover); }

.btn--secondary {
  background: transparent;
  color: var(--accent-info);
  border-color: var(--accent-info);
}
.btn--secondary:hover {
  background: rgba(79,195,247,0.10);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--line);
}
.btn--ghost:hover { color: var(--text); border-color: var(--line-strong); }

.btn--danger {
  background: var(--accent-danger);
  color: #fff;
}
.btn--danger:hover { background: var(--accent-danger-hover); }

.btn--small { padding: 6px 12px; font-size: var(--fs-md); }

/* CTA row — primary + secondary */
.cta-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.cta-row__cancel {
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* ---------- 12. Inline messaging ---------------------------------------- */
.error {
  color: var(--accent-danger);
  background: var(--tint-danger);
  border: 1px solid var(--accent-danger);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-md);
  margin: var(--s-2) 0;
}
.empty {
  color: var(--text-dim);
  font-style: italic;
  padding: var(--s-3) var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}

/* ---------- 13. History / messages -------------------------------------- */
.channel-detail, .dm-history { padding: 0; }
.channel-header {
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.channel-header h2 { display: inline; color: var(--text); }
.channel-header .topic { display: block; margin-top: var(--s-1); margin-left: 0; font-size: var(--fs-md); }
.channel-header .members {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-top: var(--s-2);
}

.history { display: flex; flex-direction: column; gap: 2px; }
.msg {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--s-3);
  padding: 4px var(--s-2);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  align-items: baseline;
}
.msg:hover { background: var(--bg-1); }
.msg-from { color: var(--accent-danger); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-content { color: var(--text); word-break: break-word; }
.msg-ts { color: var(--text-dim); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.msg-system .msg-from { color: var(--text-dim); font-style: italic; }

/* dl for agent_detail */
dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); }
dt { color: var(--text-dim); font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; }
dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-md); color: var(--text); }

/* ---------- 14. Utility -------------------------------------------------- */
.row { display: flex; gap: var(--s-3); align-items: center; }
.row--end { justify-content: flex-end; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.stack--lg { gap: var(--s-5); }
.stack > * { margin: 0; }

.hint { color: var(--text-muted); font-size: var(--fs-md); }
.hint code { font-size: 0.92em; }
.kbd-hint { font-family: var(--font-mono); color: var(--text-dim); font-size: var(--fs-sm); }

.divider {
  height: 1px;
  background: var(--line);
  margin: var(--s-5) 0;
  border: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
}