/* ATLAS shared UI uplift — readability, depth, micro-interactions, empty states,
   mobile. Loaded AFTER each page's inline <style> so token overrides win. The
   console (atlas.html) has its own bespoke pass and does not load this. Additive
   and conservative: it never changes layout, only surface, type, and motion. */

/* ── Readability ── */
:root { --muted: #9fb1c0; --white: #f2f6f9; }
body { font-size: 15px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: #dbe5ed; }
.lede, .sub, p { line-height: 1.7; }
.lede, .sub { color: #cdd9e2; }
.empty, .cc-empty, .rail-empty, .muted { color: #aebdc9; line-height: 1.7; }

/* ── Depth — lift common card surfaces off the background (shadow only, no bg change) ── */
.panel, .mod, .kpi, .card, .doc, .post, form.compose, .gate, .up, .orow, .agentcard, .rcard, .phase {
  box-shadow: 0 10px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.mod, .doc, .agentcard, .rcard { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.mod:hover, .doc:hover, .agentcard:hover { transform: translateY(-2px); border-color: rgba(34,174,224,.42); }

/* ── Micro-interactions ── */
.tab, a.btn, a.back, .tbtn, button.act, button.sel, button.go, .sel {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease, opacity .14s ease;
}
button:active, a.btn:active, .tbtn:active, button.act:active, button.sel:active, .tab:active { transform: scale(.985); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(34,174,224,.6); outline-offset: 2px;
}

/* ── Loading skeleton utility (pages opt in by adding class="skeleton") ── */
@keyframes atlasShimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
.skeleton { background: linear-gradient(90deg, rgba(125,194,225,.05) 25%, rgba(125,194,225,.14) 37%, rgba(125,194,225,.05) 63%); background-size: 640px 100%; animation: atlasShimmer 1.35s infinite linear; color: transparent !important; border-radius: 3px; min-height: 14px; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .mod, .doc { transition: none; } }

/* ── Empty states — inviting, on-brand (orbit badge + soft frame + glow) ── */
.empty, .empty2 {
  border: 1px dashed rgba(125,194,225,.20);
  border-radius: 12px;
  background: radial-gradient(120% 90% at 50% -20%, rgba(34,174,224,.07), transparent 62%);
}
.empty::before, .empty2::before {
  content: "";
  display: block;
  width: 38px; height: 38px;
  margin: 2px auto 12px;
  border-radius: 50%;
  background-color: rgba(34,174,224,.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dc2e1' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cellipse cx='12' cy='12' rx='9' ry='4.1' transform='rotate(-28 12 12)'/%3E%3Ccircle cx='19' cy='8.6' r='1.3' fill='%237dc2e1' stroke='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  box-shadow: inset 0 0 0 1px rgba(125,194,225,.25);
  opacity: .92;
}
/* Compact/inline empties (message threads, list rows) stay lightweight — no frame or badge. */
.tlist .empty, .msgs .empty, td .empty, .empty.inline { border: none; background: none; }
.tlist .empty::before, .msgs .empty::before, td .empty::before, .empty.inline::before { display: none; }

/* ── Mobile ── */
@media (max-width: 640px) {
  main { padding: 26px 16px !important; }
  header { padding: 12px 16px !important; }
  h1 { font-size: clamp(24px, 8vw, 32px) !important; }
}

/* ── Apple-dark / Light themes (opt-in via <html class="applux|applight">) ──
   Set by a tiny head snippet from atlasPrefs.theme; default applux. Loaded after
   each page's inline styles + higher specificity than :root, so token flips win
   across every page — neutral hairlines, glass surfaces, rounded controls. */
html.applux {
  --ink: #06070a; --navy: #0a0e15; --panel: #12161d;
  --line: rgba(255,255,255,.09); --edge: rgba(255,255,255,.09);
  --white: #f3f6f9; --muted: #8b95a3;
}
html.applux body { background:
  radial-gradient(1100px 640px at 20% -10%, rgba(76,198,240,.06), transparent 60%),
  linear-gradient(180deg, #06070a, #040507) !important; }
html.applux header { background: rgba(9,11,15,.62) !important; border-bottom-color: rgba(255,255,255,.08) !important; backdrop-filter: blur(20px) saturate(1.1); }
html.applux .panel, html.applux .card, html.applux .calc, html.applux .mod, html.applux .kpi,
html.applux .doc, html.applux .agentcard, html.applux .rcard, html.applux .phase, html.applux .gate,
html.applux form.compose, html.applux .up, html.applux .orow, html.applux .post {
  background: rgba(22,26,33,.6) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 40px -26px rgba(0,0,0,.75) !important;
}
html.applux input, html.applux select, html.applux textarea { border-radius: 11px !important; }
html.applux button, html.applux .btn, html.applux .tbtn, html.applux a.back, html.applux .act, html.applux .tab { border-radius: 10px !important; }
html.applux .mod:hover, html.applux .doc:hover, html.applux .agentcard:hover { border-color: rgba(255,255,255,.2) !important; }

html.applight {
  --ink: #eef2f6; --navy: #e6ebf1; --panel: #f6f8fb;
  --line: rgba(15,30,50,.14); --edge: rgba(15,30,50,.12);
  --white: #0f1720; --muted: #5c6773; --blue: #0e83b4; --blue2: #0b6d97;
}
html.applight body { background: linear-gradient(180deg, #eef2f6, #e5ebf1) !important; color: #0f1720 !important; }
html.applight header { background: rgba(255,255,255,.72) !important; border-bottom-color: rgba(15,30,50,.1) !important; }
html.applight .panel, html.applight .card, html.applight .calc, html.applight .mod, html.applight .kpi,
html.applight .doc, html.applight .agentcard, html.applight .rcard, html.applight .phase, html.applight .gate,
html.applight form.compose, html.applight .up, html.applight .orow, html.applight .post {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,30,50,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px -24px rgba(20,45,80,.35) !important;
}
html.applight input, html.applight select, html.applight textarea { border-radius: 11px !important; background: rgba(255,255,255,.85) !important; color: #0f1720 !important; }
html.applight button, html.applight .btn, html.applight .tbtn, html.applight a.back, html.applight .act, html.applight .tab { border-radius: 10px !important; }
html.applight h1, html.applight h2, html.applight h3, html.applight .brand { color: #0e1620 !important; }
html.applight body, html.applight p, html.applight td, html.applight li, html.applight label { color: #24303b; }

/* ── Premium finish — scrollbars, selection, gentle content entrance ── */
* { scrollbar-width: thin; scrollbar-color: rgba(125,194,225,.26) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(125,194,225,.22); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(34,174,224,.5); background-clip: padding-box; }
::selection { background: rgba(34,174,224,.32); color: #fff; }
main { animation: atlasIn .5s ease both; }
@keyframes atlasIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } }