/* ============================================================================
   Helios Cockpit — layout & screens. Pixel-faithful to the locked design.
   Pairs with tokens.css. No external resources (CSP-clean): no @import url(),
   no webfonts, no remote images. Inert rendering only (see app.js).
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
}

/* ── App frame ──────────────────────────────────────────────────────────── */

#app { min-height: 100%; display: flex; flex-direction: column; }

/* Floating top bar — identical across every screen. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); padding: 0 var(--topbar-pad);
  border-bottom: 1px solid var(--line);
  /* frosted glass — content scrolls under it with a real frosted tint */
  background: var(--glass-bg-bar);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--glass-edge-soft);   /* faint top specular rim */
}
/* If backdrop-filter isn't supported, fall back to the opaque surface (no see-through). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg); }
}
.topbar .brand { display: flex; align-items: center; gap: 14px; }
.topbar .wordmark {
  font-size: 14px; font-weight: 600; letter-spacing: 0.2em; color: var(--ink);
}
.topbar .brand .bar { width: 1px; height: 14px; background: var(--divider); }
.topbar .firm { font-size: 13px; color: var(--ink-3); letter-spacing: 0.02em; }

.topbar nav { display: flex; align-items: center; gap: 28px; }
.topbar nav a {
  font-size: 14.5px; color: var(--ink-2); text-decoration: none; cursor: pointer;
  background: none; border: none; font-family: inherit; padding: 0;
  transition: color .15s ease;
}
.topbar nav a:hover { color: var(--ink); }
.topbar nav a.active { color: var(--ink); }

.topbar .avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--avatar-bg); color: var(--ink-avatar);
  font-size: 12px; letter-spacing: 0.04em;
}

/* The screen area. */
main { flex: 1; }

/* A scrolling destination (everything except home): top-aligned stage. */
.stage {
  max-width: var(--content-max); margin: 0 auto;
  padding: 84px 72px 96px;
}

/* Home is a full-height centered stage with a soft spotlight; never scrolls. */
.stage--center {
  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px;
}
.stage--center .glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 900px; height: 560px; background: var(--stage-glow); pointer-events: none;
}
.stage--center > * { position: relative; z-index: 1; }

/* ── Shared type ───────────────────────────────────────────────────────── */

