/* ════════════════════════════════════════════════════════════════════
   Canvas Build 1.5 — Revision Stylesheet
   May 3, 2026

   Layered AFTER canvas.css so this file always wins on equal
   specificity. Three sections:

     SECTION 1  FIX 1  — Card grid filter pills + portal subnav pills
                         match Technology page exactly
     SECTION 2  FIX 3  — KPI cards, buttons, headers, text hierarchy
                         match the platform design language
     SECTION 3  FEATURE 1 — Liquid Glass Template Editor
                         (.cv-edit-* + .fs-table-container.editing
                         + .fs-row-name(-input) + .fs-row-settings-*
                         + .fs-insert-* + edit-mode row treatments)

   Tokens reused from frontend.html :root:
     --navy, --gold, --blue, --muted, --dim, --border, --bg, --card,
     --serif, --sans, --shadow, --shadow-md, --radius
     plus --navy-08, --navy-04, --navy-15

   Animation curves:
     Lift overshoot   cubic-bezier(0.34, 1.56, 0.64, 1)
     Spring (drag)    cubic-bezier(0.16, 1, 0.3, 1)
     Standard ease    ease, .15s/.2s

   Total transformation duration: 400ms in three phases
     Phase 1 (0–150ms)   Lift   — table scales 1.0 → 1.01, shadow grows,
                                  background dims
     Phase 2 (100–300ms) Reveal — toolbar materializes, drag handles
                                  fade in, period values recede to .5
     Phase 3 (250–400ms) Settle — overshoot completes, surface live
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   SECTION 1 — FIX 1
   Card grid filter pills + portal subnav pills must match
   .subnav .pill on the Technology page byte-for-byte.

   Source: frontend.html lines 67–70:
     .subnav        — flex, gap:2px, navy-08 bg, 8px radius, 3px pad
     .subnav .pill  — 8/20 pad, 6px radius, 12px/600, muted color,
                      .15s transition, .2px tracking, no wrap
     .subnav .pill:hover    color → text
     .subnav .pill.active   bg:card, color:navy, box-shadow

   These selectors REPLACE the legacy .canvas-strat-pills /
   .canvas-strat-pill rules in canvas.css (lines 139–158). Specificity
   wins via document order (this file is linked after canvas.css).
   ════════════════════════════════════════════════════════════════════ */
.canvas-strat-pills{
  display:flex;
  gap:2px;
  background:rgba(10,30,61,.08);
  border-radius:8px;
  padding:3px;
  width:fit-content;
}

.canvas-strat-pills .canvas-strat-pill,
.canvas-strat-pills .pill{
  padding:8px 20px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  color:#64748b;
  cursor:pointer;
  transition:.15s;
  letter-spacing:.2px;
  white-space:nowrap;
  border:none;
  background:transparent;
  font-family:inherit;
  /* override the legacy 11px/border styles */
  text-transform:none;
}
.canvas-strat-pills .canvas-strat-pill:hover,
.canvas-strat-pills .pill:hover{
  color:#0a1e3d;
  background:transparent;
  border:none;
}
.canvas-strat-pills .canvas-strat-pill.active,
.canvas-strat-pills .pill.active{
  background:#ffffff;
  color:#0a1e3d;
  box-shadow:0 1px 3px rgba(10,30,61,.06), 0 1px 2px rgba(10,30,61,.04);
  border:none;
}

/* If the My Portal subnav is rendered with .portal-subnav (frontend.html
   line 1319) it inherits the same look automatically. No changes needed
   here — but if a Canvas-tab subnav is built locally with these
   classnames, it picks up the spec'd shape. */
.canvas-portal-subnav{
  display:flex;
  gap:2px;
  background:rgba(10,30,61,.08);
  border-radius:8px;
  padding:3px;
  width:fit-content;
  margin-bottom:24px;
}
.canvas-portal-subnav .pill{
  padding:8px 20px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  color:#64748b;
  cursor:pointer;
  transition:.15s;
  letter-spacing:.2px;
  white-space:nowrap;
  border:none;
  background:transparent;
  font-family:inherit;
}
.canvas-portal-subnav .pill:hover{ color:#0a1e3d; }
.canvas-portal-subnav .pill.active{
  background:#ffffff;
  color:#0a1e3d;
  box-shadow:0 1px 3px rgba(10,30,61,.06), 0 1px 2px rgba(10,30,61,.04);
}


/* ════════════════════════════════════════════════════════════════════
   SECTION 2 — FIX 3
   Style consistency: KPI cards, buttons, section headers, text
   hierarchy must read like the rest of the platform.

   Reference styles from frontend.html:
     .kpi          line 76 — card, 8 radius, 14/16 pad, 1px border,
                              navy ::after 3px slide on hover
     .kpi .kl      line 79 — 10px / 700 / uppercase / 1px tracking / dim
     .kpi .kv      line 80 — 20px / 300 / navy / -.5px tracking
     .kpi .kd      line 81 — 11px / muted / 3px top
     .card-head h3 line 88 — 12px / 700 / uppercase / .8px tracking / navy

   The .fs-* classes below override their canvas.css counterparts.
   ════════════════════════════════════════════════════════════════════ */

/* ── KPI strip (the "Last Quarter Revenue / EBITDA / etc." row) ── */
.fs-kpi-card{
  flex:0 0 auto;
  min-width:140px;
  padding:14px 16px;
  background:#ffffff;
  border:1px solid #e2e5ea;
  border-radius:8px;
  position:relative;
  overflow:hidden;
  transition:.15s;
}
.fs-kpi-card::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:#0a1e3d;
  opacity:0;
  transition:opacity .15s ease;
}
.fs-kpi-card:hover::after{ opacity:1; }

.fs-kpi-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#94a3b8;
  margin-bottom:5px;
}
.fs-kpi-value{
  font-size:20px;
  font-weight:300;
  color:#0a1e3d;
  letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}
