/* Sparkle Ops Portal. Design: Sparkle Design System (tokens in /static/ds, self-hosted Montserrat).
   Rules kept from the system: pill actions, 24px soft cards with warm shadows and no borders or coloured left-edge accents,
   4px green focus ring, quick ease-out motion, the signature gradient only on brand moments, warm neutrals. The system defines
   no dark theme; ours (html[data-theme="dark"], set in base.html) redefines the same primitives as warm near-black surfaces. */
@import url('ds/styles.css');
@import url('data-font.css');

:root {
  /* the Account Monitor's red/blue (not in the system; used only for danger and info states) */
  --red-600: #C23A30; --red-700: #A32F26; --red-100: #FBE8E6;
  --blue-600: #3B6FB8; --blue-100: #EAF1FB;

  /* app-level aliases (stable names used by the monitor's views and the portal templates) */
  --color-bg: var(--paper); --color-surface: var(--paper-2); --color-surface-alt: var(--paper-3); --color-border: var(--ink-10);
  --color-text: var(--ink); --color-text-muted: #4F4C4D; --color-text-faint: #615E5F; /* darkened from the system's ink-60/ink-40 for legibility (about 8:1 and 6.4:1 on white) */
  --color-primary: var(--sparkle-green); --color-primary-dark: var(--green-700); --color-primary-tint: var(--green-100);
  --color-accent: var(--sparkle-orange); --color-accent-dark: var(--orange-600); --color-accent-tint: var(--orange-100);
  --color-danger: var(--red-600); --color-danger-dark: var(--red-700); --color-danger-tint: var(--red-100);
  --color-info: var(--blue-600); --color-info-tint: var(--blue-100);
  --font-sans: var(--font-body);
  --font-data: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sidebar-w: 248px; --topbar-h: 68px;

  /* chart series (categorical) and status colours, expressed in brand colours */
  --s1: #46B839; --s2: #FF6900; --s3: #14233B; --s4: #FFC845; --s5: #7FB800; --s6: #757273; --s7: #3B6FB8; --s8: #C23A30;
  --good: #46B839; --warn: #FFC845; --serious: #FF6900; --crit: #C23A30;
  --good-ink: #2F8A28; --warn-ink: #8A6A00; --serious-ink: #C24F00; --crit-ink: #A32F26;
  --good-bg: #E7F6E3; --warn-bg: #FFF1D6; --serious-bg: #FFE7D6; --crit-bg: #FBE8E6;

  /* legacy names still referenced by templates and app.js */
  --plane: var(--paper-2); --surface: var(--paper); --surface-2: var(--paper-3);
  --ink-2: var(--ink-80); --muted: var(--color-text-muted); --grid: var(--ink-10); --axis: var(--ink-20); --border: var(--ink-10);
  --accent: var(--sparkle-green); --accent-ink: var(--ink);

  /* a few surfaces that need their own value per theme */
  --topbar-bg: rgba(250, 250, 248, 0.86);
  --banner-ink: #6B5300;
  --focus-ring-shadow: var(--green-100);
  --lane-bg: rgba(0, 0, 0, .03);
}

/* Dark theme: the same primitives, flipped. A true-black page with near-black cards and pure-white text; brand colours keep their hue but text-grade shades are
   lifted for contrast on dark, and tints become deep washes. Brand fills (buttons, bars) keep dark ink on top. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #FFFFFF; --ink-80: #F2F2F2; --ink-60: #B8B8B8; --ink-40: #8A8A8A; --ink-20: #3D3D3D; --ink-10: #262626;
  --paper: #0F0F0F; --paper-2: #000000; --paper-3: #1A1A1A;
  --color-text-muted: #D6D6D6; --color-text-faint: #ADADAD;
  --text-on-brand: #221F20; --text-on-dark: #FFFFFF;

  --green-700: #7FD873; --green-600: #5BC94E; --green-100: #1E3A1B; --green-50: #18291A;
  --lime-600: #A6E033; --lime-100: #2C3612;
  --orange-600: #FF9A52; --orange-100: #3F2412;
  --beige-100: #3A2F14;
  --red-600: #E8695F; --red-700: #F49088; --red-100: #3E1D1A;
  --blue-600: #7DA9EA; --blue-100: #1A2A42;

  --s3: #9DB2D3; --s6: #B8B8B8; --s7: #7DA9EA; --s8: #E8695F;
  --crit: #E8695F;
  --good-ink: #7FD873; --warn-ink: #E9C55E; --serious-ink: #FF9A52; --crit-ink: #F49088;
  --good-bg: #1E3A1B; --warn-bg: #3A2F14; --serious-bg: #3F2412; --crit-bg: #3E1D1A;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-brand: 0 8px 22px rgba(70,184,57,0.18);

  --topbar-bg: rgba(0, 0, 0, 0.86);
  --banner-ink: #EBCB72;
  --focus-ring-shadow: rgba(91, 201, 78, 0.45);
  --lane-bg: rgba(255, 255, 255, .03);
}

/* Dark theme: text sitting on a red, orange or amber highlight is white (the tints are deep washes, so coloured text
   on them reads muddy). Standalone red/orange text (deltas, SLA labels) keeps its colour. */
:root[data-theme="dark"] :is(.env-badge, .status-pill[data-tone=crit], .badge-orange, .badge-red, .icon-btn:hover,
  .chip.warn, .chip.serious, .chip.crit, .sw.off, .banner, .err, .secret, .rs-msg.error, .rs-msg.draft, .ui-delta.bad,
  .fnx-gap.big, .help-doc .admonition.warning, .help-doc .admonition.danger, .help-drawer-cav) { color: #FFFFFF; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring-shadow);
  border-radius: var(--radius-sm);
}

/* ---------- App shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 22px 20px;
}

.sidebar-brand .mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
}

.sidebar-brand .name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.sidebar-brand .sub {
  font-size: 11px;
  color: var(--color-text-muted);
  display: block;
  margin-top: 1px;
  font-weight: 500;
}

.nav {
  padding: 4px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-item:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.nav-item.active {
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.nav-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 22px;
  border-top: 1px solid var(--color-border);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-faint);
}

.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.topbar-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topbar-title .subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.content {
  padding: 28px;
  flex: 1;
}

/* ---------- Buttons / inputs ---------- */
.btn {
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}

