/* Atlas auth gate + public landing. Tokens come from style.css :root
 * which mirrors the docs site palette (docs.css). The brand wordmark
 * uses the cyan→blue→violet gradient that matches brand-icon.svg. */

.atlas-gate-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background: var(--bg);
  z-index: 9999;
  font: 14px/1.5 var(--brand-font);
  color: var(--fg);
  overflow-y: auto;
}

/* Sticky top nav that mirrors the docs topbar one-to-one. */
.atlas-gate-topbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 20;
  background: rgba(13, 17, 23, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .atlas-gate-topbar {
  background: rgba(255, 255, 255, 0.85);
}
.atlas-gate-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.atlas-gate-topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px;
  color: var(--fg);
  text-decoration: none;
}
.atlas-gate-topbar-brand img { width: 26px; height: 26px; }
.atlas-gate-topbar .grow { flex: 1; }
.atlas-gate-topbar-nav a {
  margin-left: 18px;
  color: var(--fg-dim);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.atlas-gate-topbar-nav a.active,
.atlas-gate-topbar-nav a:hover { color: var(--fg); }
.atlas-gate-topbar-cta {
  padding: 6px 14px;
  background: var(--accent);
  color: #fff !important;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}
.atlas-gate-topbar-cta:hover { filter: brightness(1.05); }

/* Legacy centered "marketing" nav — kept for the gate card variant
 * (login/signup) where we want a single horizontal strip without the
 * full topbar treatment. */
.atlas-gate-marketing {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  font-size: 13px;
  z-index: 1;
}
.atlas-gate-marketing a {
  color: var(--fg-dim);
  text-decoration: none;
}
.atlas-gate-marketing a:hover { color: var(--fg); }

.atlas-gate-footer {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--fg-dim);
  z-index: 1;
}
.atlas-gate-footer a { color: var(--fg-dim); text-decoration: none; }
.atlas-gate-footer a:hover { color: var(--accent); }

.atlas-gate-card {
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 24px 60px var(--shadow);
  position: relative;
  z-index: 1;
}

.atlas-gate-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}
.atlas-gate-brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.atlas-gate-sub {
  margin: 2px 0 0;
  color: var(--fg-dim);
  font-size: 13px;
}

.atlas-gate-card label {
  display: block;
  font-size: 12px;
  color: var(--fg-dim);
  margin: 12px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.atlas-gate-card input,
.atlas-gate-card select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
}
.atlas-gate-card input:focus,
.atlas-gate-card select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.atlas-gate-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.atlas-gate-card button {
  font: inherit;
  cursor: pointer;
  padding: 10px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
}
.atlas-gate-card button:hover { background: var(--bg-4); }
.atlas-gate-card button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.atlas-gate-card button.primary:hover { filter: brightness(1.05); }
.atlas-gate-card button.ghost { background: transparent; }
.atlas-gate-card button:disabled { opacity: 0.5; cursor: not-allowed; }

.atlas-gate-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--fg-dim);
}
.atlas-gate-ok  { color: var(--good); }
.atlas-gate-err { color: var(--warn); }

.atlas-gate-help {
  margin-top: 16px;
  font-size: 12px;
  color: var(--fg-dim);
}
.atlas-gate-help a { color: var(--accent); }

.atlas-gate-card hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.atlas-gate-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  background: var(--bg);
  margin-bottom: 4px;
}
.atlas-gate-sso:hover { border-color: var(--accent); }
.atlas-gate-or {
  text-align: center;
  color: var(--fg-dim);
  font-size: 12px;
  margin: 12px 0;
}

/* ============================================================
 * Public landing — cartographic chart.
 *
 * The product is literally named Atlas, so the page IS a chart.
 * Coordinate grid background, hero in monospace (NO gradient text),
 * compass rose, sections labelled by cardinal direction, features
 * drawn as map regions with corner crop marks, scale bar between
 * sections, real legend at the bottom. The brand gradient only
 * lives in the logo mark itself (brand-icon.svg) — never on text.
 *
 * If you're tempted to add another gradient-fill headline, don't.
 * The whole point of this layout is that the *type* carries the
 * voice, not a 3-stop color wash.
 * ============================================================ */
.chart {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--brand-font);
  z-index: 9999;
  overflow-x: hidden;
}

/* Coordinate / lat-long grid. Two layered linear-gradients laying
 * down a 60px primary grid and a 12px hairline secondary grid.
 * Opacity stays low so type stays the foreground. */
