/* flowmondo client portal prototype.
   Palette and type from the flowmondo design system; components are our own. */

:root {
  color-scheme: light;
  --ground: #f2f3f5;
  --sheet: #ffffff;
  --well: #f7f7f8;
  --ink: #181d27;
  --ink-2: #414651;
  --muted: #717680;
  --faint: #a4a7ae;
  --line: #e9eaeb;
  --line-2: #d5d7da;
  --pink: #e31b54;
  --pink-ink: #c01046;
  --pink-soft: #fff1f3;
  --pink-line: #fecdd6;
  --ok: #079455;
  --ok-soft: #ecfdf3;
  --warn: #dc6803;
  --warn-soft: #fffaeb;
  --bad: #d92d20;
  --bad-soft: #fef2f2;
  --m-idea: #8a8e95;
  --m-sized: #475569;
  --m-designed: #7c3aed;
  --m-built: #2563eb;
  --m-live: #079455;
  --m-reported: #0d9488;
  --m-improving: #b07a2e;
  --shadow: 0 1px 2px rgba(10, 13, 18, .05), 0 8px 24px -12px rgba(10, 13, 18, .12);
  --shadow-lg: 0 24px 64px -16px rgba(10, 13, 18, .28);
  --display: 'Tilt Warp', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0b0e13; --sheet: #141922; --well: #1a2029; --ink: #f5f5f6; --ink-2: #cecfd2; --muted: #94979c;
    --faint: #61656c; --line: #252b35; --line-2: #333a46; --pink: #fd6f8d; --pink-ink: #fea3b4; --pink-soft: #2e0f19;
    --pink-line: #5c1a2e; --ok: #47cd89; --ok-soft: #0c2a1c; --warn: #fdb022; --warn-soft: #2b1d06; --bad: #f97066; --bad-soft: #2d1210;
    --m-idea: #85888e; --m-sized: #94a3b8; --m-designed: #a78bfa; --m-built: #60a5fa; --m-live: #47cd89; --m-reported: #2dd4bf; --m-improving: #d6a656;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --mark-ring: rgba(255, 255, 255, .22);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0e13; --sheet: #141922; --well: #1a2029; --ink: #f5f5f6; --ink-2: #cecfd2; --muted: #94979c;
  --faint: #61656c; --line: #252b35; --line-2: #333a46; --pink: #fd6f8d; --pink-ink: #fea3b4; --pink-soft: #2e0f19;
  --pink-line: #5c1a2e; --ok: #47cd89; --ok-soft: #0c2a1c; --warn: #fdb022; --warn-soft: #2b1d06; --bad: #f97066; --bad-soft: #2d1210;
  --m-idea: #85888e; --m-sized: #94a3b8; --m-designed: #a78bfa; --m-built: #60a5fa; --m-live: #47cd89; --m-reported: #2dd4bf; --m-improving: #d6a656;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --mark-ring: rgba(255, 255, 255, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ground); color: var(--ink-2); font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01';
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }
.ms-i { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1;
  display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'wght' 400, 'opsz' 20; }
.num { font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .01em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.ink { color: var(--ink); }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px 14px; gap: 4px; overflow-y: auto; }
.client { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.client-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--sheet); display: grid; place-items: center;
  font: 15px var(--display); }
.client-name { font: 15px/1.2 var(--display); color: var(--ink); }
.client-sub { font-size: 12px; color: var(--muted); }
.side-actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 0 4px 12px; }
.nav-group { font-size: 11.5px; color: var(--faint); padding: 14px 10px 4px; font-weight: 500; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; }
.nav a .ms-i { font-size: 19px; color: var(--muted); }
.nav a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav a.on { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.nav a.on .ms-i { color: var(--ink); }
.nav .count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.nav .count.attn { color: #fff; background: var(--pink); border-radius: 99px; padding: 0 7px; line-height: 19px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.cap-mini { background: var(--sheet); border-radius: var(--r-m); padding: 12px; box-shadow: var(--shadow); }
.cap-mini-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); }
.cap-mini-top b { font: 20px var(--display); color: var(--ink); font-weight: 400; }
.cap-mini .meter { margin: 8px 0 6px; }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.me select { border: 0; background: transparent; font-size: 12px; color: var(--muted); padding: 0; cursor: pointer; }
.powered { display: flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 11px; color: var(--faint); }
.powered img { height: 12px; }
.logo-d { display: none; }
:root[data-theme="dark"] .logo-l { display: none; }
:root[data-theme="dark"] .logo-d { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-l { display: none; }
  :root:not([data-theme="light"]) .logo-d { display: inline; }
}

.main { min-width: 0; padding: 10px 10px 10px 0; }
.sheet { background: var(--sheet); border-radius: var(--r-l); min-height: calc(100vh - 20px); box-shadow: var(--shadow); }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 28px;
  background: color-mix(in srgb, var(--sheet) 88%, transparent); backdrop-filter: blur(10px); border-radius: var(--r-l) var(--r-l) 0 0;
  border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--faint); }
.crumbs b { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px;
  background: var(--well); color: var(--muted); font-size: 13px; width: 260px; }
.search kbd { margin-left: auto; font: 11px var(--mono); color: var(--faint); }
.icon-btn { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--well); }
.icon-btn .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--pink); border: 2px solid var(--sheet); }
.page { padding: 28px 28px 64px; max-width: 1280px; }
.page.full { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font: 400 32px/1.1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.page-head p { margin: 6px 0 0; color: var(--muted); max-width: 64ch; }
h2.sec { font: 400 19px/1.2 var(--display); color: var(--ink); margin: 0; }
h3.sub { font: 600 14px/1.3 var(--sans); color: var(--ink); margin: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 36px 0 14px; }
.sec-head:first-child { margin-top: 0; }
.sec-head .aside { font-size: 13px; color: var(--muted); }
.sec-head a.aside:hover { color: var(--ink); }

/* ---------- Buttons, chips, controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px;
  background: var(--ink); color: var(--sheet); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.btn:hover { background: color-mix(in srgb, var(--ink) 86%, var(--sheet)); }
.btn .ms-i { font-size: 18px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover { background: var(--well); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.pink:hover { background: var(--pink-ink); }
.btn.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.seg { display: inline-flex; background: var(--well); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 28px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.seg button .ms-i { font-size: 16px; }
.seg button.on { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.lens { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); background: var(--sheet); }
.chip .ms-i { font-size: 16px; color: var(--muted); }
.chip .n { color: var(--faint); font-weight: 600; }
.chip.on { background: var(--ink); color: var(--sheet); box-shadow: none; }
.chip.on .ms-i, .chip.on .n { color: color-mix(in srgb, var(--sheet) 70%, transparent); }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 500;
  color: var(--ink-2); background: var(--well); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.tag .ms-i { font-size: 14px; }
.tag.epic { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.tag.epic::before { content: ''; width: 7px; height: 7px; transform: rotate(45deg); border: 1.5px solid var(--ink-2); border-radius: 1px; }
.tag.ok { color: var(--ok); background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent); }
.tag.warn { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 25%, transparent); }
.tag.bad { color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 25%, transparent); }
.tag.attn { color: var(--pink-ink); background: var(--pink-soft); box-shadow: inset 0 0 0 1px var(--pink-line); }
.tag.ai { color: var(--m-designed); background: color-mix(in srgb, var(--m-designed) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-designed) 25%, transparent); }

/* Milestone chip: the one place stage colour lives */
.mst { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c); white-space: nowrap; }
.mst::before { content: ''; width: 8px; height: 8px; border-radius: 99px; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
[data-m="idea"] { --c: var(--m-idea); } [data-m="sized"] { --c: var(--m-sized); } [data-m="designed"] { --c: var(--m-designed); }
[data-m="built"] { --c: var(--m-built); } [data-m="live"] { --c: var(--m-live); } [data-m="reported"] { --c: var(--m-reported); }
[data-m="improving"] { --c: var(--m-improving); }

/* Build-type glyph */
.glyph { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--well);
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.glyph .ms-i { font-size: 16px; }
.glyph.lg { width: 36px; height: 36px; border-radius: 10px; }
.glyph.lg .ms-i { font-size: 20px; }

/* Avatars */
.av { width: 26px; height: 26px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.av.fm { background: var(--ink); color: var(--sheet); box-shadow: none; }
.av.lg { width: 34px; height: 34px; font-size: 12px; }
.av.sm { width: 20px; height: 20px; font-size: 8.5px; }

/* ---------- Product art ---------- */
.art { position: relative; flex: none; border-radius: 10px; overflow: hidden; background: var(--deep); display: block; }
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art .ini { position: absolute; left: 10%; bottom: 8%; font: 400 1em/1 var(--display); color: #fff; letter-spacing: -.01em; }
.art.xs { width: 18px; height: 18px; border-radius: 5px; }
.art.s { width: 26px; height: 26px; border-radius: 7px; }
.art.m { width: 40px; height: 40px; border-radius: 10px; }
.art.l { width: 64px; height: 64px; border-radius: 14px; font-size: 20px; }
.art.xl { width: 96px; height: 96px; border-radius: 18px; font-size: 30px; }
.art.xxl { width: 100%; aspect-ratio: 1; border-radius: 20px; font-size: 44px; }

/* ---------- Surfaces ---------- */
.card { background: var(--sheet); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.card.pad { padding: 18px; }
.well { background: var(--well); border-radius: var(--r-m); }
.well.pad { padding: 16px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.split.wide-rail { grid-template-columns: minmax(0, 1fr) 380px; }
.sticky { position: sticky; top: 76px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.hr { height: 1px; background: var(--line); margin: 16px 0; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); }
.big { font: 400 30px/1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.big small { font: 500 13px var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.mid { font: 400 22px/1.1 var(--display); color: var(--ink); }
.lbl { font-size: 12.5px; color: var(--muted); }

/* Meter: used / reserved / free */
.meter { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.meter i { display: block; height: 100%; }
.meter .u { background: var(--ink); }
.meter .r { background: repeating-linear-gradient(-45deg, var(--ink-2) 0 3px, color-mix(in srgb, var(--ink-2) 40%, transparent) 3px 6px); opacity: .55; }
.meter .o { background: var(--bad); }
.meter.lg { height: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Attention: pink means it needs you */
.attn-list { display: flex; flex-direction: column; }
.attn-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px;
  border-top: 1px solid var(--line); }
.attn-item:first-child { border-top: 0; }
.attn-item:hover { background: var(--well); }
.attn-item .t { color: var(--ink); font-weight: 600; }
.attn-item .d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.attn-box { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--pink-line); overflow: hidden; background: var(--sheet); }
.attn-box-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--pink-soft); color: var(--pink-ink); font-weight: 600; }
.attn-box-head .n { margin-left: auto; font: 400 20px var(--display); }
.age { font-size: 12px; color: var(--muted); white-space: nowrap; }
.age.old { color: var(--pink-ink); font-weight: 600; }

/* ---------- Home ---------- */
.hello { font: 400 34px/1.2 var(--display); color: var(--ink); letter-spacing: -.015em; max-width: 30ch; margin: 4px 0 6px; }
.hello em { font-style: normal; color: var(--m-live); }
.hello-sub { color: var(--muted); margin: 0 0 28px; }
.prod-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.prod-tile { display: flex; flex-direction: column; gap: 10px; }
.prod-tile .art { width: 100%; aspect-ratio: 1.35; border-radius: 16px; font-size: 26px; transition: transform .2s ease; }
.prod-tile:hover .art { transform: translateY(-2px); }
.prod-tile .n { color: var(--ink); font-weight: 600; }
.prod-tile .s { font-size: 12.5px; color: var(--muted); }
.next-list > a { display: grid; grid-template-columns: 52px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.next-list > a:first-child { border-top: 0; }
.when { text-align: center; line-height: 1.1; }
.when b { display: block; font: 400 20px var(--display); color: var(--ink); }
.when span { font-size: 11px; color: var(--muted); }
.feed > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.feed > div:first-child { border-top: 0; }
.feed b { color: var(--ink); font-weight: 600; }

/* ---------- Lists / tables ---------- */
.group { margin-bottom: 26px; }
.group-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 0 0 12px; }
.group-head h3 { margin: 0; font: 400 18px var(--display); color: var(--ink); }
.group-head .s { font-size: 12.5px; color: var(--muted); }
.group-head .v { text-align: right; }
.group-head .v b { font: 400 18px var(--display); color: var(--ink); display: block; }
.rows { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; background: var(--sheet); }
.wrow { display: grid; grid-template-columns: 26px 64px minmax(0, 1.6fr) minmax(0, 1.4fr) 110px 110px 20px; gap: 14px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.wrow:first-child { border-top: 0; }
.wrow:hover { background: var(--well); }
.wrow .t { color: var(--ink); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .st { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow .val { text-align: right; font-weight: 600; color: var(--ink); }
.wrow .val small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.wrow.attn { box-shadow: inset 3px 0 0 var(--pink); }
.wrow .chev { color: var(--faint); font-size: 18px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--well); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl td b { color: var(--ink); font-weight: 600; }
.tbl tbody tr.link:hover td { background: var(--well); cursor: pointer; }

/* ---------- Signals ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { background: var(--well); border-radius: var(--r-m); padding: 10px; min-height: 200px; }
.col.attn { background: var(--pink-soft); box-shadow: inset 0 0 0 1px var(--pink-line); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.col-head b { color: var(--ink); font-weight: 600; }
.col-head .n { font-size: 12px; color: var(--muted); font-weight: 600; }
.col.attn .col-head b, .col.attn .col-head .n { color: var(--pink-ink); }
.col-head .hint { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.sig { display: block; width: 100%; text-align: left; background: var(--sheet); border-radius: 10px; padding: 12px; margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(10, 13, 18, .05), inset 0 0 0 1px var(--line); transition: box-shadow .15s ease; }
.sig:hover { box-shadow: var(--shadow), inset 0 0 0 1px var(--line-2); }
.sig-top { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.sig-top .ms-i { font-size: 15px; }
.sig-top .code { white-space: nowrap; }
.sig-top .src { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sig-top .src .ms-i { font-size: 14px; }
.sig-title { color: var(--ink); font-weight: 600; margin: 6px 0 8px; line-height: 1.35; }
.sig-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sig-foot .age { margin-left: auto; }
.kind { font-weight: 600; color: var(--ink-2); }
.outcome { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); padding-top: 8px; margin-top: 8px; border-top: 1px dashed var(--line-2); }
.outcome .ms-i { font-size: 15px; }
.funnel { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 0; margin-bottom: 22px; border-radius: var(--r-m); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line); }
.funnel > div { padding: 12px 16px; border-left: 1px solid var(--line); }
.funnel > div:first-child { border-left: 0; }
.funnel b { font: 400 22px var(--display); color: var(--ink); display: block; }
.funnel span { font-size: 12px; color: var(--muted); }
.funnel .to-road { background: var(--well); }
.matrix { position: relative; height: 460px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.matrix .q { padding: 14px; font-size: 12.5px; color: var(--muted); border: 0 solid var(--line); }
.matrix .q b { display: block; font: 400 16px var(--display); color: var(--ink); }
.matrix .q:nth-child(1) { border-right-width: 1px; border-bottom-width: 1px; background: color-mix(in srgb, var(--m-live) 6%, transparent); }
.matrix .q:nth-child(2) { border-bottom-width: 1px; }
.matrix .q:nth-child(3) { border-right-width: 1px; }
.matrix .q:nth-child(4) { background: var(--well); }
.bubble { position: absolute; transform: translate(-50%, -50%); border-radius: 99px; display: grid; place-items: center; color: #fff;
  font: 600 11px var(--sans); box-shadow: 0 0 0 3px var(--sheet), var(--shadow); }
.axis { position: absolute; font-size: 11.5px; color: var(--muted); }

/* ---------- Drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(10, 13, 18, .32); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.drawer { position: fixed; top: 10px; right: 10px; bottom: 10px; width: min(520px, calc(100vw - 20px)); background: var(--sheet); z-index: 51;
  border-radius: var(--r-l); box-shadow: var(--shadow-lg); transform: translateX(110%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; overflow: hidden; }
body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
body.drawer-open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--well); }
.verbatim { font: 400 18px/1.45 var(--display); color: var(--ink); margin: 0 0 12px; letter-spacing: -.005em; }
.verbatim::before { content: '\201C'; color: var(--faint); }
.verbatim::after { content: '\201D'; color: var(--faint); }
.src-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rate button { padding: 12px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; }
.rate button b { display: block; color: var(--ink); }
.rate button span { font-size: 12px; color: var(--muted); }
.rate button.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--well); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field .help { font-size: 12px; color: var(--muted); font-weight: 400; }
.input { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--sheet); border: 1px solid var(--line-2); font-size: 14px; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }

/* ---------- Roadmap ---------- */
.rm { --cols: 11; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; background: var(--sheet); }
.rm-row { display: grid; grid-template-columns: 230px repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.rm-row > .lab { padding: 10px 14px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--sheet); z-index: 1; }
.rm-row > .lab .t { color: var(--ink); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-row > .lab .s { font-size: 11.5px; color: var(--muted); }
.rm-head { border-bottom: 1px solid var(--line); background: var(--well); }
.rm-head > .lab { background: var(--well); font-size: 12px; color: var(--muted); }
.rm-month { padding: 10px 8px 10px; border-left: 1px solid var(--line); font-size: 12px; color: var(--ink-2); font-weight: 600; }
.rm-month.past { color: var(--muted); font-weight: 500; }
.rm-month.now { color: var(--pink-ink); }
.rm-month .meter { height: 6px; margin-top: 8px; }
.rm-month .cap { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.rm-month.over .cap { color: var(--bad); font-weight: 600; }
.rm-group { border-top: 1px solid var(--line); background: var(--well); }
.rm-group > .lab { background: var(--well); }
.rm-group > .lab .t { font: 400 15px var(--display); }
.rm-item { border-top: 1px solid var(--line); min-height: 46px; }
.rm-cells { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); position: relative; align-items: center; }
.rm-cells > .c { height: 100%; border-left: 1px solid var(--line); grid-row: 1; }
.rm-cells > .c.past { background: repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--ink) 2.5%, transparent) 7px 8px); }
.bar { grid-row: 1; margin: 0 4px; height: 28px; border-radius: 8px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; z-index: 1; color: #fff; background: var(--c); }
.bar .ms-i { font-size: 15px; }
.bar.tent { background: color-mix(in srgb, var(--c) 12%, var(--sheet)); color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); border-radius: 8px;
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--c) 10%, transparent) 6px 12px); }
.bar.done { background: color-mix(in srgb, var(--c) 18%, var(--sheet)); color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
.today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--pink); z-index: 3; pointer-events: none; }
.today span { position: absolute; bottom: 6px; left: 6px; font-size: 11px; font-weight: 600; color: var(--pink-ink); white-space: nowrap; background: var(--sheet); padding: 0 4px; border-radius: 4px; }
.banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-m); font-size: 13.5px; margin-bottom: 16px; }
.banner.warn { background: var(--warn-soft); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.banner.warn .ms-i { color: var(--warn); }
.banner.info { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.banner.ok { background: var(--ok-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent); }
.banner.ok .ms-i { color: var(--ok); }
.banner.attn { background: var(--pink-soft); box-shadow: inset 0 0 0 1px var(--pink-line); }
.banner.attn .ms-i { color: var(--pink); }
.banner .grow { flex: 1; }

/* ---------- Tracker ---------- */
.wi-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start; margin-bottom: 26px; }
.wi-head h1 { margin: 6px 0 8px; font: 400 36px/1.08 var(--display); color: var(--ink); letter-spacing: -.015em; }
.wi-head p { margin: 0; max-width: 70ch; }
.wi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wi-actions { display: flex; gap: 8px; }
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 28px; }
.strip .st { position: relative; padding: 14px 0 0; }
.strip .st::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 99px; background: var(--well);
  box-shadow: inset 0 0 0 1px var(--line); }
