:root {
    --future-green:    #24523B;
    --primary-dark: #1D5037;
    --accent-green: #18A938;
    --premium-navy: #1E3A5F;
    --slate-blue:   #4F6D8A;
    --dusty-blue:   #6E8FA8;
    --sage:         #709080;
    --amber:        #C46A2D;
    --terracotta:   #D9824B;
    --grey-beige:   #E0E0D8;
    --muted-green:  #406850;
    --charcoal:     #2B2F33;
    --bg:           #F0F0E8;
    --surface:      #F8F8F8;
  }
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; font-family:"Aptos","Aptos Display","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif; background:var(--bg); color:var(--charcoal); }
  header { background:var(--future-green); color:#fff; padding:14px 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid var(--future-green); }
  header .left { display:flex; align-items:center; gap:18px; }
  header img.logo { display:block; height:56px; width:auto; flex:none; border-radius:4px; }
  header h1 { margin:0; font-size:22px; letter-spacing:0.3px; }
  header .sub { font-size:12px; opacity:0.9; margin-top:3px; }
  header .right { font-size:12px; text-align:right; opacity:0.95; }
  header .right strong { font-size:14px; }

  .tabs { display:flex; gap:2px; background:var(--grey-beige); padding:0 28px; border-bottom:1px solid var(--grey-beige); }
  .tab { padding:12px 20px; background:transparent; border:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--muted-green); border-bottom:3px solid transparent; font-family:inherit; }
  .tab:hover:not(.active) { color:var(--primary-dark); }
  .tab.active { color:var(--primary-dark); border-bottom-color:var(--accent-green); background:var(--bg); }

  main { padding:22px 28px; }
  .panel { display:none; }
  .panel.active { display:block; }

  .kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:18px; }
  .kpi { background:var(--surface); border:1px solid var(--grey-beige); border-left:4px solid var(--accent-green); border-radius:6px; padding:14px 16px; box-shadow:0 1px 2px rgba(29,80,55,0.05); }
  .kpi .label { font-size:11px; color:var(--muted-green); text-transform:uppercase; letter-spacing:0.5px; }
  .kpi .value { font-size:22px; font-weight:700; margin-top:4px; color:var(--primary-dark); }
  .kpi .sub   { font-size:11px; color:var(--muted-green); margin-top:2px; }
  .kpi.asset .value { color:var(--accent-green); }
  .kpi.liab  .value { color:var(--terracotta); }

  .card { background:var(--surface); border:1px solid var(--grey-beige); border-radius:6px; padding:18px; margin-bottom:18px; box-shadow:0 1px 3px rgba(29,80,55,0.04); }
  .card h2 { margin:0 0 4px; font-size:16px; color:var(--primary-dark); }
  .card .hint { font-size:12px; color:var(--muted-green); margin-bottom:14px; }
  .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .row-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
  @media (max-width: 1100px) { .row-3 { grid-template-columns:1fr 1fr; } }

  /* Two-column dashboard row — two .card children side by side, each
     taking half the width. Children's own margin-bottom is suppressed
     since the row itself adds the spacing below. Collapses to a single
     column on narrow viewports so charts don't squash unreadably.
     min-width:0 is REQUIRED on grid items that contain a Chart.js canvas
     — without it the cell auto-sizes to its content and Chart.js's
     responsive resize loop blows the call stack ("Maximum call stack
     size exceeded"). */
  .dashboard-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
  .dashboard-row > .card { margin-bottom:0; min-width:0; }
  @media (max-width: 1100px) { .dashboard-row { grid-template-columns:1fr; } }

  /* Chart-control toggle: positioned absolutely at the bottom-right of the
     chart container so it sits on the same horizontal line as Chart.js's
     bottom-aligned legend. Pointer-events stay on by default so the
     checkbox itself remains clickable. */
  .chart-toggle {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; color:var(--muted-green); cursor:pointer;
    user-select:none;
  }
  .chart-toggle:hover { color: var(--primary-dark); }
  .chart-toggle input[type="checkbox"] {
    width:14px; height:14px; cursor:pointer; accent-color:var(--accent-green); margin:0;
  }
  .chart-toggle-overlay {
    position:absolute; bottom:8px; right:8px;
    z-index:2;
  }

  /* === Balance Sheet tab ===
     Classic two-column financial-statement layout (Assets | L+E).  Each
     side is a stack of <table>s; the right side carries two tables (Liabs
     and Equity) with a final "Total L+E" line. Rows are .drill, so the
     popup's delegated [data-drill] handler picks them up automatically. */
  .bs-statement { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:10px; }
  @media (max-width: 900px) { .bs-statement { grid-template-columns:1fr; } }
  .bs-side h3 { margin:6px 0 6px; font-size:13px; color:var(--primary-dark); text-transform:uppercase; letter-spacing:0.6px; border-bottom:2px solid var(--primary-dark); padding-bottom:4px; }
  .bs-side h3 + h3 { margin-top:18px; }
  .bs-table { table-layout:fixed; font-size:13.5px; }
  .bs-table col.bs-col-num { width:140px; }
  .bs-table tbody td { padding:7px 10px; }
  .bs-table tbody tr.drill:hover { background:rgba(24,169,56,0.06); }
  .bs-table tfoot td { padding:9px 10px; border-top:2px solid var(--primary-dark); border-bottom:none; font-weight:600; }
  .bs-table tfoot tr.bs-subtotal td { border-top:1px solid var(--grey-beige); font-style:italic; color:var(--muted-green); }
  .bs-table tfoot tr.bs-total td { font-weight:700; color:var(--primary-dark); border-top:2px solid var(--primary-dark); border-bottom:3px double var(--primary-dark); font-size:14px; }
  .bs-footnote { margin-top:18px; padding-top:12px; border-top:1px solid var(--grey-beige); font-size:12px; }

  /* === Market Data cards ===
     Each card carries a title on the left and a dropdown (or other control)
     on the right of the header row. The body table fills the rest of the card. */
  .md-card-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
  .md-card-head h2 { margin:0; }
  .md-card-controls { display:flex; align-items:center; gap:8px; }
  .md-card-controls label { font-size:11px; color:var(--muted-green); text-transform:uppercase; letter-spacing:0.4px; }
  .md-card-controls select { padding:5px 8px; border:1px solid var(--grey-beige); border-radius:4px; font-size:13px; background:#fff; color:var(--charcoal); font-family:inherit; cursor:pointer; min-width:160px; }

  /* === Draggable chart-segment callouts ===
     Plugin in js/charts/segment-callouts.js injects this overlay into any
     chart wrapper that has `options.plugins['product-callouts'].enabled=true`.
     The overlay is pointer-events:none so chart click-to-drill still works
     on the canvas; only the boxes themselves capture pointer events. */
  .chart-callout-overlay { position:absolute; inset:0; pointer-events:none; z-index:2; }
  .chart-callout-leaders { position:absolute; inset:0; pointer-events:none; }
  .chart-callout-line    { stroke:var(--primary-dark); stroke-width:1.5; stroke-dasharray:3 3; opacity:0.75; }

  .chart-callout-box {
    position:absolute;
    background:#fff;
    border:1.5px solid var(--primary-dark);
    border-radius:8px;
    padding:6px 10px;
    font-family:inherit;
    cursor:grab;
    user-select:none;
    pointer-events:auto;
    box-shadow:0 2px 6px rgba(29,80,55,0.18);
    min-width:140px;
    line-height:1.25;
  }
  .chart-callout-box:hover    { border-color:var(--accent-green); box-shadow:0 3px 9px rgba(24,169,56,0.22); }
  .chart-callout-box.dragging { cursor:grabbing; box-shadow:0 6px 16px rgba(0,0,0,0.22); border-color:var(--accent-green); }
  .chart-callout-box .callout-name { font-size:11.5px; font-weight:700; color:var(--primary-dark); margin-bottom:2px; }
  .chart-callout-box .callout-figs { font-size:11px;   font-weight:500; color:var(--charcoal); }

  table { width:100%; border-collapse:collapse; font-size:13px; }
  th, td { padding:8px 10px; border-bottom:1px solid var(--grey-beige); text-align:left; vertical-align:middle; }
  th { background:var(--bg); color:var(--primary-dark); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; font-size:11.5px; cursor:pointer; user-select:none; }
  th.sort-asc::after  { content:' ▲'; color:var(--accent-green); }
  th.sort-desc::after { content:' ▼'; color:var(--accent-green); }
  td.num, th.num { text-align:center; font-variant-numeric:tabular-nums; }
  tbody tr:hover { background:rgba(24,169,56,0.05); }

  /* Vertical ladder table */
  .ladder-vtbl { font-size:12.5px; }
  .ladder-vtbl th, .ladder-vtbl td { padding:5px 8px; }
  .ladder-vtbl tr.subhead td { background:var(--grey-beige); color:var(--primary-dark); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:0.4px; }
  .ladder-vtbl td.bucket { font-weight:600; color:var(--primary-dark); white-space:nowrap; }
  .ladder-vtbl td.period { color:var(--muted-green); white-space:nowrap; }
  .ladder-vtbl td.asset  { background:rgba(24,169,56,0.08); color:var(--primary-dark); }
  .ladder-vtbl td.liab   { background:rgba(217,130,75,0.10); }
  .ladder-vtbl td.gap.pos { color:var(--accent-green); font-weight:600; }
  .ladder-vtbl td.gap.neg { color:var(--terracotta);   font-weight:600; }
  .ladder-vtbl tfoot td  { font-weight:700; background:var(--bg); }

  /* Horizontal tenor-band summary grid */
  .ladder-grid { display:grid; gap:6px; align-items:center; }
  .ladder-grid .header { font-weight:700; color:var(--primary-dark); font-size:11.5px; text-transform:uppercase; letter-spacing:0.3px; text-align:center; padding:4px 0; }
  .ladder-grid .label { font-weight:600; color:var(--primary-dark); font-size:12px; }
  .ladder-grid .num { font-variant-numeric:tabular-nums; text-align:center; font-size:12.5px; padding:4px 6px; border-radius:3px; }
  .ladder-grid .num.asset { background:rgba(24,169,56,0.10); color:var(--primary-dark); }
  .ladder-grid .num.liab  { background:rgba(217,130,75,0.12); color:var(--charcoal); }
  .ladder-grid .num.gap   { font-weight:700; }
  .ladder-grid .num.gap.pos { color:var(--accent-green); }
  .ladder-grid .num.gap.neg { color:var(--terracotta); }

  /* Chart */
  .chart-wrap { width:100%; overflow-x:auto; }
  .chart-legend { display:flex; gap:18px; font-size:12px; margin-top:8px; color:var(--charcoal); }
  .chart-legend .swatch { display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:6px; vertical-align:middle; }

  /* Bars (loan book) */
  .hbar { background:var(--grey-beige); height:18px; border-radius:3px; overflow:hidden; }
  .hbar > span { display:block; height:100%; }
  .hbar.asset > span { background:var(--accent-green); }
  .hbar-label { font-size:12px; color:var(--charcoal); margin-bottom:3px; display:flex; justify-content:space-between; }

  /* Donut */
  .donut-row { display:flex; gap:24px; align-items:center; }
  .donut-row svg, .donut-row canvas { flex:none; }
  .legend ul { list-style:none; padding:0; margin:0; }
  .legend li { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:12.5px; }
  .legend .swatch { width:14px; height:14px; border-radius:3px; flex:none; }

  /* Filters */
  .filter-row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:14px; }
  .ctl { display:flex; flex-direction:column; gap:4px; }
  .ctl label { font-size:11px; color:var(--muted-green); text-transform:uppercase; letter-spacing:0.4px; }
  .ctl select, .ctl input { padding:6px 9px; border:1px solid var(--grey-beige); border-radius:4px; font-size:13px; background:#fff; min-width:130px; color:var(--charcoal); font-family:inherit; }
  .ctl select:focus, .ctl input:focus { outline:2px solid var(--accent-green); outline-offset:-1px; border-color:var(--accent-green); }
  button.btn { padding:6px 12px; border:1px solid var(--grey-beige); background:#fff; border-radius:4px; cursor:pointer; font-size:13px; color:var(--primary-dark); font-family:inherit; font-weight:600; }
  button.btn:hover { background:var(--primary-dark); color:#fff; border-color:var(--primary-dark); }

  /* Chip */
  .chip { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; letter-spacing:0.3px; }
  .chip.asset  { background:rgba(24,169,56,0.15); color:var(--primary-dark); }
  .chip.liab   { background:rgba(217,130,75,0.18); color:var(--terracotta); }
  .chip.govt   { background:rgba(30,58,95,0.12); color:var(--premium-navy); }
  .chip.corp   { background:rgba(79,109,138,0.18); color:var(--slate-blue); }
  .chip.retail { background:rgba(112,144,128,0.20); color:var(--muted-green); }

  footer { padding:20px 28px; font-size:12px; color:var(--muted-green); text-align:center; }

  @media (max-width:1100px){
    .kpi-row { grid-template-columns:repeat(2,1fr); }
    .row-2 { grid-template-columns:1fr; }
  }

  /* === Ladder visual tweaks (rev _13) === */
  .ladder-vtbl td.num, .ladder-vtbl th.num { text-align: center; }
  .ladder-grid .num { text-align: center; }
  /* Total columns get a darker tint */
  .ladder-vtbl td.tot-asset { background: rgba(24,169,56,0.22) !important; }
  .ladder-vtbl td.tot-liab  { background: rgba(217,130,75,0.26) !important; }
  .ladder-grid .num.tot-asset { background: rgba(24,169,56,0.22) !important; }
  .ladder-grid .num.tot-liab  { background: rgba(217,130,75,0.26) !important; }

  /* Drillable cells */
  .ladder-vtbl td.drill, .ladder-grid .num.drill { cursor: pointer; transition: filter 0.1s, box-shadow 0.1s; }
  .ladder-vtbl td.drill:hover, .ladder-grid .num.drill:hover { filter: brightness(0.92); box-shadow: inset 0 0 0 2px var(--primary-dark); }

  /* Drill modal */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(29,80,55,0.45); z-index: 1300;
    display: none; align-items: flex-start; justify-content: center; padding: 60px 20px;
  }
  .modal-backdrop.open { display: flex; }
  .modal-card {
    background: var(--surface); border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.25);
    width: min(96vw, 1100px); max-height: calc(100vh - 120px); overflow: hidden;
    display: flex; flex-direction: column;
  }
  .modal-head {
    background: var(--future-green); color: #fff; padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
  .modal-head .meta { font-size: 12px; opacity: 0.9; margin-top: 3px; }
  .modal-close {
    background: rgba(255,255,255,0.18); color: #fff; border: none; border-radius: 4px;
    padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .modal-close:hover { background: rgba(255,255,255,0.32); }
  .modal-body { padding: 16px 20px; overflow: auto; }
  .modal-body table { font-size: 12.5px; }
  .modal-body th { background: var(--bg); }
  .modal-body td.num, th.num { text-align: center; font-variant-numeric: tabular-nums; }
  .modal-empty { padding: 40px; text-align: center; color: var(--muted-green); font-style: italic; }


  /* === AI Chat widget (F5) ===
     FAB lives bottom-right at z=1050. Slide-in panel covers 600px on the
     right at z=1100. The Popup_A modal sits ABOVE both at z=1300 so a
     drill triggered from inside the chat (when we add that) still wins. */
  .ai-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 1050;
    background: var(--primary-dark); color: #fff; border: none; border-radius: 999px;
    padding: 12px 18px; font-family: inherit; font-size: 13px; font-weight: 600;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.15s, transform 0.15s, opacity 0.2s;
  }
  .ai-fab:hover  { background: var(--accent-green); transform: translateY(-1px); }
  .ai-fab.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
  .ai-fab-icon   { font-size: 16px; line-height: 1; }
  .ai-fab-label  { letter-spacing: 0.3px; }

  .ai-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 600px; max-width: 80vw;
    background: var(--surface); border-left: 1px solid var(--grey-beige);
    box-shadow: -6px 0 22px rgba(29,80,55,0.16);
    transform: translateX(105%);              /* width-independent slide-out */
    transition: transform 0.25s ease;
    z-index: 1100;
    display: flex; flex-direction: column; font-family: inherit;
  }
  .ai-panel.open { transform: translateX(0); }
  /* Disable text selection across the whole panel while a resize drag is
     in progress, otherwise dragging selects text in the conversation. */
  .ai-panel.ai-resizing, .ai-panel.ai-resizing * { user-select: none; cursor: ew-resize; }

  /* Drag handle on the panel's left edge — thin strip, slightly clickable
     past the border for forgiving hit-testing. */
  .ai-panel-resize-handle {
    position: absolute; top: 0; bottom: 0; left: -3px;
    width: 7px; cursor: ew-resize;
    z-index: 1101;
    background: transparent;
    transition: background 0.15s;
  }
  .ai-panel-resize-handle:hover,
  .ai-panel.ai-resizing .ai-panel-resize-handle {
    background: rgba(30,58,95,0.25);
  }

  .ai-panel-head {
    background: var(--primary-dark); color: #fff;
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .ai-panel-head .ai-title { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; }
  .ai-head-controls { display: flex; align-items: center; gap: 6px; }
  .ai-head-controls select {
    background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px; padding: 4px 6px; font-size: 12px; font-family: inherit; cursor: pointer;
  }
  .ai-head-controls select option { color: var(--charcoal); }
  .ai-icon-btn {
    background: rgba(255,255,255,0.16); color: #fff; border: none; border-radius: 4px;
    padding: 4px 9px; font-size: 14px; cursor: pointer; font-family: inherit;
    line-height: 1;
  }
  .ai-icon-btn:hover { background: rgba(255,255,255,0.30); }

  /* Conversation area */
  .ai-conv {
    flex: 1 1 0; min-height: 0;   /* must shrink below content height so it scrolls */
    overflow-y: auto; padding: 14px;
    overscroll-behavior: contain; /* don't propagate scroll to the dashboard at the boundary */
    background: #fff;
    display: flex; flex-direction: column; gap: 12px;
  }
  .ai-turn { display: flex; }
  .ai-turn-user      { flex-direction: column; align-items: flex-end; }
  .ai-turn-assistant { justify-content: flex-start; }
  .ai-turn-system, .ai-turn-error { justify-content: stretch; }

  /* Passphrase gate (proxy mode) */
  .ai-passgate { justify-content: stretch; }
  .ai-passgate .ai-bubble {
    width: 100%; border: 1px solid var(--grey-beige);
    background: var(--bg); border-radius: 6px; padding: 14px 16px;
  }
  .ai-passgate-title {
    font-weight: 700; color: var(--primary-dark); font-size: 13px;
    margin-bottom: 4px;
  }
  .ai-passgate-msg { font-size: 12.5px; color: var(--charcoal); margin-bottom: 10px; }
  .ai-passgate-form { display: flex; gap: 8px; }
  .ai-passgate-input {
    flex: 1; padding: 7px 10px; border: 1px solid var(--grey-beige);
    border-radius: 4px; font-size: 13px; font-family: inherit;
  }
  .ai-passgate-input:focus {
    outline: 2px solid var(--accent-green); outline-offset: -1px;
    border-color: var(--accent-green);
  }
  .ai-passgate-btn {
    padding: 7px 14px; border: 1px solid var(--primary-dark);
    background: var(--primary-dark); color: #fff; border-radius: 4px;
    font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .ai-passgate-btn:hover:not(:disabled) { background: var(--accent-green); border-color: var(--accent-green); }
  .ai-passgate-btn:disabled { opacity: 0.6; cursor: default; }
  .ai-passgate-err { margin-top: 8px; font-size: 12px; color: var(--terracotta); }

  /* Collapsed assistant turn — kept in DOM (so it can be re-expanded) but
     not visible. The matching user turn shows a "Show answer" toggle. */
  .ai-turn-collapsed { display: none !important; }
  .ai-turn-toggle {
    margin-top: 4px;
    background: transparent; border: none;
    font-size: 11px; color: var(--muted-green);
    cursor: pointer; padding: 2px 4px;
    font-family: inherit;
  }
  .ai-turn-toggle:hover { color: var(--primary-dark); text-decoration: underline; }
  .ai-bubble {
    max-width: 88%;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px; line-height: 1.5; color: var(--charcoal);
    background: var(--bg);
    border: 1px solid var(--grey-beige);
  }
  .ai-turn-user .ai-bubble {
    background: var(--primary-dark); color: #fff; border-color: var(--primary-dark);
    border-bottom-right-radius: 2px;
  }
  .ai-turn-assistant .ai-bubble {
    background: #fff;
    border-color: var(--grey-beige);
    border-bottom-left-radius: 2px;
    position: relative;       /* anchor for the absolute .ai-copy-btn */
  }

  /* Top-right clipboard button on finalised assistant bubbles. Low opacity
     by default, becomes prominent on bubble hover. */
  .ai-copy-btn {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(30,58,95,0.06);
    border: 1px solid rgba(30,58,95,0.10);
    border-radius: 4px;
    color: var(--muted-green);
    cursor: pointer;
    opacity: 0.35;
    padding: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  }
  .ai-turn-assistant .ai-bubble:hover .ai-copy-btn { opacity: 1; }
  .ai-copy-btn:hover  { background: rgba(30,58,95,0.12); color: var(--primary-dark); }
  .ai-copy-btn:focus  { outline: 2px solid var(--accent-green); outline-offset: 1px; opacity: 1; }
  .ai-copy-btn.copied {
    color: var(--accent-green);
    background: rgba(24,169,56,0.10);
    border-color: rgba(24,169,56,0.30);
    opacity: 1;
  }
  .ai-turn-system .ai-bubble {
    max-width: 100%; background: rgba(24,169,56,0.06);
    border-color: rgba(24,169,56,0.25);
  }
  .ai-turn-error .ai-bubble, .ai-error .ai-bubble {
    max-width: 100%; background: rgba(217,130,75,0.10);
    border-color: rgba(217,130,75,0.40);
  }
  .ai-error-text { color: var(--terracotta); font-weight: 600; }

  .ai-bubble p { margin: 0 0 6px; }
  .ai-bubble p:last-child { margin-bottom: 0; }
  .ai-bubble ul, .ai-bubble ol { margin: 4px 0 8px 20px; padding: 0; }
  .ai-bubble li { margin: 0 0 8px; line-height: 1.5; }
  .ai-bubble li:last-child { margin-bottom: 0; }

  /* GitHub task lists (- [ ] / - [x]). Drop the disc bullets — the
     ☐ / ☑ glyphs are the marker. Dim completed items so they read as done. */
  .ai-bubble ul.ai-md-task-list { list-style: none; margin-left: 4px; padding: 0; }
  .ai-bubble ul.ai-md-task-list li { padding: 0; }
  .ai-bubble li.ai-md-task-done { color: var(--muted-green); }

  /* Markdown headers — small steps, since the chat bubble is already a small surface */
  .ai-bubble h1, .ai-bubble h2, .ai-bubble h3 {
    margin: 10px 0 4px; font-weight: 700; color: var(--premium-navy); line-height: 1.25;
  }
  .ai-bubble h1 { font-size: 16px; }
  .ai-bubble h2 { font-size: 14.5px; }
  .ai-bubble h3 { font-size: 13.5px; color: var(--primary-dark); }
  /* h4 (####) and below: bold, ALL CAPS, ~2pt above body text. Used by
     Hawk for sub-section markers within an answer. */
  .ai-bubble h4, .ai-bubble h5, .ai-bubble h6 {
    margin: 10px 0 4px;
    font-size: 15px;            /* body text is 13px → ~2pt larger */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--premium-navy);
    line-height: 1.25;
  }
  .ai-bubble h1:first-child, .ai-bubble h2:first-child,
  .ai-bubble h3:first-child, .ai-bubble h4:first-child,
  .ai-bubble h5:first-child, .ai-bubble h6:first-child { margin-top: 0; }

  /* Fenced code blocks (``` ```) */
  .ai-md-code {
    margin: 6px 0;
    padding: 8px 10px;
    background: rgba(30,58,95,0.05);
    border: 1px solid rgba(30,58,95,0.12);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11.5px; line-height: 1.45;
    color: var(--charcoal);
    overflow-x: auto;
    white-space: pre;
  }
  .ai-md-code code { background: transparent; padding: 0; border-radius: 0; }

  /* Auto-linkified URLs */
  .ai-bubble a {
    color: var(--accent-green); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
  }
  .ai-bubble a:hover { color: var(--primary-dark); }

  /* Horizontal rule */
  .ai-bubble hr {
    border: none; border-top: 1px solid var(--grey-beige);
    margin: 10px 0;
  }

  /* Markdown tables — wrapped in a scrollable div so wide tables don't blow
     out the bubble. */
  .ai-md-table-wrap { overflow-x: auto; margin: 6px 0; }
  .ai-md-table {
    border-collapse: collapse;
    font-size: 12px;
    color: var(--charcoal);
  }
  .ai-md-table th, .ai-md-table td {
    border: 1px solid var(--grey-beige);
    padding: 4px 9px;
    text-align: left;
    white-space: nowrap;
  }
  .ai-md-table th {
    background: rgba(30,58,95,0.07);
    color: var(--premium-navy);
    font-weight: 600;
  }
  .ai-md-table tbody tr:nth-child(even) td { background: rgba(30,58,95,0.025); }
  .ai-bubble code {
    background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace; font-size: 11.5px;
  }
  .ai-turn-user .ai-bubble code { background: rgba(255,255,255,0.18); }
  .ai-bubble strong { color: var(--primary-dark); }
  .ai-turn-user .ai-bubble strong { color: #fff; }

  /* Welcome bubble — suggestion chips */
  .ai-suggestions { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .ai-suggestion {
    background: #fff; border: 1px solid var(--grey-beige); border-radius: 4px;
    padding: 5px 9px; font-size: 12px; color: var(--primary-dark);
    cursor: pointer; transition: background 0.1s, border-color 0.1s;
  }
  .ai-suggestion:hover { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }
  .ai-hint { color: var(--muted-green); font-size: 11.5px; font-style: italic; margin-top: 4px; }

  /* Tool-call chips (in pending assistant turn header) */
  .ai-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
  .ai-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 999px;
    font-size: 11px; font-family: 'Consolas', 'Monaco', monospace;
    background: var(--bg); border: 1px solid var(--grey-beige); color: var(--charcoal);
  }
  .ai-chip-pending { background: rgba(30,58,95,0.08); border-color: rgba(30,58,95,0.30); color: var(--premium-navy); }
  .ai-chip-pending::before { content: "⏳ "; }
  .ai-chip-ok      { background: rgba(24,169,56,0.10); border-color: rgba(24,169,56,0.35); color: var(--primary-dark); }
  .ai-chip-ok::before      { content: "✓ "; }
  .ai-chip-error   { background: rgba(217,130,75,0.12); border-color: rgba(217,130,75,0.45); color: var(--terracotta); }
  .ai-chip-error::before   { content: "✗ "; }
  /* Server-side chip variant — indigo-ish to differentiate from client-side. */
  .ai-chip-server.ai-chip-pending::before { content: "⚙ "; }   /* gear instead of hourglass for server work */
  .ai-chip-server          { background: rgba(75,89,124,0.10); border-color: rgba(75,89,124,0.40); color: #4B597C; }
  .ai-chip-server.ai-chip-ok    { background: rgba(75,89,124,0.16); border-color: rgba(75,89,124,0.55); color: #2D3E68; }
  .ai-chip-server.ai-chip-error { background: rgba(217,130,75,0.16); border-color: rgba(217,130,75,0.55); color: var(--terracotta); }

  /* Consolidated client-tool counter chip — clickable button that toggles
     the sibling .ai-chip-call-list below it. */
  .ai-chip-tool-counter {
    cursor: pointer;
    font-family: inherit;   /* override generic .ai-chip monospace */
    font-weight: 500;
  }
  .ai-chip-counter-label { display: inline; }
  .ai-chip-counter-toggle {
    font-size: 8px; opacity: 0.7; margin-left: 4px;
    transition: opacity 0.15s;
  }
  .ai-chip-tool-counter:hover .ai-chip-counter-toggle { opacity: 1; }

  /* Expandable list of every call Hawk made this turn — appears below the
     chips row when the counter chip is clicked. Hidden by default. */
  .ai-chip-call-list {
    list-style: none; margin: 0 0 8px; padding: 6px 10px;
    background: rgba(30,58,95,0.05);
    border: 1px solid rgba(30,58,95,0.15);
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px; line-height: 1.5;
    color: var(--premium-navy);
    max-height: 240px; overflow-y: auto;
    word-break: break-all;
  }
  .ai-chip-call-list li { padding: 2px 0; }
  .ai-chip-call-list li + li {
    border-top: 1px solid rgba(30,58,95,0.10);
    padding-top: 4px; margin-top: 4px;
  }

  /* File-download chip — clickable to re-trigger the download */
  .ai-chip-file {
    background: rgba(24,169,56,0.10); border-color: rgba(24,169,56,0.40);
    color: var(--primary-dark); cursor: pointer;
    font-family: inherit;   /* override the monospace font of the generic .ai-chip */
    font-weight: 600;
    padding: 4px 10px;
  }
  .ai-chip-file:hover  { background: rgba(24,169,56,0.20); border-color: var(--accent-green); }
  .ai-chip-fname        { text-decoration: underline; text-decoration-style: dotted; }
  .ai-chip-source       { font-size: 10px; font-weight: 500; opacity: 0.75; margin-left: 2px; }

  /* Spinner shown while a response is being generated */
  .ai-spinner {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2.5px solid var(--grey-beige);
    border-top-color: var(--accent-green);
    animation: ai-spin 0.8s linear infinite;
  }
  @keyframes ai-spin { to { transform: rotate(360deg); } }

  /* Collapsible reasoning panel — live-filled while streaming, then left
     expanded (user-collapsible) once the turn completes. */
  .ai-thinking {
    margin: 0 0 8px;
    border-left: 3px solid var(--accent-green);
    padding-left: 8px;
    font-size: 12px; color: var(--muted-green);
  }
  .ai-thinking[open] { background: rgba(24,169,56,0.04); border-radius: 0 4px 4px 0; padding: 4px 0 4px 8px; }
  .ai-thinking summary { cursor: pointer; font-weight: 600; user-select: none; color: var(--primary-dark); padding: 2px 0; }
  .ai-thinking summary:hover { color: var(--accent-green); }
  .ai-thinking-body {
    margin-top: 4px; white-space: pre-wrap;
    font-family: 'Consolas', 'Monaco', monospace; font-size: 11.5px;
    max-height: 240px; overflow-y: auto;
  }
  /* Live text container holds raw text during streaming; gets re-rendered
     with mini-markdown on final. */
  .ai-text { white-space: pre-wrap; }
  .ai-text:not([data-raw]) { white-space: normal; }  /* post-render */
  .ai-spinner-row { display: flex; padding: 6px 0; }

  /* Composer */
  .ai-composer {
    flex-shrink: 0;          /* pinned at the bottom — never squeezed */
    border-top: 1px solid var(--grey-beige); padding: 10px 14px; background: var(--surface);
    display: flex; gap: 8px; align-items: flex-end;
  }
  .ai-composer textarea {
    flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 8px 10px;
    border: 1px solid var(--grey-beige); border-radius: 4px; font-family: inherit;
    font-size: 13px; color: var(--charcoal); background: #fff; line-height: 1.4;
  }
  .ai-composer textarea:focus { outline: 2px solid var(--accent-green); border-color: var(--accent-green); outline-offset: -1px; }
  .ai-send {
    background: var(--accent-green); color: #fff; border: none; border-radius: 4px;
    padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .ai-send:hover            { background: var(--primary-dark); }
  .ai-send:disabled         { background: var(--grey-beige); color: var(--muted-green); cursor: not-allowed; }

  /* Settings sub-panel (slides over conversation when open) */
  .ai-settings {
    position: absolute; inset: 50px 0 0; background: var(--surface);
    border-top: 1px solid var(--grey-beige);
    padding: 16px 16px 20px; overflow-y: auto;
    box-shadow: 0 -4px 12px rgba(29,80,55,0.06);
  }
  .ai-settings h3 { margin: 0 0 12px; font-size: 14px; color: var(--primary-dark); }
  .ai-field { display: block; margin-bottom: 14px; }
  .ai-field > span { display: block; font-size: 11px; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }
  .ai-field input, .ai-field select {
    width: 100%; padding: 8px 10px; border: 1px solid var(--grey-beige); border-radius: 4px;
    font-family: inherit; font-size: 13px; color: var(--charcoal); background: #fff;
  }
  .ai-field input:focus, .ai-field select:focus { outline: 2px solid var(--accent-green); border-color: var(--accent-green); outline-offset: -1px; }
  .ai-field small { display: block; margin-top: 5px; font-size: 11px; color: var(--muted-green); line-height: 1.4; }
  /* Inline checkbox style — `<label><input type=checkbox><span>Label</span><small>…</small></label>` */
  .ai-field-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ai-field-toggle > input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; cursor: pointer; accent-color: var(--accent-green); margin: 0; }
  .ai-field-toggle > span { display: inline; font-size: 12px; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0; }
  .ai-field-toggle > small { flex-basis: 100%; margin-top: 4px; margin-left: 24px; }
  .ai-settings-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .ai-btn {
    background: var(--primary-dark); color: #fff; border: none; border-radius: 4px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
  }
  .ai-btn:hover { background: var(--accent-green); }
  .ai-btn-secondary { background: #fff; color: var(--primary-dark); border: 1px solid var(--grey-beige); }
  .ai-btn-secondary:hover { background: var(--bg); }


  /* === Global drill (rev _20) === */
  .kpi.drill, [data-drill="1"]:not(.num) { cursor: pointer; }
  .kpi.drill:hover { box-shadow: 0 1px 2px rgba(29,80,55,0.15), inset 0 0 0 2px var(--accent-green); transform: translateY(-1px); transition: transform 0.1s; }
  tbody tr.drill { cursor: pointer; }
  tbody tr.drill:hover { background: rgba(24,169,56,0.10) !important; }
  .hbar-row.drill { cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: background 0.1s; }
  .hbar-row.drill:hover { background: rgba(24,169,56,0.08); }
  svg circle[data-drill="1"] { cursor: pointer; transition: opacity 0.15s; }
  svg circle[data-drill="1"]:hover { opacity: 0.78; }
  .pnl-row.drill { cursor: pointer; }
  .pnl-row.drill:hover td { background: rgba(24,169,56,0.08); }


  /* Historical paste — two-column layout */
  .hist-override { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .hist-override h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--primary-dark); }
  .hist-override h3.budget { color: var(--amber); }
  .hist-override textarea { width: 100%; min-height: 160px; padding: 10px; border: 1px solid var(--grey-beige); border-radius: 4px; font-family: 'Consolas','Monaco',monospace; font-size: 13px; background: #fff; color: var(--charcoal); resize: vertical; }
  .hist-buttons { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .hist-buttons .btn-amber { background: var(--amber); color: #fff; border: none; border-radius: 4px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .hist-buttons .btn-amber:hover { background: var(--terracotta); }
  .hist-buttons .btn-ghost { background: #fff; border: 1px solid var(--grey-beige); padding: 8px 14px; border-radius: 4px; cursor: pointer; font-family: inherit; color: var(--primary-dark); font-weight: 600; }
  @media (max-width: 1100px) { .hist-override { grid-template-columns: 1fr; } }


  /* Per-column filter row inside thead (rev _20260505_2) */
  #dealsTable thead tr.col-filters td { padding: 4px 6px; background: var(--bg); border-bottom: 1px solid var(--grey-beige); }
  #dealsTable thead tr.col-filters input {
    width: 100%; padding: 4px 6px; border: 1px solid var(--grey-beige); border-radius: 3px;
    font-size: 11.5px; font-family: inherit; color: var(--charcoal); background: #fff;
    box-sizing: border-box;
  }
  #dealsTable thead tr.col-filters input:focus { outline: 2px solid var(--accent-green); outline-offset: -1px; border-color: var(--accent-green); }
  #dealsTable thead tr.col-filters input::placeholder { color: var(--muted-green); font-style: italic; }


  /* Custom Charts tab (rev _20260505_3) */
  .cc-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: 12px; }
  .cc-col h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.4px; }
  .cc-col input.cc-name {
    width: 100%; padding: 6px 8px; border: 1px solid var(--grey-beige); border-radius: 3px;
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--charcoal);
    background: #fff; margin-bottom: 6px; box-sizing: border-box;
  }
  .cc-col input.cc-name:focus { outline: 2px solid var(--accent-green); outline-offset: -1px; border-color: var(--accent-green); }
  .cc-col textarea {
    width: 100%; min-height: 220px; padding: 8px 10px; border: 1px solid var(--grey-beige);
    border-radius: 3px; font-family: 'Consolas','Monaco',monospace; font-size: 12.5px;
    color: var(--charcoal); background: #fff; resize: vertical; box-sizing: border-box;
  }
  .cc-col textarea:focus { outline: 2px solid var(--accent-green); outline-offset: -1px; border-color: var(--accent-green); }
  .cc-col.date-col h4 { color: var(--muted-green); }
  .cc-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--charcoal); margin-top: 8px; }
  .cc-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }


  /* Interactive legend chips (rev _20260505_5) */
  .legend-item, .chart-legend > span { cursor: pointer; user-select: none; padding: 2px 6px; border-radius: 3px; transition: background 0.1s, opacity 0.15s; }
  .legend-item:hover, .chart-legend > span:hover { background: rgba(24,169,56,0.10); }
  .legend-item.legend-disabled, .chart-legend > span.legend-disabled { opacity: 0.40; text-decoration: line-through; }
  .legend-item.legend-disabled:hover, .chart-legend > span.legend-disabled:hover { background: rgba(196,106,45,0.06); }
  .legend-hint { font-size: 10px; color: var(--muted-green); font-style: italic; margin-top: 4px; }


  /* Drillable chart bars (rev _20260505_6) */
  svg rect[data-drill="1"] { cursor: pointer; transition: filter 0.1s; }
  svg rect[data-drill="1"]:hover { filter: brightness(0.85); }


  /* Ladder control selects (rev _20260505_8) */
  select.ladder-ctl { padding:6px 10px; border:1px solid var(--grey-beige); border-radius:4px; font-size:13px; font-family:inherit; color:var(--charcoal); background:#fff; min-width:140px; }
  select.ladder-ctl:focus { outline:2px solid var(--accent-green); outline-offset:-1px; border-color:var(--accent-green); }


  /* Compact one-row chart legend (rev _20260505_11) */
  .chart-legend { flex-wrap: nowrap; overflow-x: auto; gap: 12px; align-items: center; }
  .chart-legend > span { white-space: nowrap; flex: 0 0 auto; }
  .chart-legend > span.legend-hint { font-size: 10.5px; color: var(--muted-green); font-style: italic; opacity: 0.85; padding-left: 4px; }


  /* === Funding & Liquidity tab (Phase 2) === */

  /* KPI row variants — Phase-2 liquidity page uses 6 then 4 */
  .kpi-row.row-6 { grid-template-columns: repeat(6, 1fr); }
  .kpi-row.row-5 { grid-template-columns: repeat(5, 1fr); }
  .kpi-row.row-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1100px) {
    .kpi-row.row-6, .kpi-row.row-5, .kpi-row.row-4 { grid-template-columns: repeat(2, 1fr); }
  }

  /* Sticky filter bar — sits below the (scrolling) header + tabs */
  .liquidity-filters {
    position: sticky; top: 0; z-index: 5;
    background: var(--surface); border: 1px solid var(--grey-beige);
    border-radius: 6px; padding: 12px 14px; margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(29,80,55,0.06);
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  }
  .liquidity-filters .ctl input,
  .liquidity-filters .ctl select { min-width: 110px; }
  .liquidity-filters .ctl.toggle { flex-direction: row; align-items: center; gap: 8px; padding-bottom: 6px; }
  .liquidity-filters .ctl.toggle label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--charcoal); cursor: pointer; }
  .liquidity-filters .ctl.toggle input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; cursor: pointer; accent-color: var(--accent-green); }
  /* Stacked toggles — two related checkboxes sharing one filter slot. */
  .liquidity-filters .ctl.toggle-stack { flex-direction: column; gap: 4px; align-items: flex-start; padding-bottom: 2px; }
  .liquidity-filters .toggle-row { display: flex; align-items: center; gap: 8px; }
  .liquidity-filters .toggle-row label { font-size: 12px; color: var(--charcoal); cursor: pointer; }
  .liquidity-filters .toggle-row input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; cursor: pointer; accent-color: var(--accent-green); }
  /* Action button (e.g. Export to Excel) lives at the far right of the
     filter bar — pushed there with margin-left: auto inside the flex row. */
  .liquidity-filters .filter-action { margin-left: auto; }

  /* Products multi-select dropdown — looks like the other <select> triggers
     but reveals a checkbox panel below on click.  Selection is held in JS state. */
  .ctl.products-multi { position: relative; }
  .multi-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 9px; border: 1px solid var(--grey-beige); border-radius: 4px;
    font-size: 13px; background: #fff; min-width: 130px; color: var(--charcoal);
    font-family: inherit; cursor: pointer; gap: 8px;
  }
  .multi-trigger:focus { outline: 2px solid var(--accent-green); outline-offset: -1px; border-color: var(--accent-green); }
  .multi-trigger .multi-caret { font-size: 10px; color: var(--muted-green); }
  .multi-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    background: var(--surface); border: 1px solid var(--grey-beige); border-radius: 4px;
    padding: 8px 10px; min-width: 180px;
    box-shadow: 0 4px 14px rgba(29,80,55,0.14);
    display: flex; flex-direction: column; gap: 4px;
    max-height: 320px; overflow-y: auto;
  }
  .multi-panel[hidden] { display: none; }
  .multi-panel label {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--charcoal); cursor: pointer;
    padding: 3px 0; white-space: nowrap;
  }
  .multi-panel label:hover { color: var(--primary-dark); }
  .multi-panel input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--accent-green); cursor: pointer; }
  .multi-panel .multi-divider { height: 1px; background: var(--grey-beige); margin: 4px 0; }
  .multi-panel .multi-actions { display: flex; gap: 6px; margin-bottom: 2px; }
  .multi-panel .multi-actions button {
    flex: 1; padding: 3px 6px; font-size: 11px; font-family: inherit;
    border: 1px solid var(--grey-beige); background: #fff; border-radius: 3px;
    color: var(--primary-dark); cursor: pointer;
  }
  .multi-panel .multi-actions button:hover { background: var(--primary-dark); color: #fff; border-color: var(--primary-dark); }
  .multi-panel .multi-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--muted-green); margin-top: 4px;
  }

  /* Sub-tabs (inner — within a single Tier-2 module). */
  .subtabs { display: flex; gap: 0; border-bottom: 2px solid var(--grey-beige); margin-bottom: 14px; }
  .subtab {
    padding: 8px 16px; border: none; background: transparent;
    color: var(--muted-green); font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
  }
  .subtab:hover:not(.active) { color: var(--primary-dark); }
  .subtab.active { color: var(--primary-dark); border-bottom-color: var(--accent-green); }
  .subpanel { display: none; }
  .subpanel.active { display: block; }

  /* === Dense maturity-ladder table — many columns, many rows === */

  /* Top-of-table horizontal scrollbar.  A dummy scroller whose width matches the
     real table; JS keeps its scrollLeft in sync with .ladder-scroll so the user
     can drag from the top instead of having to scroll to the bottom of the page. */
  .hscroll-top {
    overflow-x: auto; overflow-y: hidden; height: 14px;
    border: 1px solid var(--grey-beige); border-bottom: none;
    border-radius: 4px 4px 0 0; background: var(--surface);
  }
  .hscroll-top .hspacer { height: 1px; min-height: 1px; }

  /* Main scroll container — both axes scroll inside this box; the page itself
     does not scroll when the user navigates the ladder. */
  .ladder-scroll {
    overflow: auto; max-height: 70vh;
    border: 1px solid var(--grey-beige); border-top: none;
    border-radius: 0 0 4px 4px;
  }
  /* Webkit/Chromium: hide the bottom horizontal scrollbar of the main container
     so the user only sees the one we surface at the top. The container still
     scrolls horizontally via the synced top bar or via shift+wheel / trackpad. */
  .ladder-scroll::-webkit-scrollbar:horizontal { display: none; height: 0; }

  .maturity-ladder {
    font-size: 12px;
    /* `separate` is critical: with `collapse`, a sticky cell's bottom border
       is shared with the row below and can "travel" out of frame when that
       row scrolls, leaving a transparent gap that body content shows through. */
    border-collapse: separate; border-spacing: 0;
    table-layout: fixed;
    /* Override the global `table { width: 100% }` rule.  We want the table to
       size strictly to the sum of its column widths — narrower than the page
       when FX is collapsed, wider when IRS is added, with horizontal scroll
       in the wider case.  No auto-redistribution of unused width. */
    width: max-content;
  }
  /* Default: centre everything. Period Ending overrides to left. */
  .maturity-ladder th, .maturity-ladder td { padding: 6px 8px; white-space: nowrap; border-bottom: 1px solid var(--grey-beige); text-align: center; }
  /* Strict, fixed column widths.  Every column to the right of "Bucket"
     (i.e. every numeric column) shares the same width.  No stretching when
     other columns are hidden. */
  .maturity-ladder th.period, .maturity-ladder td.period { text-align: left; width: 110px; }
  .maturity-ladder th.bucket, .maturity-ladder td.bucket { width: 50px; }
  .maturity-ladder td.num, .maturity-ladder th.num       { width: 85px; }
  /* The column-label row is allowed to wrap so the labels fit inside the tighter
     fixed-width columns ("Total Assets" splits onto two lines, etc.). */
  .maturity-ladder thead tr.cols th {
    white-space: normal; line-height: 1.2; word-break: break-word; vertical-align: middle;
    position: relative;            /* anchor the resize-handle */
  }
  /* User-drag column resize.  Handle sits at the right edge of each col-label
     cell; drag horizontally to widen/narrow the column.  Session-local only —
     widths are kept in module state but not persisted to storage. */
  .col-resize-handle {
    position: absolute; right: -2px; top: 0; bottom: 0;
    width: 6px; cursor: col-resize; user-select: none;
    z-index: 5;
  }
  .col-resize-handle:hover    { background: rgba(36, 82, 59, 0.30); }
  .col-resize-handle.resizing { background: rgba(24,169,56, 0.50); }
  body.col-resizing,
  body.col-resizing * { cursor: col-resize !important; user-select: none !important; }

  /* Sticky thead.  Each header row gets an explicit `top` so they stack properly
     instead of overlapping. The values match the natural row height at the
     current font + padding (≈ 36px per header row, ≈ 30px per summary row).
     IMPORTANT: every thead cell must have an OPAQUE background — semi-transparent
     rgba() backgrounds let body rows bleed through when the user scrolls. */
  .maturity-ladder thead th,
  .maturity-ladder thead td {
    font-size: 12px;
    font-weight: 600;                  /* semibold default — col-label hierarchy under super */
    letter-spacing: 0.2px;
    text-transform: none;              /* Title Case — only the super-row gets caps */
    border-bottom: 2px solid var(--grey-beige);
    background: var(--surface);        /* opaque fallback for every thead cell */
  }
  /* Top offsets are CSS custom properties set by liquidity.js after the table
     renders — that way we measure actual row heights and never get a gap. */
  .maturity-ladder thead tr.super th {
    position: sticky; top: 0; z-index: 4;
    padding: 10px 8px;
    font-weight: 600;                  /* semibold — heavier than rows below, lighter than original 800 */
    text-transform: uppercase;         /* ONLY this row is uppercase */
    letter-spacing: 1.2px;
    border-bottom: 2px solid var(--muted-green);
  }
  .maturity-ladder thead tr.cols  th { position: sticky; top: var(--th-super-h,  36px); z-index: 3; border-bottom: 2px solid var(--muted-green); }
  /* All Deals summary row is sticky and sits between the super-row and the
     cols row, so the all-time totals stay visible as the body scrolls.
     The cols row's `top` already accounts for the super + all-deals stack
     (see --th-super-h measured at render-time in liquidity.js). */
  .maturity-ladder thead tr.summary-all-time td {
    position: sticky; top: var(--th-all-deals-top, 36px); z-index: 3;
  }
  /* Summary cells share font-size, padding, and dimensions with body cells —
     semibold weight is what differentiates them, not size. */
  .maturity-ladder thead tr.summary td {
    text-transform: none; letter-spacing: 0;
    background: #F2F4F2;
    font-weight: 600;
  }
  .maturity-ladder thead tr.summary td.period,
  .maturity-ladder thead tr.summary td.bucket {
    color: var(--primary-dark); letter-spacing: 0.2px;
  }

  /* Per-section colour tint for header rows — makes Assets / Liabilities /
     Totals / FX Swaps / IRS instantly distinguishable.  All colours are solid
     hex (no alpha) so the sticky header never shows body rows behind it. */
  /* Super-row backgrounds are the section's base section colour darkened ×0.8
     (≈20% darker) so the very top row reads as the heaviest visual anchor. */
  .maturity-ladder thead tr.super th.super-spacer { background: var(--surface); }
  .maturity-ladder thead tr.super th.super-assets { background: #99B29E; color: var(--primary-dark); }
  .maturity-ladder thead tr.super th.super-liabs  { background: #C2A895; color: #7A2F08; }
  .maturity-ladder thead tr.super th.super-totals { background: #9EA8A1; color: var(--primary-dark); }
  /* FX shifts to a slate-blue family — distinct from the sage Totals beside it,
     and naturally reads as "currencies / cross-border" to a treasurer. */
  .maturity-ladder thead tr.super th.super-fx     { background: #99A3AE; color: var(--premium-navy); }
  .maturity-ladder thead tr.super th.super-irs    { background: #BDA286; color: #7A4810; }
  /* Column-label row — each cell takes the section colour darkened ×0.9
     (≈10% darker than the base section tint).  Period / Bucket columns are
     the only ones that stay neutral. */
  .maturity-ladder thead tr.cols th.col-period,
  .maturity-ladder thead tr.cols th.col-bucket   { background: var(--bg);   color: var(--primary-dark); }
  .maturity-ladder thead tr.cols th.col-asset,
  .maturity-ladder thead tr.cols th.col-asset-total { background: #ACC9B2; color: var(--primary-dark); }
  .maturity-ladder thead tr.cols th.col-liab,
  .maturity-ladder thead tr.cols th.col-liab-total  { background: #DABDA7; color: #7A2F08; }
  .maturity-ladder thead tr.cols th.col-totals      { background: #B2BDB5; color: var(--primary-dark); }
  .maturity-ladder thead tr.cols th.col-fx,
  .maturity-ladder thead tr.cols th.col-fx-total,
  .maturity-ladder thead tr.cols th.col-fx-net   { background: #ACB8C3; color: var(--premium-navy); }
  .maturity-ladder thead tr.cols th.col-fx-total { border-left: 2px solid var(--slate-blue); }
  .maturity-ladder thead tr.cols th.col-fx-net   { border-left: 1px solid var(--slate-blue); }
  .maturity-ladder thead tr.cols th.col-irs      { background: #D4B797; color: #7A4810; }

  /* Summary rows (All Deals / Within Ladder) — every value cell takes the SAME
     section tint as the super-header above it.  Period / Bucket cells stay
     neutral grey via the default `tr.summary td` rule. */
  .maturity-ladder thead tr.summary td.asset,
  .maturity-ladder thead tr.summary td.tot-asset { background: #BFDFC6; color: var(--primary-dark); }
  .maturity-ladder thead tr.summary td.liab,
  .maturity-ladder thead tr.summary td.tot-liab  { background: #F2D2BA; color: #7A2F08; }
  .maturity-ladder thead tr.summary td.gap       { background: #C6D2C9; color: var(--primary-dark); }
  /* FX section rules come AFTER .gap so that the combined fx-net-col + gap
     class on the Total Maturing summary cell takes the FX colour, not Totals. */
  .maturity-ladder thead tr.summary td.fx-col,
  .maturity-ladder thead tr.summary td.fx-total-col,
  .maturity-ladder thead tr.summary td.fx-net-col { background: #BFCCD9; color: var(--premium-navy); }
  .maturity-ladder thead tr.summary td.irs-col   { background: #ECCBA8; color: #7A4810; }

  /* FX-currency columns hide when user collapses them via the +/- toggle. */
  .maturity-ladder.fx-collapsed th.fx-ccy,
  .maturity-ladder.fx-collapsed td.fx-ccy { display: none; }
  /* FX collapse button in super-header */
  .fx-toggle {
    background: var(--surface); color: var(--primary-dark); border: 1px solid var(--grey-beige);
    border-radius: 3px; padding: 1px 7px; font-family: inherit; font-size: 11pt; font-weight: 700;
    cursor: pointer; line-height: 1; margin-right: 8px; min-width: 22px;
  }
  .fx-toggle:hover { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
  .maturity-ladder td.num { font-variant-numeric: tabular-nums; }
  .maturity-ladder td.period { color: var(--muted-green); }
  .maturity-ladder td.bucket { font-weight: 600; color: var(--primary-dark); }
  .maturity-ladder td.asset  { background: rgba(24,169,56,0.07); }
  .maturity-ladder td.liab   { background: rgba(217,130,75,0.08); }
  .maturity-ladder td.tot-asset { background: rgba(24,169,56,0.20); font-weight: 600; }
  .maturity-ladder td.tot-liab  { background: rgba(217,130,75,0.22); font-weight: 600; }
  /* Net Maturing and Total Maturing cells use semibold (subtotal-style); the
     positive/negative colouring is handled by the universal rules below. */
  .maturity-ladder td.gap { font-weight: 600; }
  /* FX body cells — slate-blue family, same hierarchy as the header (peer →
     total → net) and the same left-border treatment to mark the summary cols. */
  .maturity-ladder td.fx-col  { background: rgba(79,109,138,0.06); }
  .maturity-ladder tbody td.fx-total-col {
    background: rgba(79,109,138,0.20) !important;
    border-left: 2px solid var(--slate-blue);
    font-weight: 600;
  }
  .maturity-ladder tbody td.fx-net-col {
    background: rgba(79,109,138,0.32) !important;
    border-left: 1px solid var(--slate-blue);
    font-weight: 600;
  }
  /* Summary rows in <thead>: FX Total and Total Maturing cells take the same
     summary-row background as the preceding currency columns (#F2F4F2 from
     `tr.summary td` above) — only the left-border separator is retained so
     the FX summary boundary stays visually marked. */
  .maturity-ladder thead tr.summary td.fx-total-col {
    border-left: 2px solid var(--slate-blue);
  }
  .maturity-ladder thead tr.summary td.fx-net-col {
    border-left: 1px solid var(--slate-blue);
  }
  .maturity-ladder td.irs-col { background: rgba(196,106,45,0.07); }
  .maturity-ladder tr.overflow td { border-top: 2px solid var(--muted-green); font-style: italic; }
  .maturity-ladder tbody tr:hover { background: rgba(24,169,56,0.04); }
  .maturity-ladder td.drill { cursor: pointer; transition: filter 0.1s, box-shadow 0.1s; }
  .maturity-ladder td.drill:hover {
    filter: brightness(0.92);
    box-shadow: inset 0 0 0 2px var(--primary-dark);
  }
  .maturity-ladder td.empty { color: var(--grey-beige); }

  /* (Older tbody-based summary-row styles removed — summary rows now live in
     <thead> and are styled together with the column-label header above.) */

  /* (Older .ladder-toolbar removed — the Excel export button now lives inline
     with the sub-tabs nav via the .subtabs-action class.) */

  /* Global negative-number style — accounting convention, dark red-orange.
     Applies to any element bearing the .neg class (table cells, KPIs, popup cells). */
  .neg,
  .kpi .value.neg,
  td.neg, span.neg { color: #8a3f0c !important; }

  /* Universal positive-value text colour for every numeric cell in the
     maturity ladder body + summary rows. Negatives keep their .neg colour
     above. Period / Bucket cells are NOT .num so they retain their muted
     greens. */
  .maturity-ladder tbody td.num,
  .maturity-ladder thead tr.summary td.num { color: var(--primary-dark); }

  /* Column-group dividers — uniform 2px muted-green rule between each major
     section so the visual rhythm matches the conceptual one (Assets | Liabs |
     Totals | FX | IRS).  Same treatment on header, summary, and body rows. */
  .maturity-ladder th.group-end,
  .maturity-ladder td.group-end { border-right: 2px solid var(--muted-green); }

  /* Proxy KPI title suffix */
  .kpi .label .proxy-tag { color: var(--amber); font-weight: 700; margin-left: 4px; font-size: 10px; }


  /* === FX Risk tab (Phase 5) === */

  /* Card head row: title block on left, controls (e.g. NOP/Gross toggle) on right */
  .card-head-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
  .card-head-row > div:first-child { flex:1 1 auto; min-width:0; }

  /* NOP / Gross radio toggle */
  .fx-view-toggle { display:inline-flex; gap:12px; font-size:12px; color:var(--muted-green); user-select:none; }
  .fx-view-toggle label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
  .fx-view-toggle input[type="radio"] { accent-color:var(--accent-green); cursor:pointer; }

  /* Per-ccy breakdown table — same look as other tables, drillable rows */
  .fx-breakdown-table { width:100%; border-collapse:collapse; font-size:13px; }
  .fx-breakdown-table th, .fx-breakdown-table td { padding:6px 10px; border-bottom:1px solid var(--grey-beige); }
  .fx-breakdown-table th { background:var(--bg); color:var(--primary-dark); font-weight:600; text-align:left; }
  .fx-breakdown-table th.num, .fx-breakdown-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .fx-breakdown-table tbody tr.drill { cursor:pointer; transition:background 0.1s; }
  .fx-breakdown-table tbody tr.drill:hover { background:rgba(24,169,56,0.06); }
  .fx-breakdown-table tfoot td { background:rgba(30,58,95,0.04); font-weight:600; }

  /* Spot-shock matrix */
  .fx-shock-table { width:100%; border-collapse:collapse; font-size:13px; }
  .fx-shock-table th, .fx-shock-table td { padding:6px 10px; border-bottom:1px solid var(--grey-beige); }
  .fx-shock-table th { background:var(--bg); color:var(--primary-dark); font-weight:600; text-align:left; }
  .fx-shock-table th.num, .fx-shock-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
  .fx-shock-table tfoot td { background:rgba(30,58,95,0.04); font-weight:700; }
  .fx-shock-table .shock-cell-pos { background:rgba(24,169,56,0.08); color:var(--primary-dark); }
  .fx-shock-table .shock-cell-neg { background:rgba(217,130,75,0.08); color:var(--terracotta); }

  /* === FX Maturity Ladder — transposed (rows = buckets, cols = ccy × 3) === */
  #fx-ladder-table {
    width:100%; border-collapse:collapse;
    font-size:12px; font-variant-numeric:tabular-nums;
    background:var(--surface);
  }

  /* Top caption (units note) */
  #fx-ladder-table th.ladder-super,
  #fx-ladder-table tr.ladder-super td {
    background:var(--primary-dark); color:#fff; font-weight:600;
    padding:8px 14px; letter-spacing:0.3px; text-align:left;
  }

  /* Header row 1 — currency names */
  #fx-ladder-table tr.fx-ladder-ccy-row th {
    background:var(--primary-dark); color:#fff;
    font-weight:700; letter-spacing:0.5px;
    padding:8px 10px; text-align:center;
    border-bottom:1px solid rgba(255,255,255,0.18);
    position:sticky; top:0; z-index:3;
  }
  #fx-ladder-table th.fx-ccy-head { font-size:13px; }

  /* Header row 2 — Receipts / Payments / Net sub-labels */
  #fx-ladder-table tr.fx-ladder-subhead-row th {
    background:var(--muted-green); color:#fff;
    font-weight:500; font-size:10.5px; text-transform:uppercase;
    letter-spacing:0.5px; padding:5px 8px; text-align:center;
    position:sticky; top:32px; z-index:3;
  }
  #fx-ladder-table th.fx-sub-rec { background:rgba(24,169,56,0.65); }
  #fx-ladder-table th.fx-sub-pay { background:rgba(217,130,75,0.75); }
  #fx-ladder-table th.fx-sub-net { background:var(--muted-green); }

  /* Date column (sticky-left) and Bucket column */
  #fx-ladder-table .ccy-col,
  #fx-ladder-table .fx-date-cell {
    position:sticky; left:0; z-index:2;
    background:var(--surface);
    text-align:left; padding:6px 12px; min-width:96px;
    border-right:1px solid var(--grey-beige);
    font-weight:600;
    color:var(--premium-navy);
  }
  #fx-ladder-table tr.fx-ladder-ccy-row .ccy-col,
  #fx-ladder-table tr.fx-ladder-subhead-row .ccy-col {
    background:var(--primary-dark); color:#fff;     /* anchor in header bar */
  }
  #fx-ladder-table .fx-bucket-cell {
    text-align:center; padding:6px 10px;
    color:var(--muted-green); font-weight:600;
    background:rgba(30,58,95,0.04);
    border-right:2px solid var(--muted-green);
    min-width:54px;
  }

  /* Body rows — alternating zebra tint, hover highlight */
  #fx-ladder-table tbody tr { transition:background 0.08s; }
  #fx-ladder-table tbody tr:nth-child(even) td { background:rgba(30,58,95,0.025); }
  #fx-ladder-table tbody tr:nth-child(even) .ccy-col,
  #fx-ladder-table tbody tr:nth-child(even) .fx-date-cell { background:#F2F2EB; }
  #fx-ladder-table tbody tr:hover td { background:rgba(24,169,56,0.10); }
  #fx-ladder-table tbody tr:hover .ccy-col,
  #fx-ladder-table tbody tr:hover .fx-date-cell { background:rgba(24,169,56,0.14); }

  /* Data cells — base */
  #fx-ladder-table td.num {
    text-align:center; padding:5px 9px; min-width:62px;
    border-bottom:1px solid rgba(30,58,95,0.05);
  }
  #fx-ladder-table td.drill { cursor:pointer; }

  /* Per-column tint inside the body — subtle so they don't overpower */
  #fx-ladder-table td.fx-cell-rec { color:var(--primary-dark); }
  #fx-ladder-table td.fx-cell-rec.pos { background:rgba(24,169,56,0.05); }
  #fx-ladder-table td.fx-cell-pay { color:var(--terracotta); }
  #fx-ladder-table td.fx-cell-pay.neg { background:rgba(217,130,75,0.06); }
  #fx-ladder-table td.fx-cell-net {
    font-weight:700;
    background:rgba(30,58,95,0.045);
  }
  #fx-ladder-table td.fx-cell-net.pos { color:var(--primary-dark); }
  #fx-ladder-table td.fx-cell-net.neg { color:var(--terracotta); }

  /* Column-group dividers between currencies (thicker right border) */
  #fx-ladder-table th.group-end,
  #fx-ladder-table td.group-end { border-right:2px solid var(--muted-green); }

  /* NOP + Nostro starting-reference rows — sit above the per-bucket flows.
     NOP (top): navy tint, signed value (long+ / short−).
     Nostro (below): muted-green tint, current cash balance. */
  #fx-ladder-table tr.fx-nop-row td {
    background:rgba(30,58,95,0.18);
    border-top:2px solid var(--premium-navy);
    border-bottom:2px solid var(--premium-navy);
    color:var(--premium-navy);
    font-weight:600;
  }
  #fx-ladder-table tr.fx-nop-row .fx-bucket-cell {
    background:var(--premium-navy); color:#fff; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px;
    border-top:2px solid var(--premium-navy);
    border-bottom:2px solid var(--premium-navy);
  }
  #fx-ladder-table tr.fx-nop-row .fx-nop-cell {
    font-weight:700;
    background:rgba(30,58,95,0.28);
  }
  #fx-ladder-table tr.fx-nop-row .fx-nop-cell.pos { color:var(--primary-dark); }
  #fx-ladder-table tr.fx-nop-row .fx-nop-cell.neg { color:var(--terracotta); }

  #fx-ladder-table tr.fx-nostro-row td {
    background:rgba(64,104,80,0.12);
    border-bottom:2px solid var(--muted-green);
  }
  #fx-ladder-table tr.fx-nostro-row .fx-bucket-cell {
    background:var(--muted-green); color:#fff; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  #fx-ladder-table tr.fx-nostro-row .fx-nostro-cell {
    color:var(--premium-navy); font-weight:700;
    background:rgba(64,104,80,0.18);
  }

  /* Spot bucket — first forward bucket, captures T+0 to T+2 settlements.
     Tinted amber to distinguish it from regular dated buckets, and given a
     darker bucket-label cell so it reads as a distinct "operational" row. */
  #fx-ladder-table tr.fx-spot-row td {
    background:rgba(196,143,55,0.10);
    border-bottom:2px solid rgba(196,143,55,0.45);
  }
  #fx-ladder-table tr.fx-spot-row .fx-bucket-cell {
    background:#C48F37; color:#fff; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  #fx-ladder-table tr.fx-spot-row .fx-date-cell {
    color:#7A5410; font-weight:600;
  }

  /* Don't apply the body-hover highlight to NOP or Nostro reference rows. */
  #fx-ladder-table tbody tr.fx-nop-row:hover td {
    background:rgba(30,58,95,0.18);
  }
  #fx-ladder-table tbody tr.fx-nop-row:hover .fx-bucket-cell { background:var(--premium-navy); }
  #fx-ladder-table tbody tr.fx-nop-row:hover .fx-nop-cell    { background:rgba(30,58,95,0.28); }
  #fx-ladder-table tbody tr.fx-nostro-row:hover td {
    background:rgba(64,104,80,0.12);
  }
  #fx-ladder-table tbody tr.fx-nostro-row:hover .fx-bucket-cell { background:var(--muted-green); }

  /* ============================ DEAL BLOTTER (R8) ============================ */
  /* Scoped under #panel-deals so the rules ship with the deals module when the
     dashboard is later modularised. */
  #panel-deals .blotter-card { padding-bottom:14px; }
  #panel-deals .blotter-toolbar {
    display:flex; align-items:center; gap:14px;
    padding-bottom:10px; margin-bottom:10px;
    border-bottom:1px solid var(--grey-beige);
  }
  #panel-deals .blotter-toolbar h2 { margin:0; flex:1; }
  #panel-deals .blotter-count { font-size:12.5px; color:var(--muted-green); }
  #panel-deals .blotter-count-num { color:var(--primary-dark); font-weight:700; }
  #panel-deals .blotter-tools { display:flex; gap:8px; position:relative; }
  #panel-deals .blotter-icon-btn {
    padding:5px 10px; font-size:12.5px; border:1px solid var(--grey-beige);
    background:#fff; border-radius:4px; cursor:pointer;
    color:var(--primary-dark); font-family:inherit; font-weight:600;
  }
  #panel-deals .blotter-icon-btn:hover { background:var(--primary-dark); color:#fff; border-color:var(--primary-dark); }

  #panel-deals .blotter-scroll { width:100%; overflow-x:auto; }
  #panel-deals .blotter-table { font-size:12.5px; }
  #panel-deals .blotter-table th,
  #panel-deals .blotter-table td { padding:5px 9px; }
  #panel-deals .blotter-table th { position:sticky; top:0; z-index:1; }
  #panel-deals .blotter-table tbody tr.drill { cursor:pointer; }

  /* Per-column typing filter row, sits directly under the header. */
  #panel-deals .blotter-filter-row th {
    padding:3px 6px; background:#fff; cursor:default;
    text-transform:none; letter-spacing:normal; font-weight:normal;
    position:static; /* don't stick — only the head row does */
  }
  #panel-deals .blotter-filter-row input {
    width:100%; box-sizing:border-box; padding:3px 6px;
    border:1px solid var(--grey-beige); border-radius:3px;
    font-size:11.5px; font-family:inherit; color:var(--charcoal);
    background:#fff;
  }
  #panel-deals .blotter-filter-row input:focus {
    outline:1.5px solid var(--accent-green); outline-offset:-1px;
    border-color:var(--accent-green);
  }

  /* Empty state when filters yield zero matches. */
  #panel-deals .blotter-empty {
    padding:24px 12px; text-align:center; color:var(--muted-green);
    font-style:italic;
  }

  /* Column-config popover (gear button -> checkbox list of columns). */
  #panel-deals .blotter-config-popover {
    position:absolute; top:34px; right:0; z-index:20;
    min-width:240px; max-height:360px; overflow-y:auto;
    background:#fff; border:1px solid var(--grey-beige); border-radius:6px;
    box-shadow:0 6px 16px rgba(0,0,0,0.12);
    padding:10px 12px;
  }
  #panel-deals .blotter-config-popover .config-title {
    font-size:11px; font-weight:700; color:var(--primary-dark);
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px;
  }
  #panel-deals .blotter-config-popover label {
    display:flex; align-items:center; gap:8px;
    padding:3px 0; font-size:12.5px; color:var(--charcoal);
    cursor:pointer; user-select:none;
  }
  #panel-deals .blotter-config-popover label:hover { color:var(--primary-dark); }
  #panel-deals .blotter-config-popover label input { margin:0; cursor:pointer; }
  #panel-deals .blotter-config-popover .config-actions {
    display:flex; justify-content:space-between; gap:8px;
    margin-top:10px; padding-top:8px; border-top:1px solid var(--grey-beige);
  }
  #panel-deals .blotter-config-popover .config-link {
    background:none; border:none; padding:0; cursor:pointer;
    font-size:12px; color:var(--muted-green); font-family:inherit;
    text-decoration:underline;
  }
  #panel-deals .blotter-config-popover .config-link:hover { color:var(--accent-green); }
  #fx-ladder-table tbody tr.fx-nostro-row:hover .fx-nostro-cell { background:rgba(64,104,80,0.18); }

  /* ============================ DEBT PORTFOLIO (R9) ============================ */
  /* Overview sub-panel: left half = bar chart, right half = metrics. */
  #panel-debt .debt-overview-grid {
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:14px;
    align-items:stretch;
  }
  #panel-debt .debt-chart-card,
  #panel-debt .debt-metrics-card { display:flex; flex-direction:column; }

  /* Overall KPI grid: 3 columns × 2 rows of compact cards. */
  #panel-debt .debt-kpi-block {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-bottom:14px;
  }
  #panel-debt .debt-kpi {
    background:var(--bg); border:1px solid var(--grey-beige); border-radius:4px;
    padding:8px 10px;
  }
  #panel-debt .debt-kpi .label {
    font-size:10.5px; color:var(--muted-green);
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px;
  }
  #panel-debt .debt-kpi .value {
    font-size:18px; font-weight:700; color:var(--primary-dark); line-height:1.1;
  }
  #panel-debt .debt-kpi .sub {
    font-size:11px; color:var(--muted-green); margin-top:2px;
  }

  /* Per-product table */
  #panel-debt .debt-by-product table { font-size:12.5px; }
  #panel-debt .debt-by-product th,
  #panel-debt .debt-by-product td { padding:6px 8px; }
  #panel-debt .debt-by-product tbody tr { cursor:pointer; }
  #panel-debt .debt-by-product tfoot td {
    background:var(--bg); font-weight:700; color:var(--primary-dark);
    border-top:2px solid var(--grey-beige);
  }

  /* Collapse to single column when narrow. */
  @media (max-width: 1100px) {
    #panel-debt .debt-overview-grid { grid-template-columns: 1fr; }
    #panel-debt .debt-kpi-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Debt Ladder toolbar */
  #panel-debt .debt-ladder-toolbar {
    display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
    margin-bottom:8px;
  }
  #panel-debt .debt-ladder-toolbar .ctl input,
  #panel-debt .debt-ladder-toolbar .ctl select { min-width:100px; }
  #panel-debt .debt-ladder-toggle {
    display:flex; align-items:center; gap:6px;
    font-size:12.5px; color:var(--charcoal); cursor:pointer; user-select:none;
    padding-bottom:6px;
  }
  #panel-debt .debt-ladder-scroll { width:100%; overflow-x:auto; }
  #panel-debt #debt-ladder-table { font-size:12.5px; }
  #panel-debt #debt-ladder-table th,
  #panel-debt #debt-ladder-table td { padding:5px 9px; }
  #panel-debt #debt-ladder-table td.drill { cursor:pointer; }
  #panel-debt #debt-ladder-table td.drill:hover {
    background:rgba(24,169,56,0.10); color:var(--primary-dark);
  }
  #panel-debt #debt-ladder-table tfoot td {
    background:var(--bg); border-top:2px solid var(--grey-beige);
    color:var(--primary-dark);
  }

  /* ===================== CREDIT & INVESTMENTS PORTFOLIO (R10) ===================== */
  /* Asset-side mirror of the Debt Portfolio layout. */
  #panel-credit_investments .ci-overview-grid {
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap:14px;
    align-items:stretch;
  }
  #panel-credit_investments .ci-chart-card,
  #panel-credit_investments .ci-metrics-card { display:flex; flex-direction:column; }

  #panel-credit_investments .ci-kpi-block {
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-bottom:14px;
  }
  #panel-credit_investments .ci-kpi {
    background:var(--bg); border:1px solid var(--grey-beige); border-radius:4px;
    padding:8px 10px;
  }
  #panel-credit_investments .ci-kpi .label {
    font-size:10.5px; color:var(--muted-green);
    text-transform:uppercase; letter-spacing:0.4px; margin-bottom:3px;
  }
  #panel-credit_investments .ci-kpi .value {
    font-size:18px; font-weight:700; color:var(--primary-dark); line-height:1.1;
  }
  #panel-credit_investments .ci-kpi .sub {
    font-size:11px; color:var(--muted-green); margin-top:2px;
  }

  #panel-credit_investments .ci-by-product table { font-size:12.5px; }
  #panel-credit_investments .ci-by-product th,
  #panel-credit_investments .ci-by-product td { padding:6px 8px; }
  #panel-credit_investments .ci-by-product tbody tr { cursor:pointer; }
  #panel-credit_investments .ci-by-product tfoot td {
    background:var(--bg); font-weight:700; color:var(--primary-dark);
    border-top:2px solid var(--grey-beige);
  }

  @media (max-width: 1100px) {
    #panel-credit_investments .ci-overview-grid { grid-template-columns: 1fr; }
    #panel-credit_investments .ci-kpi-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  #panel-credit_investments .ci-ladder-toolbar {
    display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
    margin-bottom:8px;
  }
  #panel-credit_investments .ci-ladder-toolbar .ctl input,
  #panel-credit_investments .ci-ladder-toolbar .ctl select { min-width:100px; }
  #panel-credit_investments .ci-ladder-toggle {
    display:flex; align-items:center; gap:6px;
    font-size:12.5px; color:var(--charcoal); cursor:pointer; user-select:none;
    padding-bottom:6px;
  }
  #panel-credit_investments .ci-ladder-scroll { width:100%; overflow-x:auto; }
  #panel-credit_investments #ci-ladder-table { font-size:12.5px; }
  #panel-credit_investments #ci-ladder-table th,
  #panel-credit_investments #ci-ladder-table td { padding:5px 9px; }
  #panel-credit_investments #ci-ladder-table td.drill { cursor:pointer; }
  #panel-credit_investments #ci-ladder-table td.drill:hover {
    background:rgba(24,169,56,0.10); color:var(--primary-dark);
  }
  #panel-credit_investments #ci-ladder-table tfoot td {
    background:var(--bg); border-top:2px solid var(--grey-beige);
    color:var(--primary-dark);
  }

  /* ============================ REGULATORY REPORTING (R6) ============================ */
  #panel-regulatory .hqla-card { padding-bottom:14px; }
  #panel-regulatory .hqla-table-scroll { width:100%; overflow-x:auto; }
  #panel-regulatory .hqla-table { font-size:12.5px; }
  #panel-regulatory .hqla-table th,
  #panel-regulatory .hqla-table td { padding:6px 10px; vertical-align:middle; }

  /* Tier banner rows (Level 1 / Level 2A / Level 2B) */
  #panel-regulatory .hqla-tier-banner td {
    background:var(--bg); color:var(--primary-dark);
    font-weight:700; text-transform:uppercase; letter-spacing:0.6px;
    font-size:11.5px; padding:6px 10px;
    border-top:2px solid var(--grey-beige);
  }
  #panel-regulatory .hqla-tier-l1  td { background:rgba(24,169,56,0.10);  }
  #panel-regulatory .hqla-tier-l2a td { background:rgba(79,109,138,0.12); }
  #panel-regulatory .hqla-tier-l2b td { background:rgba(217,130,75,0.12); }

  /* Empty (held = 0) rows render in muted grey so the user can see what
     the bank *doesn't* hold without it competing visually with held assets. */
  #panel-regulatory .hqla-empty-row td { color:var(--muted-green); }
  #panel-regulatory .hqla-empty-row td:first-child,
  #panel-regulatory .hqla-empty-row td:nth-child(2) { color:var(--muted-green); }

  /* Drillable cells */
  #panel-regulatory .hqla-table td.drill { cursor:pointer; font-weight:600; color:var(--primary-dark); }
  #panel-regulatory .hqla-table td.drill:hover {
    background:rgba(24,169,56,0.10); color:var(--accent-green);
  }

  /* Footer subtotal rows */
  #panel-regulatory .hqla-table tfoot td {
    padding:6px 10px; font-size:12.5px;
  }
  #panel-regulatory .hqla-foot-row td { background:#fff; border-top:1px solid var(--grey-beige); }
  #panel-regulatory .hqla-foot-label { text-align:right; font-weight:600; color:var(--primary-dark); }
  #panel-regulatory .hqla-stock-row td {
    background:var(--bg); border-top:2.5px solid var(--primary-dark);
    font-size:14px; color:var(--primary-dark);
  }

  /* Notes block under the table */
  #panel-regulatory .hqla-notes { margin-top:14px; font-size:12.5px; color:var(--charcoal); line-height:1.55; }
  #panel-regulatory .hqla-notes p { margin:6px 0; }