/* Storybase Progress Station — approved design v18 (1794289350-b1c5), ported from Main.dc.html.
   Tokens: Storybase app light-glass / dark-glass (v212 package). No inline styles are needed. */

:root {
  --surface: #ffffff; --soft: #f2f2f0; --soft2: #e9e9e6; --line: #e8e8e5; --line2: #d9d9d5;
  --ink: #141414; --ink2: #5f5f5b; --ink3: #6b6b66; --acc: #edf26b;
  --ok: #2f7a4b; --ok-t: #e2f0e5; --check: #b4460c; --check-t: #fbeee4; --stop: #b42318; --stop-t: #fce7e4;
  --tag: #efe8de; --tagc: #6b5a45; --ev: #2f7a4b; --held: #c77b2e; --open: #d3d3cd; --hatch: #9a9a94;
  --glass: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.88));
  --edge: linear-gradient(160deg, rgba(20,20,20,.07), rgba(20,20,20,.05) 22%, rgba(20,20,20,.10) 60%, rgba(20,20,20,.16));
  --sidebg: rgba(255,255,255,.62); --note: #fbf3e8; --noteline: #ead7be;
  --page: radial-gradient(780px 560px at 96% -8%, rgba(237,242,107,.18), transparent 72%), #f1f1ee;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --surface: #1e1e1e; --soft: #262626; --soft2: #2e2e2e; --line: #2c2c2c; --line2: #3a3a3a;
  --ink: #f2f2f0; --ink2: #a3a3a0; --ink3: #9a9a94;
  --ok: #8ccb9e; --ok-t: #1f3327; --check: #f2a65a; --check-t: #3a2716; --stop: #ff8a7e; --stop-t: #3e1e1b;
  --tag: #3a342d; --tagc: #d6c7b2; --ev: #8ccb9e; --held: #f2a65a; --open: #3a3a36; --hatch: #77776f;
  --glass: linear-gradient(180deg, rgba(44,44,44,.9), rgba(33,33,33,.9));
  --edge: linear-gradient(150deg, rgba(255,255,255,.15), rgba(255,255,255,.035) 32%, rgba(255,255,255,.015) 62%, rgba(237,242,107,.08));
  --sidebg: rgba(9,9,9,.92); --note: #2a2219; --noteline: #4a3a26;
  --page: radial-gradient(560px 380px at 92% -4%, rgba(237,242,107,.05), transparent 70%), #121212;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--page); min-height: 100vh;
  font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased; letter-spacing: -.003em;
  font-variant-numeric: tabular-nums;
}
svg { display: block; flex: none; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
li { list-style: none; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.d { font-size: 40px; line-height: 48px; font-weight: 400; letter-spacing: -.028em; }
.h1 { font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -.022em; }
.h2 { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -.012em; }
.h3 { font-size: 15px; line-height: 22px; font-weight: 500; }
.sm { font-size: 13px; line-height: 19px; color: var(--ink2); }
.eye { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink3); }
.c2 { color: var(--ink2); }
.grow { flex: 1; min-width: 0; }
.strong { font-weight: 500; color: var(--ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hl { background: linear-gradient(transparent 58%, #edf26b 58%); padding: 0 2px; }
:root[data-theme="dark"] .hl { background: none; color: var(--acc); text-decoration: underline dotted var(--acc); text-decoration-thickness: 2px; text-underline-offset: 7px; }

.cd { border-radius: 16px; background: var(--glass) padding-box, var(--edge) border-box; border: 1px solid transparent; }
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; border: 0; cursor: pointer; text-decoration: none; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.bt:disabled { opacity: .55; cursor: progress; }
.lk { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; font-weight: 500; font-size: 13px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--soft); color: var(--ink2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.tag.warm { background: var(--tag); color: var(--tagc); }
.tag.c { background: var(--check-t); color: var(--check); }
.tag.ok { background: var(--ok-t); color: var(--ok); }
.tag.no { background: var(--stop-t); color: var(--stop); }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tag.live i { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent), 0 0 10px currentColor; }

.mark { width: 26px; height: 26px; color: var(--ink); }
.mode { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line2); border: 0; cursor: pointer; }
.mode i { position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgba(20,20,20,.18); transition: transform .2s cubic-bezier(.2,.7,.2,1); }
:root[data-theme="dark"] .mode i { transform: translateX(32px); }
.mode span { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--ink3); }
:root:not([data-theme="dark"]) .mode .sun, :root[data-theme="dark"] .mode .moon { color: var(--ink); }

/* Shell */
.shell { display: flex; flex-wrap: wrap; align-items: stretch; }
.side { flex: 1 1 236px; max-width: 248px; min-height: 100vh; background: var(--sidebg); box-shadow: inset -1px 0 0 var(--line); padding: 22px 16px; display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 0; text-decoration: none; color: var(--ink); }
.brand .h3 { display: block; font-size: 16px; line-height: 20px; }
.side .pa { margin: 22px 10px 10px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.side nav a.on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.side nav a span { font-size: 12px; color: var(--ink3); }
.side .sbot { padding: 28px 10px 4px; }
.side .sbot p { font-weight: 400; font-size: 18px; line-height: 25px; }
main { flex: 999 1 640px; min-width: 0; padding: 32px 44px 48px; max-width: 1240px; }

/* Header */
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
.head .intro { max-width: 640px; }
.head .intro .d { margin-top: 12px; }
.head .intro p { margin-top: 12px; font-size: 15px; line-height: 22px; }
.ha { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.ha .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.signin { margin-top: 28px; padding: 22px 24px; }
.signin p { margin-top: 6px; }
.signin .bt { margin-top: 14px; }

/* Last activity band */
.band { margin-top: 28px; display: flex; flex-wrap: wrap; overflow: hidden; }
.bandl { flex: 3 1 480px; padding: 20px 22px; display: flex; gap: 16px; background: var(--note); }
.bandl .tag { flex: none; height: 28px; }
.bandl .h2 { margin-top: 4px; }
.bandl p { margin-top: 6px; }
.bandr { flex: 1 1 240px; padding: 20px 22px; box-shadow: inset 1px 0 0 var(--line); }
.bandr .h1 { margin-top: 4px; }
.bandr .tagrow { margin-top: 8px; }
.bandr p { margin-top: 8px; }
.notice { margin: 14px 4px 0; display: flex; gap: 10px; }
.notice svg { margin-top: 2px; }
.banner { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 18px; border-radius: 14px; background: var(--stop-t); color: var(--ink); }
.banner.fixture { background: var(--check-t); }

/* Coverage */
.cov { margin-top: 28px; padding: 26px 28px; display: flex; flex-wrap: wrap; gap: 28px 40px; }
.cov .main-col { flex: 1.2 1 420px; min-width: 0; }
.cov .side-col { flex: 1 1 320px; min-width: 0; }
.cov .num { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.bignum { font-size: 64px; line-height: 68px; font-weight: 400; letter-spacing: -.04em; }
.cov .num .sm { font-size: 15px; line-height: 22px; color: var(--ink); }
.big { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin-top: 18px; }
.big.thin { height: 6px; margin-top: 0; }
.big span { display: block; flex: 0 0 auto; }
.seg-ev { background: var(--ev); } .seg-held { background: var(--held); } .seg-open { background: var(--open); }
.seg-unknown { background: repeating-linear-gradient(45deg, var(--hatch) 0 1.5px, transparent 1.5px 4px); }
.lg { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--ink2); margin-top: 12px; }
.lg span { display: flex; align-items: center; gap: 7px; }
.lg i { width: 10px; height: 10px; border-radius: 2px; background: var(--open); display: block; }
.lg i.ev { background: var(--ev); } .lg i.held { background: var(--held); }
.lg i.unknown { background: repeating-linear-gradient(45deg, var(--hatch) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--hatch); }
.cov .explain { margin-top: 16px; max-width: 560px; }
.groups { margin-top: 10px; display: flex; flex-direction: column; gap: 11px; }
.gate { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink2); margin-bottom: 8px; }
.gate b { font-weight: 500; color: var(--ink); }
.groups .gate { margin: 0 0 5px; }
.cov .split { margin-top: 14px; }

/* Metrics */
.metrics { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.metrics .cd { padding: 16px 18px; }
.metrics .val { font-size: 30px; line-height: 38px; font-weight: 400; margin-top: 4px; letter-spacing: -.022em; }
.metrics .val.word { font-size: 26px; }
.metrics .val small { font-size: 20px; color: var(--ink2); }

/* Sections */
.sec { margin-top: 44px; }
.sech { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 2px 14px; flex-wrap: wrap; }
.sech .h1 { font-size: 22px; line-height: 28px; }
.secp { max-width: 760px; margin: 0 2px 18px; }

/* Activity */
.act { overflow: hidden; }
.act .stale { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 14px 20px; background: var(--note); box-shadow: inset 0 -1px 0 var(--noteline); }
.live { padding: 14px 20px; box-shadow: inset 0 -1px 0 var(--line); }
.live h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nodes { margin-top: 10px; display: flex; flex-direction: column; }
.node { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 0; }
.nodes > .node + .node { box-shadow: inset 0 1px 0 var(--line); }
.feed > li { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 4px 18px; padding: 14px 20px; align-items: start; }
.feed > li + li { box-shadow: inset 0 1px 0 var(--line); }
.feed > li.missing { background: var(--soft); }
.tm { font-size: 13px; line-height: 19px; color: var(--ink); }
.tm small { display: block; font-size: 12px; color: var(--ink3); }

/* Lanes */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2); font-size: 13.5px; color: var(--ink); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); box-shadow: none; }
.srch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line2); width: 300px; color: var(--ink3); }
.srch input { border: 0; outline: 0; background: none; font-size: 14px; color: var(--ink); width: 100%; }
.lanelg { margin: 16px 2px 16px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lane { padding: 22px 24px; min-width: 0; }
.lane .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lane h3 { font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: -.012em; margin-top: 10px; }
.lane .sum { font-size: 13.5px; line-height: 20px; color: var(--ink2); margin: 8px 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 60px; }
.bar { display: flex; gap: 3px; height: 6px; }
.bar span { flex: 1; border-radius: 2px; background: var(--open); }
.bar span.evidenced { background: var(--ev); } .bar span.held { background: var(--held); }
.bar span.unknown { background: repeating-linear-gradient(45deg, var(--hatch) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1px var(--hatch); }
details.more { margin-top: 16px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--line); }
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev { transform: rotate(180deg); }
.cks { margin-top: 8px; }
.ck { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 13.5px; line-height: 19px; }
.cks > .ck + .ck { box-shadow: inset 0 1px 0 var(--line); }
.mk { width: 18px; height: 18px; border-radius: 5px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--open); }
.mk.evidenced { background: var(--ev); }
:root[data-theme="dark"] .mk.evidenced { color: #141414; }
.mk.held { background: var(--held); color: #141414; }
.mk.open, .mk.unknown { background: none; box-shadow: inset 0 0 0 1.5px var(--hatch); color: var(--ink2); }
.nx { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.nx p { font-size: 13.5px; line-height: 20px; margin-top: 4px; }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 14px; font-size: 12.5px; color: var(--ink3); }
.meta b { display: block; font-weight: 500; color: var(--ink); font-size: 13.5px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.none { margin-top: 16px; }
.future .cd.lane { background: var(--soft) padding-box, var(--edge) border-box; }

/* Sources */
.srcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.srcs .cd, .hosts .cd { padding: 18px; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.srcs p, .hosts p { margin-top: 10px; }
.hosts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hosts .lk { display: inline-block; margin-top: 6px; overflow-wrap: anywhere; }
.subhead { margin: 26px 2px 10px; }
.receipt { margin-top: 14px; padding: 18px 20px; }
.receipt p { margin-top: 6px; }
.receipt .lk { display: inline-block; margin-top: 8px; }
.collected { margin: 14px 2px 0; }

/* Issues */
.istool { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.iss { padding: 4px 20px 8px; }
.issue { box-shadow: inset 0 -1px 0 var(--line); }
.issue > summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px 16px; gap: 10px; padding: 11px 0; font-weight: 400; font-size: 13.5px; line-height: 19px; }
.issue > summary .n { color: var(--ink3); }
.issue > summary .st { text-align: right; font-size: 12.5px; color: var(--ink3); }
.issue > summary .st.open { color: var(--check); }
.issue .body { padding: 2px 0 14px 62px; }
.issue .body dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.issue .body dt { color: var(--ink3); }
.issue .body ul { margin-top: 8px; }
.issue .body li { font-size: 13px; padding: 3px 0; }

/* Method */
.method { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.method > div:first-child { flex: 1 1 280px; }
.method > div:last-child { flex: 1.6 1 440px; }
.method ol { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 21px; }
.method details { margin-top: 18px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--line); }
.method details ul { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 44px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--line); }
footer .brandmini { display: flex; align-items: center; gap: 8px; }

/* Phone (v18 PhoneLight/PhoneDark) */
@media (max-width: 860px) {
  .side { flex-basis: 100%; max-width: none; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 18px; box-shadow: inset 0 -1px 0 var(--line); }
  .side nav, .side .sbot { display: none; }
  .side .pa { margin: 0; }
  main { padding: 22px 18px 40px; }
  .ha { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .d { font-size: 32px; line-height: 38px; }
  .bignum { font-size: 52px; line-height: 56px; }
  .cov { padding: 20px; }
  .bandl { flex-direction: column; gap: 10px; padding: 18px; }
  .bandr { box-shadow: inset 0 1px 0 var(--line); padding: 16px 18px; }
  .grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srcs, .hosts { grid-template-columns: 1fr; }
  .srch { width: 100%; }
  .feed > li { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
  .feed > li > .tm { grid-column: 1 / -1; }
  .lane { padding: 18px; }
  .issue > summary { grid-template-columns: 44px minmax(0, 1fr) 52px 16px; }
  .issue .body { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Backend contract additions (sign-out, connected feeds, runner state changes, login shell) ---- */
.so { display: inline-flex; margin: 0; }
.bt.quiet { background: transparent; }
.subhead.tight { margin: 18px 0 2px; }
.feed.trans > li { padding: 12px 0; }
.connerr { color: var(--stop); }
main.login { max-width: none; width: 100%; min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 16px; padding: 24px 16px; }
.loginbox { width: min(440px, 100%); padding: 28px; }
.loginbox .brand { padding: 0; }
.loginbox .h1 { margin-top: 26px; }
.loginbox > .sm { margin-top: 8px; }
.loginbox .bt.pri { margin-top: 20px; width: 100%; height: 44px; background: var(--acc); color: #141414; box-shadow: none; }
.loginbox .eye { margin-top: 14px; }
.setup-note { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--check-t); color: var(--ink); font-size: 14px; line-height: 20px; }
.setup-note[role="alert"] { background: var(--stop-t); }
.setup-note.fixture-note { background: var(--soft); color: var(--ink2); font-size: 12.5px; line-height: 18px; }
.loginbox .bt[aria-disabled="true"] { background: var(--soft2); color: var(--ink3); cursor: not-allowed; pointer-events: none; }
.stopev:empty { display: none; }
.stopev { margin-top: 6px; }
/* Job queue: reuses .grid / .cd.lane / .meta / details.more / .chips / .tag */
.qbar { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; margin: 0 2px 16px; }
.job .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.job .two > div { padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 12.5px; color: var(--ink3); min-width: 0; }
.job .two b { display: block; font-weight: 500; color: var(--ink); font-size: 13.5px; margin-top: 2px; }
.job .two .sm { display: block; margin-top: 2px; font-size: 12.5px; line-height: 18px; }
.jl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jl a.tag { text-decoration: none; }
.qlist { margin-top: 6px; margin-bottom: 12px; }
.job details.more > .eye { margin-top: 10px; }
@media (max-width: 860px) { .job .two { grid-template-columns: 1fr; } }
.qlist .ck { flex-wrap: wrap; row-gap: 2px; }
.qlist .ck .grow { flex: 1 1 180px; }
.qlist .ck .eye { white-space: normal; }