/* ============================================================
   Tandem — design system
   ONE source of truth for every Tandem screen. Extracted from
   tandem-app.html so the console and the assessment screen cannot
   drift apart; edit tokens here first.

   Same token architecture as Relay, deliberately not the same
   palette: the neutral ramp is warm (stone) and the reserved colour
   is violet. Where Relay spends colour on "a machine did this",
   Tandem spends it on AGENCY — how much an agent is allowed to do
   without a human. Suggests is neutral, acts with approval is a
   violet outline, acts autonomously is violet filled. That ramp is
   the product's whole thesis, so nothing else in the chrome is
   allowed to be violet.
   ============================================================ */
/* ============================================================
   Tandem — agent console
   Same token architecture as Relay, deliberately not the same
   palette: the neutral ramp is warm (stone) and the reserved
   colour is violet. Where Relay spends colour on "a machine did
   this", Tandem spends it on AGENCY — how much an agent is
   allowed to do without a human. Suggests is neutral, acts with
   approval is a violet outline, acts autonomously is violet
   filled. That ramp is the product's whole thesis, so nothing
   else in the chrome is allowed to be violet.
   ============================================================ */
:root{
  /* primitives — warm neutral ramp */
  --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4; --stone-300:#d6d3d1;
  --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e; --stone-700:#44403c;
  --stone-800:#292524; --stone-900:#1c1917; --stone-950:#0c0a09; --white:#fff;
  --violet-100:#ede9fe; --violet-300:#c4b5fd; --violet-400:#a78bfa;
  --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#6d28d9; --violet-950:#2e1065;
  --emerald-100:#d1fae5; --emerald-400:#34d399; --emerald-600:#059669; --emerald-950:#022c22;
  --amber-100:#fef3c7; --amber-400:#fbbf24; --amber-600:#d97706; --amber-950:#451a03;
  --rose-100:#ffe4e6; --rose-400:#fb7185; --rose-600:#e11d48; --rose-950:#4c0519;

  /* shadcn semantic layer */
  --background:var(--stone-100); --foreground:var(--stone-900);
  --card:var(--white); --card-foreground:var(--stone-900);
  --popover:var(--white); --popover-foreground:var(--stone-900);
  --primary:var(--stone-900); --primary-hover:var(--stone-800); --primary-foreground:var(--white);
  --secondary:var(--stone-100); --secondary-foreground:var(--stone-900);
  --muted:var(--stone-100); --muted-foreground:var(--stone-600); --muted-foreground-subtle:var(--stone-500);
  --accent:var(--stone-200); --accent-foreground:var(--stone-900);
  --border:var(--stone-200); --input:var(--stone-300);
  /* violet-600 is 6.4:1 on white, so it clears both the text floor and the
     3:1 focus-ring floor without a second value */
  --ring:var(--violet-600);
  --signal:var(--violet-600); --signal-strong:var(--violet-700);
  --signal-subtle:color-mix(in srgb,var(--violet-500) 10%,var(--white));
  --success:var(--emerald-600); --success-subtle:var(--emerald-100);
  --warning:var(--amber-600); --warning-subtle:var(--amber-100);
  --destructive:var(--rose-600); --destructive-subtle:var(--rose-100);

  /* Softer than Relay's 8px by one stop — the console is card-led, and
     cards read heavier than table rows at the same corner. */
  --radius:10px; --radius-sm:7px; --radius-lg:14px; --radius-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;
  --shadow-sm:0 1px 2px rgba(28,25,23,.06);
  --shadow-md:0 6px 16px -4px rgba(28,25,23,.12);
  --shadow-lg:0 20px 50px -12px rgba(28,25,23,.28);

  /* ---- type scale ----
     Eight stops, no fractions. This file had grown to 16 distinct sizes,
     including 8, 9.5, 10.5, 11.5, 12.5 and 13.5 — accretion rather than a
     scale. Nav, step names, tool names and card names all sat at 12.5, half
     a step under body text, for no reason anyone could state. Everything now
     lands on one of these, and they are tokens so a raw px value shows up as
     a mistake instead of blending in.
     8px is gone entirely: .src-ext was unreadable at that size and it is the
     label telling you what kind of document the agent is about to read. */
  /* 12px floor, everywhere. The ramp used to start at 10 for badges and 11
     for chips, which is a size you squint at on a laptop and cannot read at
     all on a dense table. Everything moves up two steps, and the bottom two
     tiers land on the same 12: below the floor there is no more room to
     distinguish them by size, so micro and xs separate by weight and colour
     from here on rather than by scale. */
  --fs-micro:12px;   /* file-type badges, keyboard hints, avatar initials */
  --fs-xs:12px;      /* step tags, autonomy chips, micro labels */
  --fs-sm:13px;      /* secondary text, descriptions, meta rows */
  --fs-base:14px;    /* body default, nav items, step and tool names */
  --fs-md:15px;      /* card titles, section names, emphasis */
  --fs-lg:17px;      /* drawer and hero titles */
  --fs-xl:21px;      /* large titles */
  --fs-2xl:28px;     /* page title */

  --sidebar-w:252px;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
[data-theme="dark"]{
  --background:var(--stone-950); --foreground:var(--stone-50);
  --card:var(--stone-900); --card-foreground:var(--stone-50);
  --popover:var(--stone-900); --popover-foreground:var(--stone-50);
  --primary:var(--stone-50); --primary-hover:var(--stone-200); --primary-foreground:var(--stone-900);
  --secondary:var(--stone-800); --secondary-foreground:var(--stone-50);
  --muted:var(--stone-800); --muted-foreground:var(--stone-400); --muted-foreground-subtle:var(--stone-400);
  --accent:var(--stone-800); --accent-foreground:var(--stone-50);
  --border:var(--stone-800); --input:var(--stone-700); --ring:var(--violet-400);
  --signal:var(--violet-400); --signal-strong:var(--violet-300);
  --signal-subtle:color-mix(in srgb,var(--violet-400) 14%,var(--stone-900));
  --success:var(--emerald-400); --success-subtle:var(--emerald-950);
  --warning:var(--amber-400); --warning-subtle:var(--amber-950);
  --destructive:var(--rose-400); --destructive-subtle:var(--rose-950);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 6px 16px -4px rgba(0,0,0,.6);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.8);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Inter,system-ui,sans-serif;font-size:var(--fs-base);line-height:20px;
  color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-radius:var(--radius-sm)}