.fs-kpi-delta{
  font-size:11px;
  font-weight:500;
  color:#64748b;
  margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.fs-kpi-delta.pos{ color:#276749; font-weight:600; }
.fs-kpi-delta.neg{ color:#c53030; }
.fs-kpi-delta.flat{ color:#64748b; }

/* ── Section header rows (INCOME STATEMENT / BALANCE SHEET / etc.) ──
   Spec: #F1F5F9 bg, 9.5px / 700 / uppercase, 1.2px tracking, #64748b.
   These act as quiet section dividers — NOT card-head h3. They should
   recede so the Subtotal rows can anchor each section.
   The base spec lives in canvas.css; this override exists only to make
   sure the build-15 Section-2 styles don't accidentally promote them. */
.fs-row-section td{
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#64748b;
  background:#F1F5F9;
  height:32px;
  line-height:32px;
  border-bottom:1px solid #e5e7eb;
  border-top:none;
  padding-left:16px;
}

/* ── Header ghost button (My Guide / Compare / etc.) ────────────────
   Matches .qtr-select on the Tech page (frontend.html line 197):
     #fff bg, 1px #e2e5ea border, 8px radius, 12px / 600 / navy text,
     .2px tracking. Hover thickens the border to navy.
   .active uses the same .toggle-active language as Tech's "Active
   Funds" pill — white card, navy text, subtle shadow, navy border —
   NOT the blue tint that earlier builds had. */
.fs-header-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  padding:6px 14px;
  border:1px solid #e2e5ea;
  border-radius:8px;
  background:#ffffff;
  color:#0a1e3d;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.2px;
  line-height:1;
}
.fs-header-btn:hover{
  border-color:#0a1e3d;
  box-shadow:0 2px 8px rgba(10,30,61,.08);
}
.fs-header-btn.active{
  background:#ffffff;
  border-color:#0a1e3d;
  color:#0a1e3d;
  box-shadow:0 1px 3px rgba(10,30,61,.06), 0 1px 2px rgba(10,30,61,.04);
}

/* Header select dropdowns (Actual / Compare) — match .qtr-select
   visual: 8px radius, 12/600 navy text, white bg, light grey border. */
.fs-header-select{
  font-size:12px;
  font-weight:600;
  padding:6px 28px 6px 12px;
  border:1px solid #e2e5ea;
  border-radius:8px;
  background:#ffffff;
  color:#0a1e3d;
  cursor:pointer;
  appearance:none;
  font-family:inherit;
  letter-spacing:.2px;
  line-height:1;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.fs-header-select:hover{
  border-color:#0a1e3d;
  box-shadow:0 2px 8px rgba(10,30,61,.08);
}
.fs-header-select:focus{
  outline:none;
  border-color:#0a1e3d;
}

/* Statement toggle (IS / BS) — must match .subnav .pill byte-for-byte
   (frontend.html lines 67–70). No min-height — natural ~30px height
   from padding + line height. */
.fs-stmt-toggle{
  display:flex;
  background:rgba(10,30,61,.08);
  border-radius:8px;
  padding:3px;
  border:none;
  overflow:visible;
  gap:2px;
  width:fit-content;
}
.fs-stmt-btn{
  font-size:12px;
  font-weight:600;
  padding:8px 20px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  border:none;
  border-radius:6px;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.2px;
  white-space:nowrap;
  line-height:1;
}
.fs-stmt-btn + .fs-stmt-btn{ border-left:none; }
.fs-stmt-btn:hover{ color:#0a1e3d; }
.fs-stmt-btn.active{
  background:#ffffff;
  color:#0a1e3d;
  box-shadow:0 1px 3px rgba(10,30,61,.06), 0 1px 2px rgba(10,30,61,.04);
}

/* Statement-header cell ("INCOME STATEMENT" / "BALANCE SHEET") ────────
   Matches frontend.html .card-head + .card-head h3 (lines 87–88):
     padding:12px 16px / border-bottom:1px solid var(--border)
     h3: 12px / 700 / uppercase / .8px tracking / navy.

   IMPORTANT: the <th> MUST remain display:table-cell. We tried
   display:flex on the th itself in two prior builds; the result was
   that Chromium dropped the bottom border whenever position:sticky
   was also active on the cell (which it is — the first column is
   sticky for horizontal scroll). The fix is to keep the th as a
   normal table cell and put the flex layout on a wrapper <div>
   inside (.fs-stmt-header-inner). The render path now owns three
   redundancies that all draw the same 1px line, so the border can
   never silently regress again:
     1. .fs-table thead th        border-bottom: 1px solid #e2e5ea
     2. .fs-stmt-header-cell      border-bottom: 1px solid #e2e5ea
                                  (with !important — wins specificity)
     3. .fs-stmt-header-cell      box-shadow: inset 0 -1px 0 #e2e5ea
                                  (independent of border-collapse —
                                   renders even if any future rule
                                   somehow nukes the actual border) */
.fs-stmt-header-cell{
  /* No display:flex! Stay a table-cell. */
  vertical-align:middle;
  padding:12px 16px !important;
  border-bottom:1px solid #e2e5ea !important;
  box-shadow:inset 0 -1px 0 #e2e5ea;
}
.fs-stmt-header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
}
.fs-stmt-header-label{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  color:#0a1e3d;
  letter-spacing:.8px;
  text-transform:uppercase;
  line-height:1;
}

/* Statement page company name — match .pg-header h2 (line 63) */
.fs-company-name{
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px;
  color:#0a1e3d;
  font-weight:400;
  line-height:1.25;
}
.fs-company-meta{
  font-size:11px;
  color:#94a3b8;
  margin-top:2px;
}

/* Add-row (read-mode) button — keep dashed-secondary look but tighten
   to platform spacing. */
.fs-add-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  color:#64748b;
  padding:7px 14px;
  border:1.5px dashed #d1d5db;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  transition:.15s;
  min-height:34px;
  font-family:inherit;
  letter-spacing:.2px;
}
.fs-add-btn:hover{
  color:#2c5282;
  border-color:#2c5282;
  background:#ebf0f9;
}


/* ════════════════════════════════════════════════════════════════════
   SECTION 3 — FEATURE 1
   Premium Template Editor — clean dim + lift, no frosted glass.

   Concept (per spec):
     · The financial-statement card lifts into focus with a deeper shadow.
     · The rest of the page (header + KPI strip) dims to 0.4 opacity over
       200ms. Just dimmed — NOT blurred.
     · The toolbar is the FIRST element inside the card — not floating
       above it. White background, subtle bottom border, clean header.
     · Period values stay at FULL opacity; the associate needs the data
       context while editing the template.
     · Derived rows recede to 0.4 with pointer-events:none.
     · Drag handles, settings chevrons, and insert-point + buttons all
       follow the "invisible at rest, subtle on hover" pattern from
       Linear / Notion / Apple Numbers.

   The whole UI flips with one class on .fs-table-container.editing.
   ════════════════════════════════════════════════════════════════════ */


/* ── 3a. The lift card ──────────────────────────────────────────────
   In read mode, the .fs-table-wrap owns the white card chrome (border,
   radius, background). In edit mode we promote the whole
   .fs-table-container into the card so the toolbar sits inside it. */
.fs-table-container{
  position:relative;
  transition:box-shadow 200ms ease,
             border-color 200ms ease,
             background-color 200ms ease;
  border-radius:12px;
}
.fs-table-container.editing{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(10,30,61,.12),
             0 2px 8px rgba(10,30,61,.06);
  z-index:5;
  overflow:hidden;
}
/* Inside the editing card the inner wrap loses its own chrome so the
   toolbar (above) and the table (below) read as one continuous card. */
.fs-table-container.editing .fs-table-wrap{
  border:none;
  border-radius:0;
  background:transparent;
}

/* Page-element dim — KPI strip and header recede to 0.4 opacity over
   200ms when any container inside .fs-page is in edit mode. No blur,
   no overlay div, just opacity. The .fs-table-container.editing keeps
   full opacity because it isn't matched by these selectors. */
.fs-page{ position:relative; }
.fs-header,
.fs-kpi-strip{
  transition:opacity 200ms ease;
}
.fs-page:has(.fs-table-container.editing) .fs-header,
.fs-page:has(.fs-table-container.editing) .fs-kpi-strip{
  opacity:.4;
  pointer-events:none;
}


/* ── 3b. The Edit trigger (read mode) ───────────────────────────────
   The single editing affordance visible in read mode. Per spec:
     11px / var(--dim) / opacity 0.6 at rest, opacity 1 + var(--navy)
     on hover. Subtle so the section header reads as presentational
     first, editable second. */
.cv-edit-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:0;
  border:none;
  background:transparent;
  font-size:11px;
  font-weight:600;
  color:#94a3b8;
  letter-spacing:.4px;
  cursor:pointer;
  transition:color .15s ease, opacity .15s ease;
  font-family:inherit;
  text-transform:uppercase;
  margin-left:auto;
  line-height:1;
  opacity:.6;
}
.cv-edit-trigger:hover{
  color:#0a1e3d;
  opacity:1;
}
.cv-edit-trigger svg{
  width:12px;
  height:12px;
  flex-shrink:0;
  display:block;
  stroke-width:1.6;
}

/* When editing, hide the read-mode add button row (handled via
   render-time gate — but if it ever leaks, this catches it). */
.fs-table-container.editing .fs-add-row{ display:none; }


/* ── 3c. The Toolbar (clean — no frosted glass) ─────────────────────
   First element inside the card; reads as the card's header. White
   background with a single 1px bottom border. Sticky to the top of
   the card so it stays visible while scrolling the table.

   Spec:
     · 16px 24px padding (10/16 on iPad portrait — see media query)
     · Left: small navy "EDITING" badge + serif-free 15px navy title
     · Right: ghost "+ Add Item" + navy "Done"
     · No backdrop-filter, no transparency. */
.cv-edit-toolbar{
  position:sticky;
  top:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  /* fade-in on mount — keeps the lift feeling smooth without overshoot */
  animation:cvEditToolbarIn 200ms ease both;
}
@keyframes cvEditToolbarIn{
  from { opacity:0; transform:translateY(-3px); }
  to   { opacity:1; transform:translateY(0); }
}

.cv-edit-toolbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

/* "EDITING" pill — 10px / 700 / uppercase / var(--dim) on var(--bg).
   The same eyebrow language used elsewhere on the platform. */
.cv-edit-toolbar-eyebrow{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:#94a3b8;
  background:#f7f8fa;
  border-radius:4px;
  padding:3px 8px;
  text-transform:uppercase;
  line-height:1;
}

.cv-edit-toolbar-label{
  font-size:14px;
  font-weight:600;
  color:#0a1e3d;
  letter-spacing:.1px;
  font-family:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cv-edit-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* "+ Add Item" — ghost button: white bg, 1px #e5e7eb border, navy text */
.cv-edit-toolbar-add{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  font-size:12px;
  font-weight:600;
  color:#0a1e3d;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.2px;
  min-height:34px;
}
.cv-edit-toolbar-add svg{ width:11px; height:11px; }
.cv-edit-toolbar-add:hover{
  background:#f7f8fa;
  border-color:#cbd5e1;
}

/* "Done" — solid navy button, 8px radius per spec */
.cv-edit-toolbar-done{
  padding:8px 18px;
  font-size:12px;
  font-weight:600;
  color:#ffffff;
  background:#0a1e3d;
  border:1px solid #0a1e3d;
  border-radius:8px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.2px;
  min-height:34px;
}
.cv-edit-toolbar-done:hover{
  background:#132d52;
  border-color:#132d52;
}


/* ── 3d. Period values stay at FULL opacity in edit mode ────────────
   Per spec: "Period values stay at FULL opacity — the associate needs
   data context while editing the template." (No fade rule here.)

   Derived rows (YoY, margins) recede to 0.4 with pointer-events:none —
   they aren't editable, so they should visually step back. */
.fs-table-container.editing .fs-row-derived{
  opacity:.4;
  pointer-events:none;
  transition:opacity 220ms ease;
}


/* ── 3e. Drag handles ───────────────────────────────────────────────
   Spec: "0 at rest, 0.15 on row hover, 0.5 when grabbed." Color
   #94a3b8, never prominent. */
.fs-drag-handle{
  display:inline-block;
  font-size:12px;
  color:#94a3b8;
  cursor:grab;
  opacity:0;
  margin-right:6px;
  user-select:none;
  vertical-align:middle;
  transition:opacity .15s ease;
}
.fs-table-container.editing .fs-row-editable:hover .fs-drag-handle{
  opacity:.15;
}
.fs-table-container.editing .fs-drag-handle:active,
.fs-row.dragging .fs-drag-handle{
  opacity:.5;
  cursor:grabbing;
}


/* ── 3f. Settings chevron (right side of label cell) ────────────────
   Spec: 14px (rendered at 12px svg inside 22px button = visually 14px),
   #94a3b8 at rest, #0a1e3d on hover. Visible on row-hover only. */
.fs-row-settings-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  margin-left:8px;
  border-radius:5px;
  color:#94a3b8;
  cursor:pointer;
  vertical-align:middle;
  opacity:0;
  transition:opacity .15s ease, transform .2s ease,
             background-color .15s ease, color .15s ease;
  float:right;
  margin-top:6px;
}
.fs-row-settings-chevron svg{
  width:12px;
  height:12px;
  display:block;
}
.fs-table-container.editing .fs-row-editable:hover .fs-row-settings-chevron,
.fs-table-container.editing .fs-row-settings-active .fs-row-settings-chevron{
  opacity:1;
}
.fs-row-settings-chevron:hover{
  background:rgba(10,30,61,.06);
  color:#0a1e3d;
}
.fs-row-settings-chevron.open{
  color:#0a1e3d;
  background:rgba(10,30,61,.06);
  transform:rotate(90deg);
}


/* ── 3g. Row name — inline rename target ────────────────────────────
   Cursor changes to text, faint dashed underline appears on hover.
   Double-click swaps to <input>. */
.fs-table-container.editing .fs-row-editable .fs-row-name{
  cursor:text;
  border-radius:3px;
  padding:1px 4px;
  margin:-1px -4px;
  transition:background-color .12s ease, border-bottom-color .12s ease;
  border-bottom:1px dashed transparent;
}
.fs-table-container.editing .fs-row-editable:hover .fs-row-name{
  border-bottom-color:#d1d5db;
}


/* ── 3h. Row hover / settings-active in edit mode ───────────────── */
.fs-table-container.editing .fs-row-editable td{
  transition:background-color .15s ease;
}
.fs-table-container.editing .fs-row-editable:hover td{
  background:#fafbff;
}
.fs-table-container.editing .fs-row-settings-active td{
  background:#f5f8ff !important;
  border-bottom-color:#dbe5fb;
}

/* Drag-active row — lifts subtly */
.fs-row.dragging,
.fs-row.dragging td{
  background:#ffffff !important;
}
.fs-row.dragging{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(10,30,61,.12);
  z-index:10;
  opacity:.95;
  position:relative;
}


/* ── 3i. Insert points (between non-derived rows, edit mode only) ──
   Spec:
     · Invisible by default
     · On hover in the 8px-zone between rows: thin 1px #e5e7eb line
       appears, with a small circular + button (22px diameter) centered
     · Button: #f8fafc bg, 1px #d1d5db border, #64748b plus sign
     · Hover: #2563eb border, #2563eb plus sign */
.fs-insert-row{
  height:0;
}
.fs-insert-row td{
  position:relative;
  height:14px;
  padding:0 !important;
  border:none !important;
  background:transparent;
  text-align:center;
  opacity:0;
  transition:opacity .12s ease;
}
.fs-table-container.editing .fs-insert-row:hover td,
.fs-table-container.editing .fs-insert-row:focus-within td{
  opacity:1;
}
.fs-insert-row td::before{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  top:50%;
  height:1px;
  background:#e5e7eb;
  pointer-events:none;
  z-index:0;
}

.fs-insert-btn{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#f8fafc;
  border:1px solid #d1d5db;
  color:#64748b;
  cursor:pointer;
  transition:.15s ease;
  padding:0;
}
.fs-insert-btn svg{
  width:11px;
  height:11px;
  stroke:currentColor;
}
.fs-insert-btn:hover{
  border-color:#2563eb;
  color:#2563eb;
  background:#ffffff;
}


/* ── 3i. Inline insert form (after + click) ─────────────────────────
   Single-row layout: name input | IS/BS pill toggle | subcategory
   dropdown | data-type dropdown | Create | Cancel. Wraps gracefully on
   narrow viewports. */
.fs-insert-form-row td{
  padding:8px 14px !important;
  background:#f5f8ff;
  border-top:1px solid #dbe5fb;
  border-bottom:1px solid #dbe5fb;
  text-align:left;
}
.fs-insert-form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  animation:cvInsertFormIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* IS/BS pill toggle inside the inline form — same language as
   .cv-edit-toggle in the settings strip but tightened for the row. */
.fs-insert-form-cat{
  display:inline-flex;
  background:rgba(10,30,61,.08);
  border-radius:6px;
  padding:2px;
  gap:1px;
}
.fs-insert-form-cat-btn{
  font-size:11.5px;
  font-weight:600;
  padding:5px 12px;
  background:transparent;
  color:#64748b;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.2px;
  min-width:38px;
  line-height:1;
}
.fs-insert-form-cat-btn:hover{ color:#0a1e3d; }
.fs-insert-form-cat-btn.active{
  background:#ffffff;
  color:#0a1e3d;
  box-shadow:0 1px 2px rgba(10,30,61,.08);
}

.fs-insert-form-select{
  font-size:11.5px;
  font-weight:500;
  padding:6px 26px 6px 10px;
  border:1px solid #e2e5ea;
  border-radius:5px;
  background:#ffffff;
  color:#0a1e3d;
  cursor:pointer;
  appearance:none;
  font-family:inherit;
  letter-spacing:.1px;
  min-height:32px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.fs-insert-form-select:hover{ border-color:#cbd5e1; }
.fs-insert-form-select:focus{ outline:none; border-color:#2c5282; }
.fs-insert-form-subcat{ min-width:140px; }
.fs-insert-form-dtype{ min-width:120px; }
@keyframes cvInsertFormIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}
.fs-insert-form-input{
  flex:1;
  font-size:12px;
  padding:7px 10px;
  border:1px solid #2c5282;
  border-radius:5px;
  outline:none;
  font-family:inherit;
  background:#ffffff;
  color:#0a1e3d;
  min-height:32px;
  transition:border .15s, box-shadow .15s;
}
.fs-insert-form-input:focus{
  border-color:#2c5282;
  box-shadow:0 0 0 3px rgba(44,82,130,.12);
}
.fs-insert-form-input-error{
  border-color:#c53030 !important;
  box-shadow:0 0 0 3px rgba(197,48,48,.12) !important;
  animation:cvShake .35s ease;
}
@keyframes cvShake{
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-3px); }
  75% { transform:translateX(3px); }
}
.fs-insert-form-create{
  font-size:11.5px;
  font-weight:600;
  padding:7px 14px;
  border:none;
  border-radius:5px;
  background:#0a1e3d;
  color:#ffffff;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.2px;
  min-height:32px;
  transition:.15s;
}
.fs-insert-form-create:hover{ background:#132d52; }
.fs-insert-form-cancel{
  font-size:11.5px;
  font-weight:500;
  padding:7px 12px;
  border:1px solid #e2e5ea;
  border-radius:5px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  font-family:inherit;
  min-height:32px;
  transition:.15s;
}
.fs-insert-form-cancel:hover{
  border-color:#cbd5e1;
  color:#0a1e3d;
}
.fs-insert-form-row.fs-insert-form-saving .fs-insert-form-input,
.fs-insert-form-row.fs-insert-form-saving .fs-insert-form-create{
  opacity:.6;
  pointer-events:none;
}

/* New-row glow after creation */
.fs-row-just-added td{
  animation:cvNewRowGlow 1s ease;
}
@keyframes cvNewRowGlow{
  0%   { background:#ebf2ff; }
  60%  { background:#ebf2ff; }
  100% { background:transparent; }
}


/* ── 3j. Inline rename input ─────────────────────────────────────────
   The .fs-row-name span itself is styled in 3g (above) for the hover
   underline. This block covers the active <input> and the saved-flash
   animation. */
.fs-row-name-input{
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  color:#0a1e3d;
  background:#ffffff;
  border:1px solid #2c5282;
  border-radius:5px;
  padding:3px 8px;
  margin:-3px -8px;
  outline:none;
  width:80%;
  min-width:160px;
  box-shadow:0 0 0 3px rgba(44,82,130,.12);
}
.fs-row-saved td:first-child{
  animation:cvSavedFlash .8s ease;
}
@keyframes cvSavedFlash{
  0%   { background:rgba(39,103,73,.08); }
  60%  { background:rgba(39,103,73,.05); }
  100% { background:transparent; }
}


/* ── 3k. The Settings Strip (in-row, beneath the row) ──────────── */
.cv-edit-settings-row{
  /* Animation: spring-slide open from above */
  animation:cvSettingsStripIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cvSettingsStripIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}
.cv-edit-settings-cell{
  padding:0 !important;
  background:#fafbff !important;
  border-top:1px solid #dbe5fb !important;
  border-bottom:1px solid #dbe5fb !important;
}
.cv-edit-settings-row.cv-edit-saving .cv-edit-settings-cell{
  background:#f0f4ff !important;
}
.cv-edit-settings-row.cv-edit-saved .cv-edit-settings-cell{
  background:rgba(39,103,73,.04) !important;
  transition:background-color .4s ease;
}
.cv-edit-settings-row.cv-edit-error .cv-edit-settings-cell{
  background:rgba(197,48,48,.05) !important;
}

.cv-edit-settings-panel{
  padding:18px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.cv-edit-settings-grid{
  display:grid;
  grid-template-columns:auto 1fr 1fr auto;
  gap:18px;
  align-items:end;
}

/* 5-column variant (used after the Subcategory dropdown was added):
   category | subcategory | equiv | data type | calculated */
.cv-edit-settings-grid-5{
  grid-template-columns:auto 1fr 1fr 1fr auto;
}

.cv-edit-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.cv-edit-field-label{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1px;
  color:#94a3b8;
  text-transform:uppercase;
}

/* IS / BS pill toggle */
.cv-edit-toggle{
  display:inline-flex;
  background:rgba(10,30,61,.08);
  border-radius:6px;
  padding:2px;
  gap:1px;
}
.cv-edit-toggle-opt{
  font-size:11.5px;
  font-weight:600;
  padding:6px 12px;
  background:transparent;
  color:#64748b;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.2px;
  min-width:38px;
}
.cv-edit-toggle-opt:hover{ color:#0a1e3d; }
.cv-edit-toggle-opt.active{
  background:#ffffff;
  color:#0a1e3d;
  box-shadow:0 1px 2px rgba(10,30,61,.08);
}

/* Select dropdowns inside the strip */
.cv-edit-select{
  font-size:12px;
  padding:6px 26px 6px 10px;
  border:1px solid #e2e5ea;
  border-radius:5px;
  background:#ffffff;
  color:#0a1e3d;
  cursor:pointer;
  appearance:none;
  font-family:inherit;
  min-height:30px;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  width:100%;
  letter-spacing:.1px;
}
.cv-edit-select:hover{ border-color:#cbd5e1; }
.cv-edit-select:focus{ outline:none; border-color:#2c5282; box-shadow:0 0 0 3px rgba(44,82,130,.1); }

.cv-edit-input{
  font-size:12px;
  padding:7px 10px;
  border:1px solid #e2e5ea;
  border-radius:5px;
  background:#ffffff;
  color:#0a1e3d;
  font-family:inherit;
  min-height:30px;
  width:100%;
  outline:none;
  transition:border .15s, box-shadow .15s;
}
.cv-edit-input:hover{ border-color:#cbd5e1; }
.cv-edit-input:focus{ border-color:#2c5282; box-shadow:0 0 0 3px rgba(44,82,130,.1); }

/* iOS-style toggle switch (calculated) */
.cv-edit-toggle-switch{
  position:relative;
  display:inline-block;
  width:36px;
  height:20px;
  cursor:pointer;
  flex-shrink:0;
}
.cv-edit-toggle-switch input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.cv-edit-toggle-track{
  position:absolute;
  inset:0;
  background:#cbd5e1;
  border-radius:11px;
  transition:background-color .2s ease;
}
.cv-edit-toggle-track::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:#ffffff;
  border-radius:50%;
  box-shadow:0 1px 2px rgba(10,30,61,.15);
  transition:transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cv-edit-toggle-switch input:checked + .cv-edit-toggle-track{
  background:#2c5282;
}
.cv-edit-toggle-switch input:checked + .cv-edit-toggle-track::before{
  transform:translateX(16px);
}
.cv-edit-toggle-switch input:focus + .cv-edit-toggle-track{
  box-shadow:0 0 0 3px rgba(44,82,130,.18);
}

/* Formula row */
.cv-edit-formula-row{
  display:flex;
  flex-direction:column;
  gap:5px;
  animation:cvFieldExpandIn .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cvFieldExpandIn{
  from{ opacity:0; transform:translateY(-4px); max-height:0; }
  to  { opacity:1; transform:translateY(0); max-height:80px; }
}
.cv-edit-formula{
  font-family:'SF Mono','Menlo','Monaco','Consolas',monospace;
  font-size:11.5px;
  color:#0a1e3d;
  letter-spacing:.1px;
}

/* Parent selector row */
.cv-edit-parent-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.cv-edit-parent-row .cv-edit-field-label{ flex-shrink:0; min-width:54px; }
.cv-edit-parent-select{ max-width:340px; }

/* Aliases row */
.cv-edit-aliases-row{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.cv-edit-alias-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.cv-edit-alias-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 4px 4px 10px;
  background:rgba(44,82,130,.08);
  color:#2c5282;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1px;
  line-height:1;
  border:1px solid rgba(44,82,130,.12);
}
.cv-edit-alias-x{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(44,82,130,.18);
  color:#0a1e3d;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
  user-select:none;
  line-height:1;
}
.cv-edit-alias-x:hover{
  background:#c53030;
  color:#ffffff;
}
.cv-edit-alias-add{
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  background:transparent;
  color:#64748b;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  letter-spacing:.1px;
  line-height:1.4;
}
.cv-edit-alias-add:hover{
  color:#2c5282;
  border-color:#2c5282;
  background:rgba(44,82,130,.04);
}
.cv-edit-alias-input{
  font-size:11px;
  padding:5px 10px;
  border:1px solid #2c5282;
  border-radius:12px;
  outline:none;
  font-family:inherit;
  background:#ffffff;
  color:#0a1e3d;
  width:140px;
  box-shadow:0 0 0 3px rgba(44,82,130,.12);
}

/* Bottom actions row (delete) */
.cv-edit-bottom-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  padding-top:8px;
  border-top:1px solid rgba(10,30,61,.06);
}
.cv-edit-delete-btn{
  font-size:11.5px;
  font-weight:600;
  padding:6px 14px;
  background:transparent;
  color:#c53030;
  border:1px solid transparent;
  border-radius:5px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.2px;
  transition:.15s;
}
.cv-edit-delete-btn:hover{
  background:rgba(197,48,48,.08);
  border-color:rgba(197,48,48,.2);
}

.cv-edit-confirm-delete{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  background:rgba(197,48,48,.06);
  border:1px solid rgba(197,48,48,.18);
  border-radius:6px;
  animation:cvFieldExpandIn .2s ease;
}
.cv-edit-confirm-q{
  font-size:11.5px;
  color:#0a1e3d;
  letter-spacing:.1px;
}
.cv-edit-confirm-q strong{ color:#c53030; font-weight:600; }
.cv-edit-confirm-no{
  font-size:11px;
  font-weight:600;
  padding:5px 12px;
  background:#ffffff;
  color:#64748b;
  border:1px solid #e2e5ea;
  border-radius:4px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.2px;
  transition:.15s;
}
.cv-edit-confirm-no:hover{ color:#0a1e3d; border-color:#cbd5e1; }
.cv-edit-confirm-yes{
  font-size:11px;
  font-weight:600;
  padding:5px 12px;
  background:#c53030;
  color:#ffffff;
  border:1px solid #c53030;
  border-radius:4px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.2px;
  transition:.15s;
}
.cv-edit-confirm-yes:hover{ background:#b91c1c; border-color:#b91c1c; }


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — iPad Landscape (1024–1366px)
   Keeps everything functional with the adjusted column widths the
   1199 breakpoint introduces in canvas.css.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1199px){
  .cv-edit-settings-grid{
    grid-template-columns:auto 1fr 1fr auto;
    gap:14px;
  }
  /* 5-col variant collapses to 3 columns at iPad-landscape so the
     subcategory + equiv + dtype dropdowns each get a usable width. */
  .cv-edit-settings-grid-5{
    grid-template-columns:auto 1fr 1fr;
  }
  .cv-edit-toolbar{ padding:10px 14px; }
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — iPad Portrait (768–1023px)
   44px touch targets; settings grid stacks; toolbar stays sticky and
   full width.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  /* 44px touch targets on every edit-mode control */
  .cv-edit-trigger,
  .cv-edit-toolbar-add,
  .cv-edit-toolbar-done,
  .cv-edit-toggle-opt,
  .cv-edit-select,
  .cv-edit-input,
  .cv-edit-formula,
  .cv-edit-alias-add,
  .cv-edit-delete-btn,
  .cv-edit-confirm-no,
  .cv-edit-confirm-yes,
  .fs-insert-form-input,
  .fs-insert-form-create,
  .fs-insert-form-cancel,
  .fs-insert-form-select,
  .fs-insert-form-cat-btn{
    min-height:44px;
  }
  .fs-insert-btn{ width:32px; height:32px; opacity:.65; }
  .fs-insert-btn svg{ width:14px; height:14px; }
  .fs-row-settings-chevron{ width:32px; height:32px; }
  .fs-row-settings-chevron svg{ width:14px; height:14px; }

  /* Drag handle becomes always-visible at touch sizes */
  .fs-table-container.editing .fs-drag-handle{
    opacity:.55;
    font-size:14px;
    padding:6px;
    margin-right:2px;
  }

  /* Settings grid stacks at iPad portrait — 2 col for both 4-col and
     5-col variants. */
  .cv-edit-settings-grid,
  .cv-edit-settings-grid-5{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .cv-edit-settings-panel{
    padding:14px 14px 16px;
    gap:12px;
  }
  .cv-edit-toolbar{
    padding:10px 12px;
  }
  .cv-edit-toolbar-eyebrow{ display:none; }
  .cv-edit-toolbar-label{ font-size:13px; }
  .cv-edit-parent-row{ flex-direction:column; align-items:stretch; gap:5px; }
  .cv-edit-parent-select{ max-width:none; }

  /* Section 1 — pill touch targets */
  .canvas-strat-pills .canvas-strat-pill,
  .canvas-strat-pills .pill,
  .canvas-portal-subnav .pill{
    padding:11px 18px;
    font-size:12.5px;
  }

  /* Section 2 — KPI / button touch targets */
  .fs-header-btn,
  .fs-header-select,
  .fs-stmt-btn{
    min-height:44px;
  }
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — Phone (max 767px)
   Settings grid fully stacks; toolbar wraps.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .cv-edit-settings-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .cv-edit-toolbar{
    flex-wrap:wrap;
    gap:8px;
  }
  .cv-edit-toolbar-right{
    margin-left:auto;
  }
  .cv-edit-trigger span{ display:none; } /* icon only */
  .cv-edit-trigger{ padding:7px 9px; }
}


/* ════════════════════════════════════════════════════════════════════
   PRINT — Edit mode is always read-only on print.
   ════════════════════════════════════════════════════════════════════ */
@media print{
  .cv-edit-toolbar,
  .cv-edit-trigger,
  .fs-insert-row,
  .fs-row-settings-chevron,
  .fs-drag-handle{ display:none !important; }
  .fs-table-container.editing{
    box-shadow:none !important;
    border:1px solid #e5e7eb !important;
  }
  .fs-page:has(.fs-table-container.editing) .fs-header,
  .fs-page:has(.fs-table-container.editing) .fs-kpi-strip,
  .fs-table-container.editing .fs-row-derived{
    opacity:1 !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   BUILD 2 — INTELLIGENT FINANCIAL WORKSPACE
   May 4, 2026

   Adds: header eyebrow, .fs-toggle pills, view controls, narrative
   strip, spotlight column + annotations, anomaly indicator, heat-map
   cell tints, inline expansion panel (replaces floating popover),
   updated KPI strip descriptors.

   All styles use literal platform tokens — see the file header for
   the rationale (cascade ordering puts canvas.css's :root in a
   different scope than frontend.html's tokens).
   ════════════════════════════════════════════════════════════════════ */


/* ── Header refinements (Build 2) ────────────────────────────────── */
.fs-eyebrow{
  font-size:10px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#a0845c;
  margin-bottom:4px;
}
/* .fs-header .fs-company-name removed — the platform's .pg-header h2
   rule is now the sole owner of the company-name typography. */
.fs-header .fs-company-meta{
  font-size:11px;
  color:#64748b;
  margin-top:4px;
  letter-spacing:.1px;
}


/* The Canvas .fs-toggle / .fs-toggle-pill rules previously defined here
   have been removed. The toggle elements now wear the platform's
   .toggle (card-head) or .subnav (header) classes, so the rules in
   frontend.html supply all sizing, colour, and active-state styling.
   Removing this block lets the platform CSS win cleanly without an
   !important arms race. */


/* ── View Controls (Heat Map / Standard, Spotlight, Edit) ────────── */
.fs-view-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 0 14px;
  flex-wrap:wrap;
}
.fs-vc-left,
.fs-vc-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.fs-vc-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:500;
  padding:7px 14px;
  border:1px solid #e2e5ea;
  border-radius:6px;
  background:#ffffff;
  color:#0a1e3d;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  min-height:34px;
}
.fs-vc-btn:hover{
  background:rgba(10,30,61,.04);
  border-color:#cbd5e1;
}
.fs-vc-btn svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  color:#64748b;
  transition:color .15s;
}
.fs-vc-btn:hover svg{ color:#0a1e3d; }
.fs-vc-spotlight.active{
  background:#fff8eb;
  border-color:#f0d49a;
  color:#7a5e2b;
}
.fs-vc-spotlight.active svg{ color:#a0845c; }
.fs-vc-done{
  background:#0a1e3d;
  color:#ffffff;
  border-color:#0a1e3d;
}
.fs-vc-done:hover{
  background:#0e2754;
  border-color:#0e2754;
}
.fs-vc-edit svg{ color:#64748b; }


/* ── Card wrapper around the table (matches platform .card) ─────── */
.fs-card{
  background:#ffffff;
  border:1px solid #e2e5ea;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(10,30,61,.06), 0 1px 2px rgba(10,30,61,.04);
  overflow:hidden;
  transition:box-shadow .2s ease;
}
.fs-card:hover{
  box-shadow:0 4px 16px rgba(10,30,61,.07), 0 1px 4px rgba(10,30,61,.04);
}
.fs-card-empty{
  padding:40px 24px;
  text-align:center;
  color:#64748b;
  font-size:13px;
}
.fs-card-empty strong{ color:#0a1e3d; }


/* ── Narrative Strip — first element inside the card ─────────────── */
/* No border-bottom — the navy thead provides the divider. */
.fs-narrative{
  padding:14px 16px;
  font-size:12px;
  line-height:1.65;
  color:#334155;
  background:#fafbfd;
}
.fs-narr-pos{
  background:rgba(39,103,73,.12);
  color:#276749;
  padding:1px 5px;
  border-radius:3px;
  font-weight:600;
}
.fs-narr-neg{
  background:rgba(197,48,48,.10);
  color:#c53030;
  padding:1px 5px;
  border-radius:3px;
  font-weight:600;
}
.fs-narr-watch{
  background:rgba(197,48,48,.08);
  color:#9a2929;
  padding:2px 6px;
  border-radius:3px;
  font-weight:500;
  font-size:11.5px;
}


/* ── Spotlight — column header underline + cell annotation ──────── */
.fs-table thead th.fs-col-spotlight{
  position:relative;
  color:#7a5e2b;
}
.fs-table thead th.fs-col-spotlight::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:6px;
  height:2px;
  background:#a0845c;
  border-radius:1px;
}
.fs-table thead th[onclick]{
  cursor:pointer;
  transition:color .15s;
}
.fs-table thead th[onclick]:hover{
  color:#0a1e3d;
}

.fs-spot-annot{
  display:inline-block;
  font-size:9px;
  font-weight:500;
  color:#2c5282;
  margin-left:6px;
  letter-spacing:.1px;
  white-space:nowrap;
  vertical-align:middle;
}
.fs-spot-warn{ color:#c53030; }
.fs-card:not(.fs-spot-on) .fs-spot-annot{ display:none; }

.fs-cell-value{
  display:inline-block;
  vertical-align:middle;
}


/* ── Anomaly indicator — small gold dot in the label cell ───────── */
.fs-anomaly-dot{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a0845c;
  opacity:.7;
  margin-left:6px;
  vertical-align:middle;
  position:relative;
  top:-1px;
}
.fs-row-anomaly:hover .fs-anomaly-dot{ opacity:1; }


/* ── Row hover (read mode) — platform .htable pattern ───────────── */
.fs-table tbody tr.fs-row-detail.fs-row-clickable:hover td,
.fs-table tbody tr.fs-row-child.fs-row-clickable:hover td,
.fs-table tbody tr.fs-row-subtotal.fs-row-clickable:hover td{
  background:rgba(10,30,61,.02);
}


/* ── Expanded row — blue left accent on the row header cell ─────── */
.fs-table tbody tr.fs-row-expanded td{
  background:#f0f5ff !important;
}
.fs-table tbody tr.fs-row-expanded td:first-child{
  box-shadow:inset 3px 0 0 #2c5282;
}


/* ── INLINE EXPANSION (replaces popover) ─────────────────────────── */
.fs-exp-row td.fs-exp-cell{
  padding:0 !important;
  background:#fafbfd !important;
  border-bottom:1px solid #e2e5ea !important;
  position:static !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:left !important;
}
.fs-exp-panel{
  padding:18px 22px 16px;
  animation:fsExpIn .25s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fsExpIn{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:translateY(0); }
}
.fs-exp-empty{
  font-size:12px;
  color:#94a3b8;
  padding:24px 0;
  text-align:center;
}

/* Bar chart */
.fs-exp-chart{
  display:flex;
  align-items:flex-end;
  gap:10px;
  height:122px;
  margin-bottom:14px;
  overflow-x:auto;
  padding:6px 0 0;
}
.fs-exp-bar{
  flex:0 0 auto;
  min-width:48px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  font-variant-numeric:tabular-nums;
}
.fs-exp-bar-value{
  font-size:9px;
  font-weight:600;
  color:#0a1e3d;
  text-align:center;
  line-height:1.2;
  margin-bottom:3px;
  min-height:11px;
}
.fs-exp-bar-track{
  height:80px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-bottom:1px solid #e2e5ea;
  position:relative;
}
.fs-exp-bar-track.fs-exp-has-neg{
  align-items:center;
}
.fs-exp-bar-fill{
  width:80%;
  border-radius:2px 2px 0 0;
  transition:height .25s ease;
  min-height:1px;
}
.fs-exp-bar-pos{ background:rgba(39,103,73,.55); }
.fs-exp-bar-neg{
  background:rgba(197,48,48,.55);
  border-radius:0 0 2px 2px;
}
.fs-exp-bar-empty .fs-exp-bar-track{ background:rgba(10,30,61,.02); }
.fs-exp-bar-label{
  font-size:9.5px;
  font-weight:600;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-align:center;
  margin-top:6px;
}

/* Stats row */
.fs-exp-stats{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  padding:10px 0 14px;
  border-top:1px solid rgba(10,30,61,.06);
}
.fs-exp-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-variant-numeric:tabular-nums;
}
.fs-exp-stat-label{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#94a3b8;
}
.fs-exp-stat-value{
  font-size:13px;
  font-weight:600;
  color:#0a1e3d;
  letter-spacing:-.1px;
}
.fs-exp-stat-meta{
  font-size:10px;
  color:#64748b;
}
.fs-exp-stat-pos .fs-exp-stat-value{ color:#276749; }
.fs-exp-stat-neg .fs-exp-stat-value{ color:#c53030; }

/* Action row */
.fs-exp-actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:6px;
  border-top:1px solid rgba(10,30,61,.06);
}
.fs-exp-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:600;
  padding:7px 12px;
  border-radius:6px;
  cursor:pointer;
  border:none;
  font-family:inherit;
  transition:.15s;
}
.fs-exp-btn-primary{
  background:#0a1e3d;
  color:#ffffff;
}
.fs-exp-btn-primary:hover{ background:#0e2754; }
.fs-exp-btn-ghost{
  background:#ffffff;
  color:#0a1e3d;
  border:1px solid #e2e5ea;
}
.fs-exp-btn-ghost:hover{
  background:rgba(10,30,61,.04);
  border-color:#cbd5e1;
}
.fs-exp-btn-link{
  background:transparent;
  color:#2c5282;
  padding:7px 6px;
}
.fs-exp-btn-link:hover{ text-decoration:underline; }
.fs-exp-close{
  margin-left:auto;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:#64748b;
  font-size:14px;
  cursor:pointer;
  border-radius:6px;
  transition:.15s;
}
.fs-exp-close:hover{
  background:rgba(10,30,61,.06);
  color:#0a1e3d;
}

/* Inline + Add value form */
.fs-exp-add-form{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 0 4px;
  margin-top:8px;
  border-top:1px solid rgba(10,30,61,.06);
  flex-wrap:wrap;
}
.fs-exp-add-period,
.fs-exp-add-source,
.fs-exp-add-value{
  font-size:12px;
  padding:7px 10px;
  border:1px solid #e2e5ea;
  border-radius:6px;
  background:#ffffff;
  color:#0a1e3d;
  font-family:inherit;
  outline:none;
  min-height:34px;
}
.fs-exp-add-value{
  width:160px;
  font-variant-numeric:tabular-nums;
}
.fs-exp-add-value:focus,
.fs-exp-add-period:focus,
.fs-exp-add-source:focus{
  border-color:#2c5282;
  box-shadow:0 0 0 2px rgba(44,82,130,.08);
}
.fs-exp-add-error{
  border-color:#c53030 !important;
  box-shadow:0 0 0 2px rgba(197,48,48,.10) !important;
}


/* ── HEAT MAP — three intensity levels per polarity ─────────────── */
.fs-card.fs-heat-on .fs-table tbody td.fs-heat-pos-1{ background:rgba(39,103,73,.06) !important; }
.fs-card.fs-heat-on .fs-table tbody td.fs-heat-pos-2{ background:rgba(39,103,73,.12) !important; }
.fs-card.fs-heat-on .fs-table tbody td.fs-heat-pos-3{ background:rgba(39,103,73,.20) !important; }
.fs-card.fs-heat-on .fs-table tbody td.fs-heat-neg-1{ background:rgba(197,48,48,.06) !important; }
.fs-card.fs-heat-on .fs-table tbody td.fs-heat-neg-2{ background:rgba(197,48,48,.12) !important; }
.fs-card.fs-heat-on .fs-table tbody td.fs-heat-neg-3{ background:rgba(197,48,48,.18) !important; }


/* ── KPI strip 4th-card descriptor classes ──────────────────────── */
.fs-kpi-d{
  display:inline-flex;
  align-items:center;
  gap:3px;
  font-variant-numeric:tabular-nums;
}
.fs-kpi-d.pos{  color:#276749; font-weight:600; }
.fs-kpi-d.neg{  color:#c53030; }
.fs-kpi-d.flat{ color:#64748b; }


/* ── Empty placeholder ──────────────────────────────────────────── */
.fs-empty{ color:#cbd5e1; }


/* ── iPad / responsive (Build 2) ────────────────────────────────── */
@media (max-width:1200px){
  .fs-narrative{ font-size:11.5px; padding:12px 14px; }
  .fs-view-controls{ padding:0 0 12px; }
}
@media (max-width:1024px){
  .fs-vc-btn{ padding:6px 12px; font-size:11.5px; }
  .fs-exp-bar{ min-width:40px; }
  .fs-exp-stats{ gap:18px; }
  .fs-spot-annot{ font-size:8.5px; margin-left:4px; }
}
@media (max-width:768px){
  .fs-view-controls{ flex-direction:column; align-items:flex-start; gap:8px; }
  .fs-exp-add-form{ flex-direction:column; align-items:stretch; }
  .fs-exp-add-value{ width:100%; }
  .fs-narrative{ font-size:11px; padding:10px 12px; line-height:1.55; }
}


/* ── Print: collapse interactive UI, keep numbers + narrative ──── */
@media print{
  .fs-view-controls,
  .fs-exp-row,
  .fs-vc-btn{ display:none !important; }
  .fs-narrative{ background:#ffffff !important; }
}


/* ════════════════════════════════════════════════════════════════════
   BUILD 2 CORRECTIVE PASS — Visual fixes to align with the platform.
   May 4, 2026

   These rules override canvas.css's older table styling so the Canvas
   surface reads identically to .soi-table on the Technology page:
   navy header, structural section bands, anchor-weight subtotals,
   recessive derived rows, and the FY column treatment from the spec.
   Loaded AFTER canvas.css → wins on equal specificity.
   ════════════════════════════════════════════════════════════════════ */

/* ── FIX 1 · Navy table header ───────────────────────────────────── */
.fs-table thead th{
  background:#0a1e3d !important;     /* var(--navy) */
  color:#ffffff !important;
  font-size:11px !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.5px !important;
  padding:11px 14px !important;
  border-bottom:none !important;
  text-align:right;
  white-space:nowrap;
}
.fs-table thead th:first-child{
  text-align:left;
}
.fs-table thead th.fs-th-trend,
.fs-table thead th:last-child{
  text-align:center;
}

/* FY header — slightly lighter overlay on top of the navy. The
   border-left becomes a subtle white tick so the column boundary
   is visible without breaking the header colour. */
.fs-table thead th.fs-col-fy,
.fs-table thead th.fs-col-fy-border{
  background:#13284a !important;     /* navy + ~6% white */
  border-left:1px solid rgba(255,255,255,.08) !important;
}

/* Spotlight underline must sit ABOVE the navy fill. The original
   :after rule used a very dark tone — switch to gold so it reads on
   the navy bg. Same colour as the .fs-eyebrow / anomaly dot. */
.fs-table thead th.fs-col-spotlight{
  color:#ffffff !important;
}
.fs-table thead th.fs-col-spotlight::after{
  background:#d6b16a !important;
  height:2px;
  bottom:5px;
}
.fs-table thead th[onclick]:hover{
  background:#13284a !important;
  color:#ffffff !important;
}

/* The label-column header inside the navy bar */
.fs-stmt-header-cell .fs-stmt-header-inner,
.fs-stmt-header-cell .fs-stmt-header-label{
  color:#ffffff !important;
}


/* ── FIX 2 · Section bands inside Income Statement ──────────────── */
.fs-row-section td{
  background:#eef0f5 !important;
  color:#0a1e3d !important;
  font-size:9px !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.08em !important;
  padding:5px 14px !important;
  border-bottom:1px solid #e2e5ea !important;
  border-top:1px solid #e2e5ea !important;
  cursor:default;
}


/* ── FIX 6 · Subtotal rows — anchor weight on every cell ────────── */
.fs-row-subtotal td{
  background:#fafbfc !important;
  border-top:1px solid #e2e5ea !important;
  border-bottom:1px solid #e2e5ea !important;
  font-weight:600 !important;
  font-size:13px !important;
  color:#0a1e3d !important;
  padding:11px 14px !important;
}


/* ── Detail / child rows — match platform .htable cadence ────────── */
.fs-row-detail td,
.fs-row-child td{
  font-size:12px;
  font-weight:500;
  color:#0a1e3d;
  padding:9px 14px !important;
  border-bottom:1px solid #f0f1f3 !important;
}
.fs-row-child td:first-child{ padding-left:32px !important; }


/* ── FIX 7 · Derived rows — clearly subordinate ─────────────────── */
.fs-row-derived td{
  font-size:10.5px !important;
  color:#94a3b8 !important;
  font-weight:400 !important;
  font-style:normal !important;
  padding:3px 14px !important;
  border-bottom:none !important;
  background:#ffffff !important;
  cursor:default !important;
}
.fs-row-derived td:first-child{
  padding-left:24px !important;
  font-style:italic !important;
}
.fs-row-derived:hover td{ background:#ffffff !important; }


/* ── FIX 8 · Row hover (detail/subtotal) — platform navy-04 ─────── */
.fs-table tbody tr.fs-row-detail.fs-row-clickable:hover td,
.fs-table tbody tr.fs-row-child.fs-row-clickable:hover td,
.fs-table tbody tr.fs-row-subtotal.fs-row-clickable:hover td{
  background:rgba(10,30,61,.02) !important;
}
.fs-table tbody tr.fs-row-section:hover td,
.fs-table tbody tr.fs-row-derived:hover td{
  cursor:default !important;
}


/* ── FIX 9 · FY column (data cells) — distinct tint + border ────── */
.fs-table tbody td.fs-col-fy{
  background:#f8f9fc !important;
  border-left:1.5px solid #e2e5ea !important;
}
/* Subtotal / section / derived rows keep their own background but
   gain the FY left-border tick. */
.fs-row-subtotal td.fs-col-fy{ background:#f4f6fa !important; }
.fs-row-section td.fs-col-fy{ background:#eef0f5 !important; }
.fs-row-derived td.fs-col-fy{ background:#fafbfd !important; }


/* ── FIX 5 · Anomaly dot — anchor inside the label cell ─────────── */
.fs-table tbody td:first-child{
  position:relative;
}
.fs-anomaly-dot{
  position:absolute !important;
  top:5px !important;
  right:5px !important;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#a0845c;
  opacity:.75;
  margin-left:0 !important;
}
.fs-row-anomaly:hover .fs-anomaly-dot{ opacity:1; }
/* Avoid overlap with the settings chevron in edit mode */
.fs-table-container.editing .fs-row-editable .fs-anomaly-dot{ display:none; }


/* ── Trend column — center-aligned sparkline ─────────────────────── */
.fs-table tbody td.fs-td-trend,
.fs-table thead th.fs-th-trend{
  text-align:center !important;
}


/* ── Source dot — keep visible on navy header sort, etc. ────────── */
.fs-source-dot{
  background:#2c5282 !important;
}


/* ── Sticky label-column under navy header — make sure the white
   background of the first column doesn't show through under the
   navy header's bottom edge. ──────────────────────────────────── */
.fs-table tbody td:first-child{
  background:inherit;
}
.fs-row-section td:first-child{ background:#eef0f5 !important; }
.fs-row-subtotal td:first-child{ background:#fafbfc !important; }
.fs-row-detail td:first-child,
.fs-row-child td:first-child{ background:#ffffff !important; }
.fs-row-derived td:first-child{ background:#ffffff !important; }
.fs-row-expanded td:first-child{ background:#f0f5ff !important; }
.fs-table tbody tr.fs-row-detail.fs-row-clickable:hover td:first-child,
.fs-table tbody tr.fs-row-child.fs-row-clickable:hover td:first-child,
.fs-table tbody tr.fs-row-subtotal.fs-row-clickable:hover td:first-child{
  background:#fafafc !important;
}


/* ── Negative values — keep red on the navy-derived backgrounds ─ */
.fs-row-detail td.fs-neg,
.fs-row-child td.fs-neg,
.fs-row-subtotal td.fs-neg{ color:#c53030 !important; }


/* ── iPad refinement (Build 2 corrective) ───────────────────────── */
@media (max-width:1200px){
  .fs-table thead th{ padding:9px 11px !important; font-size:10.5px !important; }
  .fs-row-section td{ padding:5px 11px !important; }
  .fs-row-subtotal td,
  .fs-row-detail td,
  .fs-row-child td{ padding:8px 11px !important; }
}
@media (max-width:1024px){
  .fs-table thead th{ padding:8px 10px !important; font-size:10px !important; }
  .fs-row-subtotal td{ font-size:12px !important; }
  .fs-row-detail td,
  .fs-row-child td{ font-size:11.5px; padding:7px 10px !important; }
  .fs-row-derived td{ font-size:10px !important; padding:2px 10px !important; }
  .fs-row-section td{ font-size:8.5px !important; padding:4px 10px !important; }
}


/* ════════════════════════════════════════════════════════════════════
   ENTERPRISE OVERHAUL — Build 2, May 4 2026
   Canvas must read like the Technology page: compact KPIs, navy SOI
   header, dense rows, no wasted vertical chrome. Intelligence is
   revealed through interaction, not painted on the resting surface.

   This block runs AFTER every previous canvas.css / canvas-build15.css
   rule, so it wins on equal specificity. Where existing rules used
   !important, these use !important too.
   ════════════════════════════════════════════════════════════════════ */


/* ── Page wrap + header — let .content (frontend.html) own spacing ─
   The .fs-page wrapper has no top padding, and the .fs-header (which
   wears .pg-header too) drops the canvas.css legacy "padding: 20px 0
   16px" + "border-bottom" so it sits flush with the platform's
   .pg-header pattern. Net: the FINANCIAL WORKSPACE eyebrow lands at
   the same vertical position as TECHNOLOGY PORTFOLIO does on the
   Tech page (just .content's 16px padding above it). */
.fs-page{
  padding-top:0 !important;
}
.fs-header,
.fs-header.pg-header{
  padding:0 !important;
  border-bottom:none !important;
  align-items:flex-end !important;
  margin-bottom:12px !important;
}


/* ── Header — Canvas adds .pg-header to its header div, so the
   platform's .pg-header / .pg-header .sub / .pg-header h2 rules
   apply natively. The rules below only handle Canvas-specific
   layout (back arrow, header-title flex, header-right gap) and do
   NOT redefine the styles that .pg-header* already provides. ──── */
.fs-header-left{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  align-self:flex-end;
}
.fs-header-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.fs-back-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:none;
  background:transparent;
  color:#64748b;
  cursor:pointer;
  border-radius:4px;
  flex-shrink:0;
  transition:.15s;
}
.fs-back-arrow:hover{
  background:rgba(10,30,61,.06);
  color:#0a1e3d;
}
.fs-back-arrow svg{ width:14px; height:14px; }

.fs-back-btn{ display:none !important; }   /* legacy element, suppressed */

/* The company-meta line sits below the title; tighten its top margin
   so it nestles under the 26px h2 the platform style provides. */
.fs-header .fs-company-meta{
  font-size:11px;
  color:#64748b;
  margin-top:3px;
  letter-spacing:.1px;
}

.fs-header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* The header statement toggle now wears the platform's .subnav class,
   so all sizing/colour comes from .subnav and .subnav .pill in
   frontend.html. We only need to ensure inline-flex layout for the
   <span> children (since .subnav .pill applies regardless of the tag,
   no extra rules needed here). */

.fs-header-select,
.fs-header-btn{
  font-size:12px !important;
  height:32px !important;
  min-height:32px !important;
}


/* ── KPI strip — byte-for-byte .mc / .metrics from frontend.html ── */
.fs-kpi-strip{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:14px !important;
  padding:0 !important;
  margin:0 0 14px !important;          /* margin-top:0; margin-bottom:14px (KPIs → card gap) */
  overflow:visible !important;
}
.fs-kpi-card{
  flex:none !important;
  min-width:0 !important;
  padding:22px 24px 20px !important;
  background:#ffffff !important;
  border:1px solid #e2e5ea !important;
  border-radius:10px !important;
  position:relative;
  overflow:hidden;
  transition:box-shadow .2s !important;
}
.fs-kpi-card:hover{
  box-shadow:0 4px 16px rgba(10,30,61,.07) !important;
}
.fs-kpi-card::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:#0a1e3d;
  opacity:0;
  transition:opacity .15s ease;
}
.fs-kpi-card:hover::after{ opacity:1; }
.fs-kpi-label{
  font-size:10px !important;
  font-weight:700 !important;
  color:#0a1e3d !important;       /* navy, NOT dim — matches .mc .ml */
  text-transform:uppercase !important;
  letter-spacing:1px !important;
  line-height:1 !important;
  margin-bottom:0 !important;
}
.fs-kpi-value{
  font-size:28px !important;
  font-weight:300 !important;
  color:#0a1e3d !important;
  letter-spacing:-.8px !important;
  line-height:1 !important;
  margin-top:12px !important;
  font-variant-numeric:tabular-nums;
}
.fs-kpi-delta{
  font-size:9px !important;
  font-weight:500 !important;
  color:#64748b !important;
  margin-top:12px !important;
  letter-spacing:.3px !important;
  line-height:1 !important;
  font-variant-numeric:tabular-nums;
}
.fs-kpi-d{ font-size:9px !important; letter-spacing:.3px !important; }
.fs-kpi-d.pos{ color:#276749 !important; font-weight:600 !important; }
.fs-kpi-d.neg{ color:#c53030 !important; }


/* ── View-controls bar removed — neutralise legacy mount ────────── */
.fs-view-controls{ display:none !important; }


/* ── Card + card-head (matches platform .card / .card-head) ─────── */
.fs-card{
  background:#ffffff !important;
  border:1px solid #e2e5ea !important;
  border-radius:8px !important;
  margin-bottom:12px !important;
  overflow:hidden !important;
  box-shadow:none !important;
  transition:none !important;
}
.fs-card:hover{ box-shadow:none !important; }

.fs-card-head{
  padding:12px 16px !important;
  border-bottom:1px solid #e2e5ea !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
  flex-wrap:wrap;
  background:#ffffff;
}
.fs-card-head-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.fs-card-head-right{
  display:flex;
  align-items:center;
  gap:8px;
}
/* Period-range toggle — same .toggle pattern as Standard/Heat Map.
   Slightly tighter gap so two toggle groups sit comfortably. */
.fs-period-toggle{ margin-left:0; }

/* The card-head Standard / Heat Map toggle wears the platform's
   .toggle class, so .toggle / .toggle span / .toggle span.active in
   frontend.html supply the styling. No Canvas-side overrides — that
   way the toggle reads byte-for-byte like every other .toggle on the
   platform. */

/* Spotlight + Edit Template — platform .a-btn ghost pattern */
.fs-ch-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 14px !important;
  border-radius:6px !important;
  font-size:12px !important;
  font-weight:500 !important;
  color:#0a1e3d !important;
  background:#ffffff !important;
  border:1px solid #e2e5ea !important;
  cursor:pointer;
  font-family:inherit;
  line-height:1;
  transition:.15s;
}
.fs-ch-btn:hover{
  background:#f0f1f3 !important;
  border-color:#cbd5e1 !important;
}
.fs-ch-btn svg{ width:12px; height:12px; color:#64748b; }
.fs-ch-spotlight.active{
  background:#fff8eb !important;
  border-color:#f0d49a !important;
  color:#7a5e2b !important;
}
.fs-ch-spotlight.active svg{ color:#a0845c; }


/* ── Narrative — slim one-line banner inside the card ───────────── */
/* No border-bottom: the narrative flows directly into the navy thead.
   The card-head above it owns the divider border. */
.fs-narrative{
  padding:8px 16px !important;
  font-size:11px !important;
  line-height:1.5 !important;
  color:#64748b !important;
  background:#fafbfd !important;
  border-bottom:none !important;
  white-space:normal;
}
.fs-narrative strong{
  font-weight:600;
  color:#0a1e3d;
}
.fs-narr-pos{
  background:rgba(39,103,73,.12) !important;
  color:#276749 !important;
  padding:1px 4px !important;
  border-radius:3px !important;
  font-weight:600 !important;
  font-size:11px !important;
}
.fs-narr-neg{
  background:rgba(197,48,48,.10) !important;
  color:#c53030 !important;
  padding:1px 4px !important;
  border-radius:3px !important;
  font-weight:600 !important;
  font-size:11px !important;
}
.fs-narr-watch{
  color:#9a2929 !important;
  background:transparent !important;
  padding:0 !important;
  font-weight:500 !important;
  font-size:11px !important;
}
.fs-narr-watch::before{ content:''; }


/* ── Table — tight rows matching SOI ────────────────────────────── */
.fs-table-wrap{
  border:none !important;
  border-radius:0 !important;
  background:#ffffff !important;
}
.fs-table thead th{
  padding:10px 14px !important;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.5px !important;
  background:#0a1e3d !important;
  color:#ffffff !important;
  border-bottom:none !important;
}
.fs-table thead th:first-child{ text-align:left; }
.fs-table thead th.fs-th-trend,
.fs-table thead th:last-child{ text-align:center; }
.fs-table thead th.fs-col-fy{
  background:#13284a !important;
  border-left:1px solid rgba(255,255,255,.08) !important;
}

/* Section bands — quiet structural dividers */
.fs-row-section td{
  background:#eef0f5 !important;
  color:#0a1e3d !important;
  font-size:9px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  padding:5px 14px !important;
  text-transform:uppercase;
  border-top:1px solid #e2e5ea !important;
  border-bottom:1px solid #e2e5ea !important;
  cursor:default !important;
}

/* Detail / child rows — match .soi-table td (10/14, 12px values) */
.fs-row-detail td,
.fs-row-child td{
  font-size:12px !important;
  font-weight:400 !important;
  color:#0a1e3d !important;
  padding:10px 14px !important;
  border-bottom:1px solid #f0f1f3 !important;
  background:#ffffff !important;
}
.fs-row-detail td:first-child,
.fs-row-child td:first-child{
  font-size:13px !important;
  font-weight:500 !important;
  text-align:left !important;
}
.fs-row-child td:first-child{ padding-left:30px !important; }

/* Subtotal rows — same padding/sizes, weight 600 on every cell */
.fs-row-subtotal td{
  background:#fafbfc !important;
  border-top:1px solid #e2e5ea !important;
  border-bottom:1px solid #e2e5ea !important;
  font-weight:600 !important;
  font-size:12px !important;
  color:#0a1e3d !important;
  padding:10px 14px !important;
}
.fs-row-subtotal td:first-child{
  font-size:13px !important;
  text-align:left !important;
}

/* Derived rows — clearly subordinate */
.fs-row-derived td{
  font-size:11px !important;
  color:#94a3b8 !important;
  font-weight:400 !important;
  font-style:normal !important;
  padding:3px 14px !important;
  border-bottom:none !important;
  background:#ffffff !important;
  cursor:default !important;
}
.fs-row-derived td:first-child{
  padding-left:24px !important;
  font-style:italic !important;
}
.fs-row-derived:hover td{ background:#ffffff !important; }


/* ── Hover (detail / subtotal / child) — matches SOI #f0f4f9 ────── */
.fs-table tbody tr.fs-row-detail.fs-row-clickable:hover td,
.fs-table tbody tr.fs-row-child.fs-row-clickable:hover td,
.fs-table tbody tr.fs-row-subtotal.fs-row-clickable:hover td{
  background:#f0f4f9 !important;
}
.fs-table tbody tr.fs-row-detail.fs-row-clickable:hover td:first-child,
.fs-table tbody tr.fs-row-child.fs-row-clickable:hover td:first-child,
.fs-table tbody tr.fs-row-subtotal.fs-row-clickable:hover td:first-child{
  background:#f0f4f9 !important;
}


/* ── Empty-row fade (no data anywhere) ──────────────────────────── */
.fs-row-empty td{ opacity:.55 !important; }
.fs-row-empty .fs-empty{ color:#d1d5db !important; }
.fs-row-empty:hover td{ opacity:.85 !important; }


/* ── Anomaly dot — 4px / 0.5 opacity ────────────────────────────── */
.fs-anomaly-dot{
  position:absolute !important;
  top:5px !important;
  right:6px !important;
  width:4px !important;
  height:4px !important;
  border-radius:50%;
  background:#a0845c !important;
  opacity:.5 !important;
  margin-left:0 !important;
}
.fs-row-anomaly:hover .fs-anomaly-dot{ opacity:.8 !important; }


/* ── FY column — data + subtotal tints ──────────────────────────── */
.fs-table tbody td.fs-col-fy{
  background:#f8f9fc !important;
  border-left:1.5px solid #e2e5ea !important;
}
.fs-row-subtotal td.fs-col-fy{ background:#f3f5f8 !important; }
.fs-row-section td.fs-col-fy{ background:#eef0f5 !important; }
.fs-row-derived td.fs-col-fy{ background:#fafbfd !important; }


/* ── Sparkline + trend cell — 36×12, centred ─────────────────────── */
.fs-table tbody td.fs-td-trend{
  text-align:center !important;
  padding:6px 8px !important;
}
.fs-spark-wrap{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.fs-spark-qoq{
  font-size:10px !important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}


/* ── Inline spotlight annotation — neutralise (replaced by tip) ── */
.fs-spot-annot{ display:none !important; }


/* ── Source dot — 4px ────────────────────────────────────────────── */
.fs-source-dot{
  width:4px !important;
  height:4px !important;
  background:#2c5282 !important;
  opacity:.55;
  margin-left:5px !important;
  vertical-align:middle;
}


/* ── Spotlight column — gold underline on header only ───────────── */
.fs-table thead th.fs-col-spotlight{
  color:#ffffff !important;
}
.fs-table thead th.fs-col-spotlight::after{
  content:"";
  position:absolute;
  left:8px; right:8px; bottom:5px;
  height:2px;
  background:#d6b16a !important;
  border-radius:1px;
}
.fs-table thead th[onclick]:hover{
  background:#13284a !important;
}


/* ── TOOLTIP (single floating element, JS-positioned) ───────────── */
.fs-tip{
  position:absolute;
  z-index:30;
  background:#0a1e3d;
  color:#ffffff;
  font-size:11px;
  line-height:1.5;
  padding:8px 12px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity .12s ease, transform .12s ease;
  box-shadow:0 6px 18px rgba(10,30,61,.18), 0 1px 4px rgba(10,30,61,.10);
  max-width:340px;
}
.fs-tip.show{
  opacity:1;
  transform:translateY(0);
}
.fs-tip-row{ display:block; }
.fs-tip-headline{
  font-weight:600;
  color:#ffffff;
  margin-bottom:2px;
}
.fs-tip-headline .fs-tip-meta{
  font-weight:400;
  color:rgba(255,255,255,.65);
}
.fs-tip-deltas{
  color:rgba(255,255,255,.78);
}
.fs-tip-pctrev{
  color:rgba(255,255,255,.65);
}
.fs-tip-warn{
  color:#f0d49a;
  margin-top:3px;
  font-weight:500;
}
.fs-tip-source{
  margin-top:4px;
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:10px;
  color:rgba(255,255,255,.55);
}
/* Caret — points at the cell. Below variant flips. */
.fs-tip::after{
  content:"";
  position:absolute;
  bottom:-5px;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#0a1e3d;
  border-bottom:0;
}
.fs-tip.fs-tip-below::after{
  bottom:auto;
  top:-5px;
  border-top:0;
  border-bottom:5px solid #0a1e3d;
}


/* ── Expanded row — keep existing blue accent ───────────────────── */
.fs-table tbody tr.fs-row-expanded td{
  background:#f0f5ff !important;
}
.fs-table tbody tr.fs-row-expanded td:first-child{
  box-shadow:inset 3px 0 0 #2c5282 !important;
  background:#f0f5ff !important;
}


/* ── iPad responsive (parity pass) ──────────────────────────────── */
@media (max-width:1200px){
  .fs-kpi-strip{ grid-template-columns:repeat(4, 1fr) !important; gap:12px !important; }
  .fs-kpi-card{ padding:18px 20px 16px !important; }
  .fs-kpi-value{ font-size:24px !important; }
}
@media (max-width:1024px){
  .fs-header h2.fs-company-name,
  .fs-header .fs-company-name{ font-size:22px !important; }
  .fs-kpi-strip{ grid-template-columns:repeat(3, 1fr) !important; gap:10px !important; }
  .fs-kpi-card{ padding:16px 18px 14px !important; }
  .fs-kpi-value{ font-size:22px !important; }
  .fs-narrative{ font-size:10.5px !important; padding:7px 14px !important; }
  .fs-card-head{ padding:10px 14px !important; }
  .fs-table thead th{ padding:9px 11px !important; font-size:10.5px !important; letter-spacing:.4px !important; }
  .fs-row-detail td,
  .fs-row-child td{ padding:9px 11px !important; }
  .fs-row-subtotal td{ padding:9px 11px !important; }
  .fs-row-derived td{ font-size:10.5px !important; padding:2px 11px !important; }
  .fs-row-section td{ font-size:8.5px !important; padding:4px 11px !important; }
}
@media (max-width:820px){
  .fs-kpi-strip{ grid-template-columns:repeat(2, 1fr) !important; }
  .fs-header{ flex-direction:column; align-items:stretch; gap:10px; }
  .fs-header-right{ justify-content:flex-start; }
}
@media (max-width:600px){
  .fs-card-head{ flex-direction:column; align-items:stretch; gap:8px; }
  .fs-card-head-right{ justify-content:space-between; }
  .fs-kpi-value{ font-size:20px !important; }
}


/* ════════════════════════════════════════════════════════════════════
   Build 2 — Period range support (May 5 2026)

   When 8Q/12Q/All is selected the table can overflow horizontally. The
   first column needs an explicit (not inherited) background per row
   type so data scrolling underneath isn't visible through the sticky
   cell. The table-wrap already has overflow-x:auto from canvas.css.
   ════════════════════════════════════════════════════════════════════ */

/* Sticky navy header — first cell must stay navy through scroll */
.fs-table thead th:first-child{
  background:#0a1e3d !important;
}

/* Sticky body cells per row type */
.fs-table tbody tr.fs-row-detail td:first-child,
.fs-table tbody tr.fs-row-child td:first-child{
  background:#ffffff !important;
}
.fs-table tbody tr.fs-row-subtotal td:first-child{
  background:#fafbfc !important;
}
.fs-table tbody tr.fs-row-derived td:first-child{
  background:#ffffff !important;
}
.fs-table tbody tr.fs-row-section td:first-child{
  background:#eef0f5 !important;
}
.fs-table tbody tr.fs-row-detail.fs-row-clickable:hover td:first-child,
.fs-table tbody tr.fs-row-child.fs-row-clickable:hover td:first-child,
.fs-table tbody tr.fs-row-subtotal.fs-row-clickable:hover td:first-child{
  background:#f0f4f9 !important;
}
.fs-table tbody tr.fs-row-expanded td:first-child{
  background:#f0f5ff !important;
}