/* ══════════════════════════════════════════════════════════════
   FINANCIALS — PLAN ROLLUPS panel
   ══════════════════════════════════════════════════════════════ */

.wk-fr-wrap { padding: 4px 0 32px; }
.wk-fr-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.wk-fr-title { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.wk-fr-refresh {
  background: transparent; border: 1px solid #e2e8f0; color: #475569;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.wk-fr-refresh:hover { border-color: var(--wt-theme-primary, #4f46e5); color: var(--wt-theme-primary, #4f46e5); }

.wk-fr-section { margin: 18px 0 24px; }
.wk-fr-section-title {
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #475569; margin-bottom: 8px;
}

.wk-fr-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px;
  overflow: hidden;
  font-size: 12.5px;
}
.wk-fr-table th {
  text-align: left;
  padding: 9px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #475569;
}
.wk-fr-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  vertical-align: top;
}
.wk-fr-table tbody tr:last-child td { border-bottom: none; }
.wk-fr-table tbody tr:hover td { background: #fafbfc; }
.wk-fr-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wk-fr-muted { color: #94a3b8; font-weight: 500; font-size: 11.5px; }

.wk-fr-burn {
  display: inline-block;
  padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
}
.wk-fr-burn--ok     { background: #dcfce7; color: #15803d; }
.wk-fr-burn--high   { background: #fef3c7; color: #92400e; }
.wk-fr-burn--over   { background: #fee2e2; color: #991b1b; }
.wk-fr-burn--profit { background: #dcfce7; color: #15803d; }
.wk-fr-burn--loss   { background: #fee2e2; color: #991b1b; }

.wk-fr-empty {
  padding: 18px; text-align: center;
  color: #94a3b8;
  background: #f8fafc; border-radius: 10px;
  font-size: 12.5px;
}

/* ── Time window pill group (Overview toolbar) ───────────── */
.wk-fin-window {
  display: inline-flex;
  margin-left: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.wk-fin-window-btn {
  background: transparent;
  border: 0;
  color: #475569;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.wk-fin-window-btn:hover { color: #0f172a; }
.wk-fin-window-btn.is-active {
  background: #fff;
  color: var(--wt-theme-primary, #4f46e5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ── At-Risk strip (Overview) ───────────────────────────── */
.wk-fin-atrisk-strip {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.wk-fin-atrisk-head {
  font-size: 12px;
  font-weight: 700;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
}
.wk-fin-atrisk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
}
.wk-fin-atrisk-name { font-weight: 700; color: #0f172a; }
.wk-fin-atrisk-reason {
  color: #c2410c;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wk-fin-atrisk-remaining {
  color: #475569;
  font-variant-numeric: tabular-nums;
}

/* ── Card sub-line (margin % under Estimated Profit) ────── */
.ax-card-sub {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════
   CARD GRID — programs / grants / consultants / projections
   ══════════════════════════════════════════════════════════ */
.wk-fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.wk-fc-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.wk-fc-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.wk-fc-card[data-fc-type] { cursor: pointer; }
.wk-fc-card[data-fc-type]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.wk-fc-card[data-fc-type]:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.wk-fc-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: var(--_fc-accent, #cbd5e1);
}
.wk-fc-card--ok    { --_fc-accent: #16a34a; }
.wk-fc-card--watch { --_fc-accent: #f59e0b; }
.wk-fc-card--risk  { --_fc-accent: #dc2626; }
.wk-fc-card--info  { --_fc-accent: #6366f1; }

.wk-fc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.wk-fc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  margin: 0;
}
.wk-fc-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.wk-fc-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.wk-fc-pill--ok    { background: #dcfce7; color: #15803d; }
.wk-fc-pill--watch { background: #fef3c7; color: #92400e; }
.wk-fc-pill--risk  { background: #fee2e2; color: #991b1b; }
.wk-fc-pill--info  { background: #e0e7ff; color: #4338ca; }
.wk-fc-pill--neutral { background: #f1f5f9; color: #475569; }

.wk-fc-bar {
  position: relative;
  height: 6px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.wk-fc-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--_fc-bar, #6366f1);
  transition: width 0.3s ease;
}
.wk-fc-bar-fill--ok    { background: #16a34a; }
.wk-fc-bar-fill--watch { background: #f59e0b; }
.wk-fc-bar-fill--risk  { background: #dc2626; }

.wk-fc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 12px;
  margin-top: 2px;
}
.wk-fc-stat-label {
  font-size: 10.5px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 1px;
}
.wk-fc-stat-val {
  font-size: 14px;
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wk-fc-stat-val--profit { color: #15803d; }
.wk-fc-stat-val--loss   { color: #991b1b; }
.wk-fc-stat-val--muted  { color: #64748b; }

.wk-fc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid #f1f5f9;
  font-size: 11.5px;
  color: #475569;
}
.wk-fc-foot-strong { font-weight: 700; color: #0f172a; }

/* Avatar circle for consultant cards */
.wk-fc-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wk-fc-card--consultant .wk-fc-head { align-items: center; }

/* Empty state */
.wk-fc-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  font-size: 13px;
}

/* Section header with action right */
.wk-fc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wk-fc-section-head .wk-fr-section-title { margin-bottom: 0; }
.wk-fc-section-meta {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   FINANCIALS — REPORT CARDS  (v10 polish — match wk-fc-card family)
   Tone-coded accent rail · gradient ribbon · refined hero KPI ·
   tinted hover lift · sectioned stats with hairlines · contributor rows
   with hover/dot · animated bar fill · arrow-grow footer link.
   Defensive CSS — no color-mix, plain RGB throughout.
   ══════════════════════════════════════════════════════════ */
.fin-report-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px 16px;
  padding: 18px 0 6px;
  align-items: stretch;
  overflow: visible;
}
/* The whole focus group needs visible overflow so the ribbon tabs hang off the top */
[data-wk-panel="financials"] .wk-focus-group { overflow: visible; }
[data-wk-panel="financials"] .wk-focus-panel  { overflow: visible; }

/* 🚨 AND THE PRICE OF THAT LINE IS TWO SQUARE CORNERS — PAID HERE.

   Tyler, 2026-08-27, of the top of My Timesheet: *"make sure the rounded edges
   are there."* They were there, on the panel: `.wk-focus-panel` is
   `border-radius: var(--radius)`. What was covering them is `.wk-focus-head` —
   sticky, and painting an 85%-opaque background across a SQUARE rectangle. On
   every other tab the panel clips it (`overflow-x: clip`) and the corner comes
   out round; in Financials the line directly above turns that clipping OFF so
   the report-card ribbon tabs can hang over the edge, and the head's square
   background then paints two white nubs outside a rounded border.

   So the head rounds its own top corners. `- 1px` because it sits inside the
   panel's 1px border, and `:first-child` because it is NOT always the top of
   the box: some financials panels put a filter-card row above it (see the
   `.fin-filter-*` block below), and a rounded band in the middle of a panel is
   the same defect facing the other way.
   ⚠️ This is the ONLY place it can be fixed for the whole tab. Do not solve it
   by putting the clipping back — that is what the ribbon tabs need it off for,
   and it also cuts off every popover that opens inside a financials panel. */
[data-wk-panel="financials"] .wk-focus-panel > .wk-focus-head:first-child {
  border-top-left-radius:  calc(var(--radius, 16px) - 1px);
  border-top-right-radius: calc(var(--radius, 16px) - 1px);
}
.fin-report-grid > * { min-width: 0; }

.fin-report-card {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  background:
    linear-gradient(180deg, var(--frc-bg, #eff6ff) 0%, rgba(255,255,255,0) 64px),
    #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px !important;
  padding: 18px 16px 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
  cursor: pointer;
  overflow: visible;
  transition:
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}
/* Tone-coded left accent rail — mirrors wk-fc-card pattern */
.fin-report-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  border-radius: 14px 0 0 14px;
  background: var(--frc, #6366f1);
  opacity: 0.9;
}
.fin-report-card:hover {
  border-color: var(--frc, #cbd5e1);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.09),
    0 2px 6px rgba(15, 23, 42, 0.04);
  transform: translateY(-2px);
}
.fin-report-card:focus-visible {
  outline: none;
  border-color: var(--frc, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.20);
}
.fin-report-card.tone-ok     { --frc: #16a34a; --frc-bg: #ecfdf5; --frc-shadow: rgba(22,163,74,.18); }
.fin-report-card.tone-watch  { --frc: #f59e0b; --frc-bg: #fffbeb; --frc-shadow: rgba(245,158,11,.18); }
.fin-report-card.tone-risk   { --frc: #dc2626; --frc-bg: #fef2f2; --frc-shadow: rgba(220,38,38,.20); }
.fin-report-card.tone-info   { --frc: #3a86ff; --frc-bg: #eff6ff; --frc-shadow: rgba(58,134,255,.18); }
.fin-report-card.tone-violet { --frc: #8b5cf6; --frc-bg: #f5f3ff; --frc-shadow: rgba(139,92,246,.18); }
.fin-report-card.tone-cyan   { --frc: #06b6d4; --frc-bg: #ecfeff; --frc-shadow: rgba(6,182,212,.18); }
.fin-report-card:hover {
  box-shadow:
    0 16px 34px var(--frc-shadow, rgba(15, 23, 42, 0.10)),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

/* Ribbon — small "OUR ___" label across the top edge.
   Subtle gradient + crisper shadow so it reads as a label, not a sticker. */
.frc-ribbon {
  position: absolute;
  top: 0; left: 16px;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--frc, #6366f1) 0%, color-mix(in srgb, var(--frc, #6366f1) 78%, #000) 100%);
  /* Fallback for older browsers without color-mix — flat var color */
  background: var(--frc, #6366f1);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(0,0,0,0.04) 100%);
  background-color: var(--frc, #6366f1);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  box-shadow:
    0 4px 10px var(--frc-shadow, rgba(15, 23, 42, 0.12)),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.frc-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 6px;
}
.frc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff;
  background-image: linear-gradient(180deg, var(--frc-bg, #eff6ff) 0%, #ffffff 100%);
  color: var(--frc, #6366f1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--frc-bg, #eff6ff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}
.frc-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.frc-title-wrap { flex: 1; min-width: 0; }
.frc-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.frc-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frc-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--frc-bg, #eff6ff);
  color: var(--frc, #6366f1);
  border: 1px solid var(--frc-bg, #eff6ff);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

.frc-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 12px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}
.frc-hero::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 28px; height: 2px;
  background: var(--frc, #6366f1);
  border-radius: 999px;
  opacity: 0.85;
}
.frc-hero-val {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.0;
  letter-spacing: -0.018em;
}
.frc-hero-val--profit { color: #15803d; }
.frc-hero-val--loss   { color: #991b1b; }
.frc-hero-delta {
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.frc-hero-delta--up   { color: #15803d; background: #dcfce7; }
.frc-hero-delta--down { color: #991b1b; background: #fee2e2; }
.frc-hero-delta--flat { color: #64748b; background: #f1f5f9; }

.frc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 0;
  position: relative;
}
.frc-stats > div {
  padding: 0 12px;
  border-left: 1px solid #f1f5f9;
}
.frc-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.frc-stat-l {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin-bottom: 3px;
}
.frc-stat-v {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.frc-stat-v--profit { color: #15803d; }
.frc-stat-v--loss   { color: #991b1b; }
.frc-stat-v--muted  { color: #64748b; }

.frc-bar-wrap { margin-top: 4px; }
.frc-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #64748b;
  margin-bottom: 5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.frc-bar-head > span:last-child { color: var(--frc, #0f172a); }
.frc-bar {
  height: 7px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.05);
}
.frc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--frc, #6366f1) 0%, color-mix(in srgb, var(--frc, #6366f1) 80%, #fff) 100%);
  background-color: var(--frc, #6366f1);
  border-radius: 999px;
  transition: width 0.45s cubic-bezier(.4,.0,.2,1);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset;
}

.frc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  border-top: 1px solid #f1f5f9;
  padding-top: 10px;
}
.frc-list-head {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
  margin-bottom: 4px;
}
.frc-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 5px 8px 5px 14px;
  border-radius: 7px;
  position: relative;
  transition: background 0.12s ease;
}
.frc-list-row::before {
  content: '';
  position: absolute;
  left: 5px; top: 50%;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--frc, #6366f1);
  opacity: 0.55;
  transform: translateY(-50%);
}
.fin-report-card:hover .frc-list-row:hover { background: var(--frc-bg, #eff6ff); }
.frc-list-row-name {
  flex: 1;
  min-width: 0;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.frc-list-row-val {
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.frc-list-row-val--muted { color: #64748b; }

.frc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}
.frc-foot-link {
  color: var(--frc, #6366f1);
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.18s ease;
}
.fin-report-card:hover .frc-foot-link { gap: 7px; }

.fin-report-empty {
  grid-column: 1 / -1;
  padding: 32px 24px;
  text-align: center;
  color: #94a3b8;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  font-size: 13px;
}

/* Side-module rows (mirror gr-side-row pattern) */
.fin-side-row {
  padding: 8px 6px 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.fin-side-row + .fin-side-row { border-top: 1px solid color-mix(in srgb, var(--_sm-color, #6366f1) 12%, transparent); }
.fin-side-row:hover { background: color-mix(in srgb, var(--_sm-color, #6366f1) 8%, #fff); }
.fin-side-row-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fin-side-row-meta {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.fin-side-row-meta strong { color: var(--_sm-color, #6366f1); font-weight: 700; }

/* Sort select shared with grants tab feel */
.fin-sort-select {
  height: 30px;
  font-size: 12px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font-family: inherit;
}
.fin-sort-select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }

/* ══════════════════════════════════════════════════════════
   FINANCIALS — KPI scorecard grid (Overview, legacy / unused on new layout)
   ══════════════════════════════════════════════════════════ */
.fin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.fin-kpi {
  position: relative;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  text-align: left;
  font: inherit;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fin-kpi:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.fin-kpi:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.fin-kpi-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.fin-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.fin-kpi-sub {
  font-size: 11.5px;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.fin-kpi-val--profit { color: #15803d; }
.fin-kpi-val--loss   { color: #991b1b; }

.fin-period-bar {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.wk-focus-right .fin-period-bar { margin-bottom: 0; }
.fin-period-bar button {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.fin-period-bar button.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.fin-period-bar button:hover:not(.is-active) {
  color: #0f172a;
}

/* ══════════════════════════════════════════════════════════
   FINANCIALS — Breakdown table (KPI popup, time entries)
   ══════════════════════════════════════════════════════════ */
.fin-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.fin-breakdown thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  position: sticky;
  top: 0;
}
.fin-breakdown tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s;
}
.fin-breakdown tbody tr.is-clickable { cursor: pointer; }
.fin-breakdown tbody tr.is-clickable:hover { background: #f8fafc; }
.fin-breakdown td {
  padding: 9px 10px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.fin-breakdown td.num { text-align: right; }
.fin-breakdown td.muted { color: #64748b; }
.fin-breakdown tfoot td {
  font-weight: 700;
  border-top: 2px solid #e2e8f0;
  background: #f8fafc;
}

.fin-breakdown-empty {
  padding: 32px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}

/* Filter row for sub-panels */
.fin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
}
.fin-filter-row select,
.fin-filter-row input {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12.5px;
  color: #0f172a;
  background: #fff;
}
.fin-filter-row select:focus,
.fin-filter-row input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}


/* ══════════════════════════════════════════════════════════════
   FINANCIALS — Toolbar, section heads, filter pills (new)
   ══════════════════════════════════════════════════════════════ */
.fin-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.fin-toolbar-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 10px 0 32px;
  height: 32px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fin-toolbar-search:focus-within {
  border-color: var(--wt-theme-primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.fin-toolbar-search > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  color: #94a3b8;
}
.fin-toolbar-search input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: #0f172a;
  width: 100%;
  height: 100%;
}
.fin-toolbar-search--sm { flex: 0 1 220px; height: 28px; }

.fin-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
  color: #fff;
  border: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 80ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.fin-add-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.38), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.fin-add-btn:active { transform: translateY(0); filter: brightness(0.96); }
.fin-add-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35), 0 2px 6px rgba(79, 70, 229, 0.28);
}
.fin-add-btn svg { width: 13px; height: 13px; stroke-width: 2.4; }
/* Smaller pill for per-section add buttons */
.fin-section-head .fin-add-btn { height: 28px; padding: 0 12px; font-size: 12px; }

/* Section heads (Programs/Grants/Consultants) */
.fin-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fin-section-head .wk-fr-section-title { margin-bottom: 0; }
.fin-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fin-section-spacer { flex: 1 1 auto; }

/* Highlight flash on scorecard click */
@keyframes fin-section-flash {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.0); }
  30%  { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.0); }
}
.fin-section-flash {
  border-radius: 12px;
  animation: fin-section-flash 1.4s ease-out;
}

/* Margin filter group — replaces .wk-chip-bar in margin panel */
.fin-toolbar--filter {
  padding-bottom: 4px;
}
.fin-filter-group {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.fin-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: #475569;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.fin-filter-btn:hover { color: #0f172a; }
.fin-filter-btn.is-active {
  background: #fff;
  color: var(--wt-theme-primary, #4f46e5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.fin-filter-btn svg { stroke: currentColor; }

/* Scorecard active state — already styled, but make hover obvious for click affordance */
.ax-cards-row .ax-card { cursor: pointer; }
.ax-cards-row .ax-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}

/* Show All button — match home-page pattern */
.fin-section-head .wk-show-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 0;
  color: var(--wt-theme-primary, #4f46e5);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.fin-section-head .wk-show-all:hover { background: #eef2ff; }
.fin-section-head .wk-show-all svg { width: 11px; height: 11px; }

/* "Show All" expanded state — limit grid height by default, show all on toggle */
.wk-fr-section[data-fin-section] .wk-fc-grid {
  max-height: 540px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.25s ease;
}
.wk-fr-section.fin-section--expanded .wk-fc-grid {
  max-height: none;
}

/* ── Overview subpanel padding ───────────────────────────── */
[data-subpanel="fin-overview"] { padding: 16px; }

/* ── Interactive filter card row — lives inside wk-focus-panel before sticky head ── */
.fin-filter-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.fin-filter-card {
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  outline: none;
}
.fin-filter-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.fin-filter-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.fin-filter-card.is-active {
  box-shadow: 0 0 0 2px var(--_ac, #6366f1), 0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: var(--_ac, #6366f1) !important;
}
@media (max-width: 700px) {
  .fin-filter-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Controls inside wk-focus-head ──────────────────────── */
.wk-focus-right .wk-fin-window { margin-left: 0; }
.fin-eng-select {
  height: 30px; font-size: 12px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--border, #e2e8f0);
  background: #fff; color: var(--ink, #0f172a);
  cursor: pointer; font-family: inherit;
}

/* ── Grants badge inside support module title ────────────── */
.fin-grants-badge {
  font-size: 10.5px; font-weight: 700;
  background: #dcfce7; color: #15803d;
  padding: 1px 7px; border-radius: 999px; margin-left: 4px;
}

/* ── Switching list panels ───────────────────────────────── */
.fin-list-panel { display: none; }
.fin-list-panel.is-active { display: block; padding: 16px; }

/* ── Section focus transition (scorecard click) ──────────── */
.wk-fr-section { transition: opacity 0.22s ease; }

/* ── Export button — no-wrap ─────────────────────────────── */
#finExportBtn { white-space: nowrap; }

/* ── Grant cards compact inside wk-support-module ────────── */
.wk-support-module #finRollupGrantsBody { max-height: 400px; }
.wk-support-module .wk-fc-grid { grid-template-columns: 1fr; }
.wk-support-module .wk-fc-card { padding: 12px 14px; }
.wk-support-module .wk-fc-stats { grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }

/* ════════════════════════════════════════════════════════════════════════
   Programs Analytics Strip — sits above the program-card grid in the
   Budget Control sub-panel. Three lenses: stat tiles, capital-flow stacked
   bar, and a burn-tier distribution bar (clickable segments → filter).
   ════════════════════════════════════════════════════════════════════════ */
.wk-fp-analytics {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 14px;
}
.wk-fp-stat-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.wk-fp-stat {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 8px 12px;
}
.wk-fp-stat-l {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .055em; color: #94a3b8;
}
.wk-fp-stat-v {
  font-size: 18px; font-weight: 800; color: #0f172a;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.wk-fp-stat-v--profit { color: #15803d; }
.wk-fp-stat-v--loss   { color: #b91c1c; }

.wk-fp-bars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
@media (max-width: 880px) { .wk-fp-bars { grid-template-columns: 1fr; } }
.wk-fp-bar-block { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.wk-fp-bar-h {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #64748b; margin-bottom: 8px;
}
.wk-fp-bar-h > span:last-child { color: #0f172a; font-weight: 600; text-transform: none; letter-spacing: 0; }

.wk-fp-cap-bar {
  display: flex; height: 28px; border-radius: 999px; overflow: hidden;
  background: #f1f5f9; box-shadow: inset 0 1px 2px rgba(15,23,42,.06);
}
.wk-fp-cap-seg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: width .4s ease;
}
.wk-fp-cap-seg--spent  { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); }
.wk-fp-cap-seg--commit { background: linear-gradient(135deg, #6366f1 0%, #a5b4fc 100%); color: #1e1b4b; }
.wk-fp-cap-seg--free   { background: #e2e8f0; color: #334155; }
.wk-fp-cap-seg span { padding: 0 8px; white-space: nowrap; }

.wk-fp-burn-bar {
  display: flex; height: 36px; gap: 2px;
  background: transparent;
}
.wk-fp-burn-seg {
  border: none; padding: 0 8px; min-width: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  border-radius: 6px;
}
.wk-fp-burn-seg:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.wk-fp-burn-seg:last-child  { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.wk-fp-burn-seg:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wk-fp-burn-seg.is-active { box-shadow: 0 0 0 2px #0f172a inset, 0 0 0 4px #fff inset; }
.wk-fp-burn-seg__c { font-size: 14px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.wk-fp-burn-seg__l { font-size: 9.5px; font-weight: 700; opacity: .94; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.wk-fp-sortbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.wk-fp-sortbar__l {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #94a3b8; margin-right: 4px;
}
.wk-fp-sortbtn {
  height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #fff;
  font-size: 11.5px; font-weight: 600; color: #475569; cursor: pointer;
  transition: all .12s ease;
}
.wk-fp-sortbtn:hover { border-color: #cbd5e1; color: #0f172a; }
.wk-fp-sortbtn.is-active {
  background: #0f172a; border-color: #0f172a; color: #fff;
}

/* ── Forecast money-ladder (Financials → Pipeline & Forecast) ───────────── */
.fin-ladder-card { gap: 14px !important; --frc-bg: #faf5ff; }
.fin-ladder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fin-ladder-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.fin-ladder-total { font-size: 2rem; font-weight: 800; line-height: 1.1; color: #6d28d9; letter-spacing: -.02em; }
.fin-ladder-earned { text-align: right; font-size: .72rem; color: #64748b; line-height: 1.4; }
.fin-ladder-earned strong { font-size: 1rem; color: #15803d; }
.fin-ladder-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #eef2f7; }
.fin-ladder-seg { height: 100%; transition: width .35s ease; }
.fin-ladder-seg + .fin-ladder-seg { box-shadow: inset 1px 0 0 rgba(255,255,255,.55); }
.fin-ladder-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fin-ladder-leg { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.fin-ladder-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.fin-ladder-leg-l { color: #475569; }
.fin-ladder-leg-v { font-weight: 700; color: #0f172a; }
.fin-ladder-note { font-size: .72rem; color: #94a3b8; }

/* ── Sales pipeline by stage ─────────────────────────────────────────────── */
.fin-report-card-title { font-size: .82rem; font-weight: 700; color: #0f172a; }
.fin-stage-list { display: flex; flex-direction: column; gap: 9px; }
.fin-stage-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
.fin-stage-name { font-size: .82rem; color: #334155; }
.fin-stage-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #eef2f7; color: #475569; font-size: .7rem; font-weight: 700; text-align: center; }
.fin-stage-track { height: 9px; border-radius: 5px; background: #eef2f7; overflow: hidden; }
.fin-stage-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #60a5fa, #3a86ff); }
.fin-stage-val { font-size: .82rem; font-weight: 700; color: #0f172a; min-width: 64px; text-align: right; }
@media (max-width: 640px) { .fin-stage-row { grid-template-columns: 110px 1fr auto; } }

/* ══════════════════════════════════════════════════════════
   TIME & BILLING — full-width, pitch-grade entries table
   ══════════════════════════════════════════════════════════ */
.wk-body--full { grid-template-columns: 1fr !important; }

/* Labelled filter selects in the focus head */
.fin-tb-filter { display: inline-flex; flex-direction: column; gap: 3px; }
.fin-tb-filter-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #94a3b8; padding-left: 2px;
}
.fin-tb-filter .fin-sort-select { min-width: 132px; }

/* ── The log FITS. It does not scroll sideways. ──
   This table used to carry `min-width: 720px` and lean on `.fin-tb-scroll` for
   "horizontal scroll safety", which meant reading a row cost a left-right drag and
   the Amount column was routinely off-screen. Reversed: `table-layout: fixed` plus
   `width: 100%` (from .fin-breakdown) makes the table exactly as wide as its box at
   every size, so there is nothing to scroll.

   What gives, and in what order, as the box narrows:
     1. cell padding tightens
     2. the repeated "Work Stream" badge goes — decoration, and it was costing the
        project NAME about 90px
     3. the avatar/logo circles go — 39px each, inside a column that may be 86px
     4. Rate goes — the one column you can rebuild in your head from Amount ÷ Hours

   What never gives: the DATE and the MONEY. Both are pinned in px wide enough for
   their longest real value, because "Aug 10, …" and "$168.7" each read as a real
   value and would be worse than a scrollbar. Consultant / Project / Client are the
   only flexible columns, and their inner spans already carry nowrap + ellipsis, so
   they truncate instead of pushing the table wide.

   The scroller stays as a last-resort net — it no longer engages at any width down
   to 420px — and `table-layout: fixed` is what does the real work, so a browser
   without @container support still fits; it just keeps the badge. */
.fin-tb-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Queries key off THIS box, not the viewport. The viewport is the wrong signal
     and measurably lies here: at 900px the sidebar collapses to an overlay, so the
     table is WIDER at a 900px viewport (832px) than at a 1000px one (696px).
     Verified not to break the sticky thead. */
  container-type: inline-size;
  container-name: fintb;
}
.fin-tb-table { table-layout: fixed; }
.fin-tb-table thead th.fin-tb-c-date   { width: 112px; }
.fin-tb-table thead th.fin-tb-c-hours  { width: 62px; }
.fin-tb-table thead th.fin-tb-c-rate   { width: 62px; }
.fin-tb-table thead th.fin-tb-c-amt    { width: 94px; }
.fin-tb-table thead th.fin-tb-c-who    { width: 24%; }
.fin-tb-table thead th.fin-tb-c-proj   { width: 42%; }
.fin-tb-table thead th.fin-tb-c-client { width: 26%; }
/* ── ROOM TO READ. ──
   Tyler, 2026-08-27: *"space it out better so it doesn't look so packed … for a
   more polished look."* This log is a handful of rows read one at a time, not a
   spreadsheet scanned by the hundred, so a row now stands on 14px of air top and
   bottom rather than 11, and the columns 18px apart rather than 16. The HEADER is
   the one line that gets tighter type and wider tracking instead — that is what
   keeps the extra row height reading as air rather than as a gap.
   ⚠️ The other half of "packed" was not here at all: `.mts-grid td` was reaching
   into this table and serving it `padding: 0`. See the grid block in
   wk-my-timesheet.css. */
.fin-tb-table thead th {
  padding: 12px 18px; font-size: 11px; letter-spacing: .06em;
}
.fin-tb-table td { padding: 14px 18px; line-height: 1.45; }

@container fintb (max-width: 900px) {
  .fin-tb-table thead th, .fin-tb-table td { padding-left: 11px; padding-right: 11px; }
  .fin-tb-proj-kind { display: none; }
}
@container fintb (max-width: 780px) {
  .fin-tb-person .ep-circle, .fin-tb-client .ep-circle { display: none; }
}
@container fintb (max-width: 620px) {
  .fin-tb-table .fin-tb-c-rate { display: none; }
}

/* ── NO MONEY ON IT → NO MONEY COLUMNS ──
   `is-nomoney` is set by the builder when NOT ONE row in the set carries a rate
   or an amount — internal work, which is most of a week. See the note over
   _finTbTableHtml in financials.js: it is a fact about the SET rather than a
   per-page option, so both grains agree and the row markup is untouched.

   🚨 AND NOTHING TOUCHES THE COLUMN WIDTHS. Two "obvious" fixes were tried
   and both measured WORSE than leaving them alone — five width strategies at
   four box sizes, in ~/_pwverify/calcprobe2.cjs:
     · `width: auto` on Consultant / Project / Client shares what is left
       EQUALLY, which is a 129px Project column at a 666px box ("Weekly Acti…")
       beside a Consultant column on the same 129px it did not need.
     · `calc((100% - 208px) * .44)` — Chrome IGNORES a calc() containing a
       percentage as a column width under `table-layout: fixed` and falls back
       to those same equal thirds. It reads right in the file and does nothing.
     · px shares of one box size overflow at every other box size.
   What Chrome actually does with the surviving 24 / 42 / 26% is scale them down
   proportionally to fit — no overflow at a 1146, 946, 766 or 666px box, and
   Project keeps 42/92nds of the room at all four. So the percentages were never
   the problem: the money columns simply leave, and the rest spread out.

   Hours keeps its width and takes the weight Amount had: it is the surviving
   figure, and the only one Tyler said matters. */
.fin-tb-table.is-nomoney .fin-tb-c-rate,
.fin-tb-table.is-nomoney .fin-tb-c-amt { display: none; }
.fin-tb-table.is-nomoney .fin-tb-c-hours { font-weight: 700; color: #0f172a; }
.fin-tb-table tbody tr.fin-tb-row { cursor: pointer; }
.fin-tb-table tbody tr.fin-tb-row:hover { background: #f6f9ff; }

/* Date — one clean line, no wrap/indent */
.fin-tb-date { white-space: nowrap; color: #475569; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Consultant — avatar + name */
.fin-tb-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fin-tb-person-name { font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tb-avatar-un {
  display: flex; align-items: center; justify-content: center;
  background: #cbd5e1 !important; color: #fff; font-weight: 700; font-size: 12px; flex: 0 0 auto;
}

/* Client — logo + name */
.fin-tb-client { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-tb-client-name { color: #334155; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fin-tb-empty { color: #94a3b8; }

/* Project — a clickable pill/button that opens the project profile */
/* `max-width: 100%`, not 280px: the column now bounds the pill, and a px cap here
   just left dead space at wide sizes. */
.fin-tb-proj {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 9px 5px 12px;
  border: 1px solid #dbe2f0; border-radius: 999px;
  background: #f4f7ff; color: #1d4ed8;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .07s;
}
.fin-tb-proj:hover { background: #e6efff; border-color: #93b4f5; box-shadow: 0 1px 4px rgba(29,78,216,.18); }
.fin-tb-proj:active { transform: translateY(1px); }
.fin-tb-proj:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,.22); }
/* The NAME is the data; the badge and the arrow are decoration. Without these two
   lines the badge won the space and a 269px-wide column still read "AI …". */
.fin-tb-proj-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.fin-tb-proj-kind { flex: 0 0 auto; white-space: nowrap; }
.fin-tb-proj-arrow { width: 13px; height: 13px; flex: 0 0 auto; opacity: .55; }
.fin-tb-proj:hover .fin-tb-proj-arrow { opacity: 1; }

.fin-tb-amt { font-weight: 700; color: #0f172a; }

/* Status — billing-lifecycle pill (dot + readable label, tooltip explains) */
.fin-tb-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; cursor: help;
}
.fin-tb-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.fin-tb-status.is-approved  { background: #e7f7ef; color: #047857; }
.fin-tb-status.is-approved  .fin-tb-dot { background: #10b981; }
.fin-tb-status.is-submitted { background: #fef3e2; color: #b45309; }
.fin-tb-status.is-submitted .fin-tb-dot { background: #f59e0b; }
.fin-tb-status.is-draft     { background: #eef1f6; color: #475569; }
.fin-tb-status.is-draft     .fin-tb-dot { background: #94a3b8; }

/* Avatars/logos inside the table reuse .ep-circle — keep them crisp + round.
   Person photos fill the circle (cover); company logos stay uncropped (contain,
   inherited from engagement-profile.css). */
.fin-tb-table .ep-circle { flex: 0 0 auto; }
.fin-tb-person .ep-circle-img > img { object-fit: cover; }

@media (max-width: 720px) {
  .fin-tb-filter .fin-sort-select { min-width: 108px; }
}

/* ── Time & Billing: Project / Work-Stream searchable combo ── */
.fin-tb-combo { position: relative; }
.fin-tb-combo-input { min-width: 210px; }
.fin-tb-combo-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  min-width: 280px; max-width: 380px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: 5px;
}
.fin-tb-combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
}
.fin-tb-combo-opt:hover { background: #f1f5f9; }
.fin-tb-combo-opt.is-sel { background: #eef2ff; }
.fin-tb-combo-lbl { color: #0f172a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tb-combo-kind {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; background: #f1f5f9; border-radius: 6px; padding: 2px 6px;
}
.fin-tb-combo-empty { padding: 12px; text-align: center; color: #94a3b8; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIME & BILLING — toolbar, coded pickers, select mode, bulk actions
   (2026-07-28). Namespace checked first: .fin-tb-* here owns the Time &
   Billing table; `fin-te-*` is TAKEN by the time-entry FORM in work.css — do
   not reuse it (that collision once turned every <tr> into a flexbox).
   ═══════════════════════════════════════════════════════════════════════════ */
.fin-tb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fin-tb-filter--period .fin-sort-select { min-width: 132px; }

/* ── Search ── */
.fin-tb-search { position: relative; display: flex; align-items: center; }
.fin-tb-search > svg { position: absolute; left: 10px; width: 15px; height: 15px; color: #94a3b8; pointer-events: none; }
.fin-tb-search input { box-sizing: border-box; width: 210px; padding: 8px 28px 8px 32px; border: 1px solid var(--wk-border, #e2e8f0);
  border-radius: 10px; font: inherit; font-size: 13px; background: #fff; color: #0f172a; }
.fin-tb-search input:focus { outline: none; border-color: var(--c-blue, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.fin-tb-search-clear { position: absolute; right: 6px; border: 0; background: transparent; color: #94a3b8;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.fin-tb-search-clear:hover { background: #f1f5f9; color: #0f172a; }

/* ── Shared picker shell (scope + consultant) ── */
.fin-tb-pick { position: relative; }
.fin-tb-pick-trigger { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 7px 11px;
  border: 1px solid var(--wk-border, #e2e8f0); border-radius: 10px; background: #fff; font: inherit; font-size: 13px;
  font-weight: 600; color: #0f172a; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.fin-tb-pick-trigger:hover { border-color: #cbd5e1; }
.fin-tb-pick-trigger[aria-expanded="true"] { border-color: var(--c-blue, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.fin-tb-pick-face { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.fin-tb-pick-caret { flex: 0 0 auto; width: 14px; height: 14px; color: #94a3b8; }
.fin-tb-pick-trigger[aria-expanded="true"] .fin-tb-pick-caret { transform: rotate(180deg); }
.fin-tb-pick-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fin-tb-pick-chip .ep-circle { flex: 0 0 auto; }
.fin-tb-pick-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-tb-pick-chip-kind { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b; background: #f1f5f9; border-radius: 6px; padding: 2px 6px; }
.fin-tb-pick-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 340px;
  background: #fff; border: 1px solid var(--wk-border, #e2e8f0); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(15,23,42,.16); overflow: hidden; animation: finTbPickIn .14s ease; }
@keyframes finTbPickIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fin-tb-pick-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 12.5px; }

/* ── Floated (portaled) picker panel ─────────────────────────────────────────
   Tyler, 2026-08-05: "when I click it, it should go above everything… it even
   should go above the work log." An absolute panel is clipped by, and painted
   under, the panels that follow its own — a z-index cannot fix that, because
   z-index only sorts inside the nearest stacking context. wk-time-filters.js
   portals the panel to <body> on open and places it from the trigger's rect.
   ⚠️ Two rules for a JS-placed panel:
     1. It FADES, it never slides. Any transform on an element whose coordinates
        JS computed offsets it from where it was put and corrupts a rect read
        mid-animation (reference_fixed_popover_containing_block).
     2. The panel owns a max-height set inline, so its LIST has to be the thing
        that scrolls — hence the flex column and `max-height: none` below. */
.fin-tb-pick-panel.is-wtf-float {
  position: fixed; right: auto; top: 0; left: 0;
  display: flex; flex-direction: column; overflow: hidden;
  width: min(380px, calc(100vw - 20px));
  animation-name: finTbPickFade;
  box-shadow: 0 24px 60px rgba(15,23,42,.22);
}
@keyframes finTbPickFade { from { opacity: 0; } to { opacity: 1; } }
.fin-tb-pick-panel.is-wtf-float .fin-tb-scope-list { max-height: none; flex: 1 1 auto; min-height: 0; }
.fin-tb-pick-panel.is-wtf-float > .fin-tb-scope-all,
.fin-tb-pick-panel.is-wtf-float > .fin-tb-segs,
.fin-tb-pick-panel.is-wtf-float > .fin-tb-scope-search,
.fin-tb-pick-panel.is-wtf-float > .fin-tb-crumb,
.fin-tb-pick-panel.is-wtf-float > .fin-tb-pick-foot { flex: 0 0 auto; }

/* ── Scope picker: ONE list, chips to narrow it, a badge to tell them apart ──
   ⚠️ This was a two-step picker (Projects | Work Streams → the item). Tyler,
   2026-08-03: "I don't like how the All Work or the Projects and Work Streams
   are differentiated." The kind buttons are gone; the segment chips filter the
   one list in place and every row wears its kind, so nothing is ever a click
   away behind a taxonomy choice. Markup: wk-time-filters.js. */
.fin-tb-scope-all { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.fin-tb-scope-all:hover { background: #f8fafc; }
.fin-tb-scope-all-t { font-size: 12.5px; font-weight: 700; color: #0f172a; }
.fin-tb-scope-all-s { font-size: 11px; color: #94a3b8; }
.fin-tb-scope-all.is-sel .fin-tb-scope-all-t { color: var(--c-blue, #3b82f6); }
.fin-tb-segs { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px 0; }
/* nowrap: with a Companies chip there are four of these in a 380px panel, and a
   wrapped "Work / Streams" label makes the whole row two different heights. */
.fin-tb-seg { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--wk-border, #e2e8f0);
  border-radius: 999px; background: #fff; font: inherit; font-size: 11.5px; font-weight: 700; color: #475569;
  cursor: pointer; white-space: nowrap; }
.fin-tb-seg:hover { border-color: #cbd5e1; background: #f8fafc; }
.fin-tb-seg.is-on { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
.fin-tb-seg-n { font-size: 10px; font-weight: 800; opacity: .72; }
.fin-tb-scope-search { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; }
.fin-tb-scope-search input { box-sizing: border-box; width: 100%; padding: 7px 10px; border: 1px solid var(--wk-border, #e2e8f0);
  border-radius: 9px; font: inherit; font-size: 12.5px; }
.fin-tb-scope-search input:focus { outline: none; border-color: var(--c-blue, #3b82f6); }
.fin-tb-scope-list { max-height: min(340px, 48vh); overflow-y: auto; padding: 5px; }
.fin-tb-scope-group { position: sticky; top: 0; z-index: 1; background: #fff; padding: 7px 9px 4px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.fin-tb-scope-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; padding: 8px 9px; border-radius: 10px; cursor: pointer; }
.fin-tb-scope-row:hover { background: #f8fafc; }
.fin-tb-scope-row.is-sel { background: #f0f7ff; }
.fin-tb-scope-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.fin-tb-scope-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fin-tb-scope-name { font-size: 12.5px; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-tb-scope-meta { font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The kind, on the row, where it answers "what am I picking?" without a step. */
.fin-tb-scope-tag { flex: 0 0 auto; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 5px; padding: 2px 6px; color: #475569; background: #f1f5f9; }
.fin-tb-scope-tag--engagement { color: #3730a3; background: #eef2ff; }
.fin-tb-scope-tag--project { color: #0f766e; background: #ecfdf5; }
.fin-tb-scope-tag--client { color: #92400e; background: #fef3c7; }
/* ⚠️ Internal is YELLOW, app-wide — see the note in work-mass-plan.css. */
.fin-tb-scope-tag--internal { color: #92400e; background: #fef3c7; margin-left: 6px; }
.fin-tb-scope-tag--area { color: #6d28d9; background: #f5f3ff; }
/* 🚨 THE FOURTH TAG. A scope row could only ever say Project or Work Stream, so
   an hour on an area's CATEGORY wore the work stream's teal and its word — what
   Tyler asked to be made obvious on 2026-09-01. The two ladders are now two
   colour families, so a tag says which rung AND which ladder at a glance:
   bounded is indigo -> teal (project -> work stream), unbounded is violet ->
   fuchsia (area -> category). The word and the colour are decided by
   WkTimeFilters.scopeLabel / .scopeTagClass off the same row, so a tag can never
   say "Category" while wearing the work stream's colour. */
.fin-tb-scope-tag--category { color: #a21caf; background: #fdf4ff; }

/* ── Area rows: the cut ACROSS companies (wk-areas.js) ───────────────────────
   An area SELECTS rather than drills — there is nothing under it the Projects
   segment doesn't already list. Its glyph is the area's own, not a logo: an
   area has no company, and painting one on "Client Delivery" would say the
   opposite of what it means. */
.fin-tb-ar-row .fin-tb-scope-logo { color: #7c3aed; display: inline-flex; align-items: center; justify-content: center; }
/* The unfiled bucket. Amber, because a project reporting under nothing is a
   record to fix — not a seventh area. */
.fin-tb-ar-row--none .fin-tb-scope-logo { color: #b45309; }
.fin-tb-ar-row--none .fin-tb-scope-name { color: #b45309; }
.fin-tb-ar-row--none .fin-tb-scope-tag--area { color: #92400e; background: #fef3c7; }

/* ── Company step: the filter BEFORE a project ───────────────────────────────
   A company row DRILLS into that company's work; the whole-company scope is the
   labelled "All <Company> work" row you land on. One row, one behaviour. */
.fin-tb-co-row .fin-tb-co-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; background: #f1f5f9; border-radius: 6px; padding: 3px 6px 3px 7px;
}
.fin-tb-co-row .fin-tb-co-go svg { width: 11px; height: 11px; }
.fin-tb-co-row:hover .fin-tb-co-go { color: #fff; background: var(--c-blue, #3b82f6); }
.fin-tb-crumb { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
.fin-tb-crumb-back {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: #f1f5f9;
  border-radius: 999px; padding: 4px 10px 4px 7px; font: inherit; font-size: 11.5px;
  font-weight: 700; color: #475569; cursor: pointer;
}
.fin-tb-crumb-back:hover { background: #e2e8f0; color: #0f172a; }
.fin-tb-crumb-back svg { width: 12px; height: 12px; }
.fin-tb-crumb-now { display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Multi-select people ─────────────────────────────────────────────────────
   The value was ALREADY a pipe-joined id list, so multi-select is a panel
   change only: a checkbox per row and a footer that says what is on. */
.fin-tb-chk {
  flex: 0 0 auto; width: 16px; height: 16px; border: 1.8px solid #cbd5e1; border-radius: 5px;
  background: #fff; position: relative; transition: background .12s, border-color .12s;
}
.fin-tb-cons-row:hover .fin-tb-chk { border-color: var(--c-blue, #3b82f6); }
.fin-tb-chk.is-on { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); }
.fin-tb-chk.is-on::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4.5px; height: 8.5px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fin-tb-face-stack { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fin-tb-face-stack .ep-circle { margin-right: -7px; box-shadow: 0 0 0 2px #fff; }
.fin-tb-face-stack .ep-circle:last-child { margin-right: 3px; }
.fin-tb-pick-foot {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-top: 1px solid #f1f5f9; background: #fbfdff;
}
.fin-tb-pick-foot-n { flex: 1 1 auto; font-size: 11.5px; font-weight: 700; color: #64748b; }
.fin-tb-pick-foot-btn {
  border: 1px solid var(--wk-border, #e2e8f0); background: #fff; border-radius: 8px;
  font: inherit; font-size: 11.5px; font-weight: 700; color: #475569; padding: 5px 10px; cursor: pointer;
}
.fin-tb-pick-foot-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.fin-tb-pick-foot-btn.is-primary { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
.fin-tb-pick-foot-btn.is-primary:hover { filter: brightness(.95); }

/* ── One way out of every filter ── */
.fin-tb-clear {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px;
  border: 1px solid #fecaca; border-radius: 10px; background: #fff5f5; font: inherit;
  font-size: 12.5px; font-weight: 700; color: #b91c1c; cursor: pointer;
}
.fin-tb-clear:hover { background: #fee2e2; }
.fin-tb-clear svg { width: 12px; height: 12px; }
.fin-tb-clear[hidden] { display: none !important; }
.fin-tb-off { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px;
  color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 5px; }

/* ── Consultant picker ── */
.fin-tb-cons-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; padding: 8px 10px; cursor: pointer; }
.fin-tb-cons-row:hover { background: #f8fafc; }
.fin-tb-cons-row.is-sel { background: #f0f7ff; }
.fin-tb-cons-row .ep-circle { flex: 0 0 auto; }
.fin-tb-cons-all-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: #f1f5f9; color: #64748b; }
.fin-tb-cons-txt { display: flex; flex-direction: column; min-width: 0; }
.fin-tb-cons-name { font-size: 12.5px; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 6px; }
.fin-tb-cons-meta { font-size: 11px; color: #94a3b8; }
.fin-tb-cons-off { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 5px; }

/* ── Select mode ── */
.fin-tb-select-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--wk-border, #e2e8f0);
  border-radius: 10px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #0f172a; cursor: pointer; }
.fin-tb-select-btn svg { width: 15px; height: 15px; }
.fin-tb-select-btn:hover { border-color: #cbd5e1; }
.fin-tb-select-btn.is-active { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
/* Log my day — the one WRITE on a toolbar of filters, so it is the one
   solid button. Same shape as Select so the row still reads as one set. */
.fin-tb-log-btn { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
.fin-tb-log-btn:hover { background: #2f6fe0; border-color: #2f6fe0; }
.fin-tb-check-cell { width: 34px; }
.fin-tb-check { display: inline-block; width: 17px; height: 17px; border: 1.8px solid #cbd5e1; border-radius: 5px;
  background: #fff; cursor: pointer; vertical-align: middle; position: relative; transition: background .12s, border-color .12s; }
.fin-tb-check:hover { border-color: var(--c-blue, #3b82f6); }
.fin-tb-check.is-on { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); }
.fin-tb-check.is-on::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fin-tb-check.is-part { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); }
.fin-tb-check.is-part::after { content: ""; position: absolute; left: 3px; top: 6.5px; width: 9px; height: 2px; background: #fff; }
.fin-tb-table.is-selecting tbody tr { cursor: pointer; }
.fin-tb-row.is-picked { background: #f0f7ff; }
.fin-tb-proj-kind { margin-left: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; background: #f1f5f9; border-radius: 5px; padding: 1px 5px; }

/* ── Bulk bar ──
   The actions ran off the right edge and there were TWO independent reasons, so
   both are pinned here:

   1. `.wk-focus-panel` is the lone child of a `1fr` grid column, and a grid item
      keeps `min-width: auto` — which floors the column at the panel's min-content.
      A `min-width: 720px` on the table used to set that floor, so under ~780px of
      content the panel stopped shrinking, hung off the right, and took the bulk
      bar with it; `.fin-tb-scroll` never even got to scroll, which is why Amount
      was clipped instead of scrollable. That floor is gone now (the table is
      `table-layout: fixed` and always fits — see the note above it), but this line
      stays: it is what stops ANY future wide descendant from doing the same thing
      again, and it is one declaration. Scoped to `.wk-body--full`, which only this
      panel uses.

   2. `margin-left: auto` on a flex item that will not shrink PUSHES instead of
      wrapping. `flex: 1 1 auto` + `min-width: 0` + `justify-content: flex-end`
      keeps the buttons right-aligned while there is room and drops them onto a
      second row when there is not — so nine actions can never be cut off. */
.wk-body--full > .wk-focus-panel { min-width: 0; }
.fin-tb-bulkbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
  min-width: 0; padding: 9px 12px; border: 1px solid #dbeafe; background: #f0f7ff; border-radius: 12px; }
.fin-tb-bulk-count { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--c-blue, #3b82f6); }
.fin-tb-bulk-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.fin-tb-bulk-actions .wk-btn { padding: 6px 12px; font-size: 12px; border-radius: 9px;
  border: 1px solid var(--wk-border, #e2e8f0); background: #fff; cursor: pointer; }
.fin-tb-bulk-actions .wk-btn:hover:not(:disabled) { border-color: #cbd5e1; }
.fin-tb-bulk-actions .wk-btn:disabled { opacity: .5; cursor: default; }
.fin-tb-bulk-actions .wk-btn--danger { color: #b91c1c; border-color: #fecaca; }
.fin-tb-bulk-actions .wk-btn--danger:hover:not(:disabled) { background: #fef2f2; }

/* ── Bulk action modal ── */
.fin-bulk-ov { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.45); opacity: 0; transition: opacity .18s ease; padding: 20px; }
.fin-bulk-ov.is-open { opacity: 1; }
.fin-bulk-box { width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; background: #fff; border-radius: 16px;
  padding: 20px; box-shadow: 0 26px 70px rgba(15,23,42,.3); transform: translateY(6px); transition: transform .18s ease; }
.fin-bulk-ov.is-open .fin-bulk-box { transform: none; }
.fin-bulk-title { font-size: 16px; font-weight: 800; color: #0f172a; }
.fin-bulk-sub { margin-top: 5px; font-size: 12.5px; color: #64748b; line-height: 1.5; }
.fin-bulk-body { margin-top: 14px; }
.fin-bulk-field { display: block; }
.fin-bulk-field > span { display: block; font-size: 11.5px; font-weight: 700; color: #64748b; margin-bottom: 5px; }
.fin-bulk-field input { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--wk-border, #e2e8f0);
  border-radius: 10px; font: inherit; font-size: 14px; }
.fin-bulk-field input:focus { outline: none; border-color: var(--c-blue, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
/* Live answer under an input — "Shift by -1" printed as the dates it lands on. */
.fin-bulk-hint { margin-top: 7px; font-size: 11.5px; font-weight: 600; color: #64748b; }
.fin-bulk-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--wk-border, #e2e8f0); border-radius: 10px; }
.fin-bulk-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; font-size: 12px;
  color: #334155; border-bottom: 1px solid #f1f5f9; }
.fin-bulk-line:last-child { border-bottom: 0; }
.fin-bulk-more { padding: 7px; text-align: center; font-size: 11.5px; color: #94a3b8; }
.fin-bulk-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.fin-bulk-tab { border: 1px solid var(--wk-border, #e2e8f0); background: #fff; border-radius: 999px; font: inherit;
  font-size: 12px; font-weight: 700; color: #64748b; padding: 5px 13px; cursor: pointer; }
.fin-bulk-tab.is-on { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
.fin-bulk-pick { max-height: 280px; overflow-y: auto; border: 1px solid var(--wk-border, #e2e8f0); border-radius: 10px; padding: 4px; }
.fin-bulk-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  background: transparent; font: inherit; padding: 8px 9px; border-radius: 9px; cursor: pointer; }
.fin-bulk-pick-row:hover { background: #f8fafc; }
.fin-bulk-pick-row.is-sel { background: #f0f7ff; box-shadow: inset 0 0 0 1.5px var(--c-blue, #3b82f6); }
.fin-bulk-pick-name { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; font-weight: 600; color: #0f172a; }
.fin-bulk-pick-sub { font-size: 11px; font-weight: 500; color: #94a3b8; }
.fin-bulk-progress { margin-top: 14px; }
.fin-bulk-progress-lbl { font-size: 12px; color: #64748b; margin-bottom: 6px; }
.fin-bulk-progress-track { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.fin-bulk-progress-bar { height: 100%; width: 0%; border-radius: 3px; background: var(--c-blue, #3b82f6); transition: width .2s ease; }
.fin-bulk-box.is-danger .fin-bulk-progress-bar { background: linear-gradient(90deg, #ef4444, #dc2626); }
.fin-bulk-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.fin-bulk-actions .wk-btn { padding: 9px 18px; border-radius: 10px; border: 1px solid var(--wk-border, #e2e8f0);
  background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fin-bulk-actions .wk-btn--primary { background: var(--c-blue, #3b82f6); border-color: var(--c-blue, #3b82f6); color: #fff; }
.fin-bulk-actions .wk-btn--danger { background: #ef4444; border-color: #ef4444; color: #fff; }
.fin-bulk-actions .wk-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 900px) {
  .fin-tb-toolbar { justify-content: flex-start; }
  .fin-tb-search input { width: 100%; }
  .fin-tb-pick-panel { width: min(340px, calc(100vw - 40px)); }
}

/* Custom date range (Period = Custom range…) */
.fin-tb-range { display: flex; align-items: center; gap: 6px; }
.fin-tb-range input[type="date"] { padding: 7px 9px; border: 1px solid var(--wk-border, #e2e8f0); border-radius: 9px;
  font: inherit; font-size: 12.5px; color: #0f172a; background: #fff; }
.fin-tb-range input[type="date"]:focus { outline: none; border-color: var(--c-blue, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.10); }
.fin-tb-range-sep { font-size: 11.5px; font-weight: 700; color: #94a3b8; }

/* ── The two-week pay period stepper (Period = Two-week pay period) ────────
   Deliberately the SAME control Reports ▸ Timesheets wears (.wk-ts-per): the
   two surfaces step the identical fortnight, so learning one has to be
   learning both. The face carries the DATES, not the words "pay period" —
   which fortnight you are on is the entire question a stepper raises — and it
   doubles as the jump-back-to-now button, so there is no second control beside
   it also saying "period". */
.fin-tb-pay { display: flex; align-items: stretch;
  border: 1px solid #cbd5e1; border-radius: 9px; overflow: hidden; background: #fff; }
.fin-tb-pay-nav { display: flex; align-items: center; justify-content: center;
  width: 28px; border: 0; background: #fff; color: #475569; cursor: pointer;
  transition: background .12s, color .12s; }
.fin-tb-pay-nav svg { width: 15px; height: 15px; }
.fin-tb-pay-nav:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.fin-tb-pay-face { display: flex; align-items: center; gap: 7px; justify-content: center;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #0f172a;
  padding: 0 12px; min-width: 158px; background: #fff; border: 0;
  border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .12s; }
.fin-tb-pay-face:hover:not(:disabled) { background: #f1f5f9; }
/* On the current period the face is a plain label: a lit reset glyph over a
   button that resets to where you already are teaches people the control is
   decoration. */
.fin-tb-pay-face:disabled { cursor: default; }
.fin-tb-pay-now { width: 13px; height: 13px; color: #94a3b8; flex: 0 0 auto; }
.fin-tb-pay-face:hover:not(:disabled) .fin-tb-pay-now { color: #0891b2; }
.fin-tb-pay-face:disabled .fin-tb-pay-now { display: none; }
/* Stepped away from today, the WHOLE control says so rather than only the
   dates — a fortnight three periods back looks exactly like this one at a
   glance, and that is how a July total gets filed as August. */
.fin-tb-pay.is-away { border-color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.10); }
.fin-tb-pay.is-away .fin-tb-pay-face { color: #0e7490; }

/* Same [hidden] trap: all of these are toggled with the hidden attribute. */
.fin-tb-pay[hidden] { display: none !important; }
.fin-tb-range[hidden] { display: none !important; }
.fin-tb-bulkbar[hidden] { display: none !important; }
.fin-tb-pick-panel[hidden] { display: none !important; }

/* ── whose entry is this ──────────────────────────────────────────────
   Someone else's time gets a LOCK where its checkbox would be, not a blank
   cell: an empty cell reads as "nothing here", a lock reads as "not yours".
   One rule, one place — see wk-time-own.js. */
.fin-tb-check.is-locked {
  cursor: not-allowed; border-style: dashed; background: #f8fafc; opacity: .7;
  position: relative;
}
.fin-tb-check.is-locked::after {
  content: ''; position: absolute; left: 50%; top: 2px; width: 7px; height: 5px;
  margin-left: -3.5px;
  border: 1.5px solid #cbd5e1; border-bottom: 0; border-radius: 3px 3px 0 0;
}
/* Our own work is a company, and says so. */
.fin-tb-int {
  margin-left: 6px; font-size: 8.5px; font-weight: 850; letter-spacing: .07em;
  text-transform: uppercase; color: #004b7c; background: rgba(0, 75, 124, .1);
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
/* The "Work Stream" caption names a real thing, so it goes there. */
.fin-tb-proj-kind[data-fc-open] { cursor: pointer; transition: background .13s, color .13s; }
.fin-tb-proj-kind[data-fc-open]:hover { background: rgba(109, 40, 217, .16); color: #4c1d95; }

/* ══════════════════════════════════════════════════════════════════════
   TIME CARDS — Time & Billing read as people (fin-timecards.js)
   ══════════════════════════════════════════════════════════════════════
   The card SHELL is `.wk-member-card` / `.wk-member-head` out of work.css,
   deliberately: this is the same object the Capacity grid and Shift's Hours
   screen draw, and giving it a second look would make one screen's teammate
   card unrecognisable on the next. Everything below is only the parts that
   shell does not have — the headline, the notched meter, the day strip, the
   meta line, the chips and the state line.

   ⚠️ THE GRID IS WIDER THAN THE DEFAULT ON PURPOSE. `.wk-member-grid` is
   minmax(260px,1fr), which lands four or five to a row and then the headline
   ("33.5h logged of 40h agreed  84%") wraps onto three lines. 320px holds
   three to a row at this panel's width, and that is what buys the headline
   its width.                                                             */
.fin-tc-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* One sentence, ~20px, carrying everything the cards roll up to. This tab
   already spends two rows on scorecards; an extra fact becomes a SENTENCE. */
.fin-tc-underline {
  margin: 0 0 10px; font-size: 12px; color: #475569; line-height: 1.6;
}
.fin-tc-underline b { color: #0f172a; font-weight: 800; }
.fin-tc-dot { color: #cbd5e1; margin: 0 5px; }
.fin-tc-src { color: #94a3b8; font-size: .93em; }
.fin-tc-note {
  margin: 0 0 10px; padding: 8px 11px; border-radius: 10px; font-size: 12px;
  color: #78350f; background: #fffbeb; border: 1px solid #fde68a; line-height: 1.5;
}
.fin-tc-none { margin: 12px 2px; font-size: 12.5px; color: #94a3b8; }
.fin-tc-none[hidden] { display: none !important; }

/* ── the card ─────────────────────────────────────────────────────────
   🚨 A CARD THAT IS A BUTTON CANNOT HOLD BUTTONS — the whole rectangle is
   one target. `is-shut` is a person with no CRM record to open: it keeps the
   card and drops the pointer, because a card that looks pressable and does
   nothing is worse than a flat one. */
.fin-tc-card { cursor: pointer; padding: 14px 15px 12px; }
.fin-tc-card.is-shut { cursor: default; }
.fin-tc-card:focus-visible { outline: 2px solid #3A86FF; outline-offset: 2px; }
.fin-tc-card .wk-member-head { margin-bottom: 9px; }
/* The rule itself, stated on the card so "why is there no meter" is answered
   where the meter would have been. */
.fin-tc-rule {
  flex-shrink: 0; font-size: 9.5px; font-weight: 850; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 999px;
  color: #0369a1; background: rgba(3, 105, 161, .1); white-space: nowrap;
}
.fin-tc-rule.is-none { color: #94a3b8; background: #f1f5f9; }

/* ── the number, and what it is measured against ──────────────────── */
.fin-tc-lead { display: flex; align-items: flex-end; gap: 8px; }
.fin-tc-big {
  font-size: 30px; font-weight: 850; line-height: 1; color: #0f172a;
  letter-spacing: -.02em;
}
.fin-tc-big.is-zero { color: #cbd5e1; }
.fin-tc-big i { font-size: .5em; font-style: normal; font-weight: 800; margin-left: 1px; }
.fin-tc-lead-say { flex: 1; min-width: 0; line-height: 1.25; padding-bottom: 1px; }
.fin-tc-lead-say b {
  display: block; font-size: 10px; font-weight: 850; letter-spacing: .07em;
  text-transform: uppercase; color: #64748b;
}
.fin-tc-of {
  display: block; font-size: 11px; color: #64748b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-tc-pct { flex-shrink: 0; font-size: 13px; font-weight: 800; color: #475569; }

/* 🚨 THE METER CARRIES A NOTCH at what they owe by today, and the gap
   between the fill and the notch IS the shortfall the state line spells out
   in words. One subtraction, drawn and written — never two. */
.fin-tc-gauge {
  display: block; position: relative; height: 7px; margin-top: 8px;
  border-radius: 999px; background: #eef2f7;
}
.fin-tc-gauge.is-empty { background: repeating-linear-gradient(135deg, #f1f5f9 0 5px, #e8edf3 5px 10px); }
.fin-tc-fill { display: block; height: 100%; border-radius: 999px; transition: width .35s ease; }
.fin-tc-fill--ok   { background: linear-gradient(90deg, #10b981, #059669); }
.fin-tc-fill--warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.fin-tc-fill--over { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.fin-tc-fill--mute { background: #cbd5e1; }
/* The notch sits ON the track, not inside the fill — inside, a 20% fill
   could never draw the 90% mark. The track therefore must NOT clip. */
.fin-tc-gauge .fin-tc-mark {
  position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px;
  background: #0f172a; border-radius: 1px; opacity: .55; z-index: 1;
}

/* ── the window, a column a day ───────────────────────────────────────
   Today gets a ring and the days that have not happened are hatched: a flat
   Friday in the future reads as a missed Friday otherwise. */
.fin-tc-strip {
  display: flex; align-items: flex-end; gap: 3px; margin-top: 11px; height: 38px;
}
.fin-tc-strip.is-dense { gap: 1px; }
.fin-tc-day { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.fin-tc-bar {
  flex: 1; position: relative; display: flex; align-items: flex-end;
  background: #f4f7fa; border-radius: 3px; overflow: hidden;
}
.fin-tc-worked { display: block; width: 100%; background: #3A86FF; border-radius: 3px; min-height: 0; }
.fin-tc-day.is-weekend .fin-tc-bar { background: #f8fafc; }
.fin-tc-day.is-ahead .fin-tc-bar {
  background: repeating-linear-gradient(135deg, #f8fafc 0 4px, #eef2f7 4px 8px);
}
/* A weekday somebody owed hours for and logged none. It needs a TINT, not just
   a hairline: at 30px wide an outlined empty box reads as a rendering artefact
   rather than as a state, and pink at 1px is indistinguishable from grey. */
.fin-tc-day.is-missed .fin-tc-bar { background: #fef2f2; box-shadow: inset 0 0 0 1px #fca5a5; }
.fin-tc-day.is-today .fin-tc-bar { box-shadow: inset 0 0 0 1.5px #3A86FF; }
.fin-tc-day.is-today .fin-tc-lbl { color: #3A86FF; font-weight: 850; }
.fin-tc-lbl {
  margin-top: 3px; text-align: center; font-size: 8.5px; font-weight: 700;
  color: #94a3b8; line-height: 1;
}

/* ── the rest, on one clipping line ───────────────────────────────── */
.fin-tc-meta {
  margin: 9px 0 0; font-size: 11px; color: #475569; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-tc-meta b { color: #0f172a; font-weight: 800; }

.fin-tc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.fin-tc-chip {
  font-size: 9.5px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.fin-tc-chip--ok   { color: #047857; background: rgba(4, 120, 87, .1); }
.fin-tc-chip--warn { color: #b45309; background: rgba(180, 83, 9, .1); }
.fin-tc-chip--bad  { color: #b91c1c; background: rgba(185, 28, 28, .1); }
.fin-tc-chip--mute { color: #64748b; background: #f1f5f9; }

/* ── the last line, which is the one somebody acts on ─────────────────
   "Open ›" is an affordance held at opacity 0 until hover, not a control:
   six cards must not read as six calls to action. */
.fin-tc-state {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 0;
  padding-top: 9px; border-top: 1px solid #eef2f7;
  font-size: 11.5px; color: #475569; line-height: 1.4;
}
.fin-tc-state b { font-weight: 800; }
.fin-tc-statedot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #cbd5e1; }
.fin-tc-state--ok   .fin-tc-statedot { background: #10b981; }
.fin-tc-state--warn .fin-tc-statedot { background: #f59e0b; }
.fin-tc-state--bad  .fin-tc-statedot { background: #ef4444; }
.fin-tc-state--bad  .fin-tc-statetxt { color: #b91c1c; }
.fin-tc-state--mute .fin-tc-statetxt { color: #94a3b8; }
.fin-tc-statetxt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-tc-open {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 1px;
  font-size: 10.5px; font-weight: 800; color: #3A86FF;
  opacity: 0; transition: opacity .15s ease;
}
.fin-tc-open svg { width: 12px; height: 12px; }
.fin-tc-card:hover .fin-tc-open,
.fin-tc-card:focus-visible .fin-tc-open { opacity: 1; }
.fin-tc-card.is-shut .fin-tc-open { display: none; }

/* ── the view switch ─────────────────────────────────────────────────────
   🚨 IT IS A `.gl-view-toggle`, AND THAT IS NOT COSMETIC. work.js's
   _restructureFocusHeaders empties every .wk-focus-head and re-adds only the
   children it recognises; a view switch is recognised by that class and by
   nothing else, so without it the div is deleted at boot with no error. See
   the note on the markup in Work.html.

   The tray and the pressed state therefore come from work-views.css for free.
   The ONLY thing overridden is the width: the canonical `.gl-vt-btn` is a
   28×26 icon square, and "Entries" / "Time cards" carry words, because an
   icon-only switch between hours and people is a guess the first time.
   ⚠️ Two classes deep on purpose (`.fin-tb-view.gl-view-toggle .gl-vt-btn`) —
   `.gl-view-toggle .gl-vt-btn` in work-views.css would otherwise win the width
   on specificity regardless of which stylesheet loads last. */
.fin-tb-view.gl-view-toggle .gl-vt-btn {
  width: auto; height: 26px; gap: 5px; padding: 0 11px;
  font: inherit; font-size: 11.5px; font-weight: 700;
}
.fin-tb-view.gl-view-toggle .gl-vt-btn span { line-height: 1; }

/* ── the hours-rule screen ───────────────────────────────────────────── */
.fin-tc-rules-box { max-width: 560px; }
.fin-tc-rules { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.fin-tc-rule-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  border-radius: 10px; cursor: text;
}
.fin-tc-rule-row:hover { background: #f8fafc; }
.fin-tc-rule-who { flex: 1; min-width: 0; }
.fin-tc-rule-name { display: block; font-size: 12.5px; font-weight: 700; color: #0f172a; }
.fin-tc-rule-mail {
  display: block; font-size: 10.5px; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-tc-rule-in { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 5px; }
.fin-tc-rule-in input {
  width: 74px; text-align: right; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 5px 8px; border: 1px solid #d7dee7; border-radius: 8px; color: #0f172a;
}
.fin-tc-rule-in input:disabled { background: #f8fafc; color: #cbd5e1; }
.fin-tc-rule-in span { font-size: 10.5px; color: #94a3b8; font-weight: 600; }
.fin-tc-rules-msg {
  margin-top: 10px; padding: 8px 11px; border-radius: 9px; font-size: 12px;
  line-height: 1.5; color: #334155; background: #f1f5f9;
}
.fin-tc-rules-msg.is-bad { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.fin-tc-rules-msg[hidden] { display: none !important; }