/* ============================================================
   Wallie shared components (shared across every POC)
   Base typography, portal shell (host bar, sidebar, filter bar),
   buttons, badges, chips and pills, switches, inputs, filter
   fields, dropdowns, action menus, modal shell with the gradient title chrome,
   info tooltips, toasts, impact cells, two-pane editor split,
   empty state and utilities. Verified against shared-ui.
   Change these only here; every POC's test suite must stay green.
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500; /* Figma default UI text is Inter Medium (500) */
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  letter-spacing: -0.02em; /* tracking -0.28px at 14px */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { color: var(--text-strong); margin: 0; line-height: 1.2; }
h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
a { color: var(--primary-600); text-decoration: none; }
b { color: var(--text-strong); }
code { font-family: var(--mono); font-size: 12px; background: var(--gb-50); border-radius: var(--r-sm); padding: 1px 5px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }

/* ---------- Host breadcrumb bar (03 Components Header menu upper row:
   48px, greyBlue-25, hairline bottom border, breadcrumb left, actions right) */
.hostbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px 0 16px;
  background: var(--gb-25); border-bottom: 1px solid var(--gb-200);
}
.hostbar .spacer { flex: 1; }
/* Breadcrumb (03 Components Breadcrumb: 14px medium, text-secondary links
   since COD-5104, greyBlue-950 current, icon-default chevron separators) */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: -0.28px; color: var(--text-secondary); font-weight: 500; }
.crumbs .grid-ic { color: var(--icon); font-size: 14px; }
.crumbs .lk { cursor: default; border-radius: var(--r-sm); }
.crumbs .lk:hover { color: var(--text-main); }
.crumbs .lk:focus-visible { outline: none; background: #fff; box-shadow: var(--focus-ring); }
.crumbs .sep { color: var(--icon); font-size: 11px; line-height: 1; }
.crumbs .sep svg { display: block; }
.crumbs b { color: var(--gb-950); font-weight: 500; }
.hostpill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 13px;
  border: 1px solid var(--gb-200); background: #fff;
  font-size: 12.5px; font-weight: 500; color: var(--gb-800); cursor: default;
}
/* Header actions (product Header upper row: Import / Export beside Report an
   incident): icon and 14px label in text-secondary, primary-500 on hover.
   A page puts its page-wide actions here, never in its toolbar. */
.host-acts { display: flex; align-items: center; gap: 16px; flex: none; margin-right: 8px; }
.host-acts:empty { display: none; }
.host-act {
  appearance: none; border: none; background: transparent; padding: 4px 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--text-secondary);
  white-space: nowrap;
}
.host-act:hover { color: var(--primary-500); }
.host-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.host-act svg { display: block; flex: none; }
.hostbar .menu-wrap { flex: none; }
.hostbar .auth-slot { display: flex; align-items: center; gap: 8px; flex: none; }
.hostbar .auth-slot .btn.ghost { height: 28px; }

/* ---------- Action menu (row More-actions and POC Demo) ---------- */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: 36px; z-index: 60;
  background: #fff; border: 1px solid var(--gb-200); border-radius: var(--r-md);
  box-shadow: 0 1px 2px 0 rgba(61,61,92,.04), 0 2px 4px 0 rgba(61,61,92,.04), 0 8px 20px rgba(41,41,61,.12);
  min-width: 168px; padding: 4px;
}
/* A .switch inside a menu keeps the toggle's own size and colour.
   Menu-item rules would otherwise stretch it into a full-width row. */