.eyebrow {
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--tight { letter-spacing: 0.14em; }

.headline { /* outbox/destination h1 */
  font-size: 48px; line-height: 1.05; font-weight: 600;
  letter-spacing: -0.028em; color: var(--ink); margin: 0;
}
.subline { font-size: 19px; line-height: 1.5; color: var(--ink-2); margin: 20px 0 0; }
.metaline { font-size: 14px; color: var(--ink-4); margin-top: 18px; }

/* Centered header block used by destination screens. */
.screen-head { text-align: center; margin-bottom: 72px; }
.screen-head .eyebrow { display: block; margin-bottom: 22px; }

/* ── Home: calm "all clear" state ──────────────────────────────────────── */

.home-calm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-calm .greeting { font-size: 14.5px; letter-spacing: 0.01em; color: var(--ink-3); margin-bottom: 30px; }
.home-calm .h1 {
  font-size: 62px; line-height: 1.04; font-weight: 600;
  letter-spacing: -0.028em; color: var(--ink); margin: 0;
}
.home-calm .sub {
  font-size: 19px; line-height: 1.5; font-weight: 400; color: var(--ink-2);
  max-width: 500px; margin: 24px 0 0;
}

/* The breathing health dot. */
.dot {
  display: inline-block; border-radius: 50%;
  background: var(--accent); animation: breathe 3.4s ease-in-out infinite;
}
.dot--home   { width: 9px; height: 9px; margin-bottom: 26px;
               box-shadow: 0 0 14px 1px var(--accent-glow); }
.dot--footer { width: 7px; height: 7px; box-shadow: 0 0 11px 1px var(--accent-glow-sm); }
.dot--line   { width: 8px; height: 8px; box-shadow: 0 0 12px 1px var(--accent-glow-sm); }

/* ── Home: "needs you" state ───────────────────────────────────────────── */

.home-needs { display: flex; flex-direction: column; align-items: center; width: 100%; }
.home-needs .eyebrow { margin-bottom: 14px; }
.home-needs h2 {
  font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 38px;
}
.needs-list { width: 640px; border-bottom: 1px solid var(--line-strong); text-align: left; }
.needs-row {
  display: grid; grid-template-columns: 124px 1fr auto; align-items: center; gap: 24px;
  padding: 21px 8px; border-top: 1px solid var(--line-strong);
  border-radius: var(--r-row-sm); cursor: pointer; text-decoration: none;
}
.needs-row:hover { background: var(--row-hover-home); }
.needs-row .tag { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.needs-row .title { font-size: 17.5px; font-weight: 500; color: var(--ink); }
.needs-row .sub { font-size: 15px; color: var(--ink-2); margin-top: 5px; }
.needs-row .go { font-size: 15px; color: var(--ink-link); white-space: nowrap; }

/* ── The wide working list (Outbox, and the row grammar reused elsewhere) ── */

.worklist { border-bottom: 1px solid var(--line-row); }
.work-row {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 184px;
  align-items: center; gap: 64px; padding: 34px 16px;
  border-top: 1px solid var(--line-row); border-radius: var(--r-row);
  cursor: pointer; text-decoration: none; color: inherit;
}
.work-row:hover { background: var(--row-hover); }

.work-row .who .name { font-size: 18px; font-weight: 500; color: var(--ink); }
.work-row .who .meta { font-size: 14.5px; color: var(--ink-3); margin-top: 6px; }

.work-row .what .subject {
  font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.work-row .what .preview {
  font-size: 15.5px; line-height: 1.55; color: var(--ink-2); margin-top: 9px;
}

.work-row .aside {
  display: flex; flex-direction: column; align-items: flex-end; gap: 13px;
}
.work-row .aside .when { font-size: 13.5px; color: var(--ink-3); }
.score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 28px; padding: 0 9px; border-radius: var(--r-chip);
  background: var(--chip-bg); font-size: 14px; font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.work-row .aside .go { font-size: 14px; color: var(--ink-link); white-space: nowrap; }

/* ── Footer reassurance line (Outbox) ──────────────────────────────────── */

.reassure {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: 48px;
}
.reassure span.text { font-size: 14px; color: var(--ink-3); }

/* A single inline health line (used where a destination wants a quiet status). */
.healthline {
  display: flex; align-items: center; gap: 12px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.healthline .ok { font-size: 14px; color: var(--ink); }
.healthline .detail { font-size: 14px; color: var(--ink-3); }

/* ── Calm empty state (never a "0" or "no data yet" box — brief rule 2) ──── */

.empty-calm {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 96px 24px;
}
.empty-calm .dot { margin-bottom: 26px; }
.empty-calm .h1 {
  font-size: 40px; line-height: 1.08; font-weight: 600;
  letter-spacing: -0.022em; color: var(--ink); margin: 0;
}
.empty-calm .sub {
  font-size: 18px; line-height: 1.5; color: var(--ink-2);
  max-width: 520px; margin: 20px 0 0;
}

/* ── Generic list/table for the rich destinations (Prospects etc.) ──────── */

.toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.toolbar .search {
  flex: 1; min-width: 220px; max-width: 420px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 11px 14px; outline: none;
}
.toolbar .search::placeholder { color: var(--ink-3); }
.toolbar .search:focus { border-color: rgba(255,255,255,0.18); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-toggle {
  background: var(--seg-track); border: 1px solid var(--seg-border);
  border-radius: var(--r-pill); color: var(--ink-2); font-family: inherit;
  font-size: 14px; padding: 8px 15px; cursor: pointer; transition: all .15s ease;
}
.chip-toggle:hover { color: var(--ink); }
.chip-toggle.on { background: var(--seg-on-bg); color: var(--ink); }

.count-note { font-size: 14px; color: var(--ink-4); margin-left: auto; }

/* simple two-line list row (prospects/manufacturers/documents) */
.list { border-bottom: 1px solid var(--line-row); }
.list-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 32px; padding: 22px 12px; border-top: 1px solid var(--line-row);
  border-radius: var(--r-row); text-decoration: none; color: inherit; cursor: pointer;
}
.list-row:hover { background: var(--row-hover); }
.list-row .primary { font-size: 17.5px; font-weight: 500; color: var(--ink); }
.list-row .secondary { font-size: 15px; color: var(--ink-3); margin-top: 5px; }
.list-row .trailing { display: flex; align-items: center; gap: 16px; color: var(--ink-3); font-size: 14px; }

/* pipeline stage strip */
.pipeline-stages { display: flex; flex-direction: column; gap: 2px; max-width: 720px; margin: 0 auto; }
.pipeline-stage {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 20px 12px; border-top: 1px solid var(--line-row);
}
.pipeline-stage:last-child { border-bottom: 1px solid var(--line-row); }
.pipeline-stage .stage-name { font-size: 16px; color: var(--ink); }
.pipeline-stage .stage-count { font-size: 22px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Loading shimmer (calm, not a spinner) ─────────────────────────────── */
.loading { text-align: center; padding: 120px 24px; color: var(--ink-3); font-size: 15px; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; padding: 24px;
}
.login-wrap .wordmark { font-size: 15px; font-weight: 600; letter-spacing: 0.2em; color: var(--ink); }
.login-wrap .firm { font-size: 13px; color: var(--ink-3); letter-spacing: 0.04em; }
.login-form { display: flex; flex-direction: column; gap: 12px; width: 320px; margin-top: 18px; }
.login-form input {
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 12px 14px; outline: none;
}
.login-form input:focus { border-color: rgba(255,255,255,0.2); }
.login-form button {
  background: var(--seg-on-bg); border: 1px solid var(--seg-border);
  border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 15px;
  font-weight: 500; padding: 12px 14px; cursor: pointer; transition: all .15s ease;
}
.login-form button:hover { background: rgba(255,255,255,0.18); }
.login-error { font-size: 13px; color: #e08a8a; min-height: 16px; text-align: center; }

/* ── Pass Two: filter, detail panel, tabs, active/dormant ──────────────── */

/* AND/OR filter */
.filter { margin-bottom: 32px; }
.flt-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.flt-count { font-size: 15px; font-weight: 500; color: var(--ink); }
.flt-reset { background: none; border: none; color: var(--ink-link); font-family: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.flt-reset:hover { color: var(--ink); }
.flt-group { margin-top: 12px; }
.flt-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.flt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flt-chip {
  background: var(--seg-track); border: 1px solid var(--seg-border); border-radius: var(--r-pill);
  color: var(--ink-2); font-family: inherit; font-size: 14px; padding: 7px 14px; cursor: pointer; transition: all .15s ease;
}
.flt-chip:hover { color: var(--ink); }
.flt-chip.on { background: var(--seg-on-bg); color: var(--ink); border-color: rgba(255,255,255,0.2); }

/* active / dormant segmented toggle */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--seg-track); border: 1px solid var(--seg-border); border-radius: var(--r-pill); }
.seg button { background: none; border: none; color: var(--ink-2); font-family: inherit; font-size: 14px; font-weight: 500; padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; }
.seg button.on { background: var(--seg-on-bg); color: var(--ink); }
.tag-dormant { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-4); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 9px; }

/* slide-in detail panel (Apple spec-page) — spring in, accelerate out (see motion section) */
/* Backdrop lives on a ::before layer animated by OPACITY only (GPU-composited, no paint
   thrash); the overlay itself stays a transparent flex container that still catches the
   click-to-close (pseudo-elements aren't event targets, so e.target === overlay holds). */
.panel-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: flex-end;
}
.panel-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,0.42);
  animation: fadeIn var(--dur) var(--ease-out); will-change: opacity;
}
/* Frosted-glass spec panel: the page behind it (incl. the dim) is blurred through the
   translucent fill, a bright specular rim catches the light on the leading edge, and a
   deep soft shadow lifts it off the surface. It springs in. The blur is on a single
   ~600px surface whose backdrop (the page) is static while the panel scrolls its own
   content, so it never re-rasterises on scroll — GPU-cheap. */
.panel {
  width: 600px; max-width: 92vw; height: 100%; overflow-y: auto;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-left: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 1px 0 0 var(--glass-edge-soft), inset 0 1px 0 var(--glass-edge-soft);
  padding: 40px 44px 64px; animation: panelIn var(--dur-slow) var(--ease-spring-soft);
  will-change: transform;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: var(--bg); }                 /* opaque fallback (no see-through) */
}
.panel-close { background: none; border: none; color: var(--ink-link); font-family: inherit; font-size: 15px; cursor: pointer; padding: 0; margin-bottom: 24px; }
.panel-close:hover { color: var(--ink); }
.panel h2 { font-size: 31px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.panel .panel-sub { font-size: 15px; color: var(--ink-3); margin-bottom: 28px; }
.panel-section { border-top: 1px solid var(--line-row); padding: 20px 0; }
.panel-section .sec-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.spec-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 8px 0; font-size: 15.5px; }
.spec-row .k { color: var(--ink-3); }
.spec-row .v { color: var(--ink); word-break: break-word; }
/* controlled external links (extLink): websites + FDA records. Quiet by default, the
   single accent stays reserved for the health dot; underline signals the affordance. */
