/* =============================================================================
   4DM Strategy — product design system
   -----------------------------------------------------------------------------
   Built to the supplied reference: a single workspace shell (left navigation,
   team tabs, numbered section cards, right rail, sticky action bar) in a light
   product theme on an emerald accent.

   One stylesheet, three apps. Only the TEAM BLOCK below differs — it colours
   the page icon tile and marks which team tab is current. The accent stays blue
   across all three because in the reference they are one product, and the tab
   strip is what tells them apart.

   Light-only by design: `color-scheme:light` is declared so form controls stay
   light even when the operating system is set to dark. Nothing here touches
   app.js behaviour — every existing id, class and control is preserved.
   ========================================================================== */

/* ---- TEAM BLOCK — the one part that differs per app ----------------------- */
:root{ --team:#047857; }

/* =============================================================================
   1. TOKENS
   ========================================================================== */
:root{
  color-scheme:light;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:var(--font);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* accent — emerald.
     #047857 (emerald-700) rather than the brighter #059669: white text on
     emerald-600 measures 3.78:1, which fails AA on a 14px button label. This
     one clears it at 5.5:1 and still reads as emerald. */
  --accent:#047857;
  --accent-hover:#065F46;
  --accent-soft:#ECFDF5;
  --accent-edge:#A7F3D0;
  --accent-text:#047857;
  --on-accent:#FFFFFF;
  --accent-tint:#ECFDF5;

  /* surfaces */
  --bg:#F7F8FA;
  --panel:#FFFFFF;
  --panel-2:#FFFFFF;
  --sunken:#F9FAFB;
  --navy:#1E293B;

  /* lines */
  --line:#E5E7EB;
  --line-soft:#F1F3F5;
  --line-strong:#D1D5DB;

  /* text */
  --text:#111827;
  --text-2:#374151;
  --muted:#5B6472;
  --faint:#6B7280;

  /* state.
     Success was green and the accent is now green too, so "running" and "done"
     would have read as the same thing in the runner. Success moves to a lighter,
     yellower green (lime-tinted) and keeps its own tint, so the two stay
     distinguishable by hue AND by value, not by memory. */
  --ok:#4D7C0F; --ok-soft:#F7FEE7;
  --warn:#B45309; --warn-soft:#FFFBEB;   /* amber-600 measured 3.0:1 as chip text */
  --bad:#B91C1C;  --bad-soft:#FEF2F2;   /* red-600 measured 4.41:1 on its own tint */
  --info:#047857;

  /* model tier hues */
  --sonnet:#047857; --opus:#7C3AED; --fable:#DB2777; --open:#0F766E; --openrouter:#0F766E;

  /* geometry */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --radius:12px;
  --tap:36px;
  --nav-w:240px;
  --topbar-h:60px;

  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 8px 24px rgba(16,24,40,.10);
  --shadow-lg:0 20px 48px rgba(16,24,40,.16);
  --ring:0 0 0 3px rgba(4,120,87,.20);
  --scrim:rgba(17,24,39,.45);

  --speed:.15s;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* =============================================================================
   2. GROUND
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  font-size:14px;line-height:1.5;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
.hidden{display:none!important}

/* Figures are data — they align in a column. */
.otable,.mono,.wl-dur,.kv b,.vector-stats,.ct-row,.arun-sub{font-variant-numeric:tabular-nums}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);
}