svg{display:block;flex:none}
/* The UA rule for [hidden] is display:none at the lowest possible weight, so
   any author rule that sets display beats it. Every .btn, .sent and .aut in
   here does. Without this, hiding one by attribute silently does nothing. */
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:-.02em}

.app{
  display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;
  transition:grid-template-columns .32s cubic-bezier(.16,1,.3,1);
}
.app.is-collapsed{grid-template-columns:58px 1fr}
.app.is-collapsed .nav-text,
.app.is-collapsed .nav-count,
.app.is-collapsed .count-pill,
.app.is-collapsed .rolesw .chev,
.app.is-collapsed .brand-name,
.app.is-collapsed .brand-chev,
.app.is-collapsed .nav-label,
.app.is-collapsed .side-list,
.app.is-collapsed .getstarted,
/* min-width:0 as well as width:0 — the Inbox count pill carries a
   min-width:17px floor that width alone cannot collapse. */
.app.is-collapsed .user-meta{opacity:0;width:0;min-width:0;height:0;padding:0;overflow:hidden;white-space:nowrap;transition:opacity .12s}
.app.is-collapsed .sidebar{padding-inline:var(--s2)}
.app.is-collapsed .nav-item,
.app.is-collapsed .brand,
.app.is-collapsed .user{justify-content:center;padding-inline:0}
/* The rail is 58px. Three icon buttons in a row need 88, so the header
   tools stack with the brand rather than running off the edge. */
.app.is-collapsed .side-head{flex-direction:column;gap:var(--s2)}
.app.is-collapsed .side-tools{flex-direction:column;gap:2px}
.app.is-collapsed .nav-item{position:relative}
.app.is-collapsed .nav-item::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(-4px);
  background:var(--popover);color:var(--popover-foreground);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:3px 8px;font-size:var(--fs-sm);white-space:nowrap;box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:40;
}
.app.is-collapsed .nav-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- sidebar ---------- */
/* Chrome sits on the warm tinted layer, the work surface is the bright one.
   Same inversion as Relay: the content gets the light, not the frame. */
.sidebar{
  background:var(--muted);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:var(--s3) var(--s3) var(--s2);gap:1px;
  position:sticky;top:0;height:100vh;overflow:visible;
}
.side-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s1) var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s2);flex:1;min-width:0;padding:2px 4px;border-radius:var(--radius-sm);transition:background .12s}
.brand:hover{background:var(--accent)}
.brand-mark{
  width:22px;height:22px;border-radius:var(--radius-sm);flex:none;
  background:linear-gradient(150deg,var(--violet-500),var(--violet-700));
  display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-sm);
}
.brand-name{font-weight:600;font-size:var(--fs-md);letter-spacing:-.01em}
.brand-chev{color:var(--muted-foreground-subtle)}
.side-tools{display:flex;gap:2px}
.icon-btn{
  width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--muted-foreground);position:relative;transition:background .12s,color .12s;
}
.icon-btn:hover{background:var(--accent);color:var(--foreground)}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:6px var(--s2);border-radius:var(--radius-sm);
  color:var(--muted-foreground);font-size:var(--fs-base);transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--accent);color:var(--foreground)}