.menu button:not(.switch),
.menu a {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px;
  border: none; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.28px;
  color: var(--gb-900); padding: 0 8px; border-radius: var(--r-md);
  text-decoration: none;
}
.menu button:not(.switch):hover,
.menu a:hover { background: var(--gb-50); }
/* A menu item with a muted helper line under its label. */
.menu button.two-line,
.menu a.two-line { height: auto; align-items: flex-start; padding: 6px 8px; line-height: 20px; }
.menu .two-line .lbl { display: flex; flex-direction: column; min-width: 0; }
.menu .two-line .sub { font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; color: var(--gb-600); }
.menu button.danger { color: #C20; }
.menu button.danger:hover { background: var(--error-bg); }
.menu.demo-menu { min-width: 240px; top: calc(100% + 4px); }
/* The viewing-context tick in the demo menu (tenant or workspace), promoted 2026-10-05. */
.demo-menu .ctx-check { visibility: hidden; color: var(--primary-600); font-weight: 700; }
.demo-menu button.on .ctx-check { visibility: visible; }
.menu .menu-note {
  font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.4;
  padding: 6px 8px 8px;
}
.menu .menu-sep { height: 1px; background: var(--gb-200); margin: 2px 4px 6px; }

.poc-tag {
  display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
  border-radius: var(--r-sm);
  background: var(--gb-100); border: 1px solid var(--gb-200);
  color: var(--gb-700); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
}
/* ---------- Avatar (03 Components Avatar set: 24px disc, r-full)
   Types: default = initials on greyBlue-100, .filled inverse, .picture
   (img child), .icon (person glyph), .wallie / .whoopie / .suzie agent
   marks (WallieUI.avatars). .bordered adds the 1.5px white ring for
   overlapping stacks (.avatar-stack). Sizes: 24 default, .lg 32, .xl 48. */
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--gb-100);
  font-size: 10px; font-weight: 600; letter-spacing: -0.2px; color: var(--gb-400);
  display: inline-flex; align-items: center; justify-content: center; cursor: default;
}
.avatar.bordered { box-shadow: 0 0 0 1.5px #fff; }
.avatar.filled { background: var(--gb-600); color: #fff; }
.avatar.picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.icon { color: var(--gb-400); }
.avatar.icon svg { display: block; }
.avatar.wallie, .avatar.whoopie, .avatar.suzie { background: transparent; }
.avatar.wallie svg, .avatar.whoopie svg, .avatar.suzie svg { width: 100%; height: 100%; display: block; }
.avatar.lg { width: 32px; height: 32px; font-size: 12px; }
.avatar.xl { width: 48px; height: 48px; font-size: 16px; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { box-shadow: 0 0 0 1.5px #fff; }
.avatar-stack .avatar + .avatar { margin-left: -4px; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: calc(100vh - 49px); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 16px; width: 100%; }

/* FilterHeader bar (Header menu lower row): pill tabs left, controls right */
.filterbar {
  display: flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 6px 20px 6px 16px;
  background: var(--gb-25); border-bottom: 1px solid var(--gb-200);
  flex-wrap: wrap;
}
.main-sticky {
  position: sticky; top: 49px; z-index: 40;
  background: var(--gb-25);
}
.filterbar .spacer { flex: 1; }


/* ---------- Sidebar (03 Components Sidebar menu: dark ink shell,
   quiet group headings, 28px menu items, agent card footer. 256px wide
   like the shipped product (Figma draws 240, see design/GAPS.md).
   Same markup as the old light shell; only shared/ changes it.) ---------- */
.sidebar {
  position: sticky; top: 49px; align-self: flex-start;
  width: 256px; min-width: 256px; height: calc(100vh - 49px);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sb-head { display: flex; align-items: center; gap: 7px; height: 48px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--gb-950); flex: none; }
.sb-head .spacer { flex: 1; }
.sb-logo {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--primary-600); box-shadow: var(--shadow-primary);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
}
.sb-ws { font-size: 15px; font-weight: 600; letter-spacing: -0.28px; color: #fff; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-chev { color: var(--gb-500); font-size: 11px; cursor: default; }
.sb-collapse { color: var(--gb-500); font-size: 14px; cursor: default; }
.sb-search {
  margin: 10px 12px 8px; background: var(--sidebar-search);
  border: 1px solid var(--gb-950); border-radius: var(--r-md);
  color: var(--gb-500); font-size: 12.5px; padding: 6px 10px;
  display: flex; align-items: center; gap: 8px; flex: none;
}
.nav { display: flex; flex-direction: column; padding: 2px 12px 8px; }
.nav .grp {
  display: flex; align-items: center; gap: 4px;
  color: var(--gb-600); font-size: 12px; font-weight: 500; letter-spacing: -0.24px;
  padding: 6px 4px 4px; cursor: default; border-radius: var(--r-sm);
}
.nav .grp:hover { color: var(--gb-500); }
.nav .grp .gchev { font-size: 9px; color: var(--gb-600); width: 12px; text-align: center; }
.nav .gitems { position: relative; padding-left: 12px; margin-left: 9px; }
.nav .gitems::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  border-radius: 2px; background: var(--gb-900);
}
.nav .it {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  color: var(--sidebar-text); padding: 6px 8px; margin: 2px 0; min-height: 28px;
  border-radius: var(--r-md); font-size: 13.5px; letter-spacing: -0.28px; cursor: default;
}
.nav .it:hover { background: var(--gb-900); color: #fff; }
.nav .it.on { background: var(--gb-950); color: #fff; font-weight: 500; }
.nav .it:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sidebar-bg), 0 0 0 4px var(--primary-500); }
.nav .it .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--error-500); margin-left: auto; flex: none; }
.nav .it .navtag {
  margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
  background: var(--primary-600); color: #fff; padding: 1px 6px; border-radius: var(--r-md);
}
/* Module status indicator (Sidebar status rows: label, chevron, value + 2px bar) */
.sb-status { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 8px; font-size: 12px; font-weight: 500; letter-spacing: -0.24px; }
.sb-status .st-h { display: flex; align-items: center; gap: 8px; color: var(--sidebar-text); }
.sb-status .st-h .v { margin-left: auto; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.sb-status .st-h .v svg { color: var(--yellow-400); }
.sb-status .prog { background: var(--gb-950); }
.sb-status .prog .fill { background: var(--primary-300); }
.sb-status.warn .prog .fill { background: var(--yellow-500); }
.sb-foot { margin-top: auto; padding: 12px 12px 14px; border-top: 1px solid var(--gb-950); flex: none; }
/* Agent card (Sidebar Agent block: #1A1A23 face, avatar mark, load bar) */
.agent-card {
  display: flex; align-items: center; gap: 9px;
  background: #1A1A23; border: 1px solid var(--gb-950);
  border-radius: var(--r-md); padding: 8px; cursor: default;
}
.agent-av {
  width: 24px; height: 24px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--sidebar-bg); color: #fff; font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12);
}
.agent-av svg { width: 100%; height: 100%; display: block; }
.agent-av:has(svg) { border: none; }
.agent-tt { flex: 1; min-width: 0; line-height: 1.2; }
.agent-tt b { display: block; color: #fff; font-size: 12px; font-weight: 500; }
.agent-tt span { display: block; color: var(--gb-500); font-size: 11px; font-weight: 400; }
.agent-sw { color: var(--gb-500); font-size: 12px; }
.sb-note { margin-top: 10px; font-size: 10.5px; color: var(--gb-500); font-weight: 400; line-height: 1.45; }

/* ---------- Buttons (03 Components Button set: 14px/-0.28, h32 py6 px10, gap 4, r8)
   Hierarchies: primary (default), .secondary, .tertiary, .ghost, .link,
   .hyperlink, .ai-dark, .ai-light. Add .danger for the destructive variant
   of any hierarchy (.danger-solid = destructive primary). States: hover,
   :focus-visible ring, :active, :disabled, .loading. ---------- */
.btn {
  cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500;
  line-height: 20px; letter-spacing: -0.28px;
  height: 32px; padding: 0 10px; border-radius: var(--r-md);
  border: 1px solid var(--primary-border); background: var(--primary-600); color: #fff;
  box-shadow: var(--shadow-primary);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: all .2s;
}
.btn svg { display: block; flex: none; }
.btn:hover, .btn:active { background: var(--primary-700); border-color: var(--primary-900); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { cursor: not-allowed; background: var(--primary-200); border-color: transparent; box-shadow: none; }
.btn.secondary { background: #fff; color: #000; border-color: var(--gb-200); box-shadow: var(--shadow-soft); }
.btn.secondary svg { color: var(--gb-600); }
.btn.secondary:hover, .btn.secondary:active { background: var(--gb-25); border-color: var(--gb-300); }
.btn.secondary:disabled { background: #fff; border-color: var(--gb-100); color: var(--gb-400); }
.btn.tertiary { background: var(--gb-25); color: #000; border-color: transparent; box-shadow: none; }
.btn.tertiary svg { color: var(--gb-600); }
.btn.tertiary:hover, .btn.tertiary:active { background: var(--gb-50); border-color: transparent; }
.btn.tertiary:disabled { background: #fff; color: var(--gb-400); }
.btn.ghost { background: transparent; color: var(--gb-600); border-color: transparent; box-shadow: none; }
.btn.ghost:hover, .btn.ghost:active { color: var(--gb-800); background: transparent; border-color: transparent; }
.btn.ghost:focus-visible { background: #fff; }
.btn.ghost:disabled { background: transparent; color: var(--gb-400); }
/* Link and hyperlink: h20, no padding, r4 */
.btn.link, .btn.hyperlink {
  height: 20px; padding: 0; border: none; background: transparent; box-shadow: none;
  border-radius: var(--r-sm);
}
.btn.link { color: var(--gb-600); }
.btn.link:hover, .btn.link:active { color: var(--gb-800); background: transparent; }
.btn.hyperlink { color: var(--primary-600); }
.btn.hyperlink:hover, .btn.hyperlink:active { color: var(--primary-800); background: transparent; }
.btn.link:focus-visible, .btn.hyperlink:focus-visible { background: #fff; box-shadow: var(--focus-ring); }
.btn.link:disabled, .btn.hyperlink:disabled { color: var(--gb-400); background: transparent; }
/* Destructive variants per hierarchy (.danger-solid = destructive primary) */
.btn.danger-solid { background: var(--error-strong); border-color: var(--error-800); color: #fff; box-shadow: 0 2px 4px 0 rgba(204, 34, 0, .10), 0 4px 8px 0 rgba(204, 34, 0, .10); }
.btn.danger-solid:hover, .btn.danger-solid:active { background: var(--error-tx); border-color: var(--error-900); }
.btn.danger-solid:disabled { background: var(--error-bd); border-color: transparent; box-shadow: none; }
.btn.danger { background: #fff; color: var(--error-strong); border-color: var(--error-300); box-shadow: 0 1px 2px 0 rgba(122, 21, 0, .04), 0 2px 4px 0 rgba(122, 21, 0, .04); }
.btn.danger svg { color: var(--error-500); }
.btn.danger:hover, .btn.danger:active { background: var(--error-25); border-color: var(--error-400); color: var(--error-tx); }
.btn.danger:disabled { background: #fff; border-color: var(--error-bg); color: var(--error-400); }
.btn.tertiary.danger { background: var(--error-25); border-color: transparent; box-shadow: none; }
.btn.tertiary.danger:hover, .btn.tertiary.danger:active { background: var(--error-50); }
.btn.tertiary.danger:disabled { background: #fff; color: var(--error-400); }
.btn.ghost.danger, .btn.link.danger { background: transparent; border-color: transparent; box-shadow: none; color: var(--error-500); }
.btn.ghost.danger:hover, .btn.ghost.danger:active,
.btn.link.danger:hover, .btn.link.danger:active { background: transparent; color: var(--error-tx); }
.btn.ghost.danger:disabled, .btn.link.danger:disabled { color: var(--error-400); }
.btn.hyperlink.danger { background: transparent; border: none; box-shadow: none; color: var(--error-strong); }
.btn.hyperlink.danger:hover, .btn.hyperlink.danger:active { color: var(--error-tx); background: transparent; }
.btn.danger:focus-visible, .btn.danger-solid:focus-visible,
.btn.ghost.danger:focus-visible, .btn.link.danger:focus-visible,
.btn.hyperlink.danger:focus-visible { box-shadow: var(--focus-ring-danger); }
/* AI buttons: ink (dark) or white face with the angular gradient border */
.btn.ai-dark, .btn.ai-light {
  position: relative; z-index: 0; border: 1px solid transparent; box-shadow: none;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,
    var(--ai-conic) border-box;
  color: #fff;
}
.btn.ai-dark::before, .btn.ai-light::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: var(--ai-conic);
  filter: blur(5px); opacity: .55;
}
.btn.ai-light {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--ai-conic-soft) border-box;
  color: #000;
}
.btn.ai-light::before { background: var(--ai-conic-soft); }
.btn.ai-light svg { color: var(--gb-600); }
.btn.ai-light:hover, .btn.ai-light:active {
  background:
    linear-gradient(var(--gb-25), var(--gb-25)) padding-box,
    var(--ai-conic-soft) border-box;
}
.btn.ai-dark:hover { color: #fff; }
.btn.ai-dark:disabled, .btn.ai-light:disabled {
  background: var(--gb-300); border-color: var(--gb-500); color: #fff;
}
.btn.ai-dark:disabled::before, .btn.ai-light:disabled::before { display: none; }
.btn.ai-light:disabled { background: #fff; border-color: var(--gb-100); color: var(--gb-400); }
/* Loading: hourglass lead icon (WallieUI.ico.hourglass), no interaction */
.btn.loading { pointer-events: none; }
/* Icon-only 32x32 */
.btn.icononly { width: 32px; padding: 0; justify-content: center; }
/* Dot lead (status dot inside a button) */
.btn .d { width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: currentColor; flex: none; }
/* inline-header size: h20, px6, r4 (product Storybook and Figma: 14px text) */
.btn.sm { height: 20px; padding: 0 6px; font-size: 14px; line-height: 14px; border-radius: var(--r-sm); }
.btn.sm.icononly { width: 20px; padding: 0; }
.btn .n-badge {
  height: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; letter-spacing: -0.2px; background: var(--gb-200); color: var(--gb-600);
  border-radius: var(--r-sm); padding: 0 2px; min-width: 14px; text-align: center;
}
.btn .n-badge.hot { background: var(--error-bg); color: var(--error-tx); }
.btn:not(.secondary):not(.tertiary):not(.ghost):not(.link):not(.hyperlink):not(.danger):not(.ai-light) .n-badge { background: var(--primary-500); color: #fff; }
.btn:disabled .n-badge { background: var(--gb-100); color: var(--gb-400); }
/* Button group: floating cluster of buttons with hairline dividers */
.btn-group {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 16px;
  background: var(--gb-25); border: 1px solid var(--gb-200);
  box-shadow: 0 2px 2px rgba(0,0,0,.04), 0 4px 6px rgba(0,0,0,.06), 0 16px 24px rgba(0,0,0,.10);
}
.btn-group .bg-div { width: 1px; height: 24px; border-radius: 10px; background: var(--gb-200); flex: none; margin: 0 -4px 0 -4px; align-self: center; }
/* iconOnly inline-header: 20x20 r4 — used in modal headers */
.iconbtn {
  cursor: pointer; width: 20px; height: 20px; border-radius: var(--r-sm); border: none; padding: 0;
  background: transparent; color: var(--gb-500); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s;
}
.iconbtn svg { display: block; flex: none; }
.iconbtn:hover { background: var(--gb-100); color: var(--gb-800); }
.iconbtn.danger:hover { background: var(--error-bg); color: var(--error-strong); }

/* ---------- Badges (03 Components Badge set: h20, 12/16, tracking -0.24px, r8)
   Colors: blue, grey (grey blue), error, pink, green, teal, greygreen,
   yellow, white, ai (+ the POC-era amber, purple, dark). Sizes: .sm h14,
   default h20, .lg h20/14px text, .xl h24, .key h20 r4 keyboard shortcut.
   States: .selected (or .int:hover for interactive badges), .dis. ---------- */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 20px; padding: 0 4px;
  border-radius: var(--r-md); font-size: 12px; line-height: 16px; letter-spacing: -0.24px;
  font-weight: 500; border: 1px solid transparent; white-space: nowrap; flex: none;
}
.badge > span:not(.d) { padding: 0 2px; }
.badge svg { width: 14px; height: 14px; flex: none; display: block; }
.badge .d { width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: currentColor; flex: none; }
.badge .d.note { background: var(--yellow-500); }
.badge.green { background: var(--green-bg); border-color: var(--green-bd); color: var(--green-tx); }
.badge.teal { background: var(--teal-bg); border-color: var(--teal-bd); color: var(--teal-tx); }
.badge.yellow { background: var(--yellow-bg); border-color: var(--yellow-bd); color: var(--yellow-700); }
.badge.amber { background: var(--amber-bg); border-color: var(--amber-bd); color: var(--amber-tx); }
.badge.error { background: var(--error-bg); border-color: var(--error-bd); color: var(--error-tx); }
.badge.blue { background: var(--blue-bg); border-color: var(--blue-bd); color: var(--blue-tx); }
.badge.grey { background: var(--grey-bg); border-color: var(--grey-bd); color: var(--grey-tx); }
.badge.greygreen { background: var(--greygreen-bg); border-color: var(--greygreen-bd); color: var(--greygreen-tx); }
.badge.pink { background: var(--pink-bg); border-color: var(--pink-bd); color: var(--pink-tx); }
.badge.white { background: #fff; border-color: var(--gb-200); color: var(--gb-600); }
.badge.purple { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple-tx); }
.badge.dark { background: var(--gb-950); border-color: var(--gb-950); color: #fff; }
/* AI badge: quiet face, angular gradient hairline */
.badge.ai {
  border: 1px solid transparent; color: var(--gb-800);
  background:
    linear-gradient(var(--gb-25), var(--gb-25)) padding-box,
    var(--ai-conic-soft) border-box;
}
/* Lab-only marker: "Open question" and "Mock" on a POC page. The product has no
   such badge (design/GAPS.md). A dashed edge, a hatched face and a dark LAB tag
   set it apart from every status badge. It uses greyBlue only, so it carries no
   status colour. It has no selected, hover or disabled state. */
.badge.lab {
  background: repeating-linear-gradient(-45deg, #fff 0 3px, var(--gb-50) 3px 6px);
  border: 1px dashed var(--border-control);
  color: var(--text-main);
}
.badge.lab::before {
  content: "Lab";
  display: inline-flex; align-items: center; height: 14px; padding: 0 3px; margin-right: 2px;
  border-radius: 3px; background: var(--gb-900); color: #fff;
  font-size: 9.5px; line-height: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* Selected / hover state: one shade deeper per color */
.badge.blue.selected, .badge.blue.int:hover { background: var(--primary-200); border-color: var(--primary-300); color: var(--primary-900); }
.badge.grey.selected, .badge.grey.int:hover { background: var(--gb-300); border-color: var(--border-control); color: var(--text-main); }
.badge.error.selected, .badge.error.int:hover { background: var(--error-bd); border-color: var(--error-300); color: var(--error-800); }
.badge.pink.selected, .badge.pink.int:hover { background: #FFCCDC; border-color: #FF99B9; color: var(--pink-800); }
.badge.green.selected, .badge.green.int:hover { background: var(--green-bd); border-color: #80B28C; color: #015115; }
.badge.teal.selected, .badge.teal.int:hover { background: var(--teal-bd); border-color: #25FDA3; color: #03633D; }
.badge.greygreen.selected, .badge.greygreen.int:hover { background: var(--greygreen-bd); border-color: #A3C2B5; color: #20312A; }
.badge.yellow.selected, .badge.yellow.int:hover { background: var(--yellow-bd); border-color: var(--yellow-400); color: var(--yellow-700); }
.badge.white.selected, .badge.white.int:hover { background: var(--gb-25); border-color: var(--gb-200); color: var(--gb-700); }
.badge.ai.selected, .badge.ai.int:hover {
  background:
    linear-gradient(var(--gb-50), var(--gb-50)) padding-box,
    var(--ai-conic-soft) border-box;
  color: var(--gb-900);
}
/* Disabled: one shade lighter per color */
.badge.dis { cursor: not-allowed; }
.badge.blue.dis { background: var(--primary-25); border-color: var(--primary-100); color: var(--primary-300); }
.badge.grey.dis { background: var(--gb-50); border-color: var(--gb-200); color: var(--gb-500); }
.badge.error.dis { background: var(--error-25); border-color: var(--error-bg); color: var(--error-400); }
.badge.pink.dis { background: #FFF0F4; border-color: var(--pink-bd); color: #FF6696; }
.badge.green.dis { background: #F5F9F6; border-color: var(--green-bg); color: #80B28C; }
.badge.teal.dis { background: #EBFFF7; border-color: var(--teal-bg); color: #25FDA3; }
.badge.greygreen.dis { background: #F3F7F5; border-color: var(--greygreen-bg); color: #A3C2B5; }
.badge.yellow.dis { background: #FAFFD9; border-color: var(--yellow-bg); color: var(--yellow-400); }
.badge.white.dis { background: #fff; border-color: var(--gb-100); color: var(--gb-300); }
.badge.ai.dis { background: #fff; color: var(--gb-500); }
/* Sizes */
.badge.sm { height: 14px; padding: 0 4px; font-size: 10px; line-height: 14px; letter-spacing: -0.2px; border: none; border-radius: var(--r-sm); }
.badge.sm svg { width: 11px; height: 11px; }
.badge.lg { height: 20px; font-size: 14px; line-height: 16px; letter-spacing: -0.28px; }
.badge.xl { height: 24px; padding: 2px 6px; }
.badge.key { border-radius: var(--r-sm); }
.badge.lab.sm { border: 1px dashed var(--border-control); }
.badge.lab.sm::before { height: 10px; padding: 0 2px; font-size: 7.5px; line-height: 10px; border-radius: 2px; }
.badge.lab.lg::before { font-size: 10px; }
.badge.trunc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
/* Removable badge (Badge onClose): a 14px close button after the label */
.badge .badge-x {
  appearance: none; border: none; background: transparent; padding: 0; margin-left: 2px; cursor: pointer;
  width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: inherit; border-radius: var(--r-sm);
}
.badge .badge-x:hover { opacity: .8; }
.badge .badge-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.badge .badge-x svg { width: 12px; height: 12px; }
button.badge { appearance: none; cursor: pointer; font-family: var(--font); }

/* Active filter chips (shared-ui ActiveFilterChips): the label, one
   removable grey badge per applied value (the filter's name, then the
   value), "+ n" when more than four apply (opens the drawer), and the
   error badge that clears them all. Sits under the toolbar, above the card. */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.active-filters .af-t { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; color: var(--text-secondary); }
.active-filters .af-k { margin-right: 4px; padding: 0; color: var(--text-main); }
.active-filters .af-more { font-size: 14px; }
.active-filters .af-clear svg { width: 12px; height: 12px; }

/* Source chips (effective strategy / rule references) */
.src {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--gb-200);
  background: var(--gb-50); color: var(--gb-800); cursor: pointer; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.src:hover { border-color: var(--gb-300); background: var(--gb-100); }
.src.baseline { background: var(--gb-100); }
.src.exception { background: var(--blue-bg); border-color: var(--blue-bd); color: var(--blue-tx); }
.src.resolution { background: var(--teal-bg); border-color: var(--teal-bd); color: var(--teal-tx); }
.src.automation { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple-tx); }
.src.conflict { background: var(--error-bg); border-color: var(--error-bd); color: var(--error-tx); }

/* Property pills */
.pp {
  display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px;
  border-radius: var(--r-md); font-size: 12px; line-height: 16px; letter-spacing: -0.24px; font-weight: 500;
  background: var(--gb-200); border: 1px solid var(--gb-300); color: var(--gb-800); white-space: nowrap;
}
.pp b { font-weight: 500; color: var(--gb-950); }

/* ---------- Toggle (03 Components Toggle set: sm 28x16 knob12,
   md 34x20 knob16, lg 40x24 knob20; off greyBlue-100, on blue-500) ---------- */
.switch {
  position: relative; width: 34px; height: 20px; border-radius: 20px;
  background: var(--gb-100); cursor: pointer; flex: none; border: none; padding: 0;
  transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-soft);
  transition: left .15s;
}
.switch:hover { background: var(--gb-200); }
.switch.on { background: var(--primary-500); }
.switch.on:hover { background: var(--primary-600); }
.switch.on::after { left: 16px; }
.switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.switch:disabled { cursor: not-allowed; background: var(--gb-50); }
.switch:disabled::after { background: var(--gb-25); }
.switch.on:disabled { background: var(--primary-100); }
.switch.sm { width: 28px; height: 16px; border-radius: 16px; }
.switch.sm::after { width: 12px; height: 12px; }
.switch.sm.on::after { left: 14px; }
.switch.lg { width: 40px; height: 24px; }
.switch.lg::after { width: 20px; height: 20px; }
.switch.lg.on::after { left: 18px; }

/* ---------- Checkbox (03 Components Checkbox set: 16px, r4 squared /
   r-full rounded; checked and indeterminate fill blue-600) ----------
   Markup: <label class="chk"><input type="checkbox"><span class="box"></span> Label</label>
   Indeterminate via the input's JS property or data-mixed on the input. */
.chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; letter-spacing: -0.28px; }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk .box {
  width: 16px; height: 16px; border-radius: var(--r-sm); flex: none;
  background: #fff; border: 1px solid var(--gb-200);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.chk .box::after {
  content: ""; width: 8px; height: 5px; margin-top: -1px;
  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform .12s;
}
.chk:hover .box { border-color: var(--gb-300); }
.chk input:checked + .box, .chk input[data-mixed] + .box { background: var(--primary-600); border-color: var(--primary-600); }
.chk input:checked + .box::after { transform: rotate(-45deg) scale(1); }
.chk input[data-mixed]:not(:checked) + .box::after {
  width: 7px; height: 0; border-left: none; border-bottom: 1.5px solid #fff;
  margin-top: 0; transform: none;
}
.chk:hover input:checked + .box, .chk:hover input[data-mixed] + .box { background: var(--primary-700); border-color: var(--primary-700); }
.chk input:focus-visible + .box { box-shadow: var(--focus-ring); }
.chk input:disabled + .box { background: var(--gb-25); border-color: var(--gb-100); }
.chk input:disabled:checked + .box, .chk input:disabled[data-mixed] + .box { background: var(--primary-200); border-color: var(--primary-200); }
.chk input:disabled ~ * { color: var(--gb-400); }
.chk.rounded .box { border-radius: 50%; }

/* ---------- Radio button (03 Components Radio set: 16px, 6px white dot) */
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; letter-spacing: -0.28px; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .box {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid var(--gb-200);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.radio .box::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; transform: scale(0); transition: transform .12s;
}
.radio:hover .box { border-color: var(--gb-300); }
.radio input:checked + .box { background: var(--primary-600); border-color: var(--primary-600); }
.radio input:checked + .box::after { transform: scale(1); }
.radio:hover input:checked + .box { background: var(--primary-700); border-color: var(--primary-700); }
.radio input:focus-visible + .box { box-shadow: var(--focus-ring); }
.radio input:disabled + .box { background: var(--gb-25); border-color: var(--gb-100); }
.radio input:disabled:checked + .box::after { background: var(--gb-300); }
.radio input:disabled ~ * { color: var(--gb-400); }

/* ---------- Forms (FormField: 14px medium greyBlue-950 labels;
   input chrome per 03 Components Input field: h32 r8, hover blue-300
   border, focus blue-400, error error-400, disabled greyBlue-25) ---------- */
label.f-lbl { display: block; font-size: 13.5px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-950); margin-bottom: 6px; }
.f-help { font-size: 12.5px; color: var(--gb-600); margin-top: 4px; line-height: 1.45; font-weight: 400; }
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="password"], select, textarea {
  font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: var(--text);
  background: #fff; border: 1px solid var(--gb-200); border-radius: var(--r-md);
  padding: 6px 9px; width: 100%; height: 32px;
  box-shadow: var(--shadow-soft);
}
textarea { height: auto; }
input::placeholder, textarea::placeholder { color: var(--gb-600); font-weight: 500; }
input:hover, select:hover, textarea:hover { border-color: var(--primary-300); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400); }
input:disabled, select:disabled, textarea:disabled { background: var(--gb-25); border-color: var(--gb-100); color: var(--gb-400); box-shadow: none; cursor: not-allowed; }
input.err, select.err, textarea.err { border-color: var(--error-400); }
input.err:focus, select.err:focus, textarea.err:focus { border-color: var(--error-500); box-shadow: 0 0 0 1px var(--error-500); }
.f-row { margin-bottom: 20px; }
.f-inline { display: flex; gap: 10px; align-items: center; }

/* Field unit (03 Components Input/Dropdown field): heading row with a
   quiet label, optional support text, required star and trailing link;
   message row under the control */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-h { display: flex; align-items: center; gap: 8px; }
.field-h .lbl { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-600); }
.field-h .sup { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-500); }
.field-h .req { color: var(--primary-500); font-weight: 500; }
.field-h .spacer { flex: 1; }
.field-msg { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--gb-600); line-height: 16px; }
.field-msg svg { flex: none; }
.field.err .field-msg { color: var(--error-strong); }
/* Decorated input box: leading icon or currency, trailing kbd badges */
.inbox {
  display: flex; align-items: center; gap: 4px; height: 32px; padding: 6px 8px;
  background: #fff; border: 1px solid var(--gb-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); color: var(--gb-800);
  transition: border-color .12s;
}
.inbox:hover { border-color: var(--primary-300); }
.inbox:focus-within { border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400); }
.inbox.err { border-color: var(--error-400); }
.inbox input {
  flex: 1; min-width: 0; height: auto; border: none; background: transparent;
  padding: 0; box-shadow: none; font-size: 14px; letter-spacing: -0.28px;
}
.inbox input:focus { border: none; box-shadow: none; }
.inbox svg { flex: none; color: var(--gb-600); }
.inbox .cur { color: var(--gb-600); font-size: 14px; flex: none; }
.inbox.dis { background: var(--gb-25); border-color: var(--gb-100); box-shadow: none; color: var(--gb-400); }
.inbox.dis svg, .inbox.dis .cur { color: var(--gb-300); }
/* Keyboard shortcut badge inside search fields */
.kbd {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 20px; height: 20px; padding: 2px 4px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--gb-200);
  font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--gb-600);
}

/* ---------- Filter fields (FiltersDrawer pattern: label + Reset, then a Dropdown) ---------- */
.ff-sec { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 7px; }
.ff-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ff { min-width: 0; }
.ff-h { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.ff-t { font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--gb-600); }
.ff-h .spacer { flex: 1; }
.lnk {
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--primary-600);
}
.lnk:hover { text-decoration: underline; }

/* Dropdown trigger (shared-ui Dropdown: h-8, rounded-8, greyBlue-200, soft shadow) */
.dd {
  width: 100%; height: 32px; display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--gb-200); background: #fff;
  box-shadow: 0 1px 2px 0 rgba(61,61,92,.04), 0 2px 4px 0 rgba(61,61,92,.04);
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.28px;
  color: var(--gb-900); cursor: pointer; text-align: left; transition: border-color .12s;
}
.dd:hover { border-color: var(--primary-300); }
.dd.open { border: 2px solid var(--primary-400); padding: 5px 7px; }
.dd:disabled { background: var(--gb-25); border-color: var(--gb-100); color: var(--gb-400); cursor: not-allowed; box-shadow: none; }
.dd.err { border-color: var(--error-400); }
.dd .dd-ic { flex: none; color: var(--gb-600); font-size: 11px; }
.dd .dd-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd .dd-lbl.ph { color: var(--gb-600); }
.dd .dd-chev { flex: none; color: var(--gb-600); font-size: 11px; line-height: 1; }
.dd:disabled .dd-ic, .dd:disabled .dd-chev { color: var(--gb-400); }
.dd-in {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0;
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-900);
}
.dd-in::placeholder { color: var(--gb-600); }
.badge-sm {
  flex: none; height: 14px; padding: 0 3px; border-radius: 4px;
  background: var(--gb-200); color: var(--text-main);
  font-size: 10px; font-weight: 600; line-height: 14px; letter-spacing: -0.2px;
}

/* Dropdown panel (03 Components Dropdown list: white, hairline border,
   2px padding, 1px gaps, layered pop shadow) */
.dd-pop {
  position: fixed; z-index: 220; background: #fff; padding: 2px;
  border: 1px solid rgba(0, 0, 0, .05); border-radius: 8px;
  box-shadow: var(--shadow-pop);
}
.dd-actions { display: flex; justify-content: flex-end; padding: 6px 8px 4px; border-bottom: 1px solid var(--gb-100); }
.dd-select-all {
  border: none; background: none; padding: 0; font-family: var(--font);
  font-size: 12px; font-weight: 600; color: var(--primary-600); cursor: pointer;
}
.dd-select-all:hover { text-decoration: underline; }
.dd-list { max-height: 192px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.dd-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; flex: none; padding: 0 8px;
  border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-900);
}
.dd-opt:hover { background: var(--gb-25); }
.dd-opt.sel { background: var(--gb-50); }
.dd-opt:disabled { color: var(--gb-400); cursor: not-allowed; background: none; }
.dd-opt .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-opt .t .sup { color: var(--gb-600); margin-left: 4px; }
.dd-opt .cnt { flex: none; font-size: 11px; font-weight: 500; color: var(--gb-500); }
.dd-opt svg { flex: none; color: var(--gb-600); }
/* List heading and divider rows (03 Components _Dropdown list item) */
.dd-hd {
  display: flex; align-items: center; height: 24px; padding: 6px 8px 2px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-600);
}
.dd-div { height: 1px; background: var(--gb-100); margin: 2px 4px; }
.cbx {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  border: 1px solid var(--gb-200); background: #fff; color: #fff; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.cbx.on { background: var(--primary-600); border-color: var(--primary-600); }
/* Partly selected (a cluster with some of its locations ticked): the
   product's indeterminate checkbox, a 2px bar on the primary fill. */
.cbx.mixed { background: var(--primary-600); border-color: var(--primary-600); position: relative; }
.cbx.mixed::after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: #fff; }
.dd-empty { padding: 10px; font-size: 13px; font-weight: 400; color: var(--muted); text-align: center; }

.linklike {
  border: none; background: none; padding: 0; font-family: var(--font);
  font-size: 12.5px; font-weight: 500; color: var(--primary-600); cursor: pointer;
}
.linklike:hover { text-decoration: underline; }

.choice { display: flex; flex-direction: column; gap: 6px; }
.choice label {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--gb-200); border-radius: var(--r-md); background: #fff;
  transition: all .15s;
}
.choice label:hover { border-color: var(--gb-300); }
.choice label.sel { border-color: var(--primary-300); background: var(--primary-50); }
.choice label.dis { opacity: .55; cursor: not-allowed; }
.choice input[type="radio"] { width: auto; height: auto; margin-top: 2px; accent-color: var(--primary-600); }
.choice .cl-t { font-weight: 600; color: var(--text-strong); font-size: 13.5px; }
.choice .cl-d { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* Switch-with-state-label control (StepBasics stock-target pattern) */
.swctl { display: flex; align-items: center; gap: 10px; }
.swctl .lab { font-size: 13.5px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-800); }

/* Override rows in the rule editor */
.ov-row { border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; background: var(--gb-25); }
.ov-row.overridden { background: #fff; border-color: var(--primary-200); }
.ov-head { display: flex; align-items: center; gap: 8px; }
.ov-head .t { font-size: 12.5px; font-weight: 600; flex: 0 0 auto; }
.ov-head .inh {
  font-size: 11.5px; color: var(--muted); margin-left: auto; font-weight: 400;
  min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-body { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-weight: 700; white-space: nowrap;
}
table.data td { padding: 9px 10px; border-bottom: 1px solid var(--gb-100); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover td { background: var(--gb-25); }
/* 03 Components table cells variant: 40px rows, 14px text, quiet
   sentence-case headers, focus / edited / error cell states */
table.data.cells { font-size: 14px; letter-spacing: -0.28px; }
table.data.cells th {
  font-size: 14px; text-transform: none; letter-spacing: -0.28px; font-weight: 500;
  color: var(--gb-600); height: 40px; padding: 10px 16px; border-bottom: 1px solid var(--gb-200);
}
table.data.cells th:hover { color: var(--gb-700); background: var(--gb-25); }
table.data.cells td {
  height: 40px; padding: 8px 16px; border-bottom: 1px solid var(--gb-200);
  color: var(--gb-950); background: #fff;
}
table.data.cells tr:hover td { background: var(--gb-25); }
table.data.cells td .sup { color: var(--gb-500); margin-left: 4px; }
/* Cell states: apply on the td */
td.cell-focus { box-shadow: inset 0 0 0 2px var(--primary-400); background: var(--primary-25) !important; border-radius: var(--r-sm); }
td.cell-edited { box-shadow: inset 0 0 0 1px var(--primary-100); background: var(--primary-50) !important; border-radius: var(--r-sm); }
td.cell-warn { box-shadow: inset 0 0 0 1px var(--yellow-bd); background: var(--yellow-bg) !important; border-radius: var(--r-sm); }
td.cell-err { box-shadow: inset 0 0 0 1px var(--error-bd); background: var(--error-bg) !important; border-radius: var(--r-sm); }
/* Comment indicator: yellow corner marker inside a cell */
td .cell-note { position: relative; }
.cell-note-dot { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 2px; background: var(--yellow-400); clip-path: polygon(100% 0, 0 0, 100% 100%); }
/* Actions cell: row of 20px icon buttons */
td.cell-actions { white-space: nowrap; }
/* Row actions (DataTable Actions column): 28px icon buttons with 16px glyphs in gb-700, readable on a 40px row */
table.data.cells td.cell-actions, td.cell-actions { padding-top: 6px; padding-bottom: 6px; line-height: 0; }
td.cell-actions .iconbtn { margin-right: 4px; width: 28px; height: 28px; color: var(--gb-700); vertical-align: middle; }
td.cell-actions .iconbtn svg { width: 16px; height: 16px; }
td.cell-actions .iconbtn:last-child { margin-right: 0; }

/* ---------- Modal (03 Components Modal: centered white card r12 on the
   ink overlay, deep layered shadow; chrome per shared-ui Modal.tsx) ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(27, 27, 34, .5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 80; display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border: 1px solid var(--gb-200); border-radius: var(--r-lg);
  box-shadow: 0 4px 6px rgba(0,0,0,.20), 0 14px 16px rgba(0,0,0,.20), 0 32px 36px rgba(0,0,0,.20), 0 100px 120px rgba(0,0,0,.12);
  width: 640px; max-width: 100%; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.sm { width: 480px; }
.modal.lg { width: 800px; }
.modal.xl { width: 880px; }
.modal.xxl { width: 1000px; }
/* Plain header: title inside the padded area, close icon inline — no border */
.modal-h { padding: 24px 24px 0; display: flex; align-items: flex-start; gap: 10px; flex: none; }
.modal-h .tt { flex: 1; min-width: 0; }
.modal-h h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--text-strong); }
.modal-h .sub { font-size: 13px; color: var(--muted); margin-top: 4px; font-weight: 400; }
/* Wallie's line under a plain title keeps the subtitle's size and weight (modalChrome plain + ai). */
.modal-h .sub .m-ai { display: block; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; }
.modal-b { padding: 12px 24px 0; overflow-y: auto; flex: 1; min-height: 0; }
/* The body's top padding scrolls away, so under a fixed plain header the body keeps
   its own 12px of space and a divider. A step caption may sit between the two. */
.modal-h ~ .modal-b { margin-top: 12px; border-top: 1px solid var(--border-divider); }
/* Validation errors pin between the body and the footer: always in view next
   to the button that triggered them, never below the fold. */
.modal-errors { flex: none; }
.modal-errors:not(:empty) { margin-top: 10px; padding: 0 24px; }
.err-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFF6F5; border: 1px solid var(--error-bd); border-radius: var(--r-md);
  padding: 10px 12px;
}
.err-card .err-ic { flex: none; color: var(--error-tx); }
.err-card .err-ic svg { width: 14px; height: 14px; display: block; margin-top: 1px; }
.err-card .err-b { min-width: 0; font-size: 12.5px; font-weight: 400; color: var(--gb-900); line-height: 1.45; }
.err-card .err-b b { display: block; color: var(--error-tx); margin-bottom: 2px; }
.err-card .err-line + .err-line { margin-top: 3px; }
/* Footer: right-aligned buttons, no border, no grey bar */
.modal-f { padding: 16px 24px 24px; display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex: none; }
.modal-f .spacer { flex: 1; }
/* Movies (WallieUI.movies): pill tabs per film, the native player in a 16:9
   ink frame (GAPS.md #19), the title with its ticket, Download and Captions */
.movies-b { padding-bottom: 24px; }
.movie-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.movie-frame { aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r-md); overflow: hidden; }
.movie-frame video { display: block; width: 100%; height: 100%; }
.movie-missing { margin: 8px 0 0; }
.movie-meta { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.movie-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.movie-dl { display: flex; gap: 16px; flex: none; }
.movie-dl[hidden] { display: none; }
.modal-f .fnote { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* Modal header: centered gradient title, subtitle, corner close (no avatar) */
.wav-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 24px 0; text-align: center; flex: none; }
.wav-title-row { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; padding: 0 28px; }
.wav-title {
  font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -0.4px; margin: 0;
  background: linear-gradient(90deg, #000 0.02%, #8080FF 74.99%, #3333FF 99.98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-align: center; max-width: 100%;
}
.wav-sub { font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: -0.3px; color: var(--gb-600); margin: 0; }
/* The reading variant (shared-ui WallieAvatarHeader): Wallie's orb, 48px on
   the ink disc with the product's layered shadow and a faint halo ring, a
   16px gap to the title, and a 20px lead subtitle. */
.wav-head.with-orb { gap: 16px; }
.wav-head.with-orb .wav-title-row + .wav-sub { margin-top: -8px; }
.wav-orb {
  position: relative; width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.wav-orb::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid rgba(22, 29, 26, .12);
}
.wav-orb .avatar {
  width: 48px; height: 48px; border-radius: 50%; background: #16161D;
  box-shadow: 0 12px 16px rgba(0,0,0,.16), 0 4px 4px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 2px rgba(255,255,255,.05);
}
.wav-sub.lead { font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -0.3px; max-width: 560px; }
/* Wizard step caption under the subtitle (modals-wizards.md: "Step 1 of 4"). */
.wav-step { text-align: center; padding: 6px 24px 0; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--gb-500); }
/* The scope step of the product's push strategy wizard (StepScope,
   FilterDimensionRow): a two-column grid of dimension cards, each a "Scope
   to brand-level." checkbox over its own searchable dropdown. A card lights
   up (primary-25, primary-200 border) once its dimension is switched on. */
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.scope-dim, .field-card { border: 1px solid var(--gb-200); border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.scope-dim.on, .field-card.changed { border-color: var(--primary-200); background: var(--primary-25); }
.scope-dim .chk span b { font-weight: 600; }
/* The configuration wizard's field card (modals-wizards.md, Add/Edit sub style
   group): the shared .field unit on a card, the label row with its info icon,
   the default as .sup and a per-field Reset, the control, one message line.
   A section of cards opens with .cfg-sec: the title and a right-hand link. */
.field-card .field-h .lbl { color: var(--gb-900); }
.field-card .field-h .itip { vertical-align: -2px; }
.field-card .field-msg { color: var(--gb-600); font-weight: 400; line-height: 16px; }
.field-card .dd, .field-card .inbox { width: 100%; }
.cfg-sec { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.cfg-sec + .scope-grid { margin-bottom: 20px; }
.cfg-sec .t { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; color: var(--gb-950); }
.cfg-sec .lnk { margin-left: auto; }
@media (max-width: 900px) { .scope-grid { grid-template-columns: 1fr; } }
/* Prose: the reading body of an explainer modal, measured on the product's
   How this works on tst: groups of a bold 14px heading (gb-900) over grey
   14px/20px copy (gb-700), 4px between heading and copy, 16px between groups.
   No panels, no numbering; lists keep their markers; a .note paragraph is
   the quieter aside. */
.prose { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }
.prose section { display: flex; flex-direction: column; gap: 4px; }
.prose h4 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -0.1px; color: var(--gb-900); }
.prose p, .prose li { margin: 0; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--gb-700); }
.prose p + p { margin-top: 4px; }
.prose p b, .prose li b { font-weight: 600; color: var(--gb-900); }
.prose p.note { font-size: 13px; line-height: 18px; color: var(--gb-600); }
.prose ul, .prose ol { margin: 0; padding-left: 20px; }
.prose li::marker { color: var(--gb-500); }
.prose ol > li::marker { font-weight: 600; color: var(--gb-900); }
.prose ol > li > b { display: block; color: var(--gb-900); }
.prose ol > li + li { margin-top: 8px; }
.prose ul ul, .prose ol ul { margin-top: 2px; }
.modal .m-close {
  position: absolute; top: 8px; right: 8px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  color: var(--gb-600); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal .m-close:hover { background: var(--gb-50); }
.modal .m-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal { position: relative; }
/* openModal focuses the dialog itself when no control asks for focus. The
   dialog is not a control, so it shows no ring. */
.modal:focus { outline: none; }

/* Info boxes: plain bordered panels (LifecycleExplanationModal pattern) */
.explain {
  background: var(--gb-25); border: 1px solid var(--gb-200);
  border-radius: var(--r-md); padding: 9px 12px; font-size: 12.5px; font-weight: 400;
}
.explain.ok { border-left: 3px solid var(--teal-tx); }
.explain.warn { background: var(--warn-bg); border-color: #ffe4c4; }
.explain.err { background: #FFF6F5; border-color: var(--error-bd); }
.explain.intro { display: flex; align-items: center; gap: 10px; margin-top: 2px; margin-bottom: 12px; }

/* ---------- Impact panel ---------- */
/* Two-pane rule editor: the definition (name, note, scope) on the left,
   the consequence (what changes + live impact) sticky on the right, so the
   feedback stays in view while either side is edited. */
.rw-split { display: grid; grid-template-columns: 356px minmax(0, 1fr); gap: 32px; align-items: start; }
.rw-main { min-width: 0; }
.rw-side { position: sticky; top: 0; min-width: 0; }
@media (max-width: 960px) {
  .rw-split { grid-template-columns: 1fr; }
  .rw-side { position: static; }
}
.imp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* The push-effect block lives in the ~470px side pane: 2×2 keeps the
   numbers readable instead of cramming four cells into one row. */
.imp-grid.four { grid-template-columns: repeat(2, 1fr); }
.imp-cell { background: var(--gb-25); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 10px 12px; }
.imp-cell .v { font-size: 17px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.02em; }
.imp-cell .l { font-size: 11px; color: var(--muted); margin-top: 1px; line-height: 1.35; font-weight: 400; }
.imp-cell.warn { background: var(--warn-bg); border-color: #ffe4c4; }
.imp-cell.warn .v { color: var(--warn-tx); }
.imp-cell.err { background: var(--error-bg); border-color: var(--error-bd); }
.imp-cell.err .v { color: var(--error-tx); }
.imp-cell.good { background: var(--teal-bg); border-color: var(--teal-bd); }
.imp-cell.good .v { color: var(--teal-tx); }
/* AI-proposed value tile (ai-agent.md): the multicolor gradient border and
   the sparkle mark are reserved for values the agent wrote, nothing else */
.imp-cell.ai {
  position: relative; border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(100deg, #F3EC9A 0%, #71FFC5 55%, #A8A8FF 100%) border-box;
}
.imp-cell.ai .spark {
  position: absolute; right: 9px; bottom: 9px; color: var(--primary-500); line-height: 0;
}
.imp-cell.ai .spark svg { display: block; }
.imp-panel { border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px; background: var(--gb-25); }
/* AI recommendation callout (ai-agent.md): the agent's proposal in a
   gradient-bordered panel on the recommendations reading pane. Head row:
   sparkle + "Wallie's recommendation" (greyBlue-600) + collapse chevron,
   "Read my reasoning" hyperlink right; first-person advice text under it.
   Figma paints the sparkles with an AI icon gradient; shared/ colors them
   primary-500 like .imp-cell.ai (approximation recorded in design/GAPS.md).
   The gradient border is an AI mark: only for the agent's own words. */
.ai-callout {
  border: 1px solid transparent; border-radius: var(--r-lg); padding: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--ai-conic-soft) border-box;
}
.ai-callout .ac-head { display: flex; align-items: center; gap: 4px; min-height: 20px; }
.ai-callout .ac-title {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 14px; color: var(--gb-600);
}
.ai-callout .ac-title svg { color: var(--primary-500); }
.ai-callout .ac-head .spacer { flex: 1; }
.ai-callout .ac-body { margin-top: 4px; font-size: 14px; font-weight: 400; letter-spacing: -0.28px; line-height: 20px; color: var(--gb-900); }
.ai-callout .ac-extra { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gb-200); display: flex; flex-direction: column; gap: 12px; }
.ai-callout .ac-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* Read-only wrapper for view-only modals (fieldset reset + disabled inputs) */
.ro-wrap { border: none; margin: 0; padding: 0; min-width: 0; display: block; }
.ro-wrap[disabled] { opacity: .85; }
.subtag.lock { background: var(--gb-100); border: 1px solid var(--gb-200); color: var(--gb-600); cursor: help; }

.subtag {
  display: inline-flex; align-items: center; flex: none;
  padding: 0 6px; height: 16px; border-radius: var(--r-sm);
  background: var(--gb-100); border: 1px solid var(--gb-200);
  font-size: 10.5px; font-weight: 500; color: var(--gb-800); white-space: nowrap;
}

/* ---------- Empty state ---------- */
.empty {
  border: 1px dashed var(--gb-300); border-radius: var(--r-md);
  padding: 26px 20px; text-align: center; color: var(--muted); font-size: 13px;
  background: var(--gb-25); font-weight: 400;
}
.empty b { color: var(--gb-900); display: block; margin-bottom: 3px; }
.empty b.inl { display: inline; margin: 0; font-weight: 600; }
.empty .ecta { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* ---------- Toaster (03 Components Toaster set: ink card, r8, tone icon;
   small 320px stacked, .wide full-width single line with actions) ---------- */
#toast-host { position: fixed; top: 52px; right: 16px; z-index: 110; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; width: 320px; padding: 14px 16px;
  border-radius: var(--r-md); box-shadow: var(--shadow-dark);
  display: flex; align-items: flex-start; gap: 12px;
  animation: toast-in .18s ease-out;
}
.toast .tic { flex: none; font-size: 13px; line-height: 1; margin-top: 1px; }
.toast .tic.ok { color: var(--teal-500); }
.toast .tic.err { color: var(--error-500); }
.toast .tic.warn { color: var(--yellow-400); }
.toast .tic.info { color: var(--gb-400); }
.toast .tmain { flex: 1; min-width: 0; }
.toast .tlabel { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; line-height: 1.25; }
.toast .tsupport { font-size: 13px; font-weight: 400; color: var(--gb-400); margin-top: 3px; line-height: 1.4; }
.toast .tacts { display: flex; align-items: center; gap: 12px; margin-top: 12px; pointer-events: auto; }
.toast .tact {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0;
  border: none; background: none; cursor: pointer;
  font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: #fff;
}
.toast .tact:hover { color: var(--gb-300); }
.toast .tclose {
  flex: none; border: none; background: none; padding: 0; cursor: pointer;
  color: var(--gb-600); line-height: 0; pointer-events: auto;
}
.toast .tclose:hover { color: var(--gb-400); }
/* Wide form: one line, label + support inline, actions right */
.toast.wide { width: auto; align-items: center; }
.toast.wide .tmain { display: flex; align-items: baseline; gap: 8px; }
.toast.wide .tsupport { margin-top: 0; }
.toast.wide .tacts { margin-top: 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Info tooltip (shared-ui InfoTooltip: outlined (i) + dark panel) ---------- */
.itip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; padding: 0; margin: 0; border: 0; background: none;
  color: var(--gb-600); cursor: help; line-height: 0; border-radius: var(--r-sm);
  vertical-align: middle;
}
.itip svg { display: block; }
.itip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-500); }

#tip-pop { position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; }
#tip-pop .tip-card, .tipbox {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; gap: 8px;
  width: fit-content; max-width: min(320px, calc(100vw - 2rem));
  padding: 12px; border-radius: 8px; background: var(--ink); text-align: left;
  box-shadow: var(--shadow-dark);
}
#tip-pop .tip-h, .tipbox .tip-h { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--gb-500); }
#tip-pop .tip-h .t, .tipbox .tip-h .t {
  min-width: 0; color: #fff; font-size: 14px; font-weight: 500;
  line-height: 14px; letter-spacing: -0.28px;
}
#tip-pop .tip-b, .tipbox .tip-b {
  color: var(--gb-300); font-size: 12px; font-weight: 500;
  line-height: 20px; letter-spacing: -0.24px; white-space: pre-line;
}
#tip-pop .tip-arrow { position: absolute; width: 24px; height: 6px; z-index: 20; line-height: 0; }
/* Data rows inside a tooltip (Product / Users / Progress types):
   quiet label column, white value column, 12px/14 */
.tipbox .tip-rows { display: flex; flex-direction: column; gap: 2px; }
.tipbox .tip-row { display: flex; gap: 12px; font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: -0.24px; }
.tipbox .tip-row .k { color: var(--gb-300); min-width: 56px; flex: none; }
.tipbox .tip-row .v { color: #fff; min-width: 0; }
/* Progress tooltip: 2px track on greyBlue-950, yellow fill, % ends */
.tipbox .tip-prog { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.tipbox .tip-track { height: 2px; border-radius: 8px; background: var(--gb-950); overflow: hidden; }
.tipbox .tip-fill { height: 100%; border-radius: 8px; background: var(--yellow-500); }
.tipbox .tip-ends { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; color: #fff; }
/* Chart tooltip: white card + ring indicator dot */
.tipchart {
  width: fit-content; background: #fff; border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 8px; box-shadow: var(--shadow-pop); overflow: hidden;
}
.tipchart .tc-h {
  display: flex; justify-content: space-between; gap: 24px; padding: 8px 12px;
  border-bottom: 1px solid var(--gb-200);
  font-size: 12px; font-weight: 500; line-height: 14px;
}
.tipchart .tc-h .k { color: var(--gb-600); }
.tipchart .tc-h .v { color: var(--gb-900); }
.tipchart .tc-b { display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
.tipchart .tc-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 500; line-height: 14px; }
.tipchart .tc-row .k { display: flex; align-items: center; gap: 8px; color: var(--gb-600); }
.tipchart .tc-row .v { color: var(--gb-900); font-variant-numeric: tabular-nums; }
.tipchart .tc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tip-ind {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  border: 2px solid var(--primary-700); box-shadow: 0 0 0 4px rgba(0, 0, 255, .10);
}

/* Column headers and property labels keep the icon on the text baseline */
.dtable th .itip, .data th .itip { position: relative; top: 1px; }

/* ============================================================
   Promoted page patterns (extracted from the business-strategy POC,
   design/patterns/*: cards-tiles, filters-toolbars, tables-grids,
   history-audit). One definition for every POC.
   ============================================================ */

/* KPI cards (Monitoring OperationalSummaryCard: rounded-xl, greyBlue-100 border, big number) */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.kpi {
  display: flex; flex-direction: column; min-height: 168px;
  background: #fff; border: 1px solid var(--gb-100); border-radius: var(--r-lg);
  padding: 18px 20px; box-shadow: var(--shadow-soft); min-width: 0;
}
.kpi .khead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi .kt { font-size: 13.5px; font-weight: 500; letter-spacing: .02em; color: var(--gb-600); display: flex; align-items: center; gap: 6px; min-width: 0; }
.kpi .knum { margin-top: 14px; display: flex; align-items: baseline; gap: 7px; }
.kpi .kv { font-size: 40px; font-weight: 500; line-height: 1; color: var(--gb-900); letter-spacing: -0.02em; white-space: nowrap; }
.kpi .ku { font-size: 13.5px; font-weight: 500; color: var(--gb-500); }
.kpi .km { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; font-weight: 400; color: var(--gb-500); min-width: 0; }
.kpi .km span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .km .klink {
  border: none; background: none; padding: 0; margin: 0; text-align: left; align-self: flex-start;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--primary-600);
  cursor: pointer; white-space: nowrap;
}
.kpi .km .klink:hover { text-decoration: underline; }
.kpi.hot {
  background: var(--error-bg); border-color: var(--error-bd);
}
.kpi.hot .kv { color: var(--error-tx); }
.kpi.hot .kt { color: var(--error-tx); }

/* Baseline summary block, property tiles, scope chips and the engine digest
   (promoted 2026-10-05 from the business-strategy and redistribution-strategy
   POCs, which carried identical copies; the wholesale-reorder strategy is the
   third page on them). A strategy page opens with one quiet status line, then
   the baseline as a bordered block: header with icon, title, population line
   and Edit; one chip per scope filter; the numbers as small grey tiles. */
.block {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 16px; box-shadow: var(--shadow-soft); min-width: 0;
  display: flex; flex-direction: column;
}
.block .bhead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.block .bhead .t { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.block .bhead .sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.block .bhead .spacer { flex: 1; }
.block-baseline { border-color: var(--primary-200); }
.block-baseline .ic {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: var(--primary-600); color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary);
}
/* One chip per active scope filter, so no dimension hides inside a sentence */
.scope-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.scope-chips .schip-h {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.schip {
  display: inline-flex; align-items: baseline; gap: 5px; max-width: 100%;
  background: var(--gb-25); border: 1px solid var(--border-soft); border-radius: 6px;
  padding: 3px 8px; font-size: 11.5px; font-weight: 500; color: var(--gb-800);
}
.schip .k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); flex: none; }

.prop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.prop-cell { background: var(--gb-25); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px 10px; min-width: 0; }
.prop-cell .plbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.prop-cell .pval { font-size: 14px; font-weight: 600; color: var(--text-strong); margin-top: 2px; white-space: nowrap; }
.prop-cell .psub { font-size: 10.5px; color: var(--muted); margin-top: 1px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Last engine run digest: one quiet line above the baseline block. Status,
   not a card; only the numbers carry weight. */
.engine-digest {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: 2px 2px 10px; font-size: 12.5px; font-weight: 400; color: var(--muted);
}
.engine-digest:empty { display: none; }
.engine-digest .ic { display: inline-flex; color: var(--gb-500); }
.engine-digest .ic svg { width: 13px; height: 13px; }
.engine-digest b { font-weight: 600; color: var(--text-strong); }
.engine-digest .klink {
  border: none; background: none; padding: 0; margin-left: 2px;
  font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--primary-600);
  cursor: pointer; white-space: nowrap;
}
.engine-digest .klink:hover { text-decoration: underline; }

/* The owner line under a rule's name (small avatar + who and where), promoted
   2026-10-05 from the business-strategy and redistribution-strategy POCs. */
.owner {
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 12px; font-weight: 500; letter-spacing: -0.24px; color: var(--gb-600); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 16px;
}
.avatar-sm {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: var(--gb-100); border: 1.5px solid var(--gb-200);
  font-size: 8px; font-weight: 600; color: var(--gb-800);
  display: inline-flex; align-items: center; justify-content: center;
}

/* The sidebar's viewing-context tag ("Workspace") beside the tenant name,
   promoted 2026-10-05 from the business-strategy and redistribution-strategy POCs. */
.sb-ctx {
  flex: none; height: 15px; padding: 0 5px; border-radius: var(--r-sm);
  background: var(--primary-100); color: var(--primary-700);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; line-height: 15px; text-transform: uppercase;
}

/* White table card + header row (FilterHeaderContentLayout + TableToolbar) */
.listcard {
  margin-top: 16px;
  background: #fff; border: 1px solid var(--gb-200); border-radius: var(--r-md);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.04), 0 1px 2px 0 rgba(0,0,0,.02); overflow: hidden;
}
.tbl-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 48px; padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--gb-200); background: #fff;
}
.tbl-head .tbl-title { font-size: 14px; font-weight: 600; color: var(--gb-900); display: inline-flex; align-items: center; gap: 6px; }
.tbl-head .tbl-title .tbl-warn { display: inline-flex; color: var(--yellow-500); }
.tbl-head .tbl-title .tbl-warn svg { display: block; }
.tbl-head .tbl-count { font-size: 13px; font-weight: 400; color: var(--gb-500); }

/* Bulk selection (tables-grids.md): a leading checkbox column and a bulk
   bar in the card header, shown only while something is selected */
.bulkbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 40px; padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--gb-200); background: #fff;
}
.bulkbar .cnt { font-size: 13px; color: var(--gb-600); font-weight: 500; }
.bulkbar input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--primary-600); cursor: pointer; }
.row-check { width: 14px; height: 14px; accent-color: var(--primary-600); cursor: pointer; flex: none; display: block; }

/* Review workspace (product ReplenishmentReview inside FilterHeaderContentLayout):
   one card, a 40px toolbar strip across the top (TableToolbar: the count and
   Bulk actions left, actions right, no title row), then two panes side by
   side with one hairline between them. Each pane scrolls on its own inside
   the card's height; the page sets that height. Below 1120px the panes stack. */
.listcard.split { display: flex; flex-direction: column; min-height: 0; }
.tbl-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none;
  min-height: 40px; padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--gb-200); background: #fff;
}
.tbl-toolbar .cnt { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; color: var(--gb-900); }
.tbl-toolbar .spacer { flex: 1; }
.split-panes {
  display: grid; grid-template-columns: minmax(420px, 40%) minmax(0, 1fr);
  flex: 1; min-height: 0;
}
.split-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.split-pane.lead { border-right: 1px solid var(--gb-100); }
.split-pane .pane-scroll { flex: 1; min-height: 0; overflow: auto; }
@media (max-width: 1120px) {
  .split-panes { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .split-pane.lead { border-right: none; border-bottom: 1px solid var(--gb-100); height: 360px; flex: none; }
  .split-pane:not(.lead) { height: 540px; flex: none; }
}
/* Bulk actions trigger (PlanningBulkActionsDropdown): bulk icon, label, the
   count in the same ink, chevron. 14px medium greyBlue-600, no left padding
   so the icon lines up with the selection column; disabled fades to half. */
.bulk-btn {
  appearance: none; cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 2px 2px 0; border: none; border-radius: 6px; background: transparent;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-600);
  white-space: nowrap; transition: background .15s;
}
.bulk-btn svg { display: block; flex: none; }
.bulk-btn .chev { display: inline-flex; transition: transform .2s; }
.bulk-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bulk-btn:hover { background: var(--gb-50); }
.bulk-btn:active { background: var(--gb-100); }
.bulk-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bulk-btn:disabled { cursor: not-allowed; opacity: .5; background: transparent; }

/* Toolbar + search field with the inline lens */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.searchbox { position: relative; }
.searchbox input[type="search"] {
  width: 200px; height: 32px; padding-left: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239494B7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center;
}

/* Pill tabs (Tabs.tsx variant="pill"): h28 px8 r8, 14px/-0.28; since COD-5104
   inactive text-secondary, active greyBlue-50 / border-divider / text-heading */
.fchip {
  cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500;
  line-height: 14px; letter-spacing: -0.28px;
  height: 28px; padding: 0 8px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.fchip:hover { background: var(--gb-50); color: var(--text-main); }
.fchip.on { background: var(--gb-50); border-color: var(--border-divider); color: var(--text-heading); }
.fchip.on:hover { background: var(--gb-100); border-color: var(--border-control); }
/* The ring shows at once (no transition) and never hides the selected state:
   only an unselected pill turns white under the ring. */
.fchip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fchip:not(.on):focus-visible { background: #fff; }
/* Forced colours (Windows High Contrast) drop box-shadow, so the ring needs an outline there */
@media (forced-colors: active) {
  .fchip:focus-visible, .modal .m-close:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}
.fchip:disabled { cursor: not-allowed; color: var(--gb-300); background: transparent; }
.fchip.on:disabled { background: var(--gb-25); border-color: var(--gb-100); color: var(--gb-400); }
.fchip .n {
  height: 14px; display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500; letter-spacing: -0.2px;
  background: var(--gb-200); color: var(--text-main); border-radius: var(--r-sm); padding: 0 3px; min-width: 14px; justify-content: center;
}
.fchip.on .n { background: var(--gb-200); color: var(--text-main); }
.fchip.hot .n { background: var(--error-bg); color: var(--error-tx); }
.fchip.hot.on {
  background: var(--error-bg); border-color: var(--error-bd); color: var(--error-tx);
}
.fchip.hot.on:hover { background: var(--error-50); border-color: var(--error-bd); color: var(--error-tx); }
.fchip.hot.on .n { background: #fff; color: var(--error-tx); }
.fchip svg { display: block; flex: none; }

/* History / audit-trail cards (history-audit.md) */
.hist { display: flex; flex-direction: column; gap: 16px; }
.hist-day { font-size: 12px; font-weight: 600; letter-spacing: -0.24px; color: var(--gb-600); margin-bottom: 8px; }
.hist-item {
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  padding: 12px; background: var(--gb-25); margin-bottom: 8px;
}
.hist-item:last-child { margin-bottom: 0; }
.hist-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.hist-chg { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hist-was { font-size: 12px; color: var(--muted); font-weight: 400; }
.hist-note { font-size: 12.5px; color: var(--gb-800); font-weight: 400; margin-top: 8px; }

/* Numeric table cells right-align (tables-grids.md) */
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td.num { color: var(--gb-950); font-weight: 500; }

/* Sortable column headers (tables-grids.md): quiet, arrow states the direction.
   The resting arrow is --icon (4.3:1 on white, 3.9:1 on greyBlue-50); a non-text
   control needs 3:1, and greyBlue-400 was only 2.05:1. */
table.data th.sort { cursor: pointer; user-select: none; }
table.data th.sort:hover { color: var(--gb-800); }
table.data th.sort .sort-ic { display: inline-flex; vertical-align: -3px; margin-left: 2px; color: var(--icon); }
table.data th.sort .sort-ic svg { width: 12px; height: 12px; }
table.data th.sort[aria-sort] { color: var(--gb-900); }
table.data th.sort[aria-sort] .sort-ic { color: var(--primary-600); }

/* Group header row inside a data table (View by): title, muted count,
   chevron. Matches the product grouped-list header, table-shaped. */
table.data tr.tr-group td {
  padding: 8px 10px; background: var(--gb-25); cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: -0.26px; color: var(--gb-900);
}
table.data tr.tr-group:hover td { background: var(--gb-50); }
table.data tr.tr-group .tg-row { display: flex; align-items: center; gap: 8px; }
table.data tr.tr-group .tg-check { display: inline-flex; flex: none; }
table.data tr.tr-group .tg-name { font-weight: 600; color: var(--gb-900); min-width: 0; }
table.data tr.tr-group .tg-count { font-weight: 500; color: var(--gb-500); white-space: nowrap; }
table.data tr.tr-group .tg-chev { margin-left: auto; color: var(--gb-500); display: inline-flex; }

/* Review list (the list side of a review workspace, product ReplenishmentReview
   and the Stop list): header 40px 14px regular text-secondary on white, a
   totals row on greyBlue-25 (11px semibold label, 14px semibold numbers),
   rows with a 12px semibold name, an 11px sub line and a 12px underlined
   details link, 14px metrics, the open row on greyBlue-25 (aria-selected).
   Group rows: 40px greyBlue-50, the chevron first (turned when folded),
   12px semibold name and the count in text-secondary, no sums. */
table.data.review-list { border-collapse: separate; border-spacing: 0; }
table.data.review-list thead th {
  height: 40px; padding: 0 10px; background: #fff; vertical-align: middle;
  font-size: 14px; font-weight: 400; letter-spacing: -0.28px; text-transform: none; color: var(--text-secondary);
  border-bottom: none; box-shadow: inset 0 -1px var(--border-divider);
}
table.data.review-list thead th:first-child, table.data.review-list td:first-child { padding-left: 16px; }
table.data.review-list th.sort:hover { color: var(--text-main); }
table.data.review-list th.sort[aria-sort] { color: var(--text-main); }
table.data.review-list tr.totals td {
  height: 40px; padding: 4px 10px; background: var(--gb-25); white-space: nowrap;
  font-size: 11px; font-weight: 600; line-height: 16px; color: var(--text-main);
  border-bottom: none; box-shadow: inset 0 -1px var(--border-divider);
}
table.data.review-list tr.totals td.num { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; }
table.data.review-list td { padding: 8px 10px; border-bottom: 1px solid var(--border-divider); font-size: 12px; color: var(--text-main); }
table.data.review-list td.num { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; color: var(--text-main); }
table.data.review-list td.num b { font-weight: 600; color: var(--text-main); }
table.data.review-list tr[aria-selected="true"] > td,
table.data.review-list tr.rowlink[aria-selected="true"]:hover > td { background: var(--primary-50); }
table.data.review-list .rv-name { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.review-list .rv-sub { font-size: 11px; font-weight: 400; line-height: 16px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data.review-list .rv-link {
  appearance: none; border: none; background: none; padding: 0; cursor: pointer; font-family: var(--font);
  font-size: 12px; font-weight: 500; line-height: 16px; color: var(--primary-600);
  text-decoration: underline; text-underline-offset: 2px;
}
table.data.review-list tr.tr-group td {
  height: 40px; padding: 0 10px; background: var(--gb-50);
  font-size: 12px; letter-spacing: -0.24px; color: var(--text-main);
}
table.data.review-list tr.tr-group:hover td { background: var(--gb-100); }
table.data.review-list tr.tr-group .tg-name { font-weight: 600; color: var(--text-main); }
table.data.review-list tr.tr-group .tg-count { font-weight: 400; color: var(--text-secondary); }
table.data.review-list tr.tr-group .tg-chev { order: -1; margin-left: 0; color: var(--icon); transition: transform .2s; }
table.data.review-list tr.tr-group.closed .tg-chev { transform: rotate(-90deg); }

/* The toolbar right cluster (filters-toolbars.md): search, View, Sort by,
   Filter as one quiet group of ghost buttons with even gaps */
.tb-cluster { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border: none; border-radius: var(--r-md); background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--text-secondary);
  white-space: nowrap;
}
.tb-btn:hover { background: var(--gb-50); color: var(--text-main); }
.tb-btn svg { display: block; }
.tb-btn b { font-weight: 500; color: var(--gb-950); }
.tb-btn .badge-sm { margin-left: 2px; }

/* ---------- The filters drawer (filters-toolbars.md): 320px right panel,
   collapsible sections of field units, apply-based footer ---------- */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(41, 41, 61, .32); display: none;
}
.drawer-overlay.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; z-index: 91;
  background: #fff; box-shadow: -8px 0 24px rgba(41, 41, 61, .14);
  display: flex; flex-direction: column;
}
.dw-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; flex: none; }
.dw-head .dw-title { font-size: 16px; font-weight: 600; letter-spacing: -0.32px; color: var(--gb-950); }
.dw-head .iconbtn { margin-left: auto; }
.dw-body { flex: 1 1 auto; overflow-y: auto; padding: 0 16px 16px; min-height: 0; }
.dw-sec { border-top: 1px solid var(--gb-100); padding: 8px 0; }
.dw-sec:first-child { border-top: none; }
.dw-sec-h {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 0;
  border: none; background: none; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: -0.26px; color: var(--gb-900);
}
.dw-sec-h .chev { margin-left: auto; color: var(--gb-500); display: inline-flex; }
.dw-fields { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px; }
.dw-fields .ff { width: 100%; }
.dw-quick {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--gb-900);
}
.dw-quick .switch { margin-left: auto; }
.dw-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-top: 1px solid var(--gb-100); background: #fff;
}
.dw-foot .dw-clear {
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--error-strong);
}
.dw-foot .dw-clear:hover { text-decoration: underline; }