*{scrollbar-width:thin;scrollbar-color:#D5D9E0 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D5D9E0;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:content-box}
::selection{background:var(--accent-soft);color:var(--accent-text)}

/* =============================================================================
   3. SPLASH
   ========================================================================== */
.splash{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 460px at 50% 6%,#EEF4FF,#FFFFFF 70%);
  transition:opacity .45s var(--ease),visibility .45s;
}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{text-align:center;padding:0 20px}
.splash-logo{width:104px;height:104px;color:var(--accent)}
.orbit{transform-origin:60px 60px;animation:spin 9s linear infinite}
.orbit-2{animation-duration:6s;animation-direction:reverse}
.satellite{transform-origin:60px 60px;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.splash-word{font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:-.025em;color:var(--text);margin:18px 0 6px}
.splash-word span{color:var(--accent)}
.splash-tag{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0}
.splash-bar{width:180px;height:4px;border-radius:99px;background:var(--line);margin:24px auto 0;overflow:hidden}
.splash-bar span{display:block;height:100%;width:38%;border-radius:99px;background:var(--accent);animation:load 1.4s var(--ease) infinite}
@keyframes load{0%{margin-left:-38%}100%{margin-left:100%}}

/* =============================================================================
   4. SHELL — left navigation + workspace column
   ========================================================================== */
.shell{display:flex;min-height:100vh;align-items:stretch}

.sidenav{
  width:var(--nav-w);flex:none;
  background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30;
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  padding:0 20px;height:var(--topbar-h);flex:none;
  border-bottom:1px solid var(--line);
}
/* The mark carries its own colour and rounding, so no tile behind it. */
.nav-brand .nb-mark{width:28px;height:28px;flex:none;display:block}
.nav-brand strong{font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--text)}

/* "fourdm" in the text colour, "AI" in the mark's blue-to-green. background-clip
   paints the gradient through the glyphs; the colour under it is the fallback
   anywhere that is not supported, so the word is never invisible. */
.wordmark{font-family:var(--display);white-space:nowrap}
.wm-ai{
  color:#0B72F0;
  background:linear-gradient(95deg,#0B72F0 0%,#2E9BE0 45%,#2FC07A 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){ .wm-ai{-webkit-text-fill-color:#0B72F0} }

.nav-scroll{flex:1;padding:18px 12px;min-height:0}
.nav-group{margin-bottom:22px}
.nav-label{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding:0 10px;margin:0 0 8px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:8px 10px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:500;color:var(--text-2);
  width:100%;border:0;background:none;text-align:left;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease);
}
.nav-item:hover{background:var(--sunken);color:var(--text);text-decoration:none}
.nav-item .ni-ic{width:18px;height:18px;flex:none;color:var(--muted);display:flex;align-items:center;justify-content:center}
.nav-item.on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.nav-item.on .ni-ic{color:var(--accent)}

.nav-foot{padding:12px;border-top:1px solid var(--line);flex:none}
.brandswitch{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--sunken);text-align:left;
}
.brandswitch .bs-ic{
  width:28px;height:28px;border-radius:var(--r-md);flex:none;
  background:var(--team);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.brandswitch .bs-txt{min-width:0;flex:1}
.brandswitch .bs-txt small{display:block;font-size:10.5px;color:var(--faint);font-weight:500}
.brandswitch .bs-txt b{
  display:block;font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.workspace{flex:1;min-width:0;display:flex;flex-direction:column}

@media(max-width:1080px){
  .sidenav{position:static;height:auto;width:100%;flex-direction:row;align-items:center;overflow:visible}
  .shell{flex-direction:column}
  .nav-scroll{display:flex;gap:4px;padding:10px;overflow-x:auto}
  .nav-group{margin:0;display:flex;align-items:center;gap:4px}
  .nav-label{display:none}
  .nav-foot{border-top:0;border-left:1px solid var(--line)}
  .nav-brand{border-bottom:0;border-right:1px solid var(--line)}
}

/* =============================================================================
   5. TOP BAR — team tabs + status
   ========================================================================== */
.appbar{
  position:sticky;top:0;z-index:25;flex:none;
  display:flex;align-items:center;gap:18px;
  height:var(--topbar-h);padding:0 24px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.appbar-brand{display:flex;align-items:center;gap:10px;min-width:0;height:100%}

/* The team switcher lives in the sidebar and only there — it used to be both a
   tab strip here and a nav group there, which is the same control twice. With
   the tabs gone this bar is purely status: connectors on the right, and the
   team's own name on the left so the window still says where you are. */
.mark{
  display:flex;width:28px;height:28px;border-radius:var(--r-sm);flex:none;
  align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-text);
  font-size:10px;font-weight:700;letter-spacing:.02em;
}
.brandtext{display:block;min-width:0}
.brandtext strong{
  display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brandtext span{font-size:11px;color:var(--muted);line-height:1.3}

.appbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12.5px;font-weight:500;color:var(--text-2);
  padding:5px 12px;border-radius:99px;background:var(--sunken);border:1px solid var(--line);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.pill.on .dot{background:var(--ok)}
.pill.on{color:var(--text-2)}

.iconbtn{
  width:var(--tap);height:var(--tap);border-radius:var(--r-md);
  border:1px solid transparent;background:none;color:var(--muted);
  font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease);
}
.iconbtn:hover{background:var(--sunken);color:var(--text)}

/* =============================================================================
   6. PAGE HEAD
   ========================================================================== */
main{max-width:none;margin:0;padding:24px 28px 40px;flex:1;min-width:0}
@media(max-width:640px){main{padding:18px 16px 32px}}

.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.ph-icon{
  width:52px;height:52px;border-radius:var(--r-lg);flex:none;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  box-shadow:var(--shadow-sm);
}
.ph-text{min-width:0;flex:1}
.ph-text h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.028em;color:var(--text)}
.ph-text p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.ph-actions{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}

/* =============================================================================
   7. LAYOUT
   ========================================================================== */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media(max-width:1200px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.card-head{padding:20px 22px 4px}
.card-head h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--text)}
.card-head p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6;max-width:74ch}
.card-body{padding:16px 22px 22px}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-edge);
  padding:4px 10px;border-radius:var(--r-sm);margin:0 0 10px;
}

/* =============================================================================
   8. NUMBERED SECTION CARDS
   -----------------------------------------------------------------------------
   Each brief section is its own card with an index badge, a title and a saved
   state — the shape in the reference. The number is a CSS counter so adding or
   removing a section never leaves the sequence wrong.
   ========================================================================== */
#brief{counter-reset:fsec}
.fsec{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  margin-bottom:16px;overflow:hidden;
}
.fsec-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);background:var(--panel);
}
.fsec-num{
  width:34px;height:34px;border-radius:var(--r-md);flex:none;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.fsec-num::before{counter-increment:fsec;content:counter(fsec)}
.fsec-title{font-size:15px;font-weight:650;color:var(--text);letter-spacing:-.012em;flex:1;min-width:0}
.fsec-body{padding:18px}

/* The old inline rule keeps working for any section-label left outside a card. */
.section-label{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:24px 0 12px;padding-top:16px;border-top:1px solid var(--line-soft);
}
.section-label:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.fsec-body .section-label{display:none}   /* a stray label inside a card body */

/* =============================================================================
   9. FORM
   ========================================================================== */
.field{margin-bottom:16px;min-width:0}
.field:last-child{margin-bottom:0}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--text-2);margin-bottom:6px}
.field label .req{color:var(--bad);margin-left:2px}
.field label .opt{color:var(--faint);font-weight:400;margin-left:5px}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}