.nav-item.is-active{background:var(--card);color:var(--foreground);font-weight:500;box-shadow:var(--shadow-sm)}
.nav-item svg{stroke:currentColor;opacity:.8}
.nav-item.is-active svg{opacity:1}
.nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-count{font-size:var(--fs-sm);color:var(--muted-foreground-subtle)}
.nav-gap{height:var(--s3)}
.nav-label{
  display:flex;align-items:center;gap:4px;
  font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground-subtle);
  padding:var(--s4) var(--s2) var(--s1);
}
.nav-label button{display:flex;align-items:center;gap:4px;color:inherit}
.side-list{flex:1;overflow-y:auto;min-height:0;margin:0 calc(var(--s1) * -1);padding:0 var(--s1)}
.side-list::-webkit-scrollbar{width:6px}
.side-list::-webkit-scrollbar-thumb{background:var(--stone-300);border-radius:99px}
[data-theme="dark"] .side-list::-webkit-scrollbar-thumb{background:var(--stone-700)}
.hist{
  display:block;width:100%;padding:6px var(--s2);border-radius:var(--radius-sm);
  font-size:var(--fs-base);color:var(--muted-foreground);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .12s,color .12s;
}
.hist:hover{background:var(--accent);color:var(--foreground)}
/* The item you are looking at. Two screens already ask for this state,
   and until now it rendered as nothing at all. */
.hist.is-on{background:var(--accent);color:var(--foreground);font-weight:500}
.sidebar-foot{margin-top:auto;padding-top:var(--s3)}

/* onboarding progress card */
.getstarted{
  display:block;width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s3);margin-bottom:var(--s2);
  box-shadow:var(--shadow-sm);transition:border-color .15s;
}
.getstarted:hover{border-color:var(--input)}
.gs-head{display:flex;align-items:center;gap:var(--s2)}
.gs-title{font-size:var(--fs-base);font-weight:600;flex:1}
.gs-sub{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px}
.gs-sub b{color:var(--signal);font-weight:500}
.gs-track{height:4px;border-radius:99px;background:var(--muted);margin-top:var(--s2);overflow:hidden}
.gs-fill{display:block;height:100%;border-radius:99px;background:var(--signal);transition:width .5s cubic-bezier(.16,1,.3,1)}
.user{display:flex;align-items:center;gap:var(--s2);padding:6px var(--s2);border-radius:var(--radius-sm);width:100%;transition:background .12s}
.user:hover{background:var(--accent)}
.user-meta{flex:1;min-width:0}
.user-name{font-size:var(--fs-sm);font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-mail{font-size:var(--fs-xs);color:var(--muted-foreground);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- avatars ---------- */
.av{border-radius:var(--radius-pill);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:#fff;flex:none;letter-spacing:-.01em}
.av-18{width:18px;height:18px;font-size:var(--fs-micro)}
.av-24{width:24px;height:24px}
.av-28{width:28px;height:28px}
.av-40{width:40px;height:40px;font-size:var(--fs-base)}
.av-52{width:52px;height:52px;font-size:var(--fs-lg);border-radius:var(--radius-pill)}
.av-ghost{background:var(--muted);color:var(--muted-foreground);border:1px solid var(--border)}

/* ---------- main ---------- */
.main{min-width:0;background:var(--card);display:flex;flex-direction:column}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:var(--s7) var(--s7) var(--s8)}
.page-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s6)}
.page-title{font-size:var(--fs-2xl);line-height:34px;font-weight:600;letter-spacing:-.025em}
.page-sub{font-size:var(--fs-base);color:var(--muted-foreground);margin-top:5px;max-width:52ch}
.page-actions{margin-left:auto;display:flex;gap:var(--s2);align-items:center;flex:none}