/* The docked drawer (filters-toolbars.md, "Docked or overlay"): a panel read
   beside the page, --dw-docked-w wide (400px default), under the 49px host
   bar, no veil, below the host bar's menus and the modal veil. The page gives
   way by the drawer's width (body.has-docked-drawer); the host bar keeps the
   full width. Below 1200px (DRAWER_DOCK_MIN in wallie-ui.js) it is the
   overlay drawer at the docked width. No animation, like the overlay. */
.drawer-overlay.docked .drawer { width: var(--dw-docked-w, 400px); max-width: 100vw; }
@media (min-width: 1200px) {
  body:has(> .hostbar) { --dw-docked-top: 49px; }
  body.has-docked-drawer { padding-right: var(--dw-docked-w, 400px); }
  body.has-docked-drawer > .hostbar { margin-right: calc(-1 * var(--dw-docked-w, 400px)); }
  /* toasts land on the page beside the drawer, not over the drawer's own content */
  body.has-docked-drawer #toast-host { right: calc(var(--dw-docked-w, 400px) + 16px); }
  .drawer-overlay.docked { z-index: 45; background: transparent; pointer-events: none; }
  .drawer-overlay.docked .drawer {
    top: var(--dw-docked-top, 0); pointer-events: auto;
    box-shadow: none; border-left: 1px solid var(--gb-200);
  }
}