.btn:hover { background: var(--color-surface); }
.btn:active { transform: scale(0.96); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: var(--green-600, #3DA231); }

.select, .input {
  border: 1.5px solid var(--ink-20);
  background: var(--color-bg);
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.select:focus, .input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--green-100);
}

.input::placeholder { color: var(--color-text-faint); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.toggle input { accent-color: var(--color-primary); }

/* ---------- Cards / KPIs ---------- */
.grid {
  display: grid;
  gap: 16px;
}

.kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 20px;
}

.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}

.kpi-card .kpi-label {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kpi-card .kpi-value {
  font-size: 26px;
  font-weight: 800;
  margin-top: 8px;
  letter-spacing: -0.01em;
}

.kpi-card .kpi-sub {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 4px;
  font-weight: 500;
}

.kpi-card.accent .kpi-value { color: var(--color-primary-dark); }
.kpi-card.warn .kpi-value { color: var(--color-accent-dark); }
.kpi-card.danger .kpi-value { color: var(--color-danger-dark); }

.kpi-card.clickable {
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kpi-card.clickable:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.kpi-card.clickable .kpi-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kpi-card.clickable .kpi-label::after {
  content: "→";
  font-size: 12px;
  color: var(--color-text-faint);
  font-weight: 700;
}

.panel-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: -0.01em;
}

.panel-title .link { font-size: 12.5px; font-weight: 700; color: var(--color-primary-dark); text-decoration: none; }

.two-col {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 1000px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-green { background: var(--color-primary-tint); color: var(--color-primary-dark); }
.badge-orange { background: var(--color-accent-tint); color: var(--color-accent-dark); }
.badge-red { background: var(--color-danger-tint); color: var(--color-danger-dark); }
.badge-gray { background: var(--ink-10); color: var(--ink-80); }
.badge-blue { background: var(--color-info-tint); color: var(--color-info); }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  min-width: 720px;
}

thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 700;
  padding: 13px 18px;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s ease; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--color-surface); }

.cell-mono { font-variant-numeric: tabular-nums; font-family: "SFMono-Regular", Consolas, monospace; font-size: 12.5px; }
.cell-muted { color: var(--color-text-muted); }
.cell-strong { font-weight: 700; }

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
}

.filter-chip button {
  border: none;
  background: none;
  color: inherit;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  opacity: 0.7;
}
.filter-chip button:hover { opacity: 1; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.pagination .controls { display: flex; gap: 6px; align-items: center; }

/* ---------- States ---------- */
.empty-state, .loading-state, .error-state {
  padding: 48px 16px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.error-state { color: var(--color-danger-dark); }

.spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--color-surface-alt);
  border-top-color: var(--color-primary);
  animation: spin 0.7s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Charts ---------- */
.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 10px;
  flex-wrap: wrap;
}

.chart-legend .item { display: flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 9px; height: 9px; border-radius: 3px; }

svg.chart text { font-family: var(--font-sans); fill: var(--color-text-muted); }
svg.chart .gridline { stroke: var(--color-border); stroke-width: 1; }
svg.chart .tooltip-dot { fill: var(--color-bg); stroke-width: 2; }