.btn{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 var(--s3);
  border-radius:var(--radius-sm);font-size:var(--fs-base);font-weight:500;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,color .15s;
}
.btn-primary{background:var(--signal);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--signal-strong)}
[data-theme="dark"] .btn-primary{color:var(--stone-950)}
.btn-outline{border:1px solid var(--border);background:var(--card);color:var(--foreground)}
.btn-outline:hover{border-color:var(--input);background:var(--muted)}
.btn-ghost{color:var(--muted-foreground)}
.btn-ghost:hover{background:var(--muted);color:var(--foreground)}
/* A control that cannot act yet stays in place and looks spent, rather than
   appearing once the thing it needs exists. A button that arrives late is a
   button the reader has to notice; one that is visibly waiting tells them
   what to do first. Keyed off aria-disabled too, for links. */
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.5;box-shadow:none;cursor:not-allowed;
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{
  background:inherit;border-color:var(--border);color:inherit;
}

/* ---------- filter row ---------- */
/* ---------- the way back ----------
   This was 14px muted text with a 12px chevron, which is the weight of a
   caption on a control that is the only route off the page. It reads at
   body size now, in a hit area you can actually aim at, and it darkens to
   full ink on hover so it behaves like the link it is. */
.crumb{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s2);
  margin-left:-6px;padding:3px 8px 3px 6px;border-radius:var(--radius-sm);
  font-size:var(--fs-md);font-weight:500;color:var(--muted-foreground);
  transition:color .14s,background .14s;
}
.crumb:hover{color:var(--foreground);background:var(--muted)}
.crumb svg{width:16px;height:16px}

.filterbar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s6)}
.field{
  display:flex;align-items:center;gap:var(--s2);width:300px;height:34px;
  padding:0 var(--s3);border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius-sm);color:var(--muted-foreground-subtle);
  transition:border-color .15s,box-shadow .15s;
}
.field:focus-within{border-color:var(--input);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 12%,transparent)}
.field input{flex:1;min-width:0;border:none;background:none;font-size:var(--fs-base);color:var(--foreground);outline:none}
.field input::placeholder{color:var(--muted-foreground-subtle)}
/* Search and the filter belong to each other: they narrow the same list, and
   one at each end of a 1100px bar reads as two unrelated controls with the
   page pulled apart between them. Search leads, because it is the one people
   reach for first, and the filter sits beside it. */
.filterbar .field{order:-1}
.filterbar .dd{margin-right:auto}

/* ---------- section heads ---------- */
.sec-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);color:var(--muted-foreground)}
.sec-name{font-size:var(--fs-base);font-weight:500;color:var(--foreground)}
.sec-count{font-size:var(--fs-base);color:var(--muted-foreground-subtle);padding-left:var(--s2);border-left:1px solid var(--border);margin-left:2px}
.sec-right{margin-left:auto}
.sec{margin-bottom:var(--s7)}
.rule{height:1px;background:var(--border);margin:0 0 var(--s7)}

/* ---------- highlighted agent — the one dark object on the page ---------- */
.hero-card{
  position:relative;display:block;width:min(100%,392px);min-height:214px;
  border-radius:var(--radius-lg);overflow:hidden;padding:var(--s5);
  background:
    radial-gradient(120% 100% at 8% 0%, rgba(167,139,250,.34), transparent 62%),
    linear-gradient(158deg,var(--stone-800),var(--stone-950) 62%,var(--violet-950));
  color:#fff;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s;
}
.hero-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(90% 80% at 100% 100%,#000 10%,transparent 70%);
}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 26px 60px -14px rgba(28,25,23,.45)}
.hero-card > *{position:relative;z-index:1}
.hero-av{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);margin-bottom:var(--s4);
}
.hero-name{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.hero-desc{font-size:var(--fs-base);line-height:20px;color:rgba(255,255,255,.72);margin-top:6px;max-width:30ch}
.hero-foot{margin-top:auto;padding-top:var(--s4);display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:rgba(255,255,255,.62)}
.hero-more{
  position:absolute;top:var(--s3);right:var(--s3);z-index:2;
  width:28px;height:28px;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;transition:background .14s;
}
.hero-more:hover{background:rgba(255,255,255,.24)}

/* ---------- highlighted row: the agent, then what it actually did ----------
   The hero card says what the agent IS; the run panel beside it says how far
   it went and where a person stepped in. Same argument as the autonomy chip,
   made concrete. */
.hl-row{display:flex;align-items:stretch;gap:var(--s3)}
.hl-row .hero-card{width:392px;flex:none}
.runpanel{
  flex:1;min-width:0;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--s4);
}
.runpanel-head{display:flex;align-items:baseline;gap:var(--s2);margin-bottom:var(--s3)}
.runpanel-title{font-size:var(--fs-sm);font-weight:600}
.runpanel-meta{font-size:var(--fs-sm);color:var(--muted-foreground-subtle)}
/* The way through to the assessment behind this run. Ink, not signal:
   violet in this product means an agent acted on its own, and a link is
   chrome. */
