/* ============================================================================
Atlas Intel :: appdemo.css :: in-page tool demo surfaces
Makes marketing-site tool demos look EXACTLY like the real Atlas desktop app.
Every rule is namespaced under a .apd root container so it can never leak
into the surrounding site. Tokens are mined verbatim from the app base.css
(:root block) and re-declared as --apd-* custom properties on .apd.
PERF LAW: these demos live inside the scrolling #app. NO backdrop-filter and
NO CSS filter anywhere in this file. Dark theme only.
ACCENT HOOK: the site sets var(--tool-hex) per tool. Every accent here reads
var(--tool-hex) with the app's default #5B7CFA as fallback, so a demo picks
up its tool colour automatically while still looking correct with no hook.
Self-contained: system font stack + ui-monospace, no external fonts/images.
============================================================================ */
/* ---- root container: tokens + comfortable defaults ---------------------- */
.apd{
/* mined surfaces (base.css :root) */
--apd-ink:#07080B; /* deepest frame */
--apd-bg:#0a0b0f; /* app body background */
--apd-panel:#111319; /* s1 :: panels, rows, cards */
--apd-s2:#171A21; /* s2 :: hover / raised */
--apd-s3:#1E222B; /* s3 :: controls, mini buttons */
--apd-shi:#262C38; /* s-high */
/* ink / text */
--apd-ink-tx:#FFFFFF; /* primary text */
--apd-mut:rgba(208,216,238,.62); /* muted text */
--apd-faint:rgba(208,216,238,.46); /* faint / mono labels */
/* hairlines */
--apd-line:rgba(180,200,255,.11); /* hair */
--apd-line2:rgba(180,200,255,.18); /* hair2 */
/* accent :: driven by the site's per-tool --tool-hex, app blue as fallback */
--apd-accent:var(--tool-hex,#5B7CFA);
--apd-accent-wash:color-mix(in oklab, var(--apd-accent) 13%, transparent);
--apd-accent-soft:color-mix(in oklab, var(--apd-accent) 26%, transparent);
/* status hues (mined) */
--apd-reclaim:#3FBFA5;
--apd-amber:#F0883E;
--apd-coral:#E5556E;
/* radii (mined --rs/--rm/--rl) */
--apd-rs:8px;
--apd-rm:12px;
--apd-rl:16px;
/* type (self-contained, no Inter/JetBrains, degrade to system) */
--apd-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--apd-mono:ui-monospace,'SF Mono','JetBrains Mono',Consolas,'Liberation Mono',monospace;
--apd-ease:cubic-bezier(.2,.8,.2,1);
/* the container itself reads like an app view */
color:var(--apd-ink-tx);
background:var(--apd-bg);
font-family:var(--apd-ui);
font-size:13px;
line-height:1.45;
-webkit-font-smoothing:antialiased;
border:1px solid var(--apd-line);
border-radius:var(--apd-rm);
padding:16px;
overflow:hidden;
}
.apd *,.apd *::before,.apd *::after{ box-sizing:border-box; }
/* ---- panel: the primary flat data surface ------------------------------- */
.apd-panel{
background:var(--apd-panel);
border:1px solid var(--apd-line);
border-radius:var(--apd-rm);
padding:14px 16px;
}
.apd-panel + .apd-panel{ margin-top:12px; }
/* panel header :: title left, chip/meta right (mined .sec-h) */
.apd-panel-head{
display:flex;
align-items:center;
gap:10px;
margin:0 0 11px;
}
.apd-panel-head .apd-title{
font-family:var(--apd-mono);
font-size:12px;
font-weight:600;
letter-spacing:.07em;
text-transform:uppercase;
color:var(--apd-mut);
margin:0;
}
.apd-panel-head .apd-count,
.apd-panel-head .apd-right{
margin-left:auto;
font-family:var(--apd-mono);
font-size:11.5px;
color:var(--apd-faint);
}
/* ---- rows: the app's core result-list row ------------------------------- */
.apd-rows{ display:flex; flex-direction:column; gap:3px; }
.apd-row{
display:flex;
align-items:center;
gap:12px;
padding:9px 14px;
border-radius:var(--apd-rs);
background:var(--apd-panel);
border:1px solid transparent;
cursor:default;
position:relative;
}
.apd-row:hover{
background:var(--apd-s2);
border-color:var(--apd-line);
}
/* selected row (mined .row.sel) */
.apd-row.apd-sel{
background:var(--apd-accent-wash);
border-color:var(--apd-accent-soft);
}
/* file-type / severity LED dot */
.apd-led{ width:8px; height:8px; border-radius:2px; flex:none; background:var(--apd-accent); }
.apd-led.reclaim{ background:var(--apd-reclaim); }
.apd-led.amber{ background:var(--apd-amber); }
.apd-led.coral{ background:var(--apd-coral); }
/* checkbox affordance */
.apd-ck{
width:16px; height:16px; border-radius:4px;
border:1.5px solid var(--apd-line2); flex:none;
display:grid; place-items:center;
color:transparent; font-size:11px;
}
.apd-row.apd-sel .apd-ck{ background:var(--apd-accent); border-color:var(--apd-accent); color:#fff; }
/* name + path (mined .row .nm / .pth) */
.apd-name{
font-size:13px; font-weight:500;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.apd-path{
font-family:var(--apd-mono); font-size:11px; color:var(--apd-faint);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.apd-grow{ min-width:0; flex:1; }
.apd-meta{ display:flex; align-items:center; gap:10px; flex:none; }
/* age + size mono readouts (mined .row .age / .sz) */
.apd-age{
font-family:var(--apd-mono); font-size:11px; color:var(--apd-faint);
width:38px; text-align:right;
}
.apd-size{
font-family:var(--apd-mono); font-size:13px; font-weight:600;
font-variant-numeric:tabular-nums;
width:74px; text-align:right;
}
/* per-row mini action button, reveals on hover (mined .row .mbtn) */
.apd-mbtn{
width:26px; height:26px; border-radius:6px;
display:grid; place-items:center;
background:var(--apd-s3); border:1px solid var(--apd-line);
color:var(--apd-mut); cursor:pointer; font-size:14px;
opacity:0; transition:opacity .12s;
}
.apd-row:hover .apd-mbtn{ opacity:1; }
.apd-mbtn:hover{ color:var(--apd-ink-tx); border-color:var(--apd-line2); }
/* ---- ladder row: proportional bar = row background (mined .lrow) --------- */
.apd-ladder{ display:flex; flex-direction:column; gap:3px; }
.apd-lrow{
position:relative; display:flex; align-items:center; gap:12px;
padding:10px 14px; border-radius:var(--apd-rs); overflow:hidden;
background:var(--apd-panel); cursor:default;
}
.apd-lrow .apd-fill{
position:absolute; left:0; top:0; bottom:0;
border-radius:var(--apd-rs) 0 0 var(--apd-rs);
background:var(--apd-accent); opacity:.20;
}
.apd-lrow > *{ position:relative; z-index:1; }
/* ---- chips / badges ----------------------------------------------------- */
/* pill chip (mined .chip) */
.apd-chip{
font-size:12px; font-weight:500; color:var(--apd-mut);
background:var(--apd-panel); border:1px solid var(--apd-line);
border-radius:999px; padding:5px 12px;
display:inline-flex; align-items:center; gap:7px; cursor:default;
}
.apd-chip .c{ font-family:var(--apd-mono); font-size:10.5px; color:var(--apd-faint); }
.apd-chip.on{
background:var(--apd-accent-wash); color:var(--apd-ink-tx);
border-color:var(--apd-accent-soft);
}
.apd-chip.on .c{ color:var(--apd-accent); }
.apd-chips{ display:flex; flex-wrap:wrap; gap:8px; }
/* uppercase mono status badge (mined .bdg) */
.apd-badge{
font-family:var(--apd-mono); font-size:9.5px; font-weight:700;
letter-spacing:.05em; text-transform:uppercase;
padding:2px 7px; border-radius:5px;
color:var(--apd-mut); background:var(--apd-s2);
}
.apd-badge.safe{ color:var(--apd-reclaim); background:color-mix(in oklab,var(--apd-reclaim) 14%,transparent); }
.apd-badge.caution{ color:var(--apd-amber); background:color-mix(in oklab,var(--apd-amber) 15%,transparent); }
.apd-badge.danger{ color:var(--apd-coral); background:color-mix(in oklab,var(--apd-coral) 15%,transparent); }
/* ---- buttons ------------------------------------------------------------ */
/* base (mined .btn) :: no transform or CSS filter on hover, per perf law */
.apd-btn{
display:inline-flex; align-items:center; gap:7px;
font-family:var(--apd-ui); font-size:13px; font-weight:600;
border-radius:var(--apd-rs); padding:8px 14px;
cursor:pointer; border:1px solid transparent;
color:var(--apd-ink-tx); background:transparent;
transition:background .12s var(--apd-ease), border-color .12s var(--apd-ease), color .12s var(--apd-ease);
}
/* ghost (mined .btn.ghost) :: default demo button */
.apd-btn{ border-color:var(--apd-line2); }
.apd-btn:hover{ background:var(--apd-panel); }
/* primary (mined .btn.primary) :: accent fill */
.apd-btn-primary{ background:var(--apd-accent); border-color:transparent; color:#fff; }
.apd-btn-primary:hover{ background:color-mix(in oklab, var(--apd-accent) 88%, #fff); }
/* danger (mined .undo/.close :: coral fill) */
.apd-btn-danger{ background:var(--apd-coral); border-color:transparent; color:#fff; }
.apd-btn-danger:hover{ background:color-mix(in oklab, var(--apd-coral) 88%, #fff); }
/* teal / reclaim (mined .btn.teal) */
.apd-btn-teal{ background:var(--apd-reclaim); border-color:transparent; color:#06231d; }
.apd-btn-teal:hover{ background:color-mix(in oklab, var(--apd-reclaim) 88%, #fff); }
/* segmented toggle (mined .seg) */
.apd-seg{
display:inline-flex; background:var(--apd-panel);
border:1px solid var(--apd-line); border-radius:var(--apd-rs);
padding:3px; gap:2px;
}
.apd-seg button{
font-family:var(--apd-mono); font-size:11.5px; font-weight:600;
color:var(--apd-mut); background:transparent; border:none;
border-radius:6px; padding:5px 12px; cursor:pointer;
}
.apd-seg button.on{ background:var(--apd-s3); color:var(--apd-ink-tx); box-shadow:inset 0 0 0 1px var(--apd-line2); }
/* ---- meters / bars ------------------------------------------------------ */
/* segmented meter (mined .meter) */
.apd-meter{ display:flex; gap:2px; height:24px; }
.apd-meter i{ flex:1; border-radius:2px; background:var(--apd-s2); box-shadow:inset 0 0 0 1px var(--apd-line); }
.apd-meter i.on{ background:var(--apd-accent); box-shadow:none; }
/* thin progress bar (mined .progress) */
.apd-progress{ height:8px; border-radius:999px; background:var(--apd-s2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--apd-line); }
.apd-progress > i{ display:block; height:100%; border-radius:999px; background:var(--apd-reclaim); }
/* full-width category spectrum (mined .spectrum) */
.apd-spectrum{ height:38px; border-radius:6px; overflow:hidden; display:flex; box-shadow:inset 0 0 0 1px var(--apd-line); }
.apd-spectrum > i{ height:100%; }
.apd-spectrum > i + i{ border-left:1px solid var(--apd-ink); }
/* big mono readout (mined .readout) */
.apd-readout{ display:flex; align-items:center; gap:18px; padding:12px 4px; }
.apd-readout .big{
font-family:var(--apd-mono); font-size:34px; font-weight:600;
letter-spacing:-.02em; color:var(--apd-reclaim); line-height:1;
font-variant-numeric:tabular-nums;
}
.apd-readout .lbl{
font-family:var(--apd-mono); font-size:10.5px; letter-spacing:.08em;
text-transform:uppercase; color:var(--apd-faint);
}
/* ---- mono utility ------------------------------------------------------- */
.apd-mono{ font-family:var(--apd-mono); font-variant-numeric:tabular-nums; }
/* ---- empty state (mined .empty) ----------------------------------------- */
.apd-empty{ text-align:center; padding:40px 20px; }
.apd-empty .ei{ font-size:28px; color:var(--apd-faint); margin-bottom:12px; }
.apd-empty h4{ margin:0 0 6px; font-size:15px; color:var(--apd-ink-tx); }
.apd-empty p{ margin:0 auto; font-size:13px; color:var(--apd-mut); max-width:380px; line-height:1.5; }
/* ---- footer bar (action row under a panel) ------------------------------ */
.apd-foot{
display:flex; align-items:center; gap:10px;
margin-top:12px; padding-top:12px;
border-top:1px solid var(--apd-line);
}
.apd-foot .apd-note{ font-size:12px; color:var(--apd-faint); }
.apd-foot .apd-spacer{ margin-left:auto; }
/* ---- scoped scrollbar (keeps demo scroll areas app-dark) ---------------- */
.apd ::-webkit-scrollbar{ width:10px; height:10px; }
.apd ::-webkit-scrollbar-track{ background:transparent; }
.apd ::-webkit-scrollbar-thumb{ background:var(--apd-s3); border-radius:6px; border:2px solid transparent; background-clip:padding-box; }
.apd ::-webkit-scrollbar-thumb:hover{ background:var(--apd-shi); }
/* ==========================================================================
WALKTHROUGH :: detailed "how it works in the real app" surface.
Lives inside the scrolling #app, so it is a GLASS V2 FAUX panel: layered
rgba gradients + 1px hairline, NEVER backdrop-filter (PERF LAW). It pairs
with .glass-faux (css/glass.css) on the outer frame; these rules style the
inner walkthrough content. Accent reads var(--tool-hex) like the rest of
this file, with the app blue as a fallback.
Markup shape (static, per tool page):
========================================================================== */
.apd-walk{
--apd-accent:var(--tool-hex,#5B7CFA);
color:#EAEEF6;
font-family:var(--apd-ui,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
display:flex; flex-direction:column; gap:clamp(20px,3vw,32px);
}
/* numbered workflow steps */
.apd-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.apd-steps > li{
display:flex; align-items:flex-start; gap:16px;
padding:15px 17px; border-radius:14px;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.apd-stepn{
flex:0 0 auto; width:30px; height:30px; border-radius:50%;
display:grid; place-items:center;
font-family:var(--apd-mono,ui-monospace,monospace); font-size:13px; font-weight:700;
color:var(--apd-accent);
background:color-mix(in oklab, var(--apd-accent) 15%, transparent);
border:1px solid color-mix(in oklab, var(--apd-accent) 45%, transparent);
}
.apd-steps b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.005em; color:#fff; }
.apd-steps p{ margin:5px 0 0; font-size:13.5px; line-height:1.55; color:rgba(226,232,246,.72); max-width:60ch; }
.apd-steps code{
font-family:var(--apd-mono,ui-monospace,monospace); font-size:.86em;
padding:1px 6px; border-radius:5px; color:var(--apd-accent);
background:color-mix(in oklab, var(--apd-accent) 12%, transparent);
}
/* before / after strip */
.apd-ba{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.apd-ba-col{
padding:15px 17px; border-radius:14px; min-width:0;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.10);
}
.apd-ba-col p{ margin:9px 0 0; font-size:13.5px; line-height:1.55; color:rgba(226,232,246,.74); }
.apd-ba-k{
font-family:var(--apd-mono,ui-monospace,monospace); font-size:10px; font-weight:700;
letter-spacing:.14em; text-transform:uppercase;
display:inline-flex; align-items:center; gap:8px; color:rgba(226,232,246,.5);
}
.apd-ba-k::before{ content:""; width:8px; height:8px; border-radius:2px; background:rgba(226,232,246,.35); }
.apd-before .apd-ba-k::before{ background:var(--apd-coral,#E5556E); }
.apd-after .apd-ba-k{ color:var(--apd-accent); }
.apd-after .apd-ba-k::before{ background:var(--apd-accent); }
.apd-after{ border-color:color-mix(in oklab, var(--apd-accent) 32%, transparent);
background:linear-gradient(180deg,color-mix(in oklab, var(--apd-accent) 9%, transparent),rgba(255,255,255,.008)); }
/* -------------------------------------------------------------------------
LIGHT-SECTION OVERRIDES + GLASS TREATMENT. .apd-walk is authored for a dark
surface (white step titles, translucent-white card fills, light body
text), but the #tool-walk section that hosts it is `.section.light` — so
remap to dark-on-light AND give the step cards / before-after strip the
site's frosted-glass language: layered white gradients, a specular top
edge, inset highlight + soft ambient shadow, hover lift. Same PERF LAW as
the rest of #app: no backdrop-filter/filter here, this is gradients +
shadows standing in for glass (see .glass-faux, its dark-surface sibling).
------------------------------------------------------------------------- */
.section.light .apd-walk{ color:#1b2233; }
.section.light .apd-steps > li,
.section.light .apd-ba-col{
position:relative; overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6) 48%,rgba(238,242,255,.42));
border-color:rgba(255,255,255,.9);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -14px 26px -20px rgba(91,124,250,.22),
0 16px 36px -14px rgba(30,42,80,.15),
0 2px 8px rgba(30,42,80,.06);
transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.section.light .apd-steps > li::before,
.section.light .apd-ba-col::before{
content:""; position:absolute; top:0; left:12%; right:12%; height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
pointer-events:none;
}
.section.light .apd-steps > li:hover,
.section.light .apd-ba-col:hover{
transform:translateY(-2px);
border-color:#fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
inset 0 -14px 26px -20px rgba(91,124,250,.3),
0 22px 46px -16px rgba(30,42,80,.2),
0 2px 8px rgba(30,42,80,.08);
}
.section.light .apd-stepn{
background:
radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), transparent 58%),
color-mix(in oklab, var(--apd-accent) 18%, #fff 82%);
border-color:color-mix(in oklab, var(--apd-accent) 55%, transparent);
box-shadow:
inset 0 1px 1px rgba(255,255,255,.85),
0 3px 9px -3px color-mix(in oklab, var(--apd-accent) 50%, transparent);
}
.section.light .apd-steps b{ color:#131a27; }
.section.light .apd-steps p,
.section.light .apd-ba-col p{ color:rgba(30,38,56,.74); }
.section.light .apd-ba-k{ color:rgba(30,38,56,.5); }
.section.light .apd-ba-k::before{ background:rgba(30,38,56,.32); }
.section.light .apd-before{
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,244,246,.6) 48%,rgba(255,231,235,.4));
border-color:color-mix(in oklab, var(--apd-coral,#E5556E) 30%, rgba(255,255,255,.9));
}
.section.light .apd-after{
border-color:color-mix(in oklab, var(--apd-accent) 45%, rgba(255,255,255,.9));
background:linear-gradient(180deg,rgba(255,255,255,.95),color-mix(in oklab, var(--apd-accent) 9%, rgba(255,255,255,.6)) 48%,color-mix(in oklab, var(--apd-accent) 14%, rgba(255,255,255,.4)));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -14px 26px -20px color-mix(in oklab, var(--apd-accent) 35%, transparent),
0 16px 36px -14px rgba(30,42,80,.15);
}
/* capture frame: the real blurred app screenshot on a faux-glass slab.
The carries .glass-faux (css/glass.css) for the panel look; these
rules size the image + caption. No backdrop-filter here either. */
.apd-capfig{ margin:0; padding:clamp(12px,1.6vw,18px); border-radius:20px; }
.apd-capfig img{
display:block; width:100%; border-radius:12px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 20px 54px rgba(2,6,14,.5);
}
.apd-capfig figcaption{
margin:14px 2px 2px; font-family:var(--apd-mono,ui-monospace,monospace);
font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
color:rgba(226,232,246,.55); display:flex; align-items:center; gap:9px;
}
.apd-capfig figcaption::before{
content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
background:var(--apd-accent);
}
@media (max-width:640px){
.apd-ba{ grid-template-columns:1fr; }
.apd-steps > li{ gap:13px; padding:13px 14px; }
}
/* ==========================================================================
GLASS V2 DEMO SHELL (js/demoshell.js :: window.AtlasDemoShell)
Opt-in via .apd[data-glass="v2"]. Remaps the --apd-* surface/text/line
tokens to the Glass V2 palette (deep navy #0A1220, blue-navy glass) while
KEEPING the per-tool accent (--tool-hex drives --apd-accent). Adds three
composite surfaces — staging tray, processes/jobs, activity log — plus a
shared toast. PERF LAW: everything here is FAUX glass (stacked gradients +
inset shadows + hairlines). NO backdrop-filter / filter — these live inside
the transform-scrolled #app.
========================================================================== */
.apd[data-glass="v2"]{
--apd-ink:#0A1220; --apd-bg:#0A1220;
--apd-panel:rgba(255,255,255,.045); /* s1 */
--apd-s2:rgba(255,255,255,.06);
--apd-s3:rgba(255,255,255,.10);
--apd-shi:rgba(255,255,255,.16);
--apd-ink-tx:#EAF2FF; --apd-mut:rgba(234,242,255,.68); --apd-faint:rgba(234,242,255,.44);
--apd-line:rgba(255,255,255,.12); --apd-line2:rgba(255,255,255,.2);
--apd-accent:var(--tool-hex,#6FB7FF); /* per-tool accent still wins */
--apd-accent-wash:color-mix(in oklab, var(--apd-accent) 14%, transparent);
--apd-accent-soft:color-mix(in oklab, var(--apd-accent) 28%, transparent);
--apd-reclaim:#3EE6A8; --apd-amber:#FFC466; --apd-coral:#FF7A88;
--apd-rs:10px; --apd-rm:16px; --apd-rl:22px;
/* the faux-glass fill reused by .apd-glass; overridable per surface */
--apd-glass-bg:
linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 26%,transparent 55%),
linear-gradient(180deg,rgba(25,37,60,.78),rgba(13,20,35,.84));
}
/* shared s1 alias so shell classes work on default demos too */
.apd{ --apd-s1:var(--apd-panel); }
/* ---------------- shared faux-glass base (compose: class="apd-glass ...") -- */
.apd-glass{
position:relative;
background:var(--apd-glass-bg,
linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 26%,transparent 55%),
linear-gradient(180deg,rgba(20,24,32,.8),rgba(12,14,20,.86)));
border:1px solid var(--apd-line,rgba(255,255,255,.12));
border-radius:var(--apd-rm,16px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -1px 0 rgba(255,255,255,.07),
inset -8px -12px 24px -18px rgba(111,183,255,.28),
0 12px 32px rgba(2,6,14,.45),
0 1px 2px rgba(2,6,14,.3);
}
.apd-glass::before{ /* specular top edge */
content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
pointer-events:none;
}
/* ---------------- shell layout: three surfaces side by side / stacked ------ */
.apd-shell{ display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:start; }
.apd-shell-main{ min-width:0; display:flex; flex-direction:column; gap:14px; }
.apd-shell-side{ min-width:0; display:flex; flex-direction:column; gap:14px; }
@media (max-width:760px){ .apd-shell{ grid-template-columns:1fr; } }
/* ---------------- 1) STAGING TRAY ----------------------------------------- */
.apd-tray{ padding:0; overflow:hidden; }
.apd-tray-h{ display:flex; align-items:center; gap:8px; padding:10px 12px;
border-bottom:1px solid var(--apd-line2); }
.apd-tray-h .apd-title{ margin:0; font:600 13px var(--apd-ui); color:var(--apd-ink-tx); }
.apd-tray-ct{ margin-left:auto; font:600 11px var(--apd-mono); color:var(--apd-mut); }
.apd-tray-body{ max-height:230px; overflow-y:auto; padding:6px; }
.apd-tray-row{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:7px; }
.apd-tray-row:hover{ background:var(--apd-s2); }
.apd-tray-row .apd-led{ width:7px; height:7px; border-radius:2px; flex:0 0 auto; background:var(--apd-accent); }
.apd-tray-row .apd-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font:13px var(--apd-ui); color:var(--apd-ink-tx); }
.apd-tray-row .apd-size{ width:74px; text-align:right; font:11px var(--apd-mono); color:var(--apd-mut); }
.apd-tray-row .apd-x{ flex:0 0 auto; width:18px; height:18px; border-radius:5px; border:0; cursor:pointer;
background:var(--apd-s3); color:var(--apd-mut); font:12px var(--apd-ui); line-height:1; }
.apd-tray-row .apd-x:hover{ background:var(--apd-coral); color:#fff; }
.apd-tray-empty{ padding:22px 12px; text-align:center; color:var(--apd-faint); font:12px var(--apd-ui); }
.apd-tray-cd{ display:flex; align-items:center; gap:8px; padding:8px 12px;
border-top:1px solid var(--apd-line2); font:600 11px var(--apd-mono); color:var(--apd-coral); }
.apd-tray-cd .track{ flex:1; height:4px; border-radius:2px; background:var(--apd-s3); overflow:hidden; }
.apd-tray-cd .track > i{ display:block; height:100%; background:var(--apd-coral); }
.apd-tray-f{ display:flex; gap:8px; align-items:center; padding:10px 12px;
border-top:1px solid var(--apd-line2); }
.apd-tray-f .apd-spacer{ flex:1; }
.apd-tray-f .apd-total{ font:600 11px var(--apd-mono); color:var(--apd-mut); }
.apd-tray.has-items{ box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 0 0 1px color-mix(in oklab, var(--apd-accent) 55%, transparent),
0 12px 32px rgba(2,6,14,.45); }
/* ---------------- 2) PROCESSES / JOBS LIST -------------------------------- */
.apd-proc{ padding:0; overflow:hidden; }
.apd-proc-h{ display:flex; align-items:center; gap:8px; padding:10px 12px;
border-bottom:1px solid var(--apd-line2); }
.apd-proc-h .apd-title{ margin:0; font:600 13px var(--apd-ui); color:var(--apd-ink-tx); }
.apd-proc-pulse{ width:8px; height:8px; border-radius:50%; background:var(--apd-reclaim); flex:0 0 auto;
box-shadow:0 0 0 0 color-mix(in oklab,var(--apd-reclaim) 60%,transparent); animation:apd-pulse 2s var(--apd-ease) infinite; }
.apd-proc[data-empty="1"] .apd-proc-pulse{ background:var(--apd-faint); animation:none; box-shadow:none; }
@keyframes apd-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in oklab,var(--apd-reclaim) 55%,transparent); }
70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.apd-proc-ct{ margin-left:auto; font:600 11px var(--apd-mono); color:var(--apd-mut); }
.apd-proc-rows{ display:flex; flex-direction:column; gap:8px; padding:8px; max-height:260px; overflow-y:auto; }
.apd-proc-item{ display:flex; flex-direction:column; gap:6px; padding:8px 9px; border-radius:8px; background:var(--apd-s1,var(--apd-panel)); }
.apd-proc-item .top{ display:flex; align-items:center; gap:8px; }
.apd-proc-item .lbl{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font:13px var(--apd-ui); color:var(--apd-ink-tx); }
.apd-proc-item .pct{ font:600 11px var(--apd-mono); color:var(--apd-mut); }
.apd-proc-item .ph{ font:11px var(--apd-ui); color:var(--apd-faint); }
.apd-proc-item.queued{ opacity:.62; }
.apd-proc-item.done{ opacity:.85; }
.apd-proc-item.done .pct{ color:var(--apd-reclaim); }
.apd-proc-bar{ height:4px; border-radius:2px; background:var(--apd-s3); overflow:hidden; }
.apd-proc-bar > i{ display:block; height:100%; background:var(--apd-accent); transition:width .5s var(--apd-ease); }
.apd-proc-item.done .apd-proc-bar > i{ background:var(--apd-reclaim); }
.apd-proc-idle{ padding:18px 12px; text-align:center; color:var(--apd-faint); font:12px var(--apd-ui); }
/* ---------------- 3) ACTIVITY LOG ----------------------------------------- */
.apd-log{ padding:0; overflow:hidden; }
.apd-log-h{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--apd-line2); }
.apd-log-h .apd-title{ margin:0; font:600 13px var(--apd-ui); color:var(--apd-ink-tx); }
.apd-log-ct{ margin-left:auto; font:600 11px var(--apd-mono); color:var(--apd-mut); }
.apd-log-rows{ display:flex; flex-direction:column; gap:2px; padding:6px; max-height:280px; overflow-y:auto; }
.apd-log-row{ display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:7px; }
.apd-log-row:hover{ background:var(--apd-s2); }
.apd-log-row .apd-led{ width:7px; height:7px; border-radius:2px; background:var(--apd-accent); flex:0 0 auto; }
.apd-log-row.safe .apd-led{ background:var(--apd-reclaim); }
.apd-log-row.caution .apd-led{ background:var(--apd-amber); }
.apd-log-row.danger .apd-led{ background:var(--apd-coral); }
.apd-log-row .grow{ flex:1; min-width:0; }
.apd-log-row .nm{ font:13px var(--apd-ui); color:var(--apd-ink-tx); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.apd-log-row .dt{ font:11px var(--apd-ui); color:var(--apd-faint); }
.apd-log-row .ts{ margin-left:auto; font:11px var(--apd-mono); color:var(--apd-faint); white-space:nowrap; }
.apd-log-empty{ padding:22px 12px; text-align:center; color:var(--apd-faint); font:12px var(--apd-ui); }
/* ---------------- shared toast (one, replaces inline copies) --------------- */
.apd-toast{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%) translateY(6px);
padding:8px 14px; border-radius:10px; font:600 12px var(--apd-ui); color:var(--apd-ink-tx);
background:linear-gradient(180deg,rgba(25,37,60,.94),rgba(13,20,35,.96));
border:1px solid var(--apd-line2); box-shadow:0 8px 24px rgba(2,6,14,.5);
opacity:0; transition:opacity .2s var(--apd-ease),transform .2s var(--apd-ease); pointer-events:none; z-index:6; }
.apd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.apd-toast.safe{ color:var(--apd-reclaim); }
.apd-toast.danger{ color:var(--apd-coral); }
/* a11y: flatten faux glass + freeze motion */
@media (prefers-reduced-transparency:reduce){
.apd-glass{ background:rgba(14,22,38,.97); }
}
@media (prefers-reduced-motion:reduce){
.apd-proc-pulse{ animation:none; } .apd-proc-bar > i{ transition:none; } .apd-toast{ transition:none; }
}