.chart::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(139,148,158,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,148,158,0.08) 1px, transparent 1px),
    linear-gradient(to right,  rgba(139,148,158,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(139,148,158,0.025) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
}
:root[data-theme="light"] .chart::before {
  background-image:
    linear-gradient(to right,  rgba(80,80,80,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(80,80,80,0.10) 1px, transparent 1px),
    linear-gradient(to right,  rgba(80,80,80,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(80,80,80,0.04) 1px, transparent 1px);
}

/* Top strip — corner coordinates ("47°12'N · 122°20'W") and a
 * thin meridian line. Sets the chart tone before the hero even
 * lands. */
.chart-strip {
  position: relative;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono-font);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg);
  z-index: 1;
}
.chart-strip a {
  color: var(--fg-dim);
  text-decoration: none;
  margin-left: 18px;
}
.chart-strip a:hover { color: var(--fg); }
.chart-strip .chart-cta {
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  margin-left: 16px;
  background: var(--bg-2);
}
.chart-strip .chart-cta:hover { border-color: var(--accent); color: var(--accent); }
.chart-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg) !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--brand-font);
  font-size: 15px;
  margin-left: 0 !important;
}
.chart-brand img { width: 22px; height: 22px; }

/* ----- hero: chart title block ----- */
.chart-hero {
  position: relative;
  padding: 80px 48px 64px;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 48px;
  align-items: flex-start;
  z-index: 1;
}
@media (max-width: 720px) {
  .chart-hero {
    grid-template-columns: 1fr;
    padding: 56px 24px 48px;
  }
  .chart-hero .compass { display: none; }
}

.chart-eyebrow {
  font-family: var(--mono-font);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chart-eyebrow::before,
.chart-eyebrow::after {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: var(--fg-dim);
  opacity: 0.5;
}
.chart-eyebrow::after { flex: 1 1 auto; }

.chart-title {
  font-family: var(--mono-font);
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: var(--fg);
  max-width: 720px;
}
.chart-title .ink-faint { color: var(--fg-dim); }

.chart-lede {
  font-family: var(--brand-font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 580px;
  margin: 0 0 32px;
}

.chart-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--border);
  font-family: var(--mono-font);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  background: var(--bg-2);
  text-decoration: none;
}
.chart-btn:hover { border-color: var(--accent); color: var(--accent); }
.chart-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chart-btn.primary:hover { filter: brightness(1.05); color: #fff; }
.chart-btn .chevron {
  font-family: var(--mono-font);
  opacity: 0.7;
}

/* ----- compass rose ----- */
.compass {
  width: 200px;
  height: 200px;
  align-self: center;
  justify-self: end;
  opacity: 0.95;
}
.compass-label {
  display: block;
  text-align: center;
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-dim);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ----- scale bar separator ----- */
.chart-scale {
  position: relative;
  margin: 12px auto 48px;
  max-width: 1280px;
  padding: 0 48px;
  z-index: 1;
}
.chart-scale-bar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  height: 12px;
  border: 1px solid var(--fg-dim);
}
.chart-scale-bar span:nth-child(odd) { background: var(--fg-dim); }
.chart-scale-ticks {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  margin-top: 4px;
  font-family: var(--mono-font);
  font-size: 9px;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
}
.chart-scale-ticks span:not(:first-child):not(:last-child) {
  text-align: center;
}
.chart-scale-ticks span:last-child { text-align: right; }
.chart-scale-cap {
  margin-top: 10px;
  font-family: var(--mono-font);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ----- section labels (compass-direction headers) ----- */
.chart-section {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 48px;
  z-index: 1;
}
.chart-section + .chart-section { padding-top: 32px; }
@media (max-width: 720px) {
  .chart-section { padding: 48px 24px; }
}
.chart-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 36px;
  font-family: var(--mono-font);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.chart-section-head .bearing {
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 3px 9px;
  background: var(--bg-2);
}
.chart-section-head .rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border);
}
.chart-section h2 {
  font-family: var(--mono-font);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 16px;
  max-width: 720px;
}
.chart-section .blurb {
  font-family: var(--brand-font);
  color: var(--fg-dim);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 32px;
}