.runpanel-open{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);transition:color .14s;
}
.runpanel-open:hover{color:var(--foreground)}
.runpanel-open svg{transition:transform .18s}
.runpanel-open:hover svg{transform:translateX(2px)}

/* ---------- agent cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s4);min-height:150px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.card:hover{border-color:var(--input);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s3)}
.card-name{font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em}
.card-desc{
  font-size:var(--fs-base);line-height:20px;color:var(--muted-foreground);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-foot{
  margin-top:auto;padding-top:var(--s3);display:flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-sm);color:var(--muted-foreground-subtle);
}
.card-owner{display:flex;align-items:center;gap:5px;color:var(--muted-foreground)}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--input);flex:none}
.card-more{
  position:absolute;top:var(--s3);right:var(--s3);opacity:0;
  width:26px;height:26px;border-radius:var(--radius-sm);display:grid;place-items:center;
  color:var(--muted-foreground);transition:opacity .14s,background .12s;
}
.card:hover .card-more,.card-more:focus-visible{opacity:1}
.card-more:hover{background:var(--accent);color:var(--foreground)}

/* ---------- autonomy chip — the product's whole colour argument ---------- */
.aut{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:var(--fs-xs);font-weight:500;padding:2px 8px 2px 6px;border-radius:var(--radius-pill);
  border:1px solid transparent;white-space:nowrap;
}
.aut svg{opacity:.9}
.aut--suggest{background:var(--muted);color:var(--muted-foreground);border-color:var(--border)}
.aut--approve{background:var(--signal-subtle);color:var(--signal);border-color:color-mix(in srgb,var(--signal) 30%,transparent)}
.aut--auto{background:var(--signal);color:#fff;border-color:var(--signal)}
[data-theme="dark"] .aut--auto{color:var(--stone-950)}
/* A release by a person is not agency, so it takes the ink chip rather than
   a place on the violet ramp. */
.aut--released{background:var(--muted);color:var(--foreground);border-color:var(--input)}

/* ---------- inspiration banner ---------- */
.promo{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--s4);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--muted);padding:var(--s4) var(--s5);
}
.promo::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--foreground) 6%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--foreground) 6%,transparent) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(100deg,transparent 22%,#000 92%);
}
.promo > *{position:relative;z-index:1}
.promo-title{font-size:var(--fs-md);font-weight:600}
.promo-sub{font-size:var(--fs-base);color:var(--muted-foreground);margin-top:3px}
.promo .btn{margin-left:auto}

/* ---------- dropdowns ---------- */
.dd{position:relative}
.dd-menu{
  position:absolute;top:calc(100% + 6px);z-index:40;min-width:196px;
  background:var(--popover);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:5px;
  /* visibility keeps a closed menu out of the tab order and the a11y tree */
  opacity:0;transform:translateY(-4px) scale(.98);pointer-events:none;visibility:hidden;
  transition:opacity .14s,transform .14s cubic-bezier(.16,1,.3,1),visibility 0s linear .14s;
}
.dd-menu--left{left:0}
.dd-menu--right{right:0}
.dd.is-open .dd-menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.dd-hint{font-size:var(--fs-xs);font-weight:500;color:var(--muted-foreground-subtle);padding:5px var(--s2) 3px}
.dd-item{
  display:flex;align-items:center;gap:var(--s2);width:100%;padding:6px var(--s2);
  border-radius:var(--radius-sm);font-size:var(--fs-base);color:var(--popover-foreground);
}
.dd-item:hover{background:var(--accent)}
.dd-item .tick{margin-left:auto;opacity:0;color:var(--signal)}
.dd-item.is-current .tick{opacity:1}
.dd-sep{height:1px;background:var(--border);margin:5px 0}
.chev{transition:transform .18s cubic-bezier(.16,1,.3,1)}
.dd.is-open .chev{transform:rotate(180deg)}
.count-pill{
  min-width:17px;height:17px;padding:0 5px;border-radius:var(--radius-pill);
  background:var(--signal);color:#fff;font-size:var(--fs-xs);font-weight:600;
  display:grid;place-items:center;
}
[data-theme="dark"] .count-pill{color:var(--stone-950)}

/* ---------- empty state ---------- */
.empty{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  padding:var(--s8) var(--s4);border:1px dashed var(--border);border-radius:var(--radius-lg);
  color:var(--muted-foreground);text-align:center;
}
.empty-title{font-size:var(--fs-md);font-weight:500;color:var(--foreground)}