.extlink { color: var(--ink-link); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--ink-4); transition: color .15s ease; word-break: break-all; }
.extlink:hover { color: var(--ink); text-decoration-color: var(--ink-2); }
/* People — premium contact cards: name → role → contact details, real spacing, scannable. */
.person-card { padding: 14px 0; border-bottom: 1px solid var(--line-row); }
.person-card:first-child { padding-top: 4px; }
.person-card:last-child { border-bottom: 0; padding-bottom: 4px; }
.person-name { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.person-role { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.person-contacts { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.person-contact { font-size: 15px; color: var(--ink-2); }
.cert-card { border: 1px solid var(--line-row); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.cert-card .ct { font-size: 16px; font-weight: 500; color: var(--ink); }
.cert-card .cm { font-size: 15px; color: var(--ink-2); margin-top: 5px; }
.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.chiplist .c { font-size: 14px; color: var(--ink); background: var(--chip-bg); border-radius: var(--r-pill); padding: 5px 13px; }
.panel-btn { background: var(--seg-on-bg); border: 1px solid var(--seg-border); border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 15px; font-weight: 500; padding: 10px 16px; cursor: pointer; margin-top: 8px; }
.panel-btn:hover { background: rgba(255,255,255,0.18); }
.panel-btn.ghost { background: none; }
.panel-btn.danger { color: #e08a8a; }

/* reply body — readable, inert formatting (paragraphs, bullets, emphasis, set-apart note) */
.reply-body { font-size: 15.5px; line-height: 1.62; color: var(--ink); }
.reply-body .reply-p { margin: 0 0 14px; }
.reply-body .reply-p:last-child { margin-bottom: 0; }
.reply-body .reply-list { margin: 8px 0 14px; padding-left: 22px; list-style: disc; }
.reply-body .reply-list:last-child { margin-bottom: 0; }
.reply-body .reply-li { margin-bottom: 9px; line-height: 1.55; padding-left: 4px; }
.reply-body .reply-li:last-child { margin-bottom: 0; }
.reply-body .reply-li::marker { color: var(--ink-3); }
.reply-body .reply-em { font-weight: 600; color: var(--ink); }
.reply-note { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-row);
  font-size: 13.5px; color: var(--ink-3); }

/* prospect tabs */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line-row); margin-bottom: 8px; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2); font-family: inherit; font-size: 15px; padding: 11px 0; cursor: pointer; }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.tab-empty { color: var(--ink-3); font-size: 15px; padding: 16px 0; }

/* activity timeline rows */
.act-row { padding: 15px 0; border-top: 1px solid var(--line); }
.act-row:first-child { border-top: none; }
.act-row .meta { font-size: 13px; color: var(--ink-3); margin-bottom: 5px; }
.act-row .head { font-size: 16px; color: var(--ink); font-weight: 500; }
.act-row .body { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-top: 6px; white-space: pre-wrap; }
.task-row { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 10px 0; font-size: 15px; align-items: baseline; }
.task-row .st { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.task-row .st.done { color: oklch(0.78 0.12 152); }
.dir-pill { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }

/* ── Responsive: keep it calm, let it reflow under the design width ─────── */
@media (max-width: 1180px) {
  .stage { padding: 64px 40px 80px; }
  .work-row { grid-template-columns: 240px minmax(0,1fr) 160px; gap: 40px; }
}
@media (max-width: 820px) {
  .topbar nav { display: none; }
  .work-row { grid-template-columns: 1fr; gap: 12px; }
  .work-row .aside { flex-direction: row; align-items: center; gap: 16px; }
  .needs-list { width: 100%; }
  .needs-row { grid-template-columns: 1fr; gap: 8px; }
  .home-calm .h1 { font-size: 44px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOTION SYSTEM — Apple/iOS-grade, GPU-only (transform + opacity).
   Pairs with the latest-wins navigation runtime in app.js. Every animation
   below is compositor-friendly (no layout/paint thrash) so rapid interaction
   stays frame-smooth; @media (prefers-reduced-motion) in tokens.css turns the
   lot off. Inert rendering (§1.5) is unaffected — this is pure presentation.
   ════════════════════════════════════════════════════════════════════════ */

/* Enter the cockpit (first build / after login) with one calm fade. */
#app { animation: fadeIn var(--dur) var(--ease-out); }
.login-wrap { animation: screenIn var(--dur-slow) var(--ease-out) both; }

/* Slim top progress bar — shown only while a screen read runs long (app.js). */
.route-progress {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; height: 2px;
  z-index: 20; pointer-events: none; overflow: hidden; opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
#app.is-loading .route-progress { opacity: 1; }
.route-progress::before {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-120%);
}
#app.is-loading .route-progress::before { animation: progressSlide 1.05s var(--ease-in-out) infinite; }
@keyframes progressSlide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* Screen swap — the fallback when the View Transitions API is unavailable. */
.screen-enter { animation: screenIn var(--dur-slow) var(--ease-out) both; }
@keyframes screenIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.992); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* View Transitions: a calm full-page crossfade (the real old→new dissolve). The
   active nav link is updated BEFORE the snapshot, so the top bar matches in both
   frames and stays put while only the screen body crossfades. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.40s; animation-timing-function: var(--ease-out);
}
/* the new screen settles up into focus (a subtle glass "develop"); the old fades back.
   Both run on snapshot textures → pure compositor work, no per-frame layout/paint. */
::view-transition-new(root) { animation-name: vtIn; }
::view-transition-old(root) { animation-name: vtOut; }
@keyframes vtIn  { from { opacity: 0; transform: scale(0.994); } to { opacity: 1; transform: none; } }
@keyframes vtOut { from { opacity: 1; } to { opacity: 0; } }

/* Staggered row entrances — on a non-VT screen swap and on every list repaint
   (.entering, used by filter / segment changes). Bounded to the first dozen rows;
   the rest share the final delay so a long list never animates forever. */
.entering { animation: fadeIn var(--dur) var(--ease-out) both; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage) {
  animation: rowIn var(--dur) var(--ease-out) both;
}
@keyframes rowIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(1)  { animation-delay: 0ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(2)  { animation-delay: 26ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(3)  { animation-delay: 52ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(4)  { animation-delay: 78ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(5)  { animation-delay: 104ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(6)  { animation-delay: 130ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(7)  { animation-delay: 156ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(8)  { animation-delay: 182ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(9)  { animation-delay: 208ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(10) { animation-delay: 234ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(11) { animation-delay: 260ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(12) { animation-delay: 286ms; }
:is(.screen-enter, .entering) :is(.list-row, .work-row, .needs-row, .pipeline-stage):nth-child(n+13) { animation-delay: 300ms; }

/* Detail panel — spring slide in, accelerate out; backdrop fades (opacity-only) with it. */
@keyframes fadeOut  { from { opacity: 1; } to { opacity: 0; } }
@keyframes panelIn  { from { opacity: 0; transform: translate3d(44px,0,0); } to { opacity: 1; transform: none; } }
@keyframes panelOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(44px,0,0); } }
.panel-overlay.is-closing::before { animation: fadeOut var(--dur) var(--ease-in) forwards; }
.panel-overlay.is-closing .panel { animation: panelOut var(--dur) var(--ease-in) forwards; }
.panel.content-swap { animation: tabIn var(--dur) var(--ease-out); }

/* Tab / segment body crossfade. */
.tab-swap { animation: tabIn var(--dur) var(--ease-out) both; }
@keyframes tabIn { from { opacity: 0; transform: translate3d(0,6px,0); } to { opacity: 1; transform: none; } }

/* Tactile easing — hovers and presses ease instead of snapping. */
.list-row, .work-row, .needs-row {
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.list-row:active, .work-row:active, .needs-row:active { transform: scale(0.992); }
.seg button { transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tab { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur) var(--ease-out); }
.flt-chip {
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.panel-btn { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.panel-close { transition: color var(--dur-fast) var(--ease-out); }
.flt-chip:active, .seg button:active, .panel-btn:active, .chip-toggle:active, .flt-reset:active { transform: scale(0.95); }

/* Glass controls — a faint specular rim turns the flat fills into little glass pills,
   brighter when active. Cheap (inset shadow only, no blur on these small surfaces). */
.flt-chip, .chip-toggle, .seg, .panel-btn, .login-form button, .score, .avatar {
  box-shadow: inset 0 1px 0 var(--glass-edge-soft);
}
.flt-chip.on, .seg button.on { box-shadow: inset 0 1px 0 var(--glass-edge); }

/* Loading skeleton — a frosted "glass developing" surface and THE latency cover.
   Shown the instant a screen's data isn't cached (cold boot, uncached, slow net): a
   slow specular light SWEEPS across translucent bars (transform-only → GPU-composited,
   never a paint thrash), filling the wait. The real content then crossfades out of it
   (View Transition) with no pop. Most navigations are prefetched and skip this entirely. */
.skeleton { position: relative; overflow: hidden; }
.skeleton .sk-list { border-bottom: 1px solid var(--line-row); }
.skeleton .sk-row { display: flex; flex-direction: column; gap: 9px; padding: 22px 12px; border-top: 1px solid var(--line-row); }
.sk-bar { background: rgba(255,255,255,0.055); border-radius: 8px; }
.sk-primary   { width: 38%; height: 16px; }
.sk-secondary { width: 22%; height: 13px; }
.skeleton .screen-head .sk-eyebrow  { width: 92px;  height: 11px; margin: 0 auto 22px; }
.skeleton .screen-head .sk-headline { width: 300px; max-width: 70%; height: 42px; border-radius: 12px; margin: 0 auto; }
.skeleton::after {
  content: ""; position: absolute; inset: 0 -40%; pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,0.075) 50%, transparent 58%);
  transform: translateX(-60%); will-change: transform;
  animation: glassSweep 1.7s var(--ease-in-out) infinite;
}
@keyframes glassSweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* Panel detail skeleton — the same glass sweep, shaped for a spec panel, shown only
   when a panel's read isn't hover-prefetched. Covers the panel fetch; content settles in. */
.panel-sk { position: relative; padding-top: 6px; }
.panel-sk .sk-bar { margin-bottom: 14px; }
.panel-sk .sk-h2 { width: 58%; height: 28px; margin-bottom: 24px; }
.panel-sk .sk-line { width: 100%; height: 13px; }
.panel-sk .sk-line.short { width: 46%; }

/* ════════════════════════════════════════════════════════════════════════
   CSP-safe layout classes — replacements for inline style="" attributes, which
   the strict style-src 'self' (no 'unsafe-inline') silently BLOCKS. Same visual
   intent as the old inline styles, now actually applied. Dark-calm tokens only.
   ════════════════════════════════════════════════════════════════════════ */

/* the HELIOS wordmark is the clickable Home affordance (top bar only) */
.topbar .wordmark { cursor: pointer; }

/* Outbox draft (approve/decline) detail — a centered column */
.stage-centered { text-align: center; }
.back-link { cursor: pointer; color: var(--ink-link); font-size: 15px; transition: color var(--dur-fast) var(--ease-out); }
.back-link:hover { color: var(--ink); }
.draft-line { max-width: 680px; margin: 14px auto 0; text-align: left; }
.draft-actions { display: flex; gap: 12px; justify-content: center; margin-top: 40px; }
.reject-wrap { display: none; justify-content: center; gap: 10px; margin-top: 14px; }
.reject-wrap.show { display: flex; }
.decline-reason {
  width: 360px; max-width: 70vw;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
  border-radius: 10px; color: var(--ink); font-family: inherit; font-size: 15px;
  padding: 11px 14px; outline: none;
}
.decline-reason::placeholder { color: var(--ink-3); }
.decline-reason:focus { border-color: rgba(255,255,255,0.18); }
.decline-error { min-height: 18px; text-align: center; margin-top: 12px; }

/* Prospects / Manufacturers — spacing under the active/dormant toggle + count line */
.seg { margin-bottom: 20px; }
.count-note { margin-bottom: 14px; }

/* In-list empty state (smaller than the full-screen empty-calm) */
.empty-calm--inline { padding: 56px 0; }
.empty-calm--inline .h1 { font-size: 26px; }

/* Prospect detail panel — tab body offset */
.panel-body { margin-top: 8px; }

/* Settings read-only value cell (right column) */
.setting-val { font-size: 15px; color: var(--ink); text-align: right; }

/* Calls rows — not clickable, tighter columns */
.work-row--calls { grid-template-columns: 220px minmax(0, 1fr) 130px; cursor: default; }
@media (max-width: 820px) { .work-row--calls { grid-template-columns: 1fr; } }