.field input,.field textarea,.field select,
.export-bar select,.model-row select{
  width:100%;padding:9px 12px;min-height:40px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:14px;font-family:inherit;color:var(--text);background:var(--panel);
  transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#9CA3AF}
.field input:focus,.field textarea:focus,.field select:focus,
.export-bar select:focus,.model-row select:focus{
  outline:0;border-color:var(--accent);box-shadow:var(--ring);
}
.field textarea{resize:vertical;min-height:76px;line-height:1.6}
.field.invalid input,.field.invalid textarea{border-color:var(--bad);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.field select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.row3{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.row2,.row3{grid-template-columns:1fr}}

/* =============================================================================
   10. CHIPS — competitor / segment tokens and tick-box chips
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  font-size:13px;font-weight:500;color:var(--text-2);
  background:var(--panel);border:1px solid var(--line-strong);
  padding:6px 13px;border-radius:var(--r-md);
  user-select:none;cursor:pointer;
  transition:all var(--speed) var(--ease);
}
.chip:hover{border-color:#9CA3AF;color:var(--text)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.chip.on{background:var(--accent-soft);border-color:var(--accent-edge);color:var(--accent-text);font-weight:500}
.chip .tick{
  width:16px;height:16px;border-radius:4px;flex:none;
  border:1.5px solid var(--line-strong);background:var(--panel);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;color:transparent;transition:all var(--speed) var(--ease);
}
.chip.on .tick{background:var(--accent);border-color:var(--accent);color:#fff}

.skills-groups{display:flex;flex-direction:column;gap:18px}
.skill-group h4{margin:0 0 9px;font-size:12.5px;font-weight:600;color:var(--text-2)}
.skills-meta{font-size:12.5px;color:var(--muted);margin-top:14px}

/* =============================================================================
   11. PLANNING MATRIX
   ========================================================================== */
.plan-grid{display:flex;flex-direction:column;gap:14px}
.plan-row{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sunken);
  padding:14px 16px;transition:border-color var(--speed) var(--ease);
}
.plan-row:focus-within{border-color:var(--accent-edge);background:var(--panel)}
.plan-row .pr-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.plan-row .pr-name{font-size:13px;font-weight:600;color:var(--text)}
.plan-row .pr-note{font-size:12px;color:var(--muted)}
.plan-row textarea{min-height:44px}
.plan-row .chips{margin-top:2px}

/* =============================================================================
   12. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r-md);
  padding:0 18px;min-height:40px;
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  background:var(--accent);color:var(--on-accent);
  box-shadow:var(--shadow-sm);
  transition:background var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.btn:hover{background:var(--accent-hover)}
.btn.ghost{background:var(--panel);color:var(--text-2);border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:var(--sunken);color:var(--text);border-color:#9CA3AF}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.small{padding:0 13px;min-height:var(--tap);font-size:13px}

.link-cta{border:0;background:none;color:var(--accent-text);font-weight:600;font-size:13px;padding:0;text-decoration:underline;text-underline-offset:3px}
.link-cta:hover{color:var(--accent-hover)}

/* The brief's own action row becomes the sticky bar at the foot of the page.
   Scoped to `#brief >` so the Settings modal's action rows are unaffected. */
#brief > .actions{
  position:sticky;bottom:0;z-index:15;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:22px -22px -22px;padding:14px 22px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
#brief > .actions::before{
  content:'All changes are stored against the brand';
  order:-1;margin-right:auto;
  font-size:12.5px;color:var(--muted);
}
.actions{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap}

/* =============================================================================
   13. BANNERS
   ========================================================================== */
.autofill{
  display:none;align-items:center;gap:10px;
  background:var(--ok-soft);border:1px solid #D9F99D;color:#15803D;
  font-size:13px;padding:11px 14px;border-radius:var(--r-md);margin-bottom:16px;
}
.autofill.show{display:flex}
.autofill b{font-weight:600}
.autofill button{margin-left:auto}