/* ---------- agent drawer ---------- */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:55;
  background:var(--card);border-left:1px solid var(--border);
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.16,1,.3,1),visibility 0s linear .34s;
}
.drawer.is-open{transform:none;visibility:visible;transition-delay:0s}
.drawer-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--border)}
.drawer-title{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.drawer-sub{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px}
.drawer-body{flex:1;overflow-y:auto;padding:var(--s4)}
.drawer-foot{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
  border-top:1px solid var(--border);background:var(--muted);
}
.drawer-foot .btn{height:32px}
.drawer-foot .spacer{flex:1}

.dtabs{display:flex;gap:1px;background:var(--muted);padding:3px;border-radius:var(--radius-sm);margin-bottom:var(--s4)}
.dtab{flex:1;padding:6px;border-radius:5px;font-size:var(--fs-sm);font-weight:500;color:var(--muted-foreground);text-align:center;transition:.15s}
.dtab:hover{color:var(--foreground)}
.dtab.is-active{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)}
.pane{display:none}
.pane.is-on{display:block}

.block{margin-bottom:var(--s4)}
.block-title{font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--s2);display:flex;align-items:center;gap:6px}
.block-note{font-size:var(--fs-sm);color:var(--muted-foreground-subtle);margin-top:6px}
.readout{
  background:var(--muted);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--s3);font-size:var(--fs-base);line-height:21px;color:var(--foreground);
}
.readout--quote{border-left:2px solid var(--signal);border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* autonomy selector — three stops, and the choice is visibly a ramp */
.ramp{display:flex;flex-direction:column;gap:6px}
.ramp-opt{
  display:flex;align-items:flex-start;gap:var(--s3);width:100%;padding:10px var(--s3);
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);
  transition:border-color .14s,background .14s;
}
.ramp-opt:hover{border-color:var(--input)}
.ramp-opt.is-on{border-color:var(--signal);background:var(--signal-subtle)}
.radio{
  width:15px;height:15px;border-radius:50%;border:1.5px solid var(--input);flex:none;margin-top:2px;
  display:grid;place-items:center;transition:border-color .14s;
}
.ramp-opt.is-on .radio{border-color:var(--signal)}
.ramp-opt.is-on .radio::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.ramp-name{font-size:var(--fs-base);font-weight:500}
.ramp-desc{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px;line-height:18px}

/* ==================================================================
   Configuration panels.

   These were local to the agent page until the case study started showing
   the same three components on their own. One definition, two hosts.
   ================================================================== */
/* panels */
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--s5);margin-bottom:var(--s4);
}
.panel--quiet{background:var(--muted)}
.panel-hd{display:flex;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s4)}
.panel-title{font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em}
.panel-sub{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px;max-width:58ch}
.panel-hd .aut{margin-left:auto}

/* ---------- the ramp, given the room it never had ----------
   Three across, not stacked, so the reader sees it as one scale with a
   position on it rather than three unrelated options. */
.ramp--wide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.ramp--wide .ramp-opt{
  flex-direction:column;align-items:flex-start;gap:var(--s2);
  padding:var(--s4);min-height:118px;
}
.ramp--wide .ramp-head{display:flex;align-items:center;gap:var(--s2);width:100%}
.ramp--wide .ramp-step{
  margin-left:auto;font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;
  color:var(--muted-foreground-subtle);
}
.ramp--wide .ramp-opt.is-on .ramp-step{color:var(--signal)}
.ramp--wide .ramp-desc{margin-top:0}
/* Narrow: one column, and no fixed step height to fill with air. The stop
   is the app's sidebar breakpoint, and it is also what makes the component
   readable when the case study gives it a 285px slot. */
@media (max-width:900px){
  .ramp--wide{grid-template-columns:minmax(0,1fr)}
  .ramp--wide .ramp-opt{min-height:0}
}

/* tools */
.tools{display:flex;flex-direction:column}
.tool-scope.is-out{color:var(--destructive)}
/* A tool the current band forbids is not hidden and not merely greyed: it
   states the rule that is holding it down, in the row itself. */
.tool.is-locked{opacity:.62}
.tool.is-locked .switch{cursor:not-allowed}
.lockline{
  display:flex;align-items:flex-start;gap:6px;padding:0 0 var(--s3) 34px;
  font-size:var(--fs-xs);color:var(--muted-foreground);line-height:17px;
}
.lockline svg{margin-top:1px;flex:none;color:var(--muted-foreground-subtle)}

