/* Company map mockups: shell drawn on the app's captured tokens.
   Tokens: docs/product/modules/campaigns/assets/app.css (captured from the running app, dark theme).
   Shell structure: src/components/studio/StudioShell.tsx:246-497 (sidebar rail, main panel
   rounded-2xl border bg-muted-10, mining-topbar min-h-14), studio-v2/src/components/shared/PageHeader/PageHeader.tsx:15-31
   (H4 title + muted description + right content, tabs below with mt-3). */
@font-face{font-family:Satoshi;src:url('../../../../assets/beam/fonts/satoshi-regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Satoshi;src:url('../../../../assets/beam/fonts/satoshi-medium.woff') format('woff');font-weight:500 600;font-display:swap}
@font-face{font-family:Satoshi;src:url('../../../../assets/beam/fonts/satoshi-bold.woff') format('woff');font-weight:700 900;font-display:swap}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Satoshi,ui-sans-serif,system-ui,sans-serif;background:var(--background-100);color:var(--foreground-100);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.45}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.lc{flex:none;display:block}

.shell{height:100vh;display:grid;grid-template-columns:232px minmax(0,1fr);gap:8px;padding:16px 8px 16px 8px}
.rail{display:flex;flex-direction:column;gap:14px;padding:4px 8px;min-width:0}
.ws{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;font-weight:700;font-size:14px}
.ws-logo{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#0062ff,#6aa2ff);display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff}
.ws .lc{margin-left:auto;color:var(--muted-foreground-100)}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--muted-foreground-100);font-size:13.5px;font-weight:500}
.nav a:hover{background:var(--muted-20)}
.nav a.on{background:var(--muted-40);color:var(--foreground-100)}
.nav .new{margin-left:auto;font-size:10.5px;border:1px solid var(--border-100);border-radius:6px;padding:0 6px;color:var(--muted-foreground-100)}
.rail-sep{height:1px;background:var(--border-100);margin:2px 6px}
.rail-label{font-size:11.5px;color:var(--muted-foreground-100);padding:0 10px}
.acct{margin-top:auto;display:flex;align-items:center;gap:9px;padding:8px 10px;color:var(--muted-foreground-100);font-size:12.5px}
.av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;background:var(--muted-40);color:var(--foreground-100);flex:none;border:1.5px solid var(--background-100)}

.main{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-100);border-radius:16px;background:var(--muted-10)}
.topbar{min-height:56px;display:flex;align-items:center;gap:10px;padding:10px 20px;flex:none}
.crumbs{display:flex;align-items:center;gap:6px;color:var(--muted-foreground-100);font-size:13px;min-width:0}
.crumbs b{color:var(--foreground-100);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs a:hover{color:var(--foreground-100)}
.top-actions{margin-left:auto;display:flex;gap:6px}
.ibtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border-100);background:var(--background-80);display:inline-grid;place-items:center;color:var(--muted-foreground-100)}
.ibtn:hover{background:var(--muted-20);color:var(--foreground-100)}
.work{flex:1;min-height:0;overflow:auto;padding:8px 24px 28px}

.ph{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph h1{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0}
.ph p{margin:2px 0 0;color:var(--muted-foreground-100);font-size:13.5px}
.ph-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Tabs: studio-v2/src/components/ui/tabs.tsx:16,42 (TabsList default: bg-muted h-9 rounded-lg p-1;
   TabsTrigger: rounded-md px-3 py-1 text-sm font-normal, active bg-background text-foreground shadow-sm). */
.tabs{display:inline-flex;align-items:center;height:36px;padding:4px;border-radius:8px;background:var(--muted-100);color:var(--muted-foreground-100);margin-top:12px}
.tabs a,.tabs button{display:inline-flex;align-items:center;height:100%;border:0;background:transparent;padding:4px 12px;border-radius:6px;color:inherit;font-weight:400;font-size:14px;line-height:20px;white-space:nowrap}
.tabs .on{background:var(--background-100);color:var(--foreground-100);box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* Button: studio-v2/src/components/ui/button.tsx:9,18,26-27 (font-normal text-sm rounded-lg; outline = border-border bg-background;
   default h-10 px-4, sm h-9 px-3, xs h-8 px-3). .btn.sm here is Studio's xs. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;border:1px solid var(--border-100);border-radius:8px;background:var(--background-100);padding:0 16px;font-size:14px;font-weight:400;white-space:nowrap}
.btn:hover{background:var(--muted-20)}
.btn.primary{background:var(--primary-100);border-color:transparent;color:#fff}
.btn.primary:hover{background:var(--primary-90)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{height:32px;padding:0 12px;gap:6px;font-size:14px}

.card{border:1px solid var(--border-100);border-radius:12px;background:var(--background-80)}
.card:hover{background:var(--muted-20)}
.card.sel{background:var(--muted-40)}
.muted{color:var(--muted-foreground-100)}
.badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border-100);border-radius:8px;padding:1px 7px;font-size:11.5px;color:var(--muted-foreground-100);white-space:nowrap}
.badge.agent{color:#9dbcff;border-color:rgba(0,98,255,.45);background:rgba(0,98,255,.12)}
.badge.live{color:var(--success-100);border-color:var(--success-30);background:var(--success-10)}
.badge.warn{color:var(--warning-100);border-color:var(--warning-30);background:var(--warning-10)}

/* The two meters that recur on every screen: known (how much we know) and auto (how much could be automated). */
.meter{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:8px;font-size:11.5px;color:var(--muted-foreground-100)}
.bar{height:6px;border-radius:4px;background:var(--muted-30);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px}
.bar.known i{background:var(--foreground-80)}
.bar.auto i{background:var(--primary-100)}
.meter b{font-weight:600;color:var(--foreground-90);text-align:right;font-variant-numeric:tabular-nums}

/* Coverage mark: solid = known, half = partial, dashed ring = gap. One meaning everywhere. */
.cov{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.cov.known{background:var(--foreground-80)}
.cov.partial{background:linear-gradient(90deg,var(--foreground-80) 50%,transparent 50%);border:1.5px solid var(--foreground-80)}
.cov.gap{border:1.5px dashed var(--muted-foreground-100)}

.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted-foreground-100);font-size:12px;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:18px;height:6px;border-radius:3px;display:inline-block}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 14px}
.kpi{border:1px solid var(--border-100);border-radius:12px;background:var(--background-80);padding:12px 14px}
.kpi small{display:block;color:var(--muted-foreground-100);font-size:12px}
.kpi strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted-foreground-100)}