.heatmap-table { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.heatmap-table thead th {
  font-size: 10.5px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px; background: none; border: none;
}
.heatmap-row-label {
  font-size: 12px; font-weight: 600; color: var(--color-text); white-space: nowrap;
  padding: 4px 10px 4px 0; text-align: right;
}
.heatmap-cell {
  width: 44px; height: 30px; text-align: center; border-radius: 8px;
  font-weight: 700; font-variant-numeric: tabular-nums; cursor: default;
}
.heatmap-cell-empty { background: var(--color-surface-alt); }

/* ---------- Tabs (segmented control) ---------- */
.tab-bar {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.tab-item {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tab-item:hover { color: var(--color-text); }
.tab-item.active { color: var(--text-on-brand); background: var(--color-primary); box-shadow: var(--shadow-sm); }
.as-of-stamp { font-size: 11.5px; color: var(--color-text-faint); }

/* ---------- Anomaly / detail ---------- */
.severity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.anomaly-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 16px 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.anomaly-card:hover { box-shadow: var(--shadow-md); }

.anomaly-card .rule-name { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.anomaly-card .description { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }
.anomaly-card .meta { display: flex; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--color-text-faint); }
.anomaly-card .amount { font-weight: 800; font-size: 15px; white-space: nowrap; }

/* ---------- Modal / drawer ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(34, 31, 32, 0.4);
  display: flex;
  justify-content: flex-end;
  z-index: 100;
}

.drawer {
  width: min(480px, 92vw);
  height: 100%;
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  padding: 26px;
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.drawer-close {
  border: none;
  background: var(--color-surface);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.drawer-close:hover { background: var(--ink-10); }

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  gap: 12px;
}

.detail-row .k { color: var(--color-text-muted); }
.detail-row .v { text-align: right; font-weight: 600; word-break: break-word; }

.section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  font-weight: 700;
  margin: 20px 0 6px;
}

/* ---------- Forms (drawer schedule form, etc.) ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-field label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.form-field .select, .form-field .input { width: 100%; }
.form-row { display: flex; gap: 10px; }
.form-row .form-field { flex: 1; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }
.form-error { color: var(--color-danger-dark); font-size: 12.5px; margin-top: 8px; min-height: 16px; font-weight: 600; }

.recipient-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.recipient-row .input { flex: 1; }
.recipient-row .select { width: 90px; }
.icon-btn {
  border: 1.5px solid var(--ink-20);
  background: var(--color-bg);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 13px;
  line-height: 1;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-danger-tint); color: var(--color-danger-dark); border-color: transparent; }

.schedule-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.schedule-card:last-child { border-bottom: none; }
.schedule-card .meta { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.schedule-card .actions { display: flex; gap: 6px; flex-shrink: 0; }
.schedule-card .actions .btn { padding: 7px 12px; font-size: 12px; }

/* ======================================================================================================================
   Portal components (same vocabulary and tokens as the monitor's CSS above)
   ====================================================================================================================== */
h1 { font-size: 18px; margin: 0; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
h2 { font-size: 15px; margin: 0; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 10.5px; margin: 20px 0 8px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.topbar h1 { font-size: 18px; }
.topbar .sub, .topbar-title .subtitle { font-size: 12px; font-weight: 500; color: var(--color-text-muted); margin: 3px 0 0; line-height: 1.4; max-width: 70ch; }
.topbar { min-height: var(--topbar-h); height: auto; padding-top: 12px; padding-bottom: 12px; gap: 16px; }
.topbar-title { min-width: 0; }
.muted { color: var(--color-text-muted); } .small { font-size: 12px; } .right { text-align: right; } .nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
a { color: var(--green-700); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; }
.nav-item:hover, .btn:hover, .tab-item:hover, a.btn:hover, .sidebar-brand:hover, .foot-link:hover { text-decoration: none; }
.sub { color: var(--color-text-muted); margin: 0 0 20px; }

/* sidebar: scrollable nav, internal navigation of the Virtual accounts section, user footer */
.sidebar { overflow: hidden; }
.nav { flex: 1; overflow-y: auto; min-height: 0; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 18px; padding-left: 10px; border-left: 2px solid var(--ink-10); }
.nav-item.subitem { padding: 8px 12px; font-size: 12.5px; }
.nav-item.subitem .icon { width: 16px; height: 16px; }
.nav-item.subitem.active { background: var(--green-100); color: var(--green-700); }
.sidebar-footer { display: flex; flex-direction: column; gap: 10px; font-size: 12px; color: var(--color-text-muted); }
.sidebar-footer .foot-link { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-weight: 600; }
.sidebar-footer .foot-link .icon { width: 16px; height: 16px; }
.sidebar-footer .who { display: flex; flex-direction: column; line-height: 1.35; }
.sidebar-footer .who strong { color: var(--ink); font-weight: 700; word-break: break-all; }
.btn-sm { padding: 6px 14px; font-size: 12px; }
.main { overflow-x: clip; }
.content { max-width: 1680px; }
@media (max-width: 860px) {
  .sidebar { position: static; width: auto; bottom: auto; }
  .app-shell { flex-direction: column; } .main { margin-left: 0; } .nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .nav-sub { margin-left: 0; flex-direction: row; flex-wrap: wrap; border-left: 0; padding-left: 0; }
}

/* layout */
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-bottom: 16px; }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.grid.kpi-grid { margin-bottom: 20px; }
.grid.two-col { margin-bottom: 0; }
.span-all { grid-column: 1 / -1; }
.card { min-width: 0; }
.card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.card > header h2 { font-size: 15px; }
.card .note, .note { color: var(--color-text-faint); font-size: 12px; margin-top: 12px; font-weight: 500; line-height: 1.5; }
.panel-meta { color: var(--color-text-faint); font-size: 11.5px; white-space: nowrap; font-weight: 500; }
.panel-meta.stale::before { content: "● "; color: var(--sparkle-beige); }
section.card { margin-bottom: 16px; } .grid > section.card, .grid > .card { margin-bottom: 0; }

/* tiles = the monitor's KPI cards */
.tile { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; min-width: 0; }
.tile .lbl { font-size: 11px; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tile .val { font-size: 24px; font-weight: 800; margin-top: 8px; letter-spacing: -0.01em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile .sub2 { font-size: 12px; color: var(--color-text-faint); margin-top: 4px; font-weight: 500; }
.up { color: var(--green-700); } .down { color: var(--red-700); } .flat { color: var(--color-text-muted); }
.tile .sub2.up, .tile .sub2.down { font-weight: 700; }
.tile .sub2.up { color: var(--good-ink); } .tile .sub2.down { color: var(--crit-ink); }
.tile .sub2.up .muted, .tile .sub2.down .muted { color: var(--color-text-faint); font-weight: 500; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table.tbl { min-width: 0; font-variant-numeric: tabular-nums; }
.tbl th { padding: 11px 14px; font-size: 10.5px; }
.tbl td { padding: 11px 14px; white-space: normal; vertical-align: top; }
.tbl td.num, .tbl th.num, td.num, th.num { text-align: right; }
.tbl tbody tr:hover td { background: var(--paper-2); }
.card > .tbl-wrap, .card > table.tbl { margin: 0 -22px; width: calc(100% + 44px); }
.card > .tbl-wrap > table.tbl { }
.tbl .inline-bar { display: inline-block; height: 8px; border-radius: 4px; background: var(--sparkle-green); vertical-align: middle; margin-right: 6px; min-width: 1px; }

/* status chips: icon + label, never colour alone */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; letter-spacing: 0.01em; }
.chip.good { background: var(--green-100); color: var(--green-700); } .chip.warn { background: var(--beige-100); color: var(--warn-ink); }
.chip.serious { background: var(--orange-100); color: var(--orange-600); } .chip.crit { background: var(--red-100); color: var(--red-700); }
.chip.neutral { background: var(--ink-10); color: var(--ink-80); }
.switchrow { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { display: inline-flex; gap: 6px; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--green-100); color: var(--green-700); font-size: 12px; font-weight: 700; }
.sw.off { background: var(--red-100); color: var(--red-700); }

/* buttons and forms: the system's pill actions */
.btn-primary { font-weight: 700; }
button.btn-primary:hover, a.btn-primary:hover { background: var(--green-600); }
a.btn { text-decoration: none; }
.btn { font-family: var(--font-body); }
.search { display: flex; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; align-items: center; }
.search input[type=text], .search input[type=search], .search select, .filters input, .filters select, .login input {
  border: 1.5px solid var(--ink-20); background: var(--paper); padding: 10px 14px; border-radius: var(--radius-md); font: inherit; font-size: 13px; color: var(--ink); max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.search input[type=text], .search input[type=search] { flex: 1 1 320px; max-width: 560px; }
.search input:focus, .search select:focus, .filters input:focus, .filters select:focus, .login input:focus { outline: none; border-color: var(--sparkle-green); box-shadow: 0 0 0 4px var(--green-100); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.search input::placeholder, .filters input::placeholder { color: var(--color-text-faint); }
input:focus-visible, button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--green-100); border-radius: var(--radius-sm); }

/* misc */
.empty { color: var(--color-text-muted); padding: 16px 4px; font-size: 13px; }
.skeleton { height: 120px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--paper-3), var(--ink-10), var(--paper-3)); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.htmx-request .skeleton { opacity: .6; }
.chartbox { position: relative; height: 230px; } .chartbox.tall { height: 300px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: 13px; }
.kv dt { color: var(--color-text-muted); font-weight: 600; } .kv dd { margin: 0; font-weight: 500; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink-20); }
.timeline li { position: relative; padding: 4px 0 12px 18px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--sparkle-green); border: 2px solid var(--paper); }
.timeline li.Ledger::before { background: var(--s3); } .timeline li.Mirror::before { background: var(--sparkle-beige); }
.checks { list-style: none; margin: 0; padding: 0; } .checks li { padding: 4px 0; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 500; color: var(--color-text-muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.banner { padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: 16px; background: var(--beige-100); color: var(--banner-ink); font-size: 13px; font-weight: 500; }
.banner.crit { background: var(--red-100); color: var(--red-700); }
.err { color: var(--red-700); background: var(--red-100); padding: 10px 14px; border-radius: var(--radius-md); margin-top: 12px; font-size: 13px; font-weight: 600; }
details summary { cursor: pointer; color: var(--ink-80); font-size: 13px; font-weight: 600; }
.pagehead { margin-bottom: 16px; }

/* caveats */
details.caveats { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 20px; margin: 20px 0 0; }
details.caveats summary { font-weight: 700; color: var(--ink-80); }
details.caveats ul { list-style: none; padding: 0; margin: 12px 0 0; } details.caveats li { padding: 12px 0; border-top: 1px solid var(--ink-10); font-size: 13px; }

/* sign-in (the system's brand moment: gradient mark, xl-radius card, green-glow primary action) */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(1100px 520px at 85% -10%, rgba(151,215,0,.16), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(255,105,0,.10), transparent 60%), var(--paper-2); }
.login { width: 100%; max-width: 400px; margin: 0; }
.login .login-card { background: var(--paper); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 40px 36px; }
.login .mark { display: block; margin: 0 auto 18px; filter: drop-shadow(0 8px 18px rgba(70,184,57,.30)); }
.login h1 { font-size: 20px; text-align: center; margin-bottom: 4px; }
.login .sub { text-align: center; font-size: 13px; margin-bottom: 24px; }
.login label { display: block; margin: 14px 0 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.login input { width: 100%; height: 48px; }
.login .btn-primary { width: 100%; justify-content: center; height: 48px; margin-top: 20px; font-size: 14px; }
.login .gradient-bar { height: 4px; border-radius: 999px; background: var(--gradient-sparkle); margin: 28px 0 0; }

@media print { .sidebar, .search, .topbar-actions { display: none; } .main { margin-left: 0; } body { background: #fff; } }

/* hierarchy: a KPI tile that sits inside a card is flat, so cards keep the only shadow */
.card .tile { box-shadow: none; background: var(--paper-2); }

/* ======================================================================================================================
   Data typeface. Montserrat stays on headings, navigation, KPI figures, buttons and badges (brand moments). Dense data (table
   cells, key/value lists, detail rows, chart labels) is set in Inter: narrower, so more fits per column, with tabular figures so money
   and counts line up. Identifiers (references, session IDs, account numbers) stay monospace.
   ====================================================================================================================== */
table, .tbl, .kv, .detail-row, .heatmap-table, .pagination, .schedule-card .meta, .anomaly-card .description, .anomaly-card .meta, .legend,
.filters input, .filters select, .search input, .search select, .select, .input, .note, .panel-meta, .chart-legend, .empty {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
thead th { font-family: var(--font-body); }                       /* column headings keep the brand face */
.cell-mono:not(.cell-muted) { font-family: var(--font-data); font-size: 13px; }   /* amounts and balances */
.cell-mono.cell-muted, .mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }   /* identifiers */
.tile .val, .kpi-card .kpi-value { font-variant-numeric: tabular-nums; }          /* KPI figures stay Montserrat 800 */
svg.chart text { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.tbl td, tbody td { font-size: 13px; }

/* the monitor's amount/search boxes were sized for a narrower face and clip their placeholders at 14px padding */
#f-min, #f-max { width: 136px !important; }
#f-q { width: 300px !important; }

/* ======================================================================================================================
   Dispute automation (rule editor, simulator, review)
   ====================================================================================================================== */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.editor-side { position: sticky; top: 84px; }
@media (max-width: 1100px) { .editor-layout { grid-template-columns: 1fr; } .editor-side { position: static; } }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.fld .input, .fld .select, textarea.input { width: 100%; font-family: var(--font-data); font-size: 13px; font-weight: 500; color: var(--ink); }
textarea.input { resize: vertical; line-height: 1.5; }
.fld.wide { grid-column: 1 / -1; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.decision { background: var(--paper-2); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; }
.decision.otherwise { background: var(--paper-3); }
.dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dname { flex: 1; font-weight: 700; }
.dbtns { display: inline-flex; gap: 4px; }
.cond { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.cond .select, .cond .input { flex: 1 1 140px; min-width: 0; }
.when { margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; align-items: center; }
button.chip { border: 0; cursor: pointer; font-family: var(--font-data); }
button.chip:hover { background: var(--green-100); color: var(--green-700); }
.exrow { position: relative; padding: 12px 40px 4px 0; border-bottom: 1px solid var(--ink-10); margin-bottom: 8px; }
.exrow .icon-btn { position: absolute; right: 0; top: 12px; }
.checks.inline { display: flex; gap: 14px; flex-wrap: wrap; }
.checks.inline label { font-weight: 600; display: flex; gap: 6px; align-items: center; color: var(--ink); }
details.upd { margin: 6px 0 10px; }
details.upd summary { font-weight: 700; }
pre.diff { overflow: auto; background: var(--paper-2); border-radius: var(--radius-md); padding: 14px; font-size: 12px; line-height: 1.5; margin: 0; }
pre.diff span { display: block; white-space: pre; }
pre.diff .add { background: var(--green-100); }
pre.diff .del { background: var(--red-100); }
.sim-head { display: flex; gap: 10px; align-items: center; }
#rule-editor .card { margin-bottom: 16px; }

/* ---- product analytics ---- */
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.insight { background: var(--paper-2); border-radius: var(--radius-md); padding: 14px 16px; border-left: 4px solid var(--ink-20); min-width: 0; }
.insight.crit { border-left-color: var(--crit); background: var(--crit-bg); } .insight.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.insight.good { border-left-color: var(--good); background: var(--good-bg); }
.insight .ih { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 13.5px; }
.insight p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--color-text-muted); font-weight: 500; }
.insight a { font-size: 12px; font-weight: 700; }
.heat { border-collapse: separate; border-spacing: 2px; font-size: 11px; font-variant-numeric: tabular-nums; width: 100%; }
.heat th { font-weight: 700; color: var(--color-text-muted); padding: 3px 2px; text-align: center; font-size: 10.5px; }
.heat th.rh, .heat td.rh { text-align: left; padding-right: 8px; white-space: nowrap; font-weight: 700; color: var(--color-text-muted); }
.heat td { text-align: center; padding: 6px 3px; border-radius: 4px; min-width: 26px; }
.heat td.na { background: transparent; }
.funnel-row { display: grid; grid-template-columns: 220px 1fr 130px; gap: 12px; align-items: center; margin: 8px 0; font-size: 13px; }
.funnel-row .bar { height: 22px; border-radius: 6px; background: var(--ink-10); position: relative; overflow: hidden; }
.funnel-row .bar i { position: absolute; inset: 0 auto 0 0; background: var(--sparkle-green); border-radius: 6px; }
/* Onboarding funnel */
.fn-row { display: grid; grid-template-columns: 210px 1fr 130px minmax(0, 1.4fr); gap: 12px; align-items: center; margin: 8px 0; font-size: 13px; }
.fn-row .bar { height: 22px; border-radius: 6px; background: var(--ink-10); position: relative; overflow: hidden; }
.fn-row .bar i { position: absolute; inset: 0 auto 0 0; background: var(--sparkle-green); border-radius: 6px; }
.fn-row .num { font-variant-numeric: tabular-nums; text-align: right; }
.fn-row .chip { margin: 0 6px 4px 0; text-decoration: none; }
.fn-group { margin: 18px 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.fn-big { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fn-cell { background: linear-gradient(90deg, var(--green-100) calc(var(--p, 0) * 1%), transparent 0); }
.fn-edit label { display: block; font-size: 12px; font-weight: 700; margin: 10px 0 3px; }
.fn-edit input[type=text], .fn-edit input[type=number], .fn-edit textarea { width: 100%; max-width: 640px; box-sizing: border-box; }
.fn-edit textarea { min-height: 150px; font-family: inherit; }
.fn-edit .row { display: flex; gap: 16px; flex-wrap: wrap; }
.fn-edit .row > div { min-width: 120px; }
.fn-preview { width: 100%; max-width: 640px; height: 460px; border: 1px solid var(--ink-10); border-radius: 8px; background: #fff; }
@media (max-width: 700px) { .fn-row { grid-template-columns: 1fr; } }
.strip { display: flex; gap: 3px; flex-wrap: wrap; }
.strip i { width: 14px; height: 14px; border-radius: 3px; background: var(--ink-10); display: inline-block; }
.strip i.on { background: var(--sparkle-green); }
@media (max-width: 700px) { .funnel-row { grid-template-columns: 1fr; } }

/* Administration: role pickers, the access matrix and one-time passwords */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin: 6px 0 4px; }
.pick { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--ink-10); border-radius: var(--radius-md); background: var(--paper); font-size: 13px; font-weight: 500; cursor: pointer; }
.pick:hover { background: var(--paper-2); }
.pick input { margin-top: 3px; flex: none; }
.pick > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pick input:disabled + span { opacity: 0.7; }
.perm-group { margin-top: 14px; }
.perm-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 6px; }
.perm-list { margin: 0; padding-left: 1.2rem; font-size: 13px; line-height: 1.6; }
.perm-diff { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.matrix th.mx, .matrix td.mx { text-align: center; padding-left: 6px; padding-right: 6px; min-width: 44px; }
.matrix th.mx a { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; white-space: nowrap; font-size: 11px; }
.matrix tr.mx-group td { background: var(--paper-2); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.matrix .mx-yes { color: var(--green-700); font-weight: 800; } .matrix .mx-no { color: var(--ink-20); }
.matrix td:first-child { min-width: 240px; }
.secret { margin-top: 14px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--beige-100); color: var(--banner-ink); font-size: 13px; }
.secret-pw { font-family: ui-monospace, Consolas, monospace; font-size: 16px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 10px; background: var(--paper); border-radius: 6px; user-select: all; }

/* ======================================================================================================================
   Bills & VAS: period bar, segmented control, share bars
   ====================================================================================================================== */
.period { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 18px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--paper); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
.seg-item { padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.seg-item:hover { color: var(--ink); text-decoration: none; background: var(--paper-3); }
.seg-item.active, .seg-item.active:hover { background: var(--green-100); color: var(--green-700); }
.period-custom { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.period-fld { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.period-fld .input { padding: 7px 12px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); border: 1.5px solid var(--ink-20); border-radius: var(--radius-md); background: var(--paper); font-family: var(--font-data); }
.period-fld .input:focus { outline: none; border-color: var(--sparkle-green); box-shadow: 0 0 0 4px var(--green-100); }
.period-note { font-size: 12px; color: var(--color-text-faint); font-weight: 500; }
.share { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--ink-10); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.share > i { display: block; height: 100%; border-radius: 4px; min-width: 1px; }
.share-crit { background: var(--serious); } .share-warn { background: var(--warn); } .share-good { background: var(--good); }
.tbl tfoot td { background: var(--paper-2); font-weight: 700; border-top: 1px solid var(--ink-20); }
.card > header .seg { box-shadow: none; background: var(--paper-3); }
.card > header .seg .seg-item:hover { background: var(--paper); }
.tbl td.share-cell { white-space: nowrap; }

/* complaint resolution (m24): the raise-a-complaint conversation */
.rs-chat { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.rs-chat:empty { display: none; }
.rs-msg { padding: 12px 16px; border-radius: var(--radius-md); background: var(--paper-2); font-size: 13px; line-height: 1.5; }
.rs-msg p { margin: 0 0 6px; } .rs-msg p:last-child { margin-bottom: 0; }
.rs-msg.you { background: var(--ink-10); }
.rs-msg.ok { background: var(--green-100); }
.rs-msg.error { background: var(--red-100); color: var(--red-700); }
.rs-msg.draft { background: var(--beige-100); }
.rs-msg pre { white-space: pre-wrap; margin: 6px 0 0; }


/* ======================================================================= UI kit (templates/ui.html, ui_charts.js) and the onboarding dashboard */
.ui-section { margin: 30px 0 0; }
.ui-section > header { margin: 0 0 12px; }
.ui-section > header h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.ui-section > header p { margin: 4px 0 0; font-size: 13px; color: var(--color-text-muted); max-width: 78ch; line-height: 1.5; }

.ui-filters { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px 16px; margin: 0 0 20px; }
.ui-seg { display: flex; align-items: center; gap: 10px; }
.ui-seg-lbl { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); }
.ui-seg-opts { display: inline-flex; background: var(--ink-10); border-radius: 999px; padding: 3px; }
.ui-seg-opts a { padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; }
.ui-seg-opts a:hover { color: var(--ink); }
.ui-seg-opts a.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 700; }
.ui-filters-note { font-size: 12px; color: var(--color-text-faint); margin-left: auto; }

.ui-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ui-kpi { display: block; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px 15px; text-decoration: none; color: inherit; min-width: 0; }
a.ui-kpi:hover { box-shadow: 0 0 0 2px var(--green-100), var(--shadow-sm); }
.ui-kpi-lbl { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); }
.ui-kpi-val { font-size: 38px; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; margin: 8px 0 8px; }
.ui-kpi-val small { font-size: 19px; font-weight: 700; margin-left: 2px; color: var(--color-text-muted); }
.ui-kpi-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; }
.ui-kpi-hint { font-size: 12px; color: var(--color-text-faint); margin-top: 6px; line-height: 1.4; }
.ui-spark { display: block; }
.ui-delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--ink-10); color: var(--ink-80); }
.ui-delta.good { background: var(--good-bg); color: var(--good-ink); }
.ui-delta.bad { background: var(--crit-bg); color: var(--crit-ink); }
.ui-delta .vs { font-weight: 500; opacity: .85; }

.ui-findings { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.ui-finding { --tone: var(--ink-60, #6b6869); background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px 14px; border-left: 4px solid var(--tone); display: flex; flex-direction: column; min-width: 0; }
.ui-finding.bad { --tone: var(--crit-ink); } .ui-finding.good { --tone: var(--good-ink); } .ui-finding.info { --tone: var(--blue-600); } .ui-finding.action { --tone: var(--serious-ink); }
.ui-finding-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ui-finding-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--tone); display: inline-flex; align-items: center; gap: 6px; }
.ui-finding-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; background: var(--tone); }
.ui-finding-metric { font-size: 22px; font-weight: 800; color: var(--tone); letter-spacing: -.02em; }
.ui-finding h3 { font-size: 16px; line-height: 1.3; margin: 8px 0 6px; font-weight: 800; }
.ui-finding p { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 10px; flex: 1; }
.ui-finding-cta { font-size: 13px; font-weight: 700; color: var(--green-700); text-decoration: none; align-self: flex-start; }
.ui-finding-cta:hover { text-decoration: underline; }

.ui-meter { height: 6px; border-radius: 99px; background: var(--ink-10); overflow: hidden; }
.ui-meter i { display: block; height: 100%; background: var(--sparkle-green); border-radius: 99px; }

/* the journey */
.fnx-pop { font-size: 12.5px; color: var(--color-text-muted); background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px 16px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.fnx-pop b { color: var(--ink); }
.fnx-pop details { margin-left: auto; }
.fnx-pop details summary { cursor: pointer; color: var(--green-700); font-weight: 700; }
.fnx-pop details div { position: absolute; z-index: 3; margin-top: 6px; background: var(--paper); box-shadow: 0 6px 24px rgba(0, 0, 0, .14); border-radius: 12px; padding: 12px 14px; max-width: 440px; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.fnx-flow { display: flex; align-items: stretch; }
.fnx-lanes { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 14px; margin-top: 14px; }
.fnx-lane { background: var(--lane-bg); border-radius: 18px; padding: 12px 12px 14px; min-width: 0; }
.fnx-lane-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); margin: 2px 4px 10px; display: flex; justify-content: space-between; }
.fnx-lane-h span { font-weight: 600; text-transform: none; letter-spacing: 0; }
.fnx-node { flex: 1 1 0; min-width: 0; background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 14px 16px 12px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 7px; }
a.fnx-node:hover { box-shadow: 0 0 0 2px var(--green-100), var(--shadow-sm); }
.fnx-node .lbl { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); }
.fnx-node .big { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.025em; }
.fnx-node .sub { font-size: 12px; color: var(--color-text-faint); display: flex; justify-content: space-between; gap: 6px; }
.fnx-node .lost { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--ink-10); font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
.fnx-node .lost b { color: var(--crit-ink); font-weight: 800; }
.fnx-node .lost a { color: var(--green-700); font-weight: 700; text-decoration: none; display: block; margin-top: 2px; }
.fnx-node .lost a:hover { text-decoration: underline; }
.fnx-conn { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 0 2px; }
.fnx-conn::before { content: ""; position: absolute; left: 0; right: 9px; top: 46%; height: 2px; background: var(--ink-20); }
.fnx-conn::after { content: ""; position: absolute; right: 4px; top: calc(46% - 5px); border: 6px solid transparent; border-left-color: var(--ink-20); border-right-width: 0; }
.fnx-conn b { position: relative; z-index: 1; background: var(--paper); border: 1px solid var(--ink-20); border-radius: 999px; padding: 2px 8px; font-size: 12.5px; font-weight: 800; }
.fnx-conn small { position: relative; z-index: 1; margin-top: 4px; font-size: 10.5px; line-height: 1.2; text-align: center; color: var(--color-text-faint); background: var(--paper-2); max-width: 70px; }
.fnx-base { display: flex; align-items: center; gap: 10px; margin: 18px 2px 0; font-size: 13px; color: var(--color-text-muted); }
.fnx-base::before, .fnx-base::after { content: ""; flex: 1; height: 1px; background: var(--ink-20); }
.fnx-base b { color: var(--ink); }

/* small multiples */
.fnx-multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.fnx-mini { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 16px 10px; min-width: 0; position: relative; }
.fnx-mini h3 { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin: 0; display: flex; justify-content: space-between; gap: 6px; }
.fnx-mini h3 a { color: inherit; text-decoration: none; } .fnx-mini h3 a:hover { color: var(--green-700); }
.fnx-mini .v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fnx-mini .v small { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.ui-chart { position: relative; height: 112px; margin-top: 4px; }
.ui-chart.tall { height: 220px; }
.ui-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ui-chart .grid-line { stroke: var(--ink-10); stroke-width: 1; }
.ui-chart .axis-lbl { font-size: 10.5px; fill: var(--color-text-faint); font-family: var(--font-data); }
.ui-chart .val-lbl { font-size: 11.5px; font-weight: 800; fill: var(--ink); font-family: var(--font-data); }
.ui-chart .avg-lbl { font-size: 10.5px; fill: var(--color-text-muted); font-family: var(--font-data); }
.ui-chart .cross { stroke: var(--ink-20); stroke-width: 1; }
.ui-chart:focus-visible { outline: 2px solid var(--green-700); outline-offset: 4px; border-radius: 6px; }
.ui-tip { position: absolute; z-index: 4; pointer-events: none; background: var(--ink); color: var(--paper); border-radius: 9px; padding: 7px 10px; font-size: 12px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); white-space: nowrap; }
.ui-tip b { display: block; font-size: 15px; font-weight: 800; }
.ui-tip span { color: var(--ink-20); }

.fnx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fnx-card { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; min-width: 0; }
.fnx-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 2px; }
.fnx-card .guide { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 12px; line-height: 1.5; }
.fnx-card .read { font-size: 12.5px; color: var(--color-text-muted); margin: 12px 0 0; line-height: 1.55; padding-top: 10px; border-top: 1px solid var(--ink-10); }

table.ui-heat { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-variant-numeric: tabular-nums; font-size: 13px; }
table.ui-heat th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); text-align: center; padding: 4px 6px; }
table.ui-heat th:first-child, table.ui-heat td:first-child { text-align: left; padding-left: 4px; white-space: nowrap; }
table.ui-heat td { text-align: center; padding: 9px 6px; }
table.ui-heat td.c { border-radius: 6px; font-weight: 600; }
table.ui-heat td.na { color: var(--color-text-faint); }
table.ui-heat td.m { color: var(--color-text-muted); font-size: 12px; }
table.ui-heat tr.partial td { color: var(--color-text-faint); }

.fnx-pair-row { display: grid; grid-template-columns: 112px 1fr 76px; gap: 10px; align-items: center; margin: 12px 0; font-size: 13px; }
.fnx-pair-bars { display: grid; gap: 4px; }
.fnx-pair-bar { display: flex; align-items: center; gap: 8px; }
.fnx-pair-bar .track { flex: 1; height: 9px; background: var(--ink-10); border-radius: 99px; overflow: hidden; }
.fnx-pair-bar .track i { display: block; height: 100%; border-radius: 99px; }
.fnx-pair-bar .num { width: 40px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.fnx-pair-bar.a i { background: #3B6FB8; } .fnx-pair-bar.i i { background: #FF6900; }
.fnx-key { display: flex; gap: 16px; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.fnx-key i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.fnx-gap { font-size: 12px; font-weight: 800; text-align: right; }
.fnx-gap.big { color: var(--crit-ink); }

table.fnx-queue { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fnx-queue th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink-10); }
table.fnx-queue td { padding: 12px 10px; border-bottom: 1px solid var(--ink-10); vertical-align: middle; }
table.fnx-queue td.n, table.fnx-queue th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.fnx-queue tr:last-child td { border-bottom: 0; }
.fnx-lane-tag { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: var(--ink-10); color: var(--ink-80); margin-right: 8px; }
.fnx-q-name { font-weight: 700; }
.fnx-q-bar { height: 6px; border-radius: 99px; background: var(--ink-10); margin-top: 6px; overflow: hidden; max-width: 220px; }
.fnx-q-bar i { display: block; height: 100%; background: var(--sparkle-orange); border-radius: 99px; }
.fnx-trend { font-size: 12px; font-weight: 700; }
.fnx-trend.up { color: var(--crit-ink); } .fnx-trend.down { color: var(--good-ink); }

.ui-bars { display: grid; gap: 9px; }
.ui-bar-row { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 70px; gap: 12px; align-items: center; font-size: 13px; }
.ui-bar-row .track { height: 12px; background: var(--ink-10); border-radius: 99px; overflow: hidden; }
.ui-bar-row .track i { display: block; height: 100%; background: var(--sparkle-green); border-radius: 99px; }
.ui-bar-row .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ui-bar-row .num small { color: var(--color-text-faint); font-weight: 600; }
.ui-crumb { font-size: 13px; margin: 0 0 6px; } .ui-crumb a { color: var(--green-700); font-weight: 700; text-decoration: none; }
.ui-lanechip { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; background: var(--ink-10); color: var(--ink-80); vertical-align: middle; margin-left: 10px; }
details.ui-table { margin-top: 12px; font-size: 12.5px; } details.ui-table summary { cursor: pointer; color: var(--green-700); font-weight: 700; }
.ui-method { font-size: 13px; line-height: 1.6; color: var(--color-text-muted); max-width: 90ch; }
.ui-method h4 { margin: 16px 0 4px; color: var(--ink); font-size: 13px; }
.ui-method li { margin: 3px 0; }

@media (max-width: 1280px) { .ui-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .fnx-lanes { grid-template-columns: 1fr; } .fnx-two { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fnx-flow { flex-direction: column; } .fnx-conn { flex-basis: 56px; flex-direction: row; } .fnx-conn::before { display: none; } .fnx-conn::after { display: none; } .ui-filters-note { margin-left: 0; } .ui-bar-row { grid-template-columns: 1fr 70px; } .ui-bar-row .track { grid-column: 1 / -1; } }

/* polish */
.ui-finding h3, .fnx-mini h3, .fnx-card h3, .ui-section h2, .ui-method h4 { text-transform: none; letter-spacing: 0; }
.ui-section > header h2 { letter-spacing: -0.01em; }
.ui-findings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fnx-multiples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-chart { height: 132px; }
.ui-kpi-hint .vs { color: var(--color-text-faint); }
.ui-kpi-row { flex-wrap: nowrap; }
.fnx-node .sub { flex-direction: column; gap: 1px; }
.fnx-node .sub b { color: var(--ink); font-weight: 800; }
.fnx-node .sub span + span { color: var(--color-text-faint); }
table.ui-heat.compact td, table.ui-heat.compact th { padding-left: 3px; padding-right: 3px; }
table.ui-heat.compact th { font-size: 10.5px; letter-spacing: .02em; }
table.ui-heat.compact td.c { font-size: 12.5px; }
.fnx-card { overflow-x: auto; }
.fnx-gap.big { color: var(--serious-ink); background: var(--serious-bg); border-radius: 999px; padding: 2px 8px; display: inline-block; }
.fnx-mini h3 { font-size: 13px; color: var(--ink); }
@media (max-width: 1280px) { .ui-findings, .fnx-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .ui-findings, .fnx-multiples { grid-template-columns: 1fr; } }

table.ui-heat.compact { table-layout: fixed; }
table.ui-heat.compact th:first-child, table.ui-heat.compact td:first-child { width: 26%; white-space: normal; }
table.ui-heat.compact th:last-child, table.ui-heat.compact td:last-child { width: 15%; }
table.ui-heat.compact td:first-child a { font-size: 12.5px; font-weight: 600; }
.fnx-pair-row { grid-template-columns: 104px 1fr 92px; }
.fnx-gap { white-space: nowrap; }
.fnx-bar-note { font-size: 11px; color: var(--color-text-faint); }

table.ui-heat, table.fnx-queue { min-width: 0; }     /* the portal's global table rule sets a 720px minimum, which would clip a table inside a narrow card */

/* Action centre */
.ui-stat.bad .ui-kpi-val { color: var(--crit-ink); } .ui-stat.good .ui-kpi-val { color: var(--good-ink); } .ui-stat.warn .ui-kpi-val { color: var(--serious-ink); }
.ui-playbook { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; background: var(--blue-100); border-radius: var(--radius-lg); padding: 12px 18px; margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.ui-playbook strong { color: var(--blue-600); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.wk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.wk-groups { display: grid; gap: 14px; }
.wk-group-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); margin: 20px 0 8px; }
.wk-queues { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.wk-queue { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wk-queue h3 { font-size: 15.5px; font-weight: 800; margin: 0; text-transform: none; letter-spacing: 0; }
.wk-queue .big { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.wk-queue .meta { font-size: 12.5px; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wk-queue .meta b { color: var(--ink); } .wk-queue .meta .bad { color: var(--crit-ink); font-weight: 700; }
.wk-queue p { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 6px; line-height: 1.5; flex: 1; }
.wk-queue .go { align-self: flex-start; }
.wk-ext { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.wk-ext a { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 16px; text-decoration: none; color: inherit; display: block; }
.wk-ext a:hover { box-shadow: 0 0 0 2px var(--green-100), var(--shadow-sm); }
.wk-ext b { font-size: 24px; font-weight: 800; margin-right: 8px; } .wk-ext .t { font-weight: 700; } .wk-ext small { display: block; color: var(--color-text-muted); margin-top: 3px; line-height: 1.45; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wk-chips a { background: var(--paper); box-shadow: var(--shadow-sm); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink); }
.wk-chips a.on { background: var(--ink); color: var(--paper); } .wk-chips a small { opacity: .75; margin-left: 4px; font-weight: 500; }
.wk-bulk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 10px 16px; margin: 0 0 12px; font-size: 13px; }
table.wk-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 0; }
table.wk-table th { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink-10); white-space: nowrap; }
table.wk-table td { padding: 11px 10px; border-bottom: 1px solid var(--ink-10); vertical-align: top; }
table.wk-table td.n, table.wk-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.wk-table tr.breached td:first-child { box-shadow: inset 3px 0 0 var(--crit); }
.wk-act { display: flex; flex-wrap: wrap; gap: 5px; }
.wk-act .btn { white-space: nowrap; }
.wk-sla { font-size: 12px; font-weight: 700; } .wk-sla.bad { color: var(--crit-ink); } .wk-sla.ok { color: var(--color-text-faint); font-weight: 500; }
.wk-contact { font-size: 12.5px; background: var(--ink-10); border-radius: 10px; padding: 8px 10px; margin-top: 6px; line-height: 1.6; }
dialog.wk-dialog { border: 0; background: var(--paper); color: var(--color-text); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 22px 24px; width: min(480px, 92vw); }
dialog.wk-dialog::backdrop { background: rgba(0, 0, 0, .35); }
dialog.wk-dialog h3 { margin: 0 0 4px; font-size: 17px; text-transform: none; letter-spacing: 0; } dialog.wk-dialog .sub { margin: 0 0 12px; font-size: 13px; color: var(--color-text-muted); }
dialog.wk-dialog label { display: block; font-size: 12px; font-weight: 700; margin: 10px 0 3px; }
dialog.wk-dialog input, dialog.wk-dialog select, dialog.wk-dialog textarea { width: 100%; box-sizing: border-box; }
dialog.wk-dialog textarea { min-height: 90px; font-family: inherit; }
dialog.wk-dialog .row { display: flex; gap: 12px; } dialog.wk-dialog .row > div { flex: 1; }
dialog.wk-dialog .err { color: var(--crit-ink); font-size: 12.5px; margin-top: 8px; min-height: 1em; }
dialog.wk-dialog .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.wk-timeline { list-style: none; margin: 0; padding: 0; } .wk-timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-10); font-size: 13px; }
.wk-timeline time { color: var(--color-text-faint); font-size: 12px; } .wk-timeline b { font-weight: 700; } .wk-timeline .sys { color: var(--color-text-muted); }
.wk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; } .wk-facts div span { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.wk-facts div b { font-size: 17px; font-weight: 800; }
@media (max-width: 1100px) { .wk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.wk-table td.do { width: 1%; white-space: nowrap; }
.wk-act { flex-wrap: nowrap; align-items: center; }
.wk-more { position: relative; display: inline-block; }
.wk-more > summary { list-style: none; cursor: pointer; } .wk-more > summary::-webkit-details-marker { display: none; }
.wk-more > div { position: absolute; right: 0; top: 34px; z-index: 6; background: var(--paper); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); border-radius: 12px; padding: 8px; flex-direction: column; align-items: stretch; min-width: 150px; margin: 0; }
.wk-more > div .btn { text-align: left; }

.ui-finding-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* a day's to-do list */
.ui-todos { display: grid; gap: 10px; }
.ui-todo { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 14px 18px; border-left: 4px solid var(--ink-20); }
.ui-todo.bad { border-left-color: var(--crit); } .ui-todo.action { border-left-color: var(--sparkle-orange); } .ui-todo.good { border-left-color: var(--good); } .ui-todo.info { border-left-color: var(--blue-600); }
.ui-todo-n { font-size: 28px; font-weight: 800; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; }
.ui-todo-main { min-width: 0; } .ui-todo-main strong { display: block; font-size: 14.5px; } .ui-todo-main span { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; display: block; margin-top: 2px; }
.ui-todo-who { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
@media (max-width: 800px) { .ui-todo { grid-template-columns: 56px 1fr; } .ui-todo-who, .ui-todo-act { grid-column: 2; align-items: flex-start; } }

/* the lifecycle rail */
.life-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.life-stage { background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.life-stage .k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.life-stage .q { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); flex: 1; }
.life-stage .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.life-stage .row b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.life-stage .btns { display: flex; flex-direction: column; gap: 6px; }
.life-stage .btns .btn { text-align: left; }
@media (max-width: 1280px) { .life-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .life-rail { grid-template-columns: 1fr; } }