.mode-callout{
  display:block;margin-top:12px;padding:12px 15px;border-radius:var(--r-md);
  font-size:13px;line-height:1.6;border:1px solid var(--line);background:var(--sunken);color:var(--text-2);
}
.mode-callout.demo{background:var(--warn-soft);border-color:#FDE68A;color:#92400E}
.mode-callout.live{background:var(--accent-soft);border-color:var(--accent-edge);color:#1E40AF}
.mode-callout b{font-weight:600}

/* =============================================================================
   14. RIGHT RAIL
   ========================================================================== */
.rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:calc(var(--topbar-h) + 20px)}
@media(max-width:1200px){.rail{position:static}}

.pipe{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pipe li{
  display:flex;gap:12px;align-items:flex-start;padding:10px 0;
  border:0;border-bottom:1px solid var(--line-soft);background:none;border-radius:0;
}
.pipe li:last-child{border-bottom:0}
.pipe li .num{
  flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--sunken);border:1px solid var(--line);color:var(--muted);
  font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.pipe li.live .num{background:var(--accent);border-color:var(--accent);color:#fff}
.pipe .pl-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pipe .pl-role{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}

.tag{
  font-size:10px;font-weight:600;letter-spacing:.03em;padding:3px 7px;
  border-radius:var(--r-sm);text-transform:uppercase;white-space:nowrap;border:1px solid transparent;
}
.tag.sonnet{background:var(--accent-soft);color:var(--sonnet);border-color:var(--accent-edge)}
.tag.opus{background:#F5F3FF;color:var(--opus);border-color:#DDD6FE}
.tag.fable{background:#FDF2F8;color:var(--fable);border-color:#FBCFE8}
.tag.open,.tag.openrouter{background:#F0FDFA;color:var(--open);border-color:#5EEAD4}
.tag.status-live{background:var(--ok-soft);color:var(--ok);border-color:#D9F99D}
.tag.status-planned{background:var(--sunken);color:var(--faint);border-color:var(--line)}

/* The saved-brief card is the reference's Brand Profile panel. */
.saved{background:var(--panel);border-color:var(--line)}
.saved .card-head h2{color:var(--text)}
.saved .card-head p{color:var(--muted)}
.saved .kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.saved .kv:last-child{border-bottom:0}
.saved .kv span{color:var(--muted)}
.saved .kv b{color:var(--text);font-weight:600;text-align:right;min-width:0;word-break:break-word}
.saved .savebtns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.saved .savebtns .btn{flex:1}

.recent{display:flex;flex-direction:column;gap:6px}
.recent .r{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  cursor:pointer;transition:all var(--speed) var(--ease);
}
.recent .r:hover{border-color:var(--accent-edge);background:var(--accent-soft)}
.recent .r b{font-size:13px;color:var(--text);font-weight:600}
.recent .r small{margin-left:auto;color:var(--faint);font-size:11.5px}
.recent .empty,.empty:not(.step){color:var(--faint);font-size:13px;padding:10px 2px}
/* `.empty` is a generic placeholder style; it must never reach a layout
   element that happens to share the word. */

/* =============================================================================
   15. MODAL
   ========================================================================== */
.modal{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--scrim);animation:fade .18s var(--ease) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal .box{
  background:var(--panel);border-radius:var(--r-xl);max-width:640px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg);
  animation:pop .22s var(--ease) both;
}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal .box .card-body{padding:20px 24px 24px}
.modal .mhead{display:flex;align-items:center;padding:20px 24px 0;position:sticky;top:0;background:var(--panel);z-index:1}
.modal h3{margin:0;font-size:17px;font-weight:650;letter-spacing:-.02em}
.modal .mhead button{margin-left:auto}

.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.note{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.55}

.model-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.model-row:last-child{border-bottom:0}
.model-row .mr-name{font-size:13px;font-weight:600;min-width:0;flex:1;color:var(--text)}
.model-row .mr-name small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.model-row select{max-width:250px;min-height:var(--tap);font-size:12.5px}

.brain-upload{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.brain-list{display:flex;flex-direction:column;gap:6px}
.brain-list .bf{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunken);font-size:12.5px}
.brain-list .bf b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brain-list .bf small{color:var(--faint);flex:none}
.brain-list .bf button{margin-left:auto;border:0;background:none;color:var(--bad);font-weight:600;font-size:12px;flex:none}
.brain-list .empty{font-size:12px;padding:2px}

.auto-actors{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.auto-actors .aa{display:flex;align-items:center;gap:7px;font-size:11.5px;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px}
.auto-actors .aa .pl{font-weight:600;color:var(--text-2)}
.auto-actors .aa .ac{font-family:var(--mono);color:var(--faint);font-size:11px}
.auto-actors .aa .tick{color:var(--ok);font-weight:700}

/* =============================================================================
   16. RUNNER
   ========================================================================== */
.runner{margin-top:20px}
.runner-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.runner-head h2{font-size:17px}
.runner-head #runner-brand{color:var(--accent-text)}
.runner-actions{margin-left:auto;display:flex;gap:10px;flex:none;align-items:center;flex-wrap:wrap}
.runner-mode{font-size:12.5px;color:var(--muted)}
.runner-list{display:flex;flex-direction:column;gap:10px}

.arun{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.arun::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background var(--speed) var(--ease)}
.arun:hover{border-color:var(--line-strong)}
.arun.done::before{background:var(--ok)}
.arun.running::before{background:var(--accent)}
.arun.error::before{background:var(--bad)}
.arun.running{border-color:var(--accent-edge);box-shadow:var(--ring)}
.arun.error{border-color:#FCA5A5}

.arun-top{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;flex-wrap:wrap}
.arun-top:hover{background:var(--sunken)}
.arun .num{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--sunken);border:1px solid var(--line);color:var(--muted);
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.arun.done .num{background:var(--ok-soft);border-color:#D9F99D;color:var(--ok)}
.arun.running .num{background:var(--accent);border-color:var(--accent);color:#fff}
.arun.error .num{background:var(--bad-soft);border-color:#FCA5A5;color:var(--bad)}

.arun-meta{min-width:190px;flex:1}
.arun-name{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.arun-sub{font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arun-state{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}

.state-pill{
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;
  background:var(--sunken);border:1px solid var(--line);color:var(--muted);
  text-transform:capitalize;white-space:nowrap;
}
.arun.done .state-pill{background:var(--ok-soft);border-color:#D9F99D;color:var(--ok)}
/* With a green accent, "running" and "done" are two greens of the same
   lightness — hue alone is a weak signal, and a poor one for anyone with a
   red-green deficiency. So the live state is separated by INTENSITY: running is
   a solid fill, done is a quiet tint. That reads at a glance and survives
   greyscale. */
.arun.running .state-pill{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.arun.error .state-pill{background:var(--bad-soft);border-color:#FCA5A5;color:var(--bad)}

.mode-pill,.saved-pill,.fresh-pill{
  font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--r-sm);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border:1px solid transparent;
}
.mode-pill.live{background:var(--ok-soft);color:var(--ok);border-color:#D9F99D}
.mode-pill.cached,.saved-pill{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-edge)}
.mode-pill.archived{background:#F0FDFA;color:var(--open);border-color:#5EEAD4}
.fresh-pill.ok{background:#F0FDFA;color:var(--open);border-color:#5EEAD4}
.fresh-pill.warn{background:var(--warn-soft);color:var(--warn);border-color:#FDE68A}
.fresh-pill.none{background:var(--sunken);color:var(--faint);border-color:var(--line)}

.fresh-toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;user-select:none}
.fresh-toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.arun .caret{font-size:11px;color:var(--faint);transition:transform .2s var(--ease)}
.arun.open .caret{transform:rotate(90deg)}
.arun-body{display:none;padding:6px 20px 20px;border-top:1px solid var(--line-soft);background:var(--panel)}
.arun.open .arun-body{display:block}

.prog{height:3px;background:var(--line-soft);overflow:hidden;margin:0}
.prog span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}

.arun-deps{display:flex;gap:7px;flex-wrap:wrap;margin-top:6px}
.arun-deps span{font-size:11px;font-weight:500;padding:2px 8px;border-radius:var(--r-sm);border:1px solid transparent;cursor:help}
.dep-needs{background:var(--accent-soft);border-color:var(--accent-edge);color:var(--accent-text)}
.dep-breaks{background:var(--warn-soft);border-color:#FDE68A;color:#92400E}
.dep-none{background:#F0FDFA;border-color:#5EEAD4;color:var(--open)}

.arun-state .fresh-pill,.arun-state .saved-pill,
.arun-state .mode-pill,.arun-state .state-pill{flex:0 0 auto}
.arun-state .model-pick{flex:0 1 230px;min-width:150px;max-width:230px;overflow:hidden}
.arun-state .run-btn{flex:0 0 auto}

.model-pick{display:flex;align-items:center;gap:7px}
.model-pick select{
  max-width:210px;padding:5px 10px;min-height:var(--tap);font-size:12px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--panel);color:var(--text-2);font-family:inherit;text-overflow:ellipsis;
}
.model-pick select:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
.model-pick .mp-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

.run-btn{
  border:1px solid var(--line-strong);background:var(--panel);color:var(--text-2);
  border-radius:var(--r-md);padding:0 14px;min-height:var(--tap);
  font-size:13px;font-weight:600;
  transition:all var(--speed) var(--ease);
}
.run-btn:hover:not(:disabled){background:var(--accent);color:#fff;border-color:var(--accent)}
.run-btn[disabled],.run-btn:disabled{opacity:.45;cursor:not-allowed}
.run-btn.rerun{color:var(--muted)}
.run-btn.rerun:hover:not(:disabled){background:var(--text-2);border-color:var(--text-2);color:#fff}
.run-btn.archived{border-color:#5EEAD4;color:var(--open)}
.run-btn.archived:hover:not(:disabled){background:var(--open);border-color:var(--open);color:#fff}
.run-btn.stop{border-color:#FCA5A5;color:var(--bad)}
.run-btn.stop:hover:not(:disabled){background:var(--bad);border-color:var(--bad);color:#fff}
.run-btn.stop:disabled{opacity:.5;cursor:default}

/* social-only: the model picker rendered inside a .tag */
select.model-select{
  width:auto;cursor:pointer;font-family:inherit;
  -webkit-appearance:none;appearance:none;padding:3px 22px 3px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px;
  transition:filter var(--speed) var(--ease);
}
select.model-select:hover{filter:brightness(.97)}
select.model-select:disabled{opacity:.6;cursor:wait}

/* =============================================================================
   17. LIVE WORK LOG
   ========================================================================== */
.worklog{
  margin:12px 0 2px;max-height:200px;overflow-y:auto;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--sunken);
  padding:10px 12px;font-size:12px;line-height:1.6;
}
.wl-step{display:flex;align-items:baseline;gap:10px;padding:4px 0;color:var(--muted)}
.wl-step + .wl-step{border-top:1px solid var(--line-soft)}
.wl-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--line-strong);margin-top:6px}
.wl-msg{flex:1;min-width:0;word-break:break-word}
.wl-dur{flex:none;font-size:11px;color:var(--faint);font-family:var(--mono)}
.wl-step.now{color:var(--text);font-weight:500}
.wl-step.now .wl-dot{background:var(--accent);animation:wl-pulse 1.4s var(--ease) infinite}
@keyframes wl-pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* =============================================================================
   18. STRUCTURED OUTPUT
   ========================================================================== */
.osec{margin-top:20px}
.osec h4{margin:0 0 8px;font-size:14px;font-weight:650;color:var(--text);letter-spacing:-.012em}
.osec p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.7;max-width:80ch}
.osec ul{margin:0;padding-left:20px}
.osec li{font-size:13.5px;color:var(--text-2);margin:5px 0;line-height:1.6}
.osec li::marker{color:var(--accent)}
.osummary{
  font-size:14px;color:var(--text);line-height:1.7;
  background:var(--accent-soft);border:1px solid var(--accent-edge);
  border-radius:var(--r-md);padding:14px 16px;
}

.otable-wrap{overflow-x:auto;margin-top:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.otable{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;min-width:540px}
.otable th{
  position:sticky;top:0;z-index:1;background:var(--sunken);color:var(--muted);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.otable td{padding:10px 12px;border-bottom:1px solid var(--line-soft);color:var(--text-2);vertical-align:top;line-height:1.6}
.otable tr:last-child td{border-bottom:0}
.otable tbody tr:hover td{background:var(--sunken)}

/* =============================================================================
   19. DISCOVERED HANDLES
   ========================================================================== */
.disco{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sunken);padding:14px 16px;min-height:52px}
.disco-empty{font-size:12.5px;color:var(--faint)}
.disco-groups{display:flex;flex-direction:column;gap:14px}
.disco-ent{display:flex;flex-direction:column;gap:8px}
.disco-ent .de-name{font-size:12.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.disco-ent .de-name .de-tag{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent-text)}
.disco-ent .de-name .de-tag.comp{background:var(--line-soft);color:var(--muted)}
.disco-ent .de-none{font-size:12px;color:var(--warn)}
.disco-h{display:flex;flex-wrap:wrap;gap:6px}
.disco-h a{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:5px 10px;color:var(--text-2);transition:all var(--speed) var(--ease);
}
.disco-h a:hover{border-color:var(--accent-edge);color:var(--accent-text);text-decoration:none}
.disco-h a b{font-weight:600;color:var(--text);text-transform:capitalize}
.disco-state{font-weight:600;font-size:11.5px;margin-left:6px}
.disco-state.working{color:var(--accent-text)}
.disco-state.ok{color:var(--ok)}
.disco-state.warn{color:var(--warn)}
.disco-manual{margin-top:10px}
.disco-manual summary{font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.disco-manual summary:hover{color:var(--accent-text)}
.disco-manual textarea{margin-top:8px}

/* =============================================================================
   20. CONTEXT FILES + EXPORT
   ========================================================================== */
.context-bar{margin-bottom:0;padding-bottom:0;border-bottom:0}
.context-head{margin-bottom:12px}
.context-title{font-size:13px;font-weight:600;color:var(--text)}
.context-note{font-size:12.5px;color:var(--muted);line-height:1.6}

.dropzone{
  display:flex;align-items:center;justify-content:center;padding:24px;
  border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--sunken);
  cursor:pointer;text-align:center;transition:all var(--speed) var(--ease);
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-soft)}
.dz-inner{font-size:13px;color:var(--muted)}
.dz-inner b{color:var(--accent-text);font-weight:600}

.context-files,.export-files{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.context-files .cf,.export-files .ef{
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);font-size:13px;
  transition:border-color var(--speed) var(--ease);
}
.context-files .cf:hover,.export-files .ef:hover{border-color:var(--line-strong)}
.context-files .cf .ic,.export-files .ef .ic{
  width:32px;height:32px;border-radius:var(--r-md);flex:none;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;text-transform:uppercase;
}
.context-files .cf .ic.text{background:var(--ok-soft);color:var(--ok)}
.context-files .cf .ic.office{background:var(--accent-soft);color:var(--accent-text)}
.context-files .cf .ic.pdf{background:var(--bad-soft);color:var(--bad)}
.context-files .cf .ic.binary{background:var(--sunken);color:var(--faint)}
.export-files .ef .ic{background:var(--accent-soft);color:var(--accent-text)}
.context-files .cf .cf-meta{min-width:0;flex:1}
.context-files .cf b,.export-files .ef b{color:var(--text);font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.context-files .cf small,.export-files .ef small{color:var(--faint);font-size:11.5px}
.context-files .cf .cf-act{margin-left:auto;display:flex;gap:12px;flex:none}
.context-files .cf a,.context-files .cf button{font-size:12.5px;font-weight:600;border:0;background:none;cursor:pointer;color:var(--accent-text)}
.context-files .cf button.rm{color:var(--bad)}
.context-files .warn{font-size:12px;color:var(--warn)}
.export-files .ef a{margin-left:auto;font-weight:600;font-size:12.5px}

.export-bar{margin-top:0;padding-top:0;border-top:0;display:flex;flex-direction:column;gap:14px}
.export-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.export-title{font-size:13px;font-weight:600;color:var(--text)}
.export-bar select{width:auto;min-width:170px}
.export-note{font-size:12.5px;color:var(--muted)}

/* =============================================================================
   21. VECTOR STORE + CONNECTOR TEST
   ========================================================================== */
.vector-stats{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--sunken);font-size:13px;margin-top:8px}
.vector-stats .vs-head{font-size:11.5px;color:var(--muted);margin-bottom:10px;word-break:break-all;font-family:var(--mono)}
.vector-stats .vs-row,.vector-stats .vs-ns{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.vector-stats .vs-row{color:var(--text-2)}
.vector-stats .vs-ns{font-size:12px;color:var(--muted);padding-left:12px}
.vector-stats .vs-err{margin-top:10px;color:var(--bad);font-size:12px}
.vector-stats .empty{color:var(--faint);font-size:12.5px;padding:0}
.vector-stats .vs-sync{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}

.conn-test{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:8px}
.conn-test .empty{padding:14px 16px;font-size:12.5px}
.ct-row{display:grid;grid-template-columns:190px 78px 1fr;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.ct-row:last-child{border-bottom:0}
.ct-name{font-weight:600;color:var(--text)}
.ct-state{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:var(--r-sm);text-align:center}
.ct-row.ok .ct-state{background:var(--ok-soft);color:var(--ok)}
.ct-row.bad .ct-state{background:var(--bad-soft);color:var(--bad)}
.ct-row.off .ct-state{background:var(--sunken);color:var(--faint)}
.ct-detail{color:var(--muted);font-size:12px;word-break:break-word}
.ct-warn{padding:12px 16px;font-size:12.5px;border-top:1px solid var(--line);background:var(--warn-soft);color:#92400E}
@media(max-width:620px){.ct-row{grid-template-columns:1fr auto;gap:6px}.ct-detail{grid-column:1/-1}}

/* =============================================================================
   22. TOAST
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:70;
  transform:translateX(-50%) translateY(14px);
  background:var(--navy);color:#fff;
  padding:13px 20px;border-radius:var(--r-lg);
  font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:all .24s var(--ease);
  max-width:min(90vw,520px);text-align:left;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--bad)}

/* =============================================================================
   23. ACCESSIBILITY + PRINT
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media (prefers-contrast:more){
  :root{--line:#9CA3AF;--line-soft:#D1D5DB;--muted:#374151;--faint:#4B5563}
}
@media print{
  body{background:#fff}
  .sidenav,.appbar,.rail,.runner-actions,.toast,.modal,.splash,#brief > .actions,.ph-actions{display:none!important}
  .shell,.workspace{display:block}
  .card,.arun,.fsec{border:1px solid #ccc;box-shadow:none;break-inside:avoid}
  .arun-body{display:block!important}
  .otable th{position:static}
}

/* =============================================================================
   24. STEPPER + PER-SECTION SAVED STATE   (driven by shell.js)
   ========================================================================== */
.stepper{
  display:flex;align-items:center;gap:24px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:22px 24px;margin-bottom:20px;
}
.steps{
  display:flex;list-style:none;margin:0;padding:0;flex:1;min-width:0;
  /* The rail's position is DERIVED from the marker, never guessed. Change the
     size or the padding and the line follows; it was 6px high because it was
     anchored to the top of the step while the marker sits below the button's
     own padding. */
  --m-size:32px;   /* marker diameter */
  --m-top:6px;     /* button padding above the marker */
  --m-gap:7px;     /* breathing room between marker edge and rail */
}
.step{flex:1;min-width:0;position:relative;display:flex;justify-content:center}
/* One neutral track. It is a spine holding the markers apart, NOT a progress
   bar — these sections can be filled in any order, so colouring the segment
   after a finished one would claim a sequence that does not exist. Progress is
   stated once, by the meter on the right. */
.step:not(:last-child)::after{
  content:'';position:absolute;height:2px;border-radius:2px;background:var(--line);
  top:calc(var(--m-top) + var(--m-size) / 2 - 1px);          /* dead centre of the marker */
  left:calc(50% + var(--m-size) / 2 + var(--m-gap));
  right:calc(-50% + var(--m-size) / 2 + var(--m-gap));
}
.st-btn{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:none;border:0;padding:var(--m-top) 6px 4px;width:100%;min-width:0;border-radius:var(--r-md);
  transition:background var(--speed) var(--ease);
}
.st-btn:hover{background:var(--sunken)}
.st-num{
  width:var(--m-size);height:var(--m-size);border-radius:50%;flex:none;position:relative;z-index:1;
  border:1.5px solid var(--line-strong);background:var(--panel);color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:all var(--speed) var(--ease);
}
.step.done .st-num{background:var(--accent);border-color:var(--accent);color:#fff}
.st-btn:hover .st-num{border-color:var(--accent);color:var(--accent-text)}
.step.done .st-btn:hover .st-num{color:#fff}

/* Every label is set identically; only its colour reports state, so the row
   keeps one baseline instead of jumping between weights. */
.st-txt{display:block;min-width:0;width:100%}
.st-txt b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;overflow-wrap:break-word;
  font-size:12.5px;font-weight:500;line-height:1.35;color:var(--muted);
  min-height:2.7em;
}
.step.done .st-txt b{color:var(--text)}

.st-meter{
  flex:none;width:190px;padding-left:24px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;
}
.st-count{font-size:13px;color:var(--muted);line-height:1.4}
.st-count b{font-weight:700;color:var(--text)}
.st-bar{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.st-bar span{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .35s var(--ease)}
.st-pct{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .stepper{flex-direction:column;align-items:stretch;gap:18px}
  .st-meter{width:auto;padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:16px}
  .st-txt b{font-size:11.5px;-webkit-line-clamp:3;min-height:0}
}

/* the chip on each section header */
.saved-chip{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12px;font-weight:500;white-space:nowrap}
.saved-chip:empty{display:none}
.saved-chip.ok{color:var(--ok)}
.saved-chip.edit{color:var(--warn)}

@media print{.stepper{display:none!important}}

/* =============================================================================
   25. WHAT'S INCLUDED + HELP
   ========================================================================== */
.incl{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.incl li{
  position:relative;padding-left:26px;
  font-size:13px;line-height:1.45;color:var(--text-2);
}
.incl li::before{
  content:'';position:absolute;left:0;top:3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--ok-soft);
  /* a tick drawn in the mark colour, so it reads as delivered rather than todo */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%234D7C0F' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
}

.rail-details{margin-top:16px;border-top:1px solid var(--line-soft);padding-top:14px}
.rail-details summary{
  font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;user-select:none;
  list-style:none;display:flex;align-items:center;gap:7px;
}
.rail-details summary::-webkit-details-marker{display:none}
.rail-details summary::before{
  content:'';width:0;height:0;flex:none;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform var(--speed) var(--ease);
}
.rail-details[open] summary::before{transform:rotate(90deg)}
.rail-details summary:hover{color:var(--accent-text)}
.rail-details .pipe{margin-top:12px}

.help-sec{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.help-sec:first-child{padding-top:4px}
.help-sec:last-child{border-bottom:0;padding-bottom:4px}
.help-sec h4{margin:0 0 7px;font-size:13.5px;font-weight:650;color:var(--text);letter-spacing:-.01em}
.help-sec p{margin:0;font-size:13px;line-height:1.7;color:var(--text-2)}
.help-sec b{font-weight:600;color:var(--text)}

/* =============================================================================
   26. HELP PAGE
   ========================================================================== */
#help-page .grid{grid-template-columns:minmax(0,1fr) 320px}
@media(max-width:1200px){#help-page .grid{grid-template-columns:1fr}}
.help-body{padding:6px 24px 18px}
.help-body .help-sec:first-child{padding-top:12px}
.help-body p{max-width:74ch}

/* prerequisites are not deliverables — a hollow marker, not a green tick */
.incl.todo li::before{
  background:var(--accent-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.4' fill='%23047857'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
}
.incl.todo li{margin-bottom:2px}

/* the sidebar Settings item is a button; match the anchors exactly */
button.nav-item{font:inherit;cursor:pointer}

/* =============================================================================
   27. VIEWS — brief · run · documents
   ========================================================================== */
.view{display:none}
.view.on{display:block}
/* The runner card carries its own top margin for the old stacked layout; as a
   view it is the whole page. */
#view-run .runner{margin-top:0}

/* Shown only while the runner has nothing to show, via a sibling selector so no
   script has to keep two states in step. */
.view-empty{display:none;text-align:center;padding:64px 24px}
#runner.hidden ~ .view-empty{display:block}
.view-empty h3{margin:0 0 8px;font-size:17px;font-weight:650;color:var(--text);letter-spacing:-.02em}
.view-empty p{margin:0 auto 20px;max-width:44ch;font-size:13.5px;line-height:1.65;color:var(--muted)}
.view-empty b{font-weight:600;color:var(--text-2)}
.view-empty .btn{text-decoration:none}
.view-empty .btn:hover{text-decoration:none}

/* Documents is a single column — there is no rail to balance against. */
#view-docs .export-bar,#view-docs .context-bar{margin:0;padding:0;border:0}
#view-docs .export-left{margin-bottom:14px}


/* A section label promoted to a card title keeps its id — the app writes to some
   of them — so it is restyled rather than replaced. */
.fsec-head .section-label.fsec-title{
  margin:0;padding:0;border:0;text-transform:none;letter-spacing:-.012em;
  font-size:15px;font-weight:650;color:var(--text);flex:1;min-width:0;
}
.fsec-head .section-label.fsec-title::after{content:none}
.fsec-head .section-label.fsec-title .opt{
  display:block;font-size:12px;font-weight:400;color:var(--muted);
  text-transform:none;letter-spacing:0;margin-top:3px;
}

/* =============================================================================
   28. CONTENT TEAM — components only this pipeline has
   -----------------------------------------------------------------------------
   The content app shipped its own stylesheet for these; on the shared one they
   rendered as an unstyled run-on. Re-expressed here in the token language so
   they match the rest rather than reintroducing a second palette.
   ========================================================================== */

/* The workflow chooser. Each card is a whole workflow — its own prompt, its own
   form — so it is a card to choose from, not a line in a list. */
.types{
  display:grid;gap:10px;margin:0 0 6px;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
}
.type{
  position:relative;display:flex;flex-direction:column;gap:5px;
  padding:13px 34px 14px 14px;border-radius:var(--r-lg);cursor:pointer;
  border:1px solid var(--line-strong);background:var(--panel);
  transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.type:hover{border-color:#9CA3AF}
.type input{position:absolute;opacity:0;width:0;height:0}
.type:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.type .t-name{font-size:13.5px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.type .t-note{font-size:11.5px;line-height:1.5;color:var(--muted)}
.type.on{border-color:var(--accent);background:var(--accent-soft)}
.type.on .t-name{color:var(--accent-text)}
/* The tick is drawn, not typed: a glyph inherits the font and drifts. */
.type.on::after{
  content:'';position:absolute;top:12px;right:12px;width:16px;height:16px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* The chosen workflow's own fields, which change as you switch workflow. */
.wf-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.wf-grid .field.span2{grid-column:1 / -1}
.wf-grid .field.tall textarea{min-height:190px}

/* Shown on an agent whose model has less context headroom than the run needs. */
.ctx-risk{
  margin-top:6px;padding:8px 11px;border-radius:var(--r-md);
  font-size:11.5px;line-height:1.5;
  color:var(--warn);background:var(--warn-soft);
  border:1px solid #FDE68A;
}

/* =============================================================================
   29. BRAND PICKER — load a stored brand into the brief
   ========================================================================== */
.brand-picker{
  padding:14px 16px;border:1px solid var(--accent-edge);border-radius:var(--r-lg);
  background:var(--accent-soft);margin-bottom:18px;
}
.brand-picker label{color:var(--accent-text)}
.bp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bp-row select{
  flex:0 1 320px;min-width:200px;padding:9px 34px 9px 12px;min-height:40px;
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:14px;font-family:inherit;color:var(--text);background:var(--panel);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;
}
.bp-row select:disabled{opacity:.6;cursor:not-allowed}
.bp-note{font-size:12.5px;color:var(--muted);flex:1 1 100%;line-height:1.5}

/* the admin page is a single column — there is no rail to balance */
#admin-page{max-width:1080px}
#admin-page .otable{min-width:640px}