/* ----- region cards (features rendered as territories) ----- */
.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.region {
  position: relative;
  padding: 26px 26px 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.region:last-child { border-right: 1px solid var(--border); }
.region::before, .region::after,
.region > .crop-tl, .region > .crop-tr,
.region > .crop-bl, .region > .crop-br {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--accent);
  border-style: solid;
  border-width: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.region > .crop-tl { top: -1px;    left: -1px;    border-top-width: 1px; border-left-width: 1px; content: ""; }
.region > .crop-tr { top: -1px;    right: -1px;   border-top-width: 1px; border-right-width: 1px; }
.region > .crop-bl { bottom: -1px; left: -1px;    border-bottom-width: 1px; border-left-width: 1px; }
.region > .crop-br { bottom: -1px; right: -1px;   border-bottom-width: 1px; border-right-width: 1px; }
.region:hover > .crop-tl,
.region:hover > .crop-tr,
.region:hover > .crop-bl,
.region:hover > .crop-br { opacity: 1; }

.region-id {
  font-family: var(--mono-font);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.region h3 {
  font-family: var(--mono-font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0 0 8px;
}
.region p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.region p code {
  font-family: var(--mono-font);
  background: var(--bg);
  padding: 1px 5px;
  border: 1px solid var(--border);
  font-size: 0.92em;
  color: var(--fg);
}
.region-meta {
  margin-top: 14px;
  font-family: var(--mono-font);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ----- terminal block ----- */
.chart-terminal {
  border: 1px solid var(--border);
  background: var(--bg-2);
  padding: 18px 22px;
  font-family: var(--mono-font);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-x: auto;
}
.chart-terminal .pmt { color: var(--fg-dim); }
.chart-terminal .key { color: var(--accent); }
.chart-terminal .ok  { color: var(--good); }
.chart-terminal .dim { color: var(--fg-dim); }

/* Caption sitting above each terminal block in the Instruments
 * section. Same monospace + bearing-chip rhythm as the section
 * head, so the two blocks read as field instructions, not as
 * marketing pull-quotes. */
.chart-instr-cap {
  font-family: var(--mono-font);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 28px 0 10px;
}
.chart-instr-cap:first-of-type { margin-top: 8px; }

/* ----- legend ----- */
.chart-legend {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 48px 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 36px;
  row-gap: 16px;
  background: var(--bg);
  z-index: 1;
  font-family: var(--mono-font);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.chart-legend-title {
  grid-column: 1 / -1;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 4px;
}
.chart-legend dt {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg);
}
.chart-legend dd {
  margin: 0;
  color: var(--fg-dim);
}
.chart-legend .sym {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-2);
  font-size: 11px;
  color: var(--fg);
}

/* ----- foot ----- */
.chart-foot {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 48px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono-font);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1;
}
.chart-foot a { color: var(--fg-dim); text-decoration: none; margin-left: 18px; }
.chart-foot a:hover { color: var(--fg); }
.chart-foot .stamp {
  border: 1px solid var(--border);
  padding: 6px 12px;
  letter-spacing: 0.18em;
  color: var(--fg);
  background: var(--bg-2);
}

/* Hide the Atlas-specific fields in the legacy onboarding/settings card.
 * Atlas doesn't have a per-user bearer token, watched agent IDs, a tenant
 * base URL the user types in, embeddings config, or local notes paths.
 * The Tags + Timezone collapsibles in the same card still work and stay
 * visible. */
.onboard h1 { display: none; }
.onboard #onboard-msg { display: none; }
.onboard #token-form > label,
.onboard #token-form > input,
.onboard #token-form > textarea,
.onboard #token-form > p,
.onboard #token-form > .settings-subsection,
.onboard #token-form > .advanced-settings,
.onboard #token-form > details:not(:nth-of-type(1)):not(:nth-of-type(2)) {
  display: none;
}
.onboard #token-form > details:nth-of-type(1),
.onboard #token-form > details:nth-of-type(2) {
  display: block;
}
.onboard #token-form > .row #dash,
.onboard #token-form > .row #open-atlas-onboard {
  display: none;
}
.onboard .onboard-card::before {
  content: "Atlas · Settings";
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ink, #e6edf3);
}

/* ============================================================
 * Vestigial Atlas controls in the topbar + panes. Atlas has no
 * external system to "open"; the SPA itself is the ticket viewer.
 * Hide the buttons rather than rewire every call site.
 * ============================================================ */