.model{display:flex;align-items:center;gap:var(--s3)}
.srcs{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);overflow:hidden}
.panel--quiet .srcs{background:var(--card)}

.foot-note{
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--border);
  font-size:var(--fs-sm);color:var(--muted-foreground);display:flex;align-items:flex-start;gap:6px;
}
.foot-note svg{margin-top:2px;flex:none;color:var(--muted-foreground-subtle)}

/* tool rows with permission scope */
.tool{
  display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);
  border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;background:var(--card);
}
.tool-ic{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--muted);display:grid;place-items:center;color:var(--muted-foreground);flex:none}
.tool-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.tool-name{display:block;font-size:var(--fs-base);font-weight:500;line-height:20px}
.tool-scope{display:block;font-size:var(--fs-xs);color:var(--muted-foreground);margin-top:2px;line-height:17px}
.tool-scope.is-write{color:var(--warning)}
.switch{width:32px;height:18px;border-radius:99px;background:var(--input);flex:none;position:relative;transition:background .18s;cursor:pointer}
.switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:transform .18s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-sm);
}
.switch.is-on{background:var(--signal)}
.switch.is-on::after{transform:translateX(14px)}

/* source list */
.src{display:flex;align-items:center;gap:var(--s3);padding:9px var(--s3);border-bottom:1px solid var(--border)}
.src:last-child{border-bottom:none}
.src-ic{
  width:28px;height:34px;border-radius:5px;flex:none;background:var(--muted);border:1px solid var(--border);
  display:grid;place-items:end center;padding-bottom:4px;
}
.src-ext{font-size:var(--fs-micro);font-weight:600;letter-spacing:.04em;color:#fff;background:var(--stone-500);padding:1px 3px;border-radius:2px}
.src-ext.pdf{background:var(--destructive)}
.src-ext.web{background:var(--stone-600)}
.src-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.src-name{display:block;font-size:var(--fs-base);font-weight:500;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-sub{display:block;font-size:var(--fs-xs);color:var(--muted-foreground);margin-top:2px;line-height:17px}

/* run timeline */
.steps{position:relative;padding-left:var(--s5)}
.steps::before{content:"";position:absolute;left:6px;top:6px;bottom:12px;width:1px;background:var(--border)}
.step{position:relative;padding-bottom:var(--s4)}
.step:last-child{padding-bottom:0}
.step-dot{
  position:absolute;left:calc(-1 * var(--s5) + 2px);top:3px;
  width:9px;height:9px;border-radius:50%;background:var(--card);border:2px solid var(--input);
}
.step.is-agent .step-dot{border-color:var(--signal);background:var(--signal)}
.step.is-human .step-dot{border-color:var(--foreground)}
.step-head{display:flex;align-items:baseline;gap:var(--s2)}
.step-name{font-size:var(--fs-base);font-weight:500}
.step-time{font-size:var(--fs-xs);color:var(--muted-foreground-subtle);margin-left:auto}
.step-desc{font-size:var(--fs-sm);color:var(--muted-foreground);margin-top:2px;line-height:18px}
.step-tag{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  font-size:var(--fs-xs);font-weight:500;padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--muted);color:var(--muted-foreground);
}
.step.is-agent .step-tag{background:var(--signal-subtle);color:var(--signal)}

/* ---------- command palette ---------- */
.scrim{position:fixed;inset:0;background:rgba(12,10,9,.42);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
.scrim.is-open{opacity:1;pointer-events:auto}
.palette{
  position:fixed;top:15vh;left:50%;transform:translateX(-50%) scale(.98);
  width:min(560px,92vw);background:var(--popover);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;visibility:hidden;overflow:hidden;z-index:51;
  transition:opacity .18s,transform .18s cubic-bezier(.16,1,.3,1),visibility 0s linear .18s;
}
.palette.is-open{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto;visibility:visible;transition-delay:0s}
.palette-in{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--border)}
.palette-in input{flex:1;border:none;background:none;font-size:var(--fs-md);color:var(--foreground);outline:none}
.palette-list{max-height:320px;overflow-y:auto;padding:6px}
.palette-sec{font-size:var(--fs-xs);font-weight:500;color:var(--muted-foreground-subtle);padding:8px 8px 4px}
.palette-item{display:flex;align-items:center;gap:var(--s2);width:100%;padding:7px 8px;border-radius:var(--radius-sm);color:var(--muted-foreground);font-size:var(--fs-base)}
.palette-item[aria-selected="true"]{background:var(--accent);color:var(--foreground)}
.palette-item .aut{margin-left:auto}
.kbd{
  font-family:var(--mono);font-size:var(--fs-micro);padding:1px 5px;
  border:1px solid var(--border);border-radius:4px;color:var(--muted-foreground-subtle);
  background:var(--background);
}
.palette-item .kbd{margin-left:auto}

.toast{
  position:fixed;bottom:var(--s5);right:var(--s5);background:var(--popover);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);
  padding:var(--s2) var(--s3);display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-base);
  opacity:0;transform:translateY(6px);pointer-events:none;transition:.2s cubic-bezier(.16,1,.3,1);z-index:60;
}
.toast.is-open{opacity:1;transform:none}
/* The chip is fixed to the viewport, so at the bottom-left corner it landed
   on top of the sidebar user row. Anchor it past the rail instead, and let
   it follow the rail when the sidebar collapses. */