.strip .st.done::before { background: var(--c); box-shadow: none; }
.strip .st.cur::before { background: linear-gradient(90deg, var(--c) 0 55%, color-mix(in srgb, var(--c) 25%, transparent) 55%); box-shadow: none; }
.strip .st.cur::after { content: ''; position: absolute; top: -4px; left: 55%; width: 14px; height: 14px; border-radius: 99px; background: var(--c);
  transform: translateX(-50%); box-shadow: 0 0 0 4px var(--sheet), 0 0 0 7px color-mix(in srgb, var(--c) 30%, transparent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--sheet), 0 0 0 11px color-mix(in srgb, var(--c) 0%, transparent); } }
.strip .nm { font-weight: 600; color: var(--ink); font-size: 13px; }
.strip .st:not(.done):not(.cur) .nm { color: var(--faint); }
.strip .dt { font-size: 12px; color: var(--muted); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow-x: auto; }
.tabs button { position: relative; padding: 10px 14px; font-weight: 500; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabs button .n { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.tabs button.on { color: var(--ink); }
.tabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--ink); border-radius: 2px; }
.trail { position: relative; }
.trail-ms { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding-bottom: 8px; }
.trail-ms .side-l { position: relative; padding-top: 2px; }
.trail-ms .side-l .mst { font-size: 13.5px; }
.trail-ms .side-l .dt { font-size: 12px; color: var(--muted); margin: 2px 0 0 14px; }
.trail-ms.todo .side-l .mst { color: var(--faint); }
.trail-ms.todo .side-l .mst::before { background: transparent; box-shadow: inset 0 0 0 2px var(--line-2); }
.evs { border-left: 2px solid color-mix(in srgb, var(--c) 35%, transparent); padding: 0 0 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.trail-ms.todo .evs { border-left-style: dashed; border-left-color: var(--line-2); }
.ev { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 6px 10px; margin-left: -10px; border-radius: 8px; font-size: 13.5px; }
.ev .ms-i { font-size: 17px; color: var(--muted); margin-top: 1px; }
.ev b { color: var(--ink); font-weight: 600; }
.ev .dt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ev .lk { font-size: 12px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; margin-left: 6px; }
.ev.gate { background: color-mix(in srgb, var(--ok) 7%, transparent); }
.ev.gate .ms-i { color: var(--ok); }
.ev.warn .ms-i { color: var(--warn); }
.ev.attn { background: var(--pink-soft); }
.ev.attn .ms-i { color: var(--pink); }
.ev.future { color: var(--faint); }
.origin { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: var(--r-m); background: var(--well); margin-bottom: 24px; }
.origin .verbatim { font-size: 16px; margin: 0 0 6px; }
.rail-card { padding: 18px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); background: var(--sheet); }
.rail-card h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.rail-card h4 .ms-i { font-size: 17px; color: var(--muted); }
.pv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv > div { padding: 12px; border-radius: 10px; background: var(--well); }
.pv > div.proven { background: var(--ok-soft); }
.pv .lbl { font-size: 12px; }
.pv .mid { margin-top: 4px; }
.pv .proven .mid { color: var(--ok); }
.ticker { font: 400 30px/1 var(--display); color: var(--ink); letter-spacing: -.01em; }
.ticker small { font: 500 12px var(--sans); color: var(--muted); }
.warranty { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.ring { position: relative; width: 64px; height: 64px; }
.ring svg { transform: rotate(-90deg); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 20px var(--display); color: var(--ink); }
.lineage a { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; font-size: 13px; border-top: 1px solid var(--line); }
.lineage a:first-child { border-top: 0; }
.lineage a .ms-i { font-size: 17px; color: var(--muted); }
.lineage a:hover .t { color: var(--ink); text-decoration: underline; }
.brief-block { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 14px; }
.brief-block:first-of-type { border-top: 0; }
.brief-block > .k { color: var(--muted); font-size: 13px; }
.brief-block > .v { color: var(--ink); max-width: 70ch; }
.goal { font: 400 21px/1.35 var(--display); color: var(--ink); }
.measure { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px dashed var(--line-2); font-size: 13px; }
.measure:first-child { border-top: 0; padding-top: 0; }
.measure .arrow { color: var(--muted); }
.story { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); padding: 16px 18px; margin-bottom: 10px; }
.story.wont { background: var(--well); box-shadow: none; }
.story-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.story-top .code, .story-top .pri, .story-top .tag { white-space: nowrap; }
.story-top .code { font-size: 11px; }
.story-sent { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 72ch; }
.story-sent b { color: var(--ink); font-weight: 600; }
.story.wont .story-sent { color: var(--muted); }
.crit { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.crit li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; font-size: 13px; align-items: start; }
.crit li .ms-i { font-size: 18px; color: var(--faint); }
.crit li.met .ms-i { color: var(--ok); }
.crit li .note { font-size: 12px; color: var(--muted); }
.pri { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 99px; }
.pri.must { background: var(--ink); color: var(--sheet); }
.pri.should { background: var(--well); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.pri.could { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.pri.wont { color: var(--faint); box-shadow: inset 0 0 0 1px var(--line); text-decoration: line-through; }
.dlv { display: grid; grid-template-columns: 26px minmax(0, 1fr) 140px 90px 130px; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.dlv:first-child { border-top: 0; }
.dlv .tick { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--ok); color: #fff; }
.dlv .tick .ms-i { font-size: 16px; }
.dlv .tick.open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.minibar { height: 6px; border-radius: 99px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.minibar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 99px; }
.minibar i.over { background: var(--warn); }
.versions { display: flex; flex-direction: column; gap: 8px; }
.ver { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.ver.cur { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ver .v { font: 400 18px var(--display); color: var(--ink); }
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment .who { font-size: 13px; }
.comment .who b { color: var(--ink); }
.comment p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- Charts ---------- */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 11px var(--sans); fill: var(--muted); }
.chart .grid-l { stroke: var(--line); }
.spark { width: 100%; height: 36px; display: block; }

/* ---------- Solutions ---------- */
.sol-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); background: var(--sheet); transition: box-shadow .15s; }
.sol-card:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.sol-card .t { color: var(--ink); font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.sol-card .foot { display: flex; justify-content: space-between; align-items: end; }
.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.health::before { content: ''; width: 8px; height: 8px; border-radius: 99px; background: currentColor; }
.health.healthy { color: var(--ok); } .health.degraded { color: var(--warn); } .health.failing { color: var(--bad); } .health.unknown { color: var(--faint); }
.value-band { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; border-radius: var(--r-l); overflow: hidden; background: var(--ink); color: var(--sheet); margin-bottom: 28px; }
.value-band > div { padding: 20px 22px; border-left: 1px solid color-mix(in srgb, var(--sheet) 14%, transparent); }
.value-band > div:first-child { border-left: 0; }
.value-band .lbl { color: color-mix(in srgb, var(--sheet) 62%, transparent); }
.value-band .big { color: var(--sheet); font-size: 34px; margin-top: 6px; }
.value-band .big small { color: color-mix(in srgb, var(--sheet) 62%, transparent); }
.value-band .note { font-size: 12px; color: color-mix(in srgb, var(--sheet) 62%, transparent); margin-top: 6px; }

/* ---------- Business map ---------- */
.map { display: grid; grid-template-columns: 240px repeat(var(--ec), minmax(0, 1fr)); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.map > div { padding: 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-height: 88px; }
.map > .h { border-top: 0; background: var(--well); min-height: 0; }
.map > .h .t { color: var(--ink); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.map > .h .s { font-size: 12px; color: var(--muted); margin-top: 3px; }
.map > .p { border-left: 0; display: flex; align-items: center; gap: 12px; }
.map > .p .t { color: var(--ink); font-weight: 600; }
.map > .p .s { font-size: 12px; color: var(--muted); }
.map > .corner { border-left: 0; }
.dots { display: flex; flex-wrap: wrap; gap: 5px; }
.dots a { width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--c) 14%, var(--sheet)); box-shadow: inset 0 0 0 1.5px var(--c);
  display: grid; place-items: center; color: var(--c); }
.dots a .ms-i { font-size: 13px; }
.dots a.solid { background: var(--c); color: #fff; box-shadow: none; }
.cell-sum { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.epic-card { padding: 18px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; }
.epic-card .o { font: 400 17px/1.3 var(--display); color: var(--ink); }
.epic-prog { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; }
.epic-prog i { background: var(--c); height: 100%; }

/* ---------- Forms: new request / issue ---------- */
.steps { counter-reset: s; display: flex; flex-direction: column; gap: 26px; }
.step > .sh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 400 18px var(--display); color: var(--ink); }
.step > .sh::before { counter-increment: s; content: counter(s); width: 26px; height: 26px; border-radius: 99px; background: var(--ink); color: var(--sheet);
  display: grid; place-items: center; font: 600 12px var(--sans); }
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.type { text-align: left; padding: 14px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.type:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.type.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--well); }
.type b { color: var(--ink); }
.type span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.drop { border: 2px dashed var(--line-2); border-radius: var(--r-m); padding: 26px; text-align: center; color: var(--muted); background: var(--well); }
.drop .ms-i { font-size: 30px; color: var(--ink-2); }
.drop b { display: block; color: var(--ink); margin: 6px 0 2px; font-weight: 600; }
.story-builder { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 16px; border-radius: var(--r-m); background: var(--well); }
.story-builder .w { font-weight: 600; color: var(--ink); text-align: right; }
.sev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sev button { padding: 12px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line-2); text-align: left; }
.sev button b { display: block; color: var(--ink); }
.sev button span { font-size: 12px; color: var(--muted); }
.sev button.on { box-shadow: inset 0 0 0 2px var(--ink); background: var(--well); }
.sev button.on.sev-crit { background: var(--ink); }
.sev button.on.sev-crit b, .sev button.on.sev-crit span { color: var(--sheet); }
.next-steps { list-style: none; margin: 0; padding: 0; }
.next-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: 13px; }
.next-steps li::before { content: ''; width: 10px; height: 10px; border-radius: 99px; margin-top: 5px; box-shadow: inset 0 0 0 2px var(--line-2); }
.next-steps li:first-child::before { background: var(--ink); box-shadow: none; }
.next-steps b { color: var(--ink); }

/* ---------- Approvals ---------- */
.ap-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.ap-list a { display: block; padding: 14px 16px; border-top: 1px solid var(--line); }
.ap-list a:first-child { border-top: 0; }
.ap-list a.on { background: var(--well); box-shadow: inset 3px 0 0 var(--pink); }
.ap-list a .t { color: var(--ink); font-weight: 600; }
.ap-list a .d { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.diff { border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.diff > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.diff > div:first-child { border-top: 0; }
.diff .sign { font: 600 15px var(--mono); text-align: center; }
.diff .removed { background: var(--bad-soft); }
.diff .removed .sign { color: var(--bad); }
.diff .removed .what { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.diff .changed { background: var(--warn-soft); }
.diff .changed .sign { color: var(--warn); }
.diff .added { background: var(--ok-soft); }
.diff .added .sign { color: var(--ok); }
.diff .what { color: var(--ink); font-weight: 600; }
.diff .why { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.decide { display: flex; gap: 8px; align-items: center; padding: 16px; border-radius: var(--r-m); background: var(--well); margin-top: 22px; flex-wrap: wrap; }
.decide .grow { flex: 1; font-size: 13px; color: var(--muted); min-width: 200px; }
.evid { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); align-items: start; font-size: 13.5px; }
.evid:first-child { border-top: 0; }
.evid .ms-i { color: var(--ok); }
.evid .ev-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px; border-radius: 99px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.evid .ev-link .ms-i { font-size: 14px; color: var(--muted); }

/* ---------- Catalogue ---------- */
.rec { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-l); background: var(--well); position: relative; overflow: hidden; }
.rec .fit { font-size: 13px; color: var(--ink); padding: 10px 12px; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.rec .fit .ms-i { font-size: 15px; color: var(--m-designed); vertical-align: -3px; margin-right: 4px; }
.rec h3 { margin: 0; font: 400 20px/1.2 var(--display); color: var(--ink); }
.cat-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.cat-card:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.cat-card .t { color: var(--ink); font-weight: 600; }
.cat-card .s { font-size: 13px; color: var(--muted); }
.cat-card .f { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.cat-card .f b { color: var(--ink); }

/* ---------- Statements ---------- */
.st-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.st-list a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; }
.st-list a:hover { background: var(--well); }
.st-list a.on { background: var(--well); box-shadow: inset 0 0 0 1px var(--line-2); }
.st-list a b { color: var(--ink); font-weight: 600; }
.doc { border-radius: var(--r-l); box-shadow: inset 0 0 0 1px var(--line); padding: 32px 36px; background: var(--sheet); }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.doc-head h2 { margin: 0; font: 400 28px var(--display); color: var(--ink); }
.doc-head .meta { text-align: right; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.doc-head .meta b { color: var(--ink); }
.doc-sec { padding: 24px 0; border-bottom: 1px solid var(--line); }
.doc-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; font-size: 13.5px; max-width: 360px; margin-left: auto; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; color: var(--ink); }
.totals .grand { font: 400 26px var(--display); color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); }
.multiple { font: 400 64px/1 var(--display); color: var(--ink); letter-spacing: -.02em; }
.multiple small { font: 400 24px var(--display); color: var(--muted); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); background: var(--ink); color: var(--sheet); padding: 12px 16px;
  border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; z-index: 60; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s; font-weight: 500; visibility: hidden; }
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast .ms-i { color: var(--m-live); }
.toast a { text-decoration: underline; text-underline-offset: 3px; }

.theme-btn { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px; color: var(--muted); border-radius: 8px; }
.theme-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.theme-btn .ms-i { font-size: 16px; }
.menu-btn { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .split, .split.wide-rail { grid-template-columns: minmax(0, 1fr); }
  .sticky { position: static; }
  .prod-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wrow { grid-template-columns: 26px 60px minmax(0, 1fr) 100px 90px 20px; }
  .wrow .st { display: none; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 70; left: 0; top: 0; width: 272px; background: var(--ground); transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  body.nav-open .side { transform: none; }
  .main { padding: 0; }
  .sheet { border-radius: 0; min-height: 100vh; }
  .topbar { border-radius: 0; padding: 10px 16px; }
  .menu-btn { display: grid; }
  .search { width: auto; flex: 1; }
  .search span.lbl-s, .search kbd { display: none; }
  .page { padding: 20px 16px 48px; }
  .page-head h1 { font-size: 26px; }
  .hello { font-size: 25px; }
  .g2, .g3, .g4, .g5, .board, .ap-layout, .st-layout, .types { grid-template-columns: minmax(0, 1fr); }
  .prod-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel { grid-template-columns: 1fr 1fr; }
  .funnel > div { border-top: 1px solid var(--line); }
  .value-band { grid-template-columns: 1fr 1fr; }
  .wi-head { grid-template-columns: auto minmax(0, 1fr); }
  .wi-head h1 { font-size: 26px; }
  .wi-actions { grid-column: 1 / -1; }
  .strip { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; padding-top: 6px; }
  .wi-head .art.xl { width: 56px; height: 56px; font-size: 18px; border-radius: 12px; }
  .crumbs a, .crumbs .sep { display: none; }
  .trail-ms { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .brief-block { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wrow { grid-template-columns: 26px minmax(0, 1fr) 90px; }
  .wrow .code, .wrow .chev, .wrow .mcol { display: none; }
  .dlv { grid-template-columns: 26px minmax(0, 1fr) 70px; }
  .dlv .hide-s { display: none; }
  .sev { grid-template-columns: 1fr 1fr; }
  .doc { padding: 20px; }
  .map { overflow-x: auto; display: block; }
  .rm { overflow-x: auto; }
  .rm-row { min-width: 900px; }
  .rm-row > .lab { position: sticky; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Surface switch ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.surface-switch { position: relative; display: flex; align-items: center; gap: 8px; margin: 0 4px 14px; padding: 0 10px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.surface-switch select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-weight: 600; font-size: 13px; color: inherit; flex: 1; cursor: pointer; padding-right: 20px; }
.surface-switch .ms-i:last-child { position: absolute; right: 8px; pointer-events: none; font-size: 16px; color: var(--muted); }
.topbar { flex-wrap: wrap; }
.imp-bar { order: -1; flex: 0 0 calc(100% + 56px); margin: -12px -28px 4px; border-radius: var(--r-l) var(--r-l) 0 0; display: flex; align-items: center; gap: 10px; padding: 8px 28px; background: var(--warn-soft);
  color: var(--ink); font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.imp-bar .btn { margin-left: auto; }

/* ---------- Ops shell: a dark rail marks the internal surface in either theme ---------- */
body[data-surface="ops"] .side {
  --ink: #f5f5f6; --ink-2: #cecfd2; --muted: #94979c; --faint: #6b7079; --sheet: #1b212b; --well: #1b212b; --line: #2a313c; --line-2: #3a424f;
  background: #0e1218; color: var(--ink-2); }
body[data-surface="ops"] .app { background: #0e1218; }
body[data-surface="ops"] .nav a.on { background: #232a36; box-shadow: none; }
body[data-surface="ops"] .nav a:hover { background: #1b212b; }
.ops-mark { background: var(--pink) !important; color: #fff !important; font-size: 13px !important; }
.cfilter { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 28px 0 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); margin-left: auto; }
.cfilter .ms-i { font-size: 17px; color: var(--muted); }
.cfilter select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font-weight: 600; font-size: 13px; cursor: pointer; }
.cfilter::after { content: 'unfold_more'; font-family: 'Material Symbols Outlined'; position: absolute; right: 8px; font-size: 16px; color: var(--muted); pointer-events: none; }
body[data-surface="ops"] .search { margin-left: 0; width: 240px; }
.timer { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; max-width: 280px; }
.timer.on { background: var(--ink); color: var(--sheet); box-shadow: none; }
.timer.on .ms-i { color: var(--pink); }
.timer .tt { font-weight: 400; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--cm); color: #fff; font: 12px var(--display); flex: none; }
.cmark.xs { width: 16px; height: 16px; border-radius: 4px; font-size: 8px; vertical-align: -3px; }
.cmark.sm { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; }
.cmark.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
.cmark.xl { width: 72px; height: 72px; border-radius: 18px; font-size: 26px; }
.tag.int { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); height: 20px; padding: 0 7px; font-size: 11px; }
.tag.int .ms-i { font-size: 12px; }
.av.xs { width: 16px; height: 16px; font-size: 7px; }

/* Queue */
.np { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 22px; border-radius: var(--r-l); background: var(--ink); color: var(--sheet); }
.np .lbl { color: color-mix(in srgb, var(--sheet) 60%, transparent); display: flex; align-items: center; gap: 6px; }
.np h2 { margin: 6px 0 10px; font: 400 28px/1.1 var(--display); color: var(--sheet); }
.np .mst { filter: brightness(1.4); }
.np-eq { color: var(--pink); animation: pulse-o 1.4s ease-in-out infinite; }
@keyframes pulse-o { 50% { opacity: .4; } }
.np-prog { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.np-prog .minibar { flex: 1; max-width: 420px; height: 8px; background: color-mix(in srgb, var(--sheet) 15%, transparent); box-shadow: none; }
.np-prog .minibar i { background: var(--pink); }
.np-prog .ink { color: var(--sheet); }
.np-actions { display: flex; gap: 8px; }
.np-actions .btn { background: var(--sheet); color: var(--ink); }
.np-actions .btn.ghost { background: transparent; color: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sheet) 30%, transparent); }
.np-mini { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.np-mini .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-mini > div { flex: 1; min-width: 0; }
.qtbl tr.grey td { opacity: .5; }
.qtbl tr.grey td:last-child { opacity: 1; }
.qtbl tr.pinned td { background: var(--bad-soft); }
.qtbl tr.dragging { opacity: .4; }
.qtbl tr.drop td { box-shadow: inset 0 2px 0 var(--pink); }
.qtbl .grip { color: var(--faint); cursor: grab; width: 28px; }
.sla { display: grid; grid-template-columns: auto 80px; gap: 2px 8px; align-items: center; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.sla .lbl { grid-column: 1 / -1; font-weight: 400; text-transform: none; }
.sla .minibar i { background: var(--warn); }
.sla.hot .minibar i { background: var(--bad); }
.sla.hot > span:first-child { color: var(--bad); }

/* Planner */
.pbar { cursor: grab; position: relative; padding-right: 14px; }
.pbar .grow-t { overflow: hidden; text-overflow: ellipsis; }
.rz { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.rz::after { content: ''; position: absolute; right: 3px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: currentColor; opacity: .5; }
.rm-cells > .c[data-drop] { transition: background .1s; }
.rm-cells > .c[data-drop]:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.lane { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; border-radius: var(--r-m); border: 2px dashed var(--line-2); }
.lane-item { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); cursor: grab; }

/* Workspace */
.ws { display: grid; grid-template-columns: 250px minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.ctx { position: sticky; top: 76px; padding: 16px; border-radius: var(--r-m); background: var(--well); }
.ctx-kv { grid-template-columns: 84px 1fr; font-size: 12.5px; }
.ctx-kv dd { min-width: 0; }
.story.proposed { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--m-designed) 40%, transparent); background: color-mix(in srgb, var(--m-designed) 4%, var(--sheet)); }
.story.proposed.low { opacity: .75; }
.src-quote { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--m-designed); background: var(--well); border-radius: 0 8px 8px 0; font-size: 13px; color: var(--ink); }
.src-quote cite { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.var-over { color: var(--bad); font-weight: 600; }
.var-under { color: var(--ok); font-weight: 600; }
.logtime { display: grid; grid-template-columns: 1.4fr 1fr 70px 2fr auto; gap: 8px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: var(--ink); }
.checks li.pass .ms-i { color: var(--ok); }
.checks li.fail { background: var(--bad-soft); }
.checks li.fail .ms-i { color: var(--bad); }

/* Capacity, clients, register */
.heat { display: inline-block; min-width: 52px; text-align: center; padding: 3px 8px; border-radius: 6px; font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.legend i.heat { min-width: 0; width: 12px; height: 12px; padding: 0; }
.h-low { background: var(--well); color: var(--muted); }
.h-mid { background: color-mix(in srgb, var(--m-built) 14%, transparent); color: var(--m-built); }
.h-high { background: var(--warn-soft); color: var(--warn); }
.h-over { background: var(--bad); color: #fff; }
.client-card { display: flex; gap: 16px; padding: 18px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); }
.client-card:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.tbl tr.row-bad td { background: var(--bad-soft); }
.tog { font-size: 26px; color: var(--ok); }
.range { position: relative; height: 10px; border-radius: 99px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.range .rng { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 99px; }
.range .avg { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.range .avg.hot { background: var(--warn); }

@media (max-width: 1180px) {
  .ws { grid-template-columns: minmax(0, 1fr); }
  .ctx { position: static; }
  .np { grid-template-columns: auto minmax(0, 1fr); }
  .np-actions { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .cfilter { margin-left: 0; }
  .timer .tt, body[data-surface="ops"] .search { display: none; }
  .logtime { grid-template-columns: 1fr 1fr; }
  .np .art.xl { width: 56px; height: 56px; }
}

/* ---------- Evidence and provenance ---------- */
.evchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 99px; font-size: 12px; font-weight: 500; color: var(--ink);
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.evchip .ms-i { font-size: 14px; color: var(--muted); }
.evchip:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.evchip.int { box-shadow: inset 0 0 0 1px var(--line-2); background: var(--well); color: var(--ink-2); }
.evline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.evline > .ms-i { font-size: 15px; color: var(--muted); }
.evlist { display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.evrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-top: 1px solid var(--line); text-align: left; }
.evrow:first-child { border-top: 0; }
.evrow:hover { background: var(--well); }
.evbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evt { font-weight: 600; }
.evctx { font-size: 12.5px; color: var(--ink-2); }
.evctx q { color: var(--muted); }
.evtype { font-weight: 600; color: var(--ink); }
.evic { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; background: var(--well); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.evic .ms-i { font-size: 17px; }
.evic.xl { width: 64px; height: 64px; border-radius: 16px; }
.evic.xl .ms-i { font-size: 30px; }
.evic.k-recording { background: color-mix(in srgb, var(--pink) 10%, var(--sheet)); color: var(--pink-ink); box-shadow: inset 0 0 0 1px var(--pink-line); }
.evic.k-dataset { background: color-mix(in srgb, var(--m-reported) 10%, var(--sheet)); color: var(--m-reported); }
.evic.k-screenshot { background: color-mix(in srgb, var(--m-built) 10%, var(--sheet)); color: var(--m-built); }
.transcript { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--line); padding: 6px; }
.tline { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.5; }
.tline b { color: var(--ink); }
.tts { font: 12px var(--mono); color: var(--muted); padding-top: 2px; }
.tline.hit { background: color-mix(in srgb, var(--m-designed) 8%, transparent); }
.tline.focus { box-shadow: inset 3px 0 0 var(--pink); background: var(--pink-soft); }
.tlink { display: block; margin-top: 4px; font-size: 12px; }
.scrub { position: relative; height: 34px; border-radius: 8px; margin: 4px 0;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 5px); background-size: 100% 60%; background-position: 0 50%; background-repeat: repeat-x; }
.scrub .mark { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--pink); }
.supports { display: flex; flex-direction: column; }
.sup { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sup:first-child { border-top: 0; }
.sup:hover .evtype { text-decoration: underline; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.chain-node { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.chain-node .ms-i { font-size: 16px; color: var(--muted); }
.chain-arrow { color: var(--faint); font-size: 16px; }
.vbar { position: relative; height: 10px; }
.vbar .zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.vbar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--ink-2); }
.vbar i.over { background: var(--bad); }
.vbar i.under { background: var(--ok); }
.stackbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--well); }
.stackbar .w { background: var(--ok); }
.stackbar .b { background: var(--ink); }

.tbl.nowrap-first td:nth-child(-n+4) { white-space: nowrap; }

/* ---------- External links ---------- */
.xpill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 3px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.xpill:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.xg { width: 18px; height: 18px; border-radius: 5px; background: var(--xc); color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, .55); display: inline-grid; place-items: center; font: 700 10px var(--sans); }
.xraw { font-weight: 500; color: var(--muted); }
.xdot { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); }
.xdot.warn { background: var(--warn); }
.xdot.bad { background: var(--bad); }
.xrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.syncpill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.syncpill .xg { width: 16px; height: 16px; font-size: 9px; }
.syncpill .sp { display: inline-flex; align-items: center; gap: 3px; }
.syncpill.warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 50%, transparent); }

/* ---------- Baseline cost and reasons ---------- */
.baseline .formula { margin: 8px 0 6px; font-size: 13px; color: var(--ink-2); }
.tag.reason { background: var(--sheet); }
.tag.r-morale { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-designed) 40%, transparent); color: var(--m-designed); }
.tag.r-cost { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.tag.r-delays { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.tag.r-mistakes { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.tag.r-growth { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-built) 40%, transparent); color: var(--m-built); }
.tag.r-compliance { box-shadow: inset 0 0 0 1px var(--line-2); }
.bl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bl-grid .field { margin-bottom: 8px; }
.bl-out { padding: 10px 12px; border-radius: 10px; background: var(--well); font-size: 13.5px; margin-bottom: 14px; }
.reason-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rp { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; font-weight: 400; }
.rp:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); background: var(--well); }
.rp b { display: block; color: var(--ink); font-size: 13px; }
.rp span span { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .bl-grid { grid-template-columns: 1fr 1fr; } .reason-pick { grid-template-columns: 1fr; } }

/* ---------- Create ---------- */
.newmenu { display: grid; gap: 8px; }
.newmenu .nm { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.newmenu .nm:hover { box-shadow: inset 0 0 0 1px var(--ink-2); background: var(--well); }
.newmenu .nm > .ms-i { width: 36px; height: 36px; border-radius: 10px; background: var(--well); display: grid; place-items: center; color: var(--ink); }
.newmenu .nm b { display: block; color: var(--ink); }
.newmenu .nm span span { font-size: 12.5px; color: var(--muted); }
.offer-pick { display: grid; gap: 8px; }
.draftsig { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 8px; }
.draftsig > span { display: flex; flex-direction: column; gap: 6px; }
.draftsig q { font-size: 12.5px; color: var(--muted); }
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--well); margin-bottom: 10px; }
.bulkbar .input { flex: 1; min-width: 220px; height: 32px; padding: 4px 10px; }
.tag.rb .ms-i { font-size: 13px; }
.tag.rb.bad { color: #fff; background: var(--bad); box-shadow: none; }
.tag.rb.warn { color: var(--warn); background: var(--warn-soft); }
.help-link { display: flex; align-items: center; gap: 8px; margin: -4px 4px 10px; padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.help-link:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.help-link .ms-i { font-size: 17px; color: var(--muted); }
.sortbtn { display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
.sortbtn .ms-i { font-size: 14px; }

/* Ops statements use a wider list; triage funnel wraps on phones. */
.st-layout.st-wide { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 760px) {
  .st-layout.st-wide { grid-template-columns: minmax(0, 1fr); }
  .funnel { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .funnel > * { min-width: 0; }
}

/* Dark client marks and vendor glyphs keep an edge on dark surfaces. */
:root { --mark-ring: transparent; }
.cmark, .xg { box-shadow: inset 0 0 0 1px var(--mark-ring); }
.funnel.f6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) { .funnel.f6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.board.b5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .board.b5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .board.b5 { grid-template-columns: minmax(0, 1fr); } }
.side-actions .idea-btn { grid-column: 1 / -1; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.linkbtn .ms-i { font-size: 16px; }

/* Single idea page (D-032): pipeline from capture to live, then the timeline. */
.idea-page .wi-head h1 { margin: 4px 0 0; }
.pipe-wrap { overflow-x: auto; margin: 18px 0 26px; }
.pipe { display: flex; gap: 14px; min-width: max-content; }
.pipe-grp { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px 16px; }
.pipe-h { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); font-size: 13px; margin-bottom: 14px; }
.pipe-h .ms-i { font-size: 17px; color: var(--muted); }
.pipe ol { display: flex; list-style: none; margin: 0; padding: 0; }
.pp { position: relative; display: grid; justify-items: center; gap: 4px; width: 128px; text-align: center; }
.pp::before { content: ''; position: absolute; top: 11px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: var(--line-2); }
.pp:first-child::before { display: none; }
.pp.done::before, .pp.current::before { background: var(--ok); }
.pp-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); background: var(--sheet); color: #fff; }
.pp-dot .ms-i { font-size: 15px; }
.pp.done .pp-dot { background: var(--ok); border-color: var(--ok); }
.pp.current .pp-dot { border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft); }
.pp.skipped .pp-dot { color: var(--faint); }
.pp-l { font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.3; padding: 0 6px; }
.pp.todo .pp-l, .pp.skipped .pp-l { color: var(--muted); font-weight: 500; }
.pp-d { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.idea-tl .itl { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.idea-tl .itl:last-child { border-bottom: 0; }
.idea-tl .itl > .ms-i { font-size: 18px; color: var(--muted); }
.idea-tl .itl.gate > .ms-i { color: var(--ok); }
.idea-tl .itl.next { color: var(--muted); }
.idea-tl .dt { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-row { color: inherit; text-decoration: none; border-radius: 6px; }
.rep-row:hover .code + * , .rep-row:hover { color: var(--ink); }
.ul { text-decoration: underline; }
.pipe-grp { flex: 1 1 auto; }
.pipe ol { justify-content: space-between; }
.pp { flex: 1 1 0; width: auto; min-width: 112px; }

/* Evidence picker (D-033): Loom first, then files, then a link. */
.att { display: flex; flex-direction: column; gap: 12px; }
.att-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 10px; }
.att-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-m); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); min-width: 0; }
.att-tile.best { box-shadow: inset 0 0 0 2px var(--ink); }
.att-tile .lbl { margin: 0; font-size: 12.5px; line-height: 1.45; }
.att-h { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.att-h .ms-i { font-size: 20px; color: var(--ink-2); }
.att-h .tag { margin-left: auto; }
.att-row { display: flex; gap: 6px; margin-top: auto; }
.att-row .input { min-width: 0; flex: 1; padding-block: 8px; }
.att-out { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.att-out .ms-i { font-size: 15px; }
.att-drop { cursor: pointer; border: 2px dashed var(--line-2); box-shadow: none; background: var(--well); }
.att-drop:hover, .att-drop.over { border-color: var(--ink); }
.att-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.att-browse { align-self: flex-start; margin-top: auto; pointer-events: none; }
.att-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.att-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-m); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.att-face { width: 40px; height: 40px; border-radius: 8px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.att-face img { width: 100%; height: 100%; object-fit: cover; }
.att-face .xg { width: 24px; height: 24px; font-size: 12px; }
.att-meta { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.att-meta > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .att-grid { grid-template-columns: minmax(0, 1fr); } }
.sh-opt { font: 400 13px var(--sans); color: var(--muted); margin-left: 8px; }
.sh-sub { font-weight: 600; color: var(--ink); margin: 18px 0 10px; }
.att-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.att-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.att-live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.att-live .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bad); animation: att-pulse 1.2s infinite; }
@keyframes att-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .att-live .dot { animation: none; } }

/* Tracker origin card links back to its idea. Evidence chips stay clickable above the link. */
.origin.linked { position: relative; transition: box-shadow .15s; }
.origin.linked:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.origin-link { position: absolute; inset: 0; border-radius: inherit; }
.origin-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.origin.linked .evchip, .origin.linked button, .origin.linked a:not(.origin-link) { position: relative; z-index: 1; }
.origin-go { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.origin-go .ms-i { font-size: 16px; }