header.topbar #open-atlas,
.pane .pane-open-actions .open-atlas,
.drawer-title-actions .open-atlas {
  display: none !important;
}
/* Same for the per-row context menu "Open in Atlas" item. */
.ticket-ctx-menu a.tcm-item[href*="/ticket?id="] {
  display: none !important;
}

/* The legacy agent select inside the topbar is hidden — the watched-
 * agent concept is a Atlas-only thing. The select still lives in the
 * settings panel but never renders in the chrome. */
header.topbar #agent { display: none !important; }

/* ============================================================
 * Atlas topbar: workspace switcher chip + dropdown
 * ============================================================ */
.atlas-ws {
  position: relative;
  display: inline-flex;
  margin-left: 8px;
}
.atlas-ws-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 5px;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 999px;
  color: var(--ink, #e6edf3);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  max-width: 220px;
  transition: border-color 0.12s;
}
.atlas-ws-trigger:hover { border-color: var(--accent, #58a6ff); }
.atlas-ws-trigger[aria-expanded="true"] { border-color: var(--accent, #58a6ff); }
.atlas-ws-avatar {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5be0c2, #4ea2ff 50%, #7d5cff);
  color: #0d1117;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.atlas-ws-avatar-small {
  width: 20px; height: 20px;
  font-size: 10px;
}
.atlas-ws-org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.atlas-ws-caret {
  color: #8b949e;
  font-size: 10px;
  line-height: 1;
}

.atlas-ws-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 100;
  font-size: 13px;
}
.atlas-ws-section {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border, #30363d);
}
.atlas-ws-section:last-child { border-bottom: none; }
.atlas-ws-section-label {
  padding: 4px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b949e;
}
.atlas-ws-user {
  padding: 6px 8px;
  display: grid;
}
.atlas-ws-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.atlas-ws-item:hover { background: rgba(88, 166, 255, 0.1); }
.atlas-ws-item.danger { color: #f85149; }
.atlas-ws-item.danger:hover { background: rgba(248, 81, 73, 0.12); }
.atlas-ws-item-label {
  display: grid;
  line-height: 1.3;
}

/* ============================================================
 * Atlas modal — used by New Ticket and any future modals.
 * Visually distinct from the legacy ticket-modal which renders
 * a ticket pane in-place.
 * ============================================================ */
.atlas-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 17, 23, 0.75);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 8000;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
.atlas-modal-overlay.hidden { display: none; }
.atlas-modal {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  background: var(--panel, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  color: var(--ink, #e6edf3);
}
.atlas-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #30363d);
}
.atlas-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.atlas-modal-close {
  background: transparent;
  border: 0;
  color: #8b949e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
}
.atlas-modal-close:hover { background: rgba(248, 81, 73, 0.1); color: #f85149; }

.atlas-modal-body {
  padding: 18px 20px 0;
  overflow-y: auto;
  display: grid;
  gap: 14px;
}
.atlas-modal-body label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: #8b949e;
}
.atlas-modal-body label .small.muted { font-weight: normal; }
.atlas-modal-body input,
.atlas-modal-body select,
.atlas-modal-body textarea {
  font: inherit;
  font-size: 14px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 10px;
  color: #e6edf3;
}
.atlas-modal-body textarea {
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
  min-height: 100px;
}
.atlas-modal-body input:focus,
.atlas-modal-body select:focus,
.atlas-modal-body textarea:focus {
  outline: none;
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
}
.atlas-modal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
}
.atlas-modal-row legend {
  grid-column: 1 / -1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b949e;
  margin-bottom: 6px;
  padding: 0;
}
.atlas-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border, #30363d);
  margin-top: 10px;
}
.atlas-modal-footer .grow { flex: 1; }
.atlas-modal-footer .atlas-modal-msg { margin: 0; }
.atlas-modal-footer .atlas-modal-msg.err { color: #f85149; }
.atlas-modal-footer button {
  font: inherit;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #e6edf3;
}
.atlas-modal-footer button.primary {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
}
.atlas-modal-footer button.primary:hover { filter: brightness(1.05); }
.atlas-modal-footer button.primary:disabled { opacity: 0.6; cursor: not-allowed; }
.atlas-modal-footer button.ghost { background: transparent; }

/* ============================================================
 * Atlas Settings modal
 * Tabbed surface with a workspace info / members / tokens / tags
 * / timezone / danger-zone layout. Reuses .atlas-modal-* shell.
 * ============================================================ */
.atlas-settings-modal {
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  position: relative;
}
.atlas-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 16px 0;
  border-bottom: 1px solid var(--border, #30363d);
  background: rgba(13, 17, 23, 0.4);
}
.atlas-settings-tab {
  font: inherit;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #8b949e;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.atlas-settings-tab:hover {
  background: rgba(88, 166, 255, 0.08);
  color: #e6edf3;
}
.atlas-settings-tab.active,
.atlas-settings-tab[aria-selected="true"] {
  color: var(--ink, #e6edf3);
  border-bottom-color: var(--accent, #58a6ff);
  background: rgba(88, 166, 255, 0.08);
}
.atlas-settings-content {
  padding: 18px 20px;
  overflow-y: auto;
  display: block;
}
.atlas-settings-panel { display: block; }
.atlas-settings-panel[hidden] { display: none; }

.atlas-settings-section {
  margin-bottom: 22px;
}
.atlas-settings-section:last-child { margin-bottom: 0; }
.atlas-settings-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b949e;
}
.atlas-settings-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.atlas-settings-kv dt {
  color: #8b949e;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}
.atlas-settings-kv dd {
  margin: 0;
  color: #e6edf3;
}

.atlas-settings-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.atlas-settings-inline-form input[type="text"],
.atlas-settings-inline-form input[type="email"],
.atlas-settings-inline-form select {
  font: inherit;
  font-size: 14px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 10px;
  color: #e6edf3;
  min-width: 0;
}
.atlas-settings-inline-form input[type="email"] { flex: 1 1 240px; }
.atlas-settings-inline-form input[type="text"] { flex: 1 1 200px; }
.atlas-settings-inline-form input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 2px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  cursor: pointer;
}
.atlas-settings-inline-form button {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #e6edf3;
}
.atlas-settings-inline-form button.primary {
  background: #1f6feb;
  border-color: #1f6feb;
  color: #fff;
}
.atlas-settings-inline-form button.primary:hover { filter: brightness(1.05); }
.atlas-settings-inline-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.atlas-settings-msg.err { color: #f85149; }
.atlas-settings-msg.ok  { color: #3fb950; }

.atlas-settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Generic row card — used by members, tokens, tags. Icon + label/meta
 * column + right-aligned controls. */
.atlas-row-card {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.5);
}
.atlas-row-card.atlas-row-disabled {
  opacity: 0.6;
}
.atlas-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f6feb, #58a6ff);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
}
.atlas-tag-swatch {
  border-radius: 6px;
}
.atlas-row-main { min-width: 0; }
.atlas-row-label {
  font-weight: 500;
  color: #e6edf3;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atlas-row-meta {
  margin-top: 2px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atlas-row-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.atlas-row-controls select,
.atlas-row-controls button {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #e6edf3;
  cursor: pointer;
}
.atlas-row-controls button.ghost { background: transparent; }
.atlas-row-controls button.danger { color: #f85149; border-color: rgba(248, 81, 73, 0.4); }
.atlas-row-controls button:disabled,
.atlas-row-controls select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* One-time token reveal — high-contrast warning panel with copy button. */
.atlas-token-secret {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(250, 200, 50, 0.12);
  border: 1px solid rgba(250, 200, 50, 0.55);
  border-radius: 8px;
  color: #f5dd8a;
}
.atlas-token-secret[hidden] { display: none; }
.atlas-token-secret-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;
}
.atlas-token-secret-head strong { color: #fff7d0; font-weight: 600; }
.atlas-token-secret .atlas-token-copy {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(250, 200, 50, 0.5);
  background: rgba(250, 200, 50, 0.18);
  color: #fff7d0;
  cursor: pointer;
}
.atlas-token-secret .atlas-token-copy:hover { background: rgba(250, 200, 50, 0.32); }
.atlas-token-secret-value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  background: rgba(0, 0, 0, 0.45);
  padding: 8px 10px;
  border-radius: 6px;
  color: #fff;
}

.atlas-settings-content button.danger {
  font: inherit;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(248, 81, 73, 0.55);
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  cursor: pointer;
}
.atlas-settings-content button.danger:hover { background: rgba(248, 81, 73, 0.22); }
.atlas-settings-content button.danger:disabled { opacity: 0.5; cursor: not-allowed; }
.atlas-settings-content button.ghost {
  font: inherit;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: transparent;
  color: #e6edf3;
  cursor: pointer;
}
.atlas-settings-content button.ghost:hover { background: rgba(88, 166, 255, 0.08); }

.atlas-settings-loading { padding: 24px; text-align: center; }
.atlas-settings-error   { padding: 16px; color: #f85149; }

.atlas-settings-toast {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 6px;
  background: #161b22;
  border: 1px solid #30363d;
  color: #e6edf3;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.atlas-settings-toast[hidden] { display: none; }
.atlas-settings-toast.err { border-color: rgba(248, 81, 73, 0.55); color: #f85149; }
.atlas-settings-toast.ok  { border-color: rgba(63, 185, 80, 0.55); color: #3fb950; }

/* Hide the legacy onboarding card outright — Atlas owns settings now. */
#onboard { display: none !important; }

/* ============================================================
 * Departments / queues card stack — lives in Settings → Departments
 * ============================================================ */
.atlas-dept-isolation {
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle, rgba(127, 127, 127, 0.06));
}
.atlas-dept-isolation-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.atlas-dept-isolation-row input { margin-top: 3px; }
.atlas-dept-isolation-row > span {
  display: flex; flex-direction: column; gap: 2px;
}
.atlas-dept-isolation-msg { margin: 8px 0 0; }
.atlas-dept-isolation-msg.err { color: var(--warn); }

.atlas-dept-form {
  display: grid;
  grid-template-columns: 1fr 160px auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0 8px;
}
.atlas-dept-form label {
  display: flex; flex-direction: column;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-dim); font-weight: 600;
  gap: 4px;
}
.atlas-dept-form input,
.atlas-dept-form select {
  font: inherit; font-size: 14px; font-weight: 400;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px;
  text-transform: none; letter-spacing: 0;
}
.atlas-dept-form input:focus,
.atlas-dept-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.atlas-dept-form button.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.atlas-dept-form button.primary:hover { filter: brightness(1.05); }
.atlas-dept-form-msg.err { color: var(--warn); }
@media (max-width: 560px) {
  .atlas-dept-form { grid-template-columns: 1fr; }
}

.atlas-dept-list {
  display: flex; flex-direction: column;
  gap: 10px; margin-top: 16px;
}
.atlas-dept-card {
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.atlas-dept-card:hover { border-color: var(--accent); }
.atlas-dept-card-head {
  display: flex; align-items: center; gap: 14px;
}
.atlas-dept-meta { flex: 1 1 auto; min-width: 0; }
.atlas-dept-name { font-weight: 700; font-size: 15px; color: var(--fg); }
.atlas-dept-slug code {
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
}
.atlas-dept-desc {
  margin: 8px 0 0;
  padding-left: 30px;
}

/* Department color swatch — driven by data-color so the same css
 * works for any palette in DEPARTMENT_COLORS. Solid + glow. */
.atlas-dept-swatch {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c, #94a3b8);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25), 0 0 10px var(--c, transparent);
  flex-shrink: 0;
}
.atlas-dept-swatch[data-color="red"]      { --c: #ef4444; }
.atlas-dept-swatch[data-color="orange"]   { --c: #f97316; }
.atlas-dept-swatch[data-color="amber"]    { --c: #f5b73c; }
.atlas-dept-swatch[data-color="lime"]     { --c: #84cc16; }
.atlas-dept-swatch[data-color="green"]    { --c: #22c55e; }
.atlas-dept-swatch[data-color="teal"]     { --c: #14b8a6; }
.atlas-dept-swatch[data-color="cyan"]     { --c: #06b6d4; }
.atlas-dept-swatch[data-color="sky"]      { --c: #38bdf8; }
.atlas-dept-swatch[data-color="blue"]     { --c: #3b82f6; }
.atlas-dept-swatch[data-color="indigo"]   { --c: #6366f1; }
.atlas-dept-swatch[data-color="violet"]   { --c: #8b5cf6; }
.atlas-dept-swatch[data-color="fuchsia"]  { --c: #d946ef; }
.atlas-dept-swatch[data-color="pink"]     { --c: #ec4899; }
.atlas-dept-swatch[data-color="rose"]     { --c: #f43f5e; }
.atlas-dept-swatch[data-color="slate"]    { --c: #94a3b8; }

/* Same swatch used as an inline chip in the ticket pane. */
.atlas-dept-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg);
}