.proto-note{
  position:fixed;left:calc(var(--sidebar-w) + var(--s3));bottom:var(--s3);z-index:30;
  font-size:var(--fs-xs);color:var(--muted-foreground-subtle);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 9px;
  transition:left .32s cubic-bezier(.16,1,.3,1);
}
.app.is-collapsed ~ .proto-note{left:calc(58px + var(--s3))}
@media (max-width:900px){ .proto-note{left:var(--s3)} }

@media (max-width:1180px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:var(--s6) var(--s5) var(--s8)}
}
/* The run panel sits beside the hero until the sidebar goes away — the
   1180 stop is the app's own authoring width, so stacking there would
   collapse the row in the cover render too. */
@media (max-width:900px){
  .hl-row{flex-direction:column}
  .hl-row .hero-card{width:min(100%,392px)}
  .app{grid-template-columns:1fr}.sidebar{display:none}
  .page-head{flex-wrap:wrap}.page-actions{margin-left:0;width:100%}
  .filterbar .field{width:auto;flex:1}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}.hero-card{width:100%}
  .promo{flex-wrap:wrap}.promo .btn{margin-left:0}
}
/* ---------- first-paint reveal — cascades hero, then recent, then all
   agents, as if they're coming online in order. Applied once, on load
   only; filtering/sorting/search re-renders never replay it.
   @starting-style, not an opacity:0 base + animation: the visible state
   is the default even if the browser can't run the transition (no
   starting-style support, or a backgrounded/non-composited tab never
   advances the transition) — the reveal only ever adds motion on top
   of content that was already going to be there. ---------- */
.reveal{
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 45ms);
}
@starting-style{
  .reveal{opacity:0;transform:translateY(7px)}
}

/* ---------- role switcher ----------
   The account button doubles as the control that proves scope is real.
   Its menu opens upward, because it lives at the foot of the sidebar. */
.rolesw{position:relative;width:100%}
.rolesw .user{width:100%}
.rolesw .chev{margin-left:auto;flex:none;color:var(--muted-foreground-subtle);transition:transform .18s}
.rolesw.is-open .chev{transform:rotate(180deg)}
.dd-menu--up{top:auto;bottom:calc(100% + 6px);width:262px}
.dd-menu--up .dd-item{align-items:center;gap:var(--s2)}
.rolesw-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.rolesw-team{font-size:var(--fs-xs);color:var(--muted-foreground);margin-top:1px}
.dd-item.is-current .rolesw-team{color:var(--muted-foreground)}
.dd-hint--foot{
  font-weight:400;line-height:17px;white-space:normal;
  padding-top:var(--s2);color:var(--muted-foreground);
}
/* Out of scope is absent, so the one place the reader can still learn that
   other agents exist is this line under the count. */
.scope-note{
  display:flex;align-items:flex-start;gap:6px;margin-top:var(--s3);
  font-size:var(--fs-sm);color:var(--muted-foreground);
}
.scope-note svg{margin-top:2px;flex:none;color:var(--muted-foreground-subtle)}
.scope-note b{color:var(--foreground);font-weight:500}

/* ---------- theme flip ----------
   A theme change swaps the value behind a var(), and Chrome does not restart a
   running transition when only the referenced custom property changed: the
   property latches at the old theme's computed value. Anything transitioning
   colour or background (nav items, chat history, icon buttons, .btn, .dtab)
   stayed in the previous theme until something else forced a repaint, which
   left dark outline buttons stranded on a light page and the sidebar labels at
   2.3:1. Kill transitions for the single frame the flip happens in. ---------- */
html.theme-shift,
html.theme-shift *,
html.theme-shift *::before,
html.theme-shift *::after{transition:none!important}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}