@media (max-width:1100px){.shell{grid-template-columns:64px minmax(0,1fr)}.rail .lbl,.ws span,.ws .lc,.rail-label,.acct span,.nav .new{display:none}.nav a{justify-content:center}}
@media (max-width:640px){.shell{grid-template-columns:1fr;padding:6px}.rail{display:none}.work{padding:6px 12px 20px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:8px 12px}}

/* Process inspector: Studio v2 right sheet (studio-v2/src/components/ui/sheet.tsx:80), shared by all five concepts. */
.main{position:relative}
.sheet{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--background-100);border-left:1px solid var(--border-100);box-shadow:-12px 0 32px rgba(0,0,0,.35);padding:18px;display:flex;flex-direction:column;gap:14px;overflow:auto;transform:translateX(100%);transition:transform .18s ease;z-index:20}
.sheet.open{transform:none}
.insp-head{display:flex;justify-content:space-between;gap:10px}
.insp-head h2{margin:2px 0 0;font-size:17px}
.insp-meters{display:grid;gap:6px}
.insp-dl{display:grid;gap:8px;margin:0}
.insp-dl div{display:grid;grid-template-columns:84px 1fr;gap:8px;align-items:center}
.insp-dl dt{color:var(--muted-foreground-100);font-size:12px}
.insp-dl dd{margin:0;display:flex;flex-wrap:wrap;gap:4px}
.unk{color:var(--warning-100);border:1px dashed var(--warning-30);border-radius:6px;padding:0 6px;font-size:11.5px}
.insp-q{display:grid;gap:8px;border-top:1px solid var(--border-100);padding-top:12px}
.insp-q .q{border:1px dashed var(--border-100);border-radius:10px;padding:9px 11px;display:grid;gap:3px;font-size:12.5px}
.insp-q .q span{font-size:11.5px}
.insp-actions{margin-top:auto;display:flex;gap:8px;justify-content:flex-end}
.prov{display:inline-flex;align-items:center;gap:6px;color:var(--muted-foreground-100);font-size:12px}
.prov .dot{width:7px;height:7px;border-radius:50%;background:var(--success-100)}
.chip{border:1px solid var(--border-100);border-radius:999px;background:var(--background-80);padding:4px 11px;font-size:12px;color:var(--muted-foreground-100);display:inline-flex;align-items:center;gap:6px}
.chip[aria-pressed="true"]{background:var(--muted-40);color:var(--foreground-100)}

/* Collapsed rail (Studio v2 sidebar toggle): the swimlane needs the width. */
.shell.min{grid-template-columns:56px minmax(0,1fr)}
.shell.min .rail .lbl,.shell.min .ws span,.shell.min .ws .lc,.shell.min .rail-label,.shell.min .acct span,.shell.min .nav .new{display:none}
.shell.min .nav a{justify-content:center;padding:8px 0}
.shell.min .ws{justify-content:center;padding:7px 0}
@media (max-width:640px){.shell.min{grid-template-columns:1fr}}

/* Detail dock (shell.js window.dock): a third column the height of the shell, so opening detail pushes the main
   panel left rather than covering it. The 8px gutter lives inside the column so a closed dock takes no space. */
.shell{--dock:0px;column-gap:0;transition:grid-template-columns .2s ease}
.shell.docked{--dock:min(408px,45vw)}
.shell>.rail{margin-right:8px}
.shell{grid-template-columns:232px minmax(0,1fr) var(--dock)}
@media (max-width:1100px){.shell{grid-template-columns:64px minmax(0,1fr) var(--dock)}}
.shell.min{grid-template-columns:56px minmax(0,1fr) var(--dock)}
.dock{min-width:0;overflow:hidden;padding-left:8px}
.dock-in{width:calc(min(408px,45vw) - 8px);height:100%;position:relative;overflow:auto;border:1px solid var(--border-100);border-radius:16px;background:var(--background-100)}
.dock .sheet{position:relative;inset:auto;width:auto;min-height:100%;border:0;box-shadow:none;background:transparent;transform:none;animation:none}
.dock iframe{display:block;width:100%;height:100%;border:0;background:transparent}
@media (max-width:640px){
  .shell,.shell.min{grid-template-columns:1fr}
  .dock{position:fixed;inset:0;z-index:30;padding:6px;display:none}
  .shell.docked .dock{display:block}
  .dock-in{width:100%}
}