/* Signed deltas colored by meaning (colors-status.md) */
.tpos { color: var(--teal-tx); }
.tneg { color: var(--error-tx); }

/* Six-tile fact row variant of the metric-tile grid */
.imp-grid.six { grid-template-columns: repeat(6, 1fr); }

/* ============================================================
   03 Components controls (design/patterns/controls.md, source
   design/figma-components-manifest.json): divider, file upload,
   widgets, node brick and card, comments, explanation block,
   page header. Live reference: design/components.html.
   ============================================================ */

/* ---------- Divider (Divider set: line / labelled / button / vertical;
   shades .light (default) greyBlue-200, .mid greyBlue-400, .dark greyBlue-600) */
.divider { display: flex; align-items: center; gap: 8px; --div-c: var(--gb-200); --div-t: var(--gb-500); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--div-c); }
.divider:empty { display: block; height: 1px; background: var(--div-c); }
.divider:empty::before, .divider:empty::after { display: none; }
.divider.mid { --div-c: var(--gb-400); }
.divider.dark { --div-c: var(--gb-600); --div-t: var(--gb-600); }
.divider .lbl { flex: none; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--div-t); }
.divider.left::before { display: none; }
.divider.right::after { display: none; }
.divider-v { display: inline-block; width: 1px; height: 20px; background: var(--gb-200); border-radius: 10px; flex: none; }
.divider-v.mid { background: var(--gb-400); }
.divider-v.dark { background: var(--gb-600); }

/* ---------- File upload (File upload set: dashed-feel drop section +
   file rows with progress) ---------- */
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 8px; border-radius: var(--r-md); text-align: center;
  background: var(--gb-25); border: 1px solid var(--gb-200);
  transition: border-color .12s, background .12s;
}
.upload.drag, .upload:hover { background: var(--gb-50); border: 2px solid var(--primary-400); padding: 15px 7px; }
.upload.dis { background: #fff; border-color: var(--gb-100); }
.upload .up-or { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-800); }
.upload .up-hint { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; color: var(--gb-500); }
.upload.dis .up-or, .upload.dis .up-hint { color: var(--gb-300); }
.file-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px; border-radius: var(--r-md);
  background: var(--gb-25); border: 1px solid var(--gb-200);
}
.file-row svg { flex: none; color: var(--gb-600); }
.file-row .f-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-row .f-name { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-800); line-height: 20px; }
.file-row .f-size { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; color: var(--gb-500); line-height: 16px; }
.file-row.uploading { background: #fff; flex-wrap: wrap; }
.file-row.dis { background: #fff; border-color: var(--gb-100); }
.file-row.dis svg { color: var(--gb-300); }
.file-row.dis .f-name { color: var(--gb-400); }
.file-row.dis .f-size { color: var(--gb-300); }
.file-row .f-prog { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding-left: 30px; }
/* Progress bar (shared primitive: 2px track + fill) */
.prog { flex: 1; height: 2px; border-radius: 8px; background: var(--gb-200); overflow: hidden; }
.prog .fill { height: 100%; border-radius: 8px; background: var(--primary-600); }
.prog-pct { flex: none; font-size: 12px; font-weight: 500; color: var(--gb-600); }

/* ---------- Widget cards (Widget set types 01-05: white r8 card, soft
   triple shadow, 20px number, white delta badge, optional trend area) */
.widget {
  background: #fff; border: 1px solid var(--gb-200); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(61,61,92,.02), 0 4px 4px rgba(61,61,92,.04), 0 12px 20px rgba(61,61,92,.02);
  padding: 16px; min-width: 0;
}
.widget .w-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.widget .w-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 14px; color: var(--gb-950); min-width: 0; }
.widget .w-data { margin-top: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.widget .w-val { font-size: 20px; font-weight: 500; letter-spacing: -0.4px; color: var(--gb-950); white-space: nowrap; }
.widget .w-trend { margin-top: 12px; }
.widget .w-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--gb-600); }

/* ---------- Location overview (product Replenishment Overview > Locations:
   ReplenishmentOverviewLocationsTab, ReplenishmentLocationOverviewCard with
   its header, MetricCard, SmallMetric, sales bar chart and inventory block).
   Sizes from replenishmentLocationOverview.layout.ts: body columns
   minmax(356px,1fr) 17px 204px 17px 426px, metric tile 92px, small tile 64px,
   content 192px. The card list scrolls sideways below the body's 1020px.
   .lov- avoids the backroom-stock POC's local .loc-card. ---------- */
.lov-overview {
  position: relative; background: #fff; border: 1px solid var(--border-divider); border-radius: var(--r-md);
  padding: 16px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.04), 0 1px 2px 0 rgba(0,0,0,.02);
}
.lov-overview > h2 { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.28px; color: var(--text-main); }
.lov-ov-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lov-ov-tile {
  min-height: 64px; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--r-md); background: var(--gb-25); padding: 12px 16px; min-width: 0;
}
.lov-ov-tile .lov-vrow { margin-top: 8px; }
.lov-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); min-width: 0; }
.lov-tile .lov-lbl, .lov-small .lov-lbl { gap: 4px; }
/* A tip inside the label text follows the last word when the label wraps. */
.lov-lbl > span .itip { display: inline-flex; vertical-align: -2px; margin-left: 2px; }
.lov-val { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -0.28px; color: var(--text-main); white-space: nowrap; }
.lov-val.err { color: var(--error-tx); }
.lov-vrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lov-link {
  border: none; background: none; padding: 0; font-family: var(--font); cursor: pointer; white-space: nowrap;
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--primary-600); text-decoration: none;
}
.lov-link:hover { text-decoration: underline; }
.lov-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
@media (max-width: 1279px) { .lov-ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lov-list { display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-x: auto; }
.lov-card {
  min-width: 1052px; border: 1px solid var(--border-divider); background: #fff; border-radius: var(--r-md);
  padding: 16px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.lov-card.sel { border-color: var(--primary-300); background: var(--primary-25); outline: 1px solid var(--primary-300); }
.lov-card.link { cursor: pointer; }
.lov-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 14px; line-height: 20px; min-width: 0; }
.lov-head .lh-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lov-head .lh-name { font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.lov-head a.lh-name:hover { text-decoration: underline; }
.lov-head .lh-meta { flex: none; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.lov-head .lh-sep { flex: none; color: var(--text-secondary); }
.lov-head .lh-right { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; flex: none; }
.lov-head .lh-right .badge svg { width: 14px; height: 14px; }
.lov-head .badge.white.selected svg { color: var(--primary-600); }
.lov-head .menu { top: 26px; min-width: 200px; }
.lov-body { display: grid; grid-template-columns: minmax(356px, 1fr) 17px 204px 17px 426px; min-width: 1020px; min-height: 192px; }
.lov-split { display: flex; justify-content: center; }
.lov-split::before { content: ""; width: 1px; background: var(--gb-100); }
.lov-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lov-tile {
  height: 92px; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--r-md); background: var(--gb-25); padding: 12px; min-width: 0;
}
.lov-small {
  height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  border-radius: var(--r-md); background: var(--gb-25); padding: 12px; min-width: 0;
}
.lov-small .lov-val { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lov-small .badge { width: fit-content; }
.lov-col-h {
  height: 20px; display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 14px; line-height: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--text-heading);
}

/* Bar chart (shared-ui BarChart, default type): blue-600 bars with 2px top
   corners, horizontal divider gridlines, 12px secondary ticks. Bars carry
   data-tip, so the shared ink tooltip shows the value on hover and focus. */
.lov-chart { display: flex; flex-direction: column; gap: 8px; min-height: 192px; min-width: 0; }
.bar-chart { flex: 1; min-height: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 18px; column-gap: 6px; padding: 8px 8px 0 0; }
.bar-chart .bc-y { position: relative; min-width: 28px; }
.bar-chart .bc-y span {
  position: absolute; right: 0; transform: translateY(50%);
  font-size: 12px; line-height: 14px; color: var(--text-secondary); white-space: nowrap;
}
.bar-chart .bc-plot { position: relative; border-bottom: 1px solid var(--border-divider); }
.bar-chart .bc-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border-divider); }
.bar-chart .bc-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.bar-chart .bc-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-chart .bc-slot:hover { background: var(--gb-50); }
.bar-chart .bc-bar { display: block; width: 12px; min-height: 1px; border-radius: 2px 2px 0 0; background: var(--primary-600); }
.bar-chart .bc-slot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bar-chart .bc-x { grid-column: 2; display: flex; padding-top: 2px; }
.bar-chart .bc-x span { flex: 1; text-align: center; font-size: 12px; line-height: 14px; color: var(--text-secondary); }
.bar-chart-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px;
  border: 1px dashed var(--border-divider); border-radius: 6px; background: var(--gb-25);
  font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-secondary);
}

/* Inventory block: utilisation headline, On hand / In transit legend, the
   12px two-segment bar (dimmed when no capacity is set) and 3 x 2 small tiles. */
.lov-inv { display: flex; flex-direction: column; gap: 8px; min-height: 192px; min-width: 0; }
.lov-inv-h { height: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lov-inv-h .lov-col-h { line-height: 20px; }
.lov-inv-h .pct { color: var(--text-secondary); }
.lov-legend { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: -0.24px; color: var(--text-secondary); }
.lov-legend .k { display: inline-flex; align-items: center; gap: 8px; }
.lov-legend b { font-weight: 500; color: var(--text-heading); }
.lov-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.lov-sw.on-hand, .lov-seg.on-hand { background: var(--primary-600); }
.lov-sw.in-transit, .lov-seg.in-transit { background: var(--gb-200); }
.lov-bar { display: flex; align-items: center; gap: 2px; height: 12px; width: 100%; position: relative; }
.lov-bar.unset { opacity: .5; }
.lov-seg { height: 100%; min-width: 0; border-radius: 2px; flex: none; }
.lov-smalls { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* Tile tones and captions (lab proposal, design/GAPS.md item 2d). A breach
   tints the small tile error-25 with error text, a figure to watch yellow-200
   with yellow-700 text, so a column of cards scans by colour. The caption
   right of the value carries the limit in words ("76 above max 300"). */
/* Range bullet: a value against its minimum and maximum. The greyBlue band
   is the allowed range with its edges marked, the bar the value in the
   module accent, error red only when the value is outside the range. */
.bullet { position: relative; height: 12px; border-radius: 2px; background: var(--gb-50); min-width: 48px; }
.bullet .bl-band { position: absolute; top: 0; bottom: 0; background: var(--gb-200); box-shadow: inset 2px 0 var(--gb-500), inset -2px 0 var(--gb-500); }
.bullet .bl-bar { position: absolute; left: 0; top: 4px; height: 4px; border-radius: 2px; background: var(--primary-600); }
.bullet.err .bl-bar { background: var(--error-500); }
/* The quiet bullet: a second figure read beside the leading one, no colour. */
.bullet.quiet .bl-bar, .bullet.quiet.err .bl-bar { background: var(--gb-400); }
.bullet.unset { background: repeating-linear-gradient(90deg, var(--gb-100) 0 4px, transparent 4px 8px); }
/* Trend chip: a small arrow with the change, coloured by meaning (.tpos, .tneg). */
.trend { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; vertical-align: 1px; }
.trend svg { width: 12px; height: 12px; }

/* Several status badges in the card head (units, and options when they deviate). */
.lov-head .lh-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ============================================================
   Prototype variant switcher (lab chrome, not product design; GAPS item 20).
   A fixed ink pill at the bottom centre: the POC tag, arrows that wrap, the
   variant key, its name and the counter. High contrast and a shadow so it
   reads as lab chrome, not as part of the screen under review. Rendered by
   WallieUI.variantBar; first used by stock-below-minimum.
   ============================================================ */
.variant-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px;
  background: var(--ink); color: #fff; border-radius: 18px; box-shadow: var(--shadow-dark);
  font-size: 12.5px; letter-spacing: -0.25px; user-select: none;
}
.variant-bar[hidden] { display: none; }
.variant-bar .poc-tag { background: #fff; color: var(--ink); border-color: transparent; }
.variant-bar .vb-arrow {
  width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.variant-bar .vb-arrow:hover { background: rgba(255, 255, 255, .14); }
.variant-bar .vb-arrow:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary-400); }
.variant-bar .vb-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-width: 170px; justify-content: center; }
.variant-bar .vb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gb-500); }
.variant-bar .vb-n { font-weight: 400; color: var(--gb-400); }

/* Disabled menu item (ActionsMenu disabled action) */
.menu button:not(.switch):disabled { color: var(--text-disabled); cursor: not-allowed; background: transparent; }

/* ---------- Node brick (Structure builder rows: 320x44 shell with an
   inner input and 32px icon buttons) ---------- */
.brick {
  display: flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--gb-200); box-shadow: var(--shadow-soft);
}
.brick.category { background: var(--gb-50); }
.brick:hover { background: var(--gb-25); }
.brick.category:hover { background: var(--gb-100); }
.brick .b-in { flex: 1; min-width: 0; }
.brick .b-btn {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-md); border: none;
  background: transparent; color: var(--gb-600); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.brick .b-btn:hover { background: var(--gb-100); color: var(--gb-800); }
.brick.active .b-in input, .brick.active .b-in .inbox { border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400); }
.brick.err { border-color: var(--error-300); }

/* ---------- Node card (Node card set: 220px white r12 card, data rows,
   badge + avatar footer, attach button, active periwinkle ring) ---------- */
.ncard {
  position: relative; width: 220px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--gb-200); box-shadow: var(--shadow-card);
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.ncard.active { border: 2px solid var(--primary-400); padding: 15px; }
.ncard .nc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ncard .nc-kind { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 14px; color: var(--gb-600); display: flex; align-items: center; gap: 4px; }
.ncard .nc-title { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 14px; color: var(--gb-950); padding: 4px 0; }
.ncard .nc-rows { display: flex; flex-direction: column; gap: 8px; }
.ncard .nc-row { display: flex; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 500; line-height: 12px; letter-spacing: -0.24px; }
.ncard .nc-row .k { color: var(--gb-600); }
.ncard .nc-row .v { color: var(--gb-900); margin-left: auto; font-variant-numeric: tabular-nums; }
.ncard .nc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ncard .nc-attach {
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gb-200);
  background: #fff; box-shadow: var(--shadow-soft); color: var(--gb-600); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ncard .nc-attach:hover { color: var(--gb-800); border-color: var(--gb-300); }

/* ---------- Comments panel (Comments set: 352px white r12 card, comment
   list, composer with send button) ---------- */
.companel {
  width: 352px; max-width: 100%; border-radius: var(--r-lg);
  background: #fff; border: 1px solid rgba(0, 0, 0, .05); box-shadow: var(--shadow-card);
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
}
.companel .cp-head { display: flex; flex-direction: column; gap: 8px; }
.companel .cp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.companel .cp-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 14px; color: var(--gb-600); }
.companel .cp-ctx { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 16px; color: var(--gb-900); }
.companel .cp-ctx svg { color: var(--gb-800); }
.companel .cp-ctx .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gb-500); }
.comment { display: flex; flex-direction: column; gap: 8px; }
.comment .c-head { display: flex; align-items: center; gap: 8px; }
.comment .c-who { flex: 1; min-width: 0; line-height: 1.3; }
.comment .c-name { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.28px; color: var(--gb-950); }
.comment .c-when { display: block; font-size: 12px; font-weight: 400; letter-spacing: -0.24px; color: var(--gb-600); }
.comment .c-body { font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 20px; color: #000; }
.comment .c-body .mention { color: var(--primary-600); }
.cmt-input {
  border: 1px solid var(--gb-200); border-radius: var(--r-md); box-shadow: var(--shadow-soft);
  padding: 8px; display: flex; flex-direction: column; gap: 16px;
}
.cmt-input:focus-within { border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400); }
.cmt-input textarea, .cmt-input .cmt-text {
  border: none; box-shadow: none; padding: 0; resize: none; min-height: 20px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.28px; line-height: 20px; color: #000;
}
.cmt-input textarea:focus { border: none; box-shadow: none; }
.cmt-input .cmt-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmt-input .cmt-fmt { display: flex; align-items: center; gap: 8px; }
.cmt-input .cmt-send {
  width: 28px; height: 28px; border-radius: var(--r-md); border: none; cursor: pointer;
  background: var(--primary-200); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmt-input .cmt-send.ready { background: var(--primary-600); border: 1px solid var(--primary-800); box-shadow: var(--shadow-primary); }

/* ---------- Explanation block (Explanation component: dark presentation
   panel that introduces a page or module in plain language) ---------- */
.explainer {
  background: #2B2B2B; border-radius: 16px; padding: 40px;
  color: #fff; display: flex; flex-direction: column; gap: 40px;
}
.explainer .xp-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 40px;
  background: rgba(128, 145, 255, .05); border: 1px solid rgba(128, 145, 255, .20);
  color: #8091FF; font-size: 14px; font-weight: 500;
}
.explainer .xp-title { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: #fff; margin: 0; }
.explainer .xp-body { font-size: 16px; font-weight: 400; line-height: 1.55; color: rgba(255, 255, 255, .80); max-width: 72ch; }
.explainer a { color: #8091FF; }

/* ---------- Assortment planning background (bg pattern component):
   quiet dot grid for builder canvases ---------- */
.plan-bg {
  background-color: var(--gb-25);
  background-image: radial-gradient(var(--gb-300) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

/* ---------- Feedback pins (in-POC stakeholder notes: numbered pins on
   the page, a Feedback drawer with the list, threads and sign-off;
   behavior in wallie-ui.js, runbook docs/live-feedback.md) ---------- */
/* Above the sticky filter and info bars (40-45) so a pin on a toolbar
   control stays visible; below the host bar (50) and every overlay. */
#fb-pins { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 46; }
/* A pin is the author's initials on Pink/700, the one tone no POC surface
   uses (grey-blue chrome, blue actions, yellow warnings, red errors, teal
   positives), so pins are findable at a glance and never mistaken for the
   prototype's own UI. The teardrop corner keeps it reading as a marker. */
.fb-pin {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0;
  border-radius: 50% 50% 50% 4px;
  background: var(--pink-700); color: #fff; border: 1.5px solid #fff;
  box-shadow: var(--shadow-card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0;
  transition: transform .12s ease;
}
.fb-pin:hover { transform: scale(1.12); }
.fb-pin:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-pin.on { background: var(--gb-950); color: #fff; }
.fb-pin.pend { background: var(--gb-600); color: #fff; }
body.fb-placing, body.fb-placing * { cursor: crosshair !important; }
#fb-hintbar {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 95;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  background: var(--ink); color: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-dark);
  font-size: 13px; font-weight: 500; letter-spacing: -0.26px;
}
#fb-hintbar svg { flex: none; }
#fb-hintbar .btn.ghost { color: var(--gb-400); }
#fb-hintbar .btn.ghost:hover { color: #fff; }
.fb-flash { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: var(--r-sm); }
#drawer-overlay.fb { background: transparent; }
.dw-head #fb-back { margin-left: 0; }
.dw-head .fb-hact { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.dw-head .fb-hact .iconbtn { margin-left: 0; }
.fb-tools { display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; flex: none; }
.fb-tools .fb-showpins {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--gb-900);
}
.fb-filter { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 0 16px 10px; flex: none; }
.fb-list { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.fb-row {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  border: 1px solid transparent; border-radius: var(--r-md); background: none; cursor: pointer;
  padding: 8px; font-family: var(--font);
}
.fb-row:hover { background: var(--gb-25); border-color: var(--gb-100); }
.fb-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-num {
  flex: none; width: 20px; height: 20px; border-radius: 50% 50% 50% 4px; margin-top: 1px;
  background: var(--pink-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.fb-num.done { background: var(--gb-100); color: var(--gb-600); }
.fb-num.done.ok { background: var(--teal-bg); color: var(--teal-tx); }
.fb-num.done svg { width: 12px; height: 12px; display: block; }
.fb-divider {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 0 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gb-500);
}
.fb-divider::after { content: ""; flex: 1; height: 1px; background: var(--gb-100); }
.fb-rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fb-rctx {
  font-size: 12px; letter-spacing: -0.24px; color: var(--gb-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-rex {
  font-size: 13px; font-weight: 500; letter-spacing: -0.26px; line-height: 1.35; color: var(--gb-950);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Signed-off rows stay listed, just quieter than the open ones */
.fb-row.done .fb-rex { color: var(--gb-600); }
.fb-row.done .fb-rctx { color: var(--gb-500); }
.fb-rmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--gb-600); }
.fb-rmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gb-400); flex: none; }
.fb-empty { color: var(--muted); font-size: 13px; line-height: 1.45; padding: 14px 4px; }
.fb-thread { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.fb-ctx {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 1px solid var(--gb-100); background: var(--gb-25); border-radius: var(--r-md);
  padding: 7px 10px; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: 500; letter-spacing: -0.26px; color: var(--gb-900);
}
.fb-ctx svg { color: var(--gb-600); flex: none; }
.fb-ctx span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-ctx:hover:not(:disabled):not(.static) { border-color: var(--gb-200); background: var(--gb-50); }
.fb-ctx:disabled { cursor: not-allowed; color: var(--gb-500); }
.fb-ctx.static { cursor: default; }
.fb-detached { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gb-600); }
.fb-detached svg { color: var(--yellow-500); flex: none; }
.fb-signed { font-size: 12.5px; color: var(--gb-600); border-top: 1px solid var(--gb-100); padding-top: 10px; }
.fb-signed .fb-signnote { display: block; margin-top: 4px; color: var(--gb-800); }
.fb-hint { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.fb-foot { flex-wrap: wrap; }
.fb-foot .fb-confirm { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fb-foot .fb-confirm input { width: 100%; }
.fb-lab-note { font-size: 12px; line-height: 1.45; letter-spacing: -0.24px; color: var(--muted); }
.cmt-input.drag { background: var(--gb-50); border-color: var(--primary-400); box-shadow: 0 0 0 1px var(--primary-400); }
.fb-files { display: flex; flex-direction: column; gap: 8px; }
.fb-files .file-row { text-decoration: none; color: inherit; cursor: pointer; }
.fb-files .fb-mini {
  width: 28px; height: 28px; border-radius: 4px; object-fit: cover; flex: none;
  border: 1px solid var(--gb-200); background: var(--gb-50);
}
.fb-shot-link { display: block; border-radius: var(--r-md); }
.fb-shot-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fb-shot {
  display: block; width: 100%; max-height: 160px; object-fit: cover; object-position: top left;
  border-radius: var(--r-md); border: 1px solid var(--gb-200); background: var(--gb-25);
}

/* ---------- Utilities ---------- */
.flex { display: flex; align-items: center; gap: 8px; }
.wrap { flex-wrap: wrap; }
.right { margin-left: auto; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.hr { border: none; border-top: 1px solid var(--border-soft); margin: 14px 0; }
.hidden { display: none !important; }