/* Atlas — a drop-in presentation layer for SmokePing 2.8.2. */
:root {
  color-scheme: light;
  --atlas-bg:#f5f7fb; --atlas-panel:#fff; --atlas-nav:#fff;
  --atlas-text:#1c2a3d; --atlas-muted:#56677d; --atlas-line:#dde4ed;
  --atlas-soft:#f0f4f9; --atlas-hover:#edf2f9; --atlas-accent:#245cda;
  --atlas-active:#ebf2ff; --atlas-shadow:0 16px 60px #14233629;
  --atlas-graph:#fff; --atlas-radius:12px; --atlas-header-height:72px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--atlas-bg); color:var(--atlas-text); font-size:14px; line-height:1.5;
}
:root[data-theme="dark"] { color-scheme:dark; --atlas-bg:#11171f; --atlas-panel:#19222d; --atlas-nav:#151c25; --atlas-text:#e7edf5; --atlas-muted:#a4b3c7; --atlas-line:#303d4e; --atlas-soft:#202b39; --atlas-hover:#263345; --atlas-accent:#9fc3ff; --atlas-active:#24374f; --atlas-shadow:0 16px 60px #0007; }
@media (prefers-color-scheme:dark) { :root[data-theme="system"] { color-scheme:dark; --atlas-bg:#11171f; --atlas-panel:#19222d; --atlas-nav:#151c25; --atlas-text:#e7edf5; --atlas-muted:#a4b3c7; --atlas-line:#303d4e; --atlas-soft:#202b39; --atlas-hover:#263345; --atlas-accent:#9fc3ff; --atlas-active:#24374f; --atlas-shadow:0 16px 60px #0007; } }
* { box-sizing:border-box; }
body { margin:0; }
a { color:var(--atlas-accent); text-decoration:none; }
a:hover { text-decoration:underline; }
button,input,select { font:inherit; }
button,select,input[type="checkbox"] { cursor:pointer; }
button { color:var(--atlas-text); }
:focus-visible { outline:3px solid var(--atlas-accent); outline-offset:3px; }
[hidden] { display:none !important; }
.no-js .js-only { display:none !important; }
.atlas-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.atlas-skip { position:fixed; left:16px; top:-100px; z-index:100; padding:12px 18px; background:var(--atlas-panel); border:2px solid var(--atlas-accent); border-radius:8px; }
.atlas-skip:focus { top:12px; }
.atlas-icon { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.atlas-header { height:var(--atlas-header-height); position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:18px; padding:0 26px; background:var(--atlas-nav); border-bottom:1px solid var(--atlas-line); }
.atlas-brand { display:inline-flex; align-items:center; gap:10px; color:var(--atlas-text); font-size:20px; font-weight:650; letter-spacing:-.6px; white-space:nowrap; }
.atlas-brand:hover { text-decoration:none; }
.atlas-brand-light { font-weight:400; color:var(--atlas-muted); }
.atlas-brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#245cda; color:#fff; }
.atlas-brand-mark svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.atlas-header-actions { margin-left:auto; display:flex; align-items:center; gap:14px; min-width:0; }
.atlas-search { display:flex; align-items:center; gap:8px; width:240px; max-width:35vw; background:var(--atlas-soft); border:1px solid var(--atlas-line); padding:8px 11px; border-radius:8px; color:var(--atlas-muted); }
.atlas-search input { background:transparent; color:var(--atlas-text); border:0; width:100%; min-width:0; font-size:13px; }
.atlas-search input::placeholder { color:var(--atlas-muted); opacity:1; }
.atlas-appearance select { min-height:38px; color:var(--atlas-text); background:var(--atlas-panel); border:1px solid var(--atlas-line); border-radius:8px; padding:6px 10px; font-size:13px; width:105px; }
.atlas-shell { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:calc(100dvh - var(--atlas-header-height)); }
.atlas-sidebar { background:var(--atlas-nav); border-right:1px solid var(--atlas-line); padding:24px 16px; position:sticky; top:var(--atlas-header-height); align-self:start; max-height:calc(100dvh - var(--atlas-header-height)); overflow-y:auto; overflow-wrap:anywhere; }
.atlas-sidebar-top { display:flex; align-items:center; justify-content:space-between; margin:0 10px 16px; }
.atlas-eyebrow { font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:1.4px; color:var(--atlas-muted); }
.atlas-home { display:flex; align-items:center; gap:9px; padding:10px; border-radius:7px; color:var(--atlas-muted); margin-bottom:18px; min-height:40px; }
.atlas-home:hover { text-decoration:none; background:var(--atlas-hover); }
.atlas-home[aria-current="page"] { background:var(--atlas-active); color:var(--atlas-accent); font-weight:600; }
#atlas-targets .menu { padding:0; margin:0; list-style:none; }
#atlas-targets .menu .menu { margin:4px 0 8px 12px; padding-left:9px; border-left:1px solid var(--atlas-line); }
#atlas-targets .menu li { padding:0; margin:3px 0; }
#atlas-targets .menu a { display:block; border-radius:7px; padding:9px 10px; min-height:38px; color:var(--atlas-muted); font-size:13px; overflow-wrap:anywhere; }
#atlas-targets .menu a:hover { text-decoration:none; background:var(--atlas-hover); }
#atlas-targets .menu .menu a { font-size:12px; }
#atlas-targets .menulinkactive,#atlas-targets .menu a[aria-current="page"] { background:var(--atlas-active); color:var(--atlas-accent); font-weight:600; }
#atlas-targets .menuopen > a { color:var(--atlas-text); font-weight:600; }
#atlas-targets form { margin-bottom:22px; }
#atlas-targets .hierarchy,#atlas-targets .filter { margin-bottom:12px; }
#atlas-targets .hierarchy-label,#atlas-targets .filter-label { display:block; color:var(--atlas-muted); font-size:12px; margin-bottom:5px; }
#atlas-targets input,#atlas-targets select { width:100%; min-height:36px; min-width:0; padding:7px 9px; border:1px solid var(--atlas-line); border-radius:7px; color:var(--atlas-text); background:var(--atlas-soft); font-size:12px; }
.atlas-sidebar-foot { margin:34px 10px 0; border-top:1px solid var(--atlas-line); padding-top:18px; }
.atlas-sidebar-foot p { margin:7px 0; font-size:12px; }
.atlas-viewer { color:var(--atlas-muted); overflow-wrap:anywhere; }
.atlas-main { padding:30px; width:100%; max-width:1600px; min-width:0; }
.atlas-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:18px; margin-bottom:15px; color:var(--atlas-muted); font-size:12px; overflow-wrap:anywhere; }
.atlas-breadcrumb a { color:var(--atlas-muted); }
.atlas-breadcrumb .atlas-breadcrumb-separator { opacity:.6; }
.atlas-page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.atlas-page-heading > div:first-child { min-width:0; }
.atlas-main h1 { margin:0; font-size:29px; font-weight:650; letter-spacing:-.8px; line-height:1.2; overflow-wrap:anywhere; }
.atlas-target-address { font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--atlas-muted); margin:8px 0 0; overflow-wrap:anywhere; }
.atlas-target-address:empty { display:none; }
.atlas-refresh { display:flex; align-items:center; gap:12px; flex-shrink:0; padding-top:2px; }
.atlas-refresh-switch { display:flex; gap:6px; align-items:center; color:var(--atlas-muted); font-size:12px; white-space:nowrap; }
.atlas-refresh-switch input { accent-color:var(--atlas-accent); }
.atlas-button,.atlas-icon-button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; border:1px solid var(--atlas-line); border-radius:7px; background:var(--atlas-panel); color:var(--atlas-text); padding:7px 12px; font-size:12px; gap:7px; }
.atlas-button:hover,.atlas-icon-button:hover { background:var(--atlas-hover); text-decoration:none; }
.atlas-icon-button { width:38px; height:38px; padding:8px; flex-shrink:0; }
.atlas-menu-button,.atlas-menu-close { display:none; }
.atlas-remark { color:var(--atlas-muted); font-size:13px; margin-bottom:25px; overflow-wrap:anywhere; }
.atlas-remark:empty { display:none; }
.atlas-remark p { margin:8px 0; }
.atlas-remark img { max-width:100%; height:auto; }
.atlas-section-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:15px; }
.atlas-section-toolbar h2 { margin:0; font-size:14px; font-weight:600; }
#atlas-target-count { font-size:12px; font-weight:400; color:var(--atlas-muted); padding-left:6px; }
.atlas-caption { color:var(--atlas-muted); font-size:12px; }
.atlas-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.atlas-overview > :not(.panel) { grid-column:1/-1; }
.atlas-overview > h1 { font-size:20px; }
.panel { min-width:0; border:1px solid var(--atlas-line); border-radius:var(--atlas-radius); background:var(--atlas-panel); overflow:hidden; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:17px 18px 13px; }
.panel-heading h2 { margin:0; font-size:14px; font-weight:600; color:var(--atlas-text); min-width:0; flex:1; overflow-wrap:anywhere; }
.panel-heading h2 a { color:var(--atlas-text); }
.panel-heading h2 a:hover { color:var(--atlas-accent); }
.panel-body { min-width:0; padding:0 16px 16px; }
.panel-body > a { display:block; }
.no-js .panel-body img:not(#zoom) { display:block; max-width:100%; height:auto; background:#fff; }
.no-js .panel-body > a { padding:8px; background:#fff; border-radius:6px; }
.no-js .panel-body:has(#zoom) { overflow-x:auto; }
.atlas-main h1:empty { display:none; }
.atlas-graph-surface { background:var(--atlas-graph); color:#1c2a3d; border-radius:6px; padding:9px 6px; min-width:0; }
.atlas-graph-image { display:block; width:100%; height:auto; max-width:100%; margin-inline:auto; border:0; }
.atlas-button:disabled { cursor:default; opacity:.55; }
.atlas-graph-button { font-size:11px; min-height:28px; padding:4px 8px; margin-left:auto; }
.atlas-details { display:flex; flex-direction:column; gap:20px; margin-top:24px; }
.atlas-details:empty { margin-top:0; }
.atlas-details .panel-body { padding:0 20px 20px; }
.atlas-details .panel-heading { padding:20px 22px 15px; }
.atlas-details .panel-heading h2 { font-size:15px; }
.atlas-details .atlas-graph-surface { padding:12px; }
.atlas-details .atlas-graph-image { width:auto; margin-inline:auto; }
.atlas-range-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.atlas-range-links a { display:inline-flex; align-items:center; padding:7px 12px; border-radius:7px; border:1px solid var(--atlas-line); background:var(--atlas-panel); font-size:12px; max-width:100%; overflow-wrap:anywhere; }
.atlas-range-links a:hover { text-decoration:none; background:var(--atlas-active); }
.atlas-details .panel { scroll-margin-top:calc(var(--atlas-header-height) + 20px); }
.atlas-navigator-scroll { overflow-x:auto; padding:12px; max-width:100%; background:var(--atlas-graph); border-radius:6px; color:#1c2a3d; }
.atlas-navigator-scroll #zoom { max-width:none; width:auto; height:auto; display:block; }
.atlas-navigator-hint { font-size:12px; color:var(--atlas-muted); margin:0 0 12px; }
.atlas-form-fields { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:18px; }
.atlas-form-fields label { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--atlas-muted); flex:1 1 180px; }
#range_form input:not([type="hidden"]),#range_form select { max-width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--atlas-line); border-radius:7px; color:var(--atlas-text); background:var(--atlas-panel); }
#range_form input[type="submit"] { font-size:12px; cursor:pointer; flex:0 1 auto; }
#range_form > p { display:flex; flex-wrap:wrap; align-items:center; gap:9px; color:var(--atlas-muted); font-size:12px; }
.atlas-graph-error { color:var(--atlas-muted); padding:14px; font-size:12px; }
.atlas-empty { padding:24px 0; color:var(--atlas-muted); }
.atlas-empty h2 { margin:0 0 8px; color:var(--atlas-text); font-size:19px; }
.atlas-empty p { margin:0; }
.atlas-page-status { font-size:11px; color:var(--atlas-muted); margin-top:24px; }
.atlas-footer { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:18px; margin-top:25px; border-top:1px solid var(--atlas-line); color:var(--atlas-muted); font-size:11px; }
.atlas-footer p { margin:0; min-width:0; overflow-wrap:anywhere; }
.atlas-footer a { color:var(--atlas-muted); }
.atlas-graph-dialog { border:1px solid var(--atlas-line); border-radius:12px; padding:20px; background:var(--atlas-panel); color:var(--atlas-text); box-shadow:var(--atlas-shadow); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); }
.atlas-graph-dialog::backdrop { background:#071120b3; }
.atlas-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.atlas-dialog-head h2 { margin:0; font-size:16px; }
.atlas-dialog-canvas { overflow:auto; max-width:100%; max-height:calc(100dvh - 180px); padding:16px; background:var(--atlas-graph); border-radius:7px; }
.atlas-dialog-canvas img { max-width:none; display:block; }
.atlas-backdrop { position:fixed; inset:var(--atlas-header-height) 0 0; background:#07112099; border:0; z-index:40; padding:0; }
@media(min-width:1800px) { .atlas-overview { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1150px) { .atlas-shell { grid-template-columns:200px minmax(0,1fr); } .atlas-main { padding:26px 22px; } .atlas-overview { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) {
  :root { --atlas-header-height:64px; }
  .atlas-header { padding:0 16px; gap:10px; }
  .atlas-brand { font-size:18px; gap:7px; }
  .atlas-brand-mark { width:29px; height:29px; }
  .atlas-header-actions { gap:8px; }
  .atlas-appearance select { width:86px; font-size:12px; padding-inline:6px; }
  .atlas-shell { grid-template-columns:minmax(0,1fr); }
  .atlas-main { padding:24px 16px; }
  .atlas-main h1 { font-size:26px; }
  .atlas-page-heading { flex-wrap:wrap; gap:15px; }
  .atlas-refresh { padding:0; }
  .atlas-footer-author { display:none; }
  .atlas-section-toolbar .atlas-caption { font-size:11px; }
  .js .atlas-menu-button,.js .atlas-menu-close { display:inline-flex; }
  .js .atlas-sidebar { position:fixed; top:var(--atlas-header-height); bottom:0; left:0; width:min(320px,calc(100vw - 45px)); max-height:none; z-index:50; transform:translateX(-100%); visibility:hidden; transition:transform .18s ease,visibility .18s; padding:22px 17px; }
  .js[data-menu-open="true"] .atlas-sidebar { visibility:visible; transform:translateX(0); }
  .no-js .atlas-sidebar { position:static; max-height:none; border-right:0; border-bottom:1px solid var(--atlas-line); }
  .atlas-search { position:absolute; top:calc(var(--atlas-header-height) + 12px); left:16px; width:calc(100% - 32px); max-width:none; background:var(--atlas-panel); min-height:42px; }
  .js[data-has-search="true"] .atlas-main { padding-top:78px; }
  .atlas-search input { font-size:16px; }
  .panel-heading { padding:16px 15px 12px; }
  .panel-body { padding:0 12px 12px; }
  .atlas-details .panel-heading { padding:17px 16px 12px; }
  .atlas-details .panel-body { padding:0 12px 14px; }
  .atlas-details .atlas-graph-surface { padding:6px; }
  .atlas-form-fields { gap:12px; }
  #range_form input:not([type="hidden"]),#atlas-targets input,#atlas-targets select { font-size:16px; }
  .atlas-dialog-head { align-items:flex-start; }
  .atlas-graph-dialog { padding:16px; }
}
@media(pointer:coarse) { .atlas-button,.atlas-icon-button,.atlas-appearance select,.atlas-home,#atlas-targets .menu a,.atlas-range-links a { min-height:44px; } .atlas-icon-button { min-width:44px; } .atlas-refresh-switch { min-height:44px; } .atlas-graph-button { padding:7px 10px; } }
@media(prefers-reduced-motion:reduce) { .atlas-sidebar { transition:none !important; } }
@media print {
  :root[data-theme] { color-scheme:light; --atlas-bg:#fff; --atlas-panel:#fff; --atlas-text:#111; --atlas-muted:#444; --atlas-line:#bbb; --atlas-accent:#111; }
  .atlas-header,.atlas-sidebar,.atlas-backdrop,.atlas-breadcrumb,.atlas-refresh,.atlas-range-links,.atlas-graph-button,.atlas-page-status,.atlas-skip,.atlas-graph-dialog { display:none !important; }
  .atlas-shell { display:block; } .atlas-main,.js[data-has-search="true"] .atlas-main { max-width:none; padding:0; }
  .atlas-overview { grid-template-columns:1fr; } .panel { break-inside:avoid; } .atlas-footer { margin-top:20px; }
  .atlas-navigator-scroll { overflow:visible; } .atlas-navigator-scroll #zoom { max-width:100%; }
}

/* Optional server-rendered graphs inherit the surrounding card appearance. */
.atlas-rendered-surface { background:var(--atlas-panel); padding:0; }
.atlas-rendered-surface img { display:block; width:100%; height:auto; }
.atlas-graph-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; color:var(--atlas-muted); font-size:12px; }
.atlas-graph-metrics > span { display:grid; gap:5px; }
.atlas-graph-metrics strong { color:var(--atlas-text); font-size:15px; font-variant-numeric:tabular-nums; }
.atlas-graph-metrics small,.atlas-loss-legend { grid-column:1 / -1; }
.atlas-loss-legend { font-size:10px; }
.atlas-loss-legend summary { cursor:pointer; font-size:11px; }
.atlas-loss-legend span { margin:8px 12px 0 0; }
.atlas-loss-legend small { display:block; margin-top:8px; }
.atlas-loss-legend span { display:inline-flex; align-items:center; gap:5px; }
.atlas-loss-legend i { display:inline-block; width:8px; height:8px; border-radius:50%; }
.atlas-renderer-navigator { position:relative; }
.atlas-renderer-navigator img { user-select:none; -webkit-user-drag:none; }
.atlas-zoom-selection { position:absolute; pointer-events:none; background:#60a5fa30; border:1px solid #60a5fa; }
.atlas-renderer-fallback { font-size:11px; }

.atlas-renderer-first .atlas-graph-surface,
.atlas-renderer-first .atlas-navigator-scroll,
.atlas-renderer-first .atlas-dialog-canvas { background:var(--atlas-panel); }
.atlas-graph-deferred:not([src]) { display:block; width:100%; height:160px; visibility:hidden; }
.atlas-details .atlas-graph-deferred:not([src]) { height:240px; }

.atlas-renderer-first .atlas-native-surface { background:var(--atlas-graph); }
.atlas-overview > noscript,.atlas-details > noscript { display:contents; }

.atlas-graph-data-note { grid-column:1 / -1; margin:0; color:var(--atlas-muted); font-size:12px; }
.panel[data-graph-data-state="no_replies"] .atlas-graph-data-note { border-left:3px solid #ef4444; padding:4px 10px; }