/* Margin Analysis — "Glacier Flow + Aurora middle" (owner selection; rebuilt
   2026-09-25, supersedes the 2026-09-15 Compact Ledger layer).
   Geometry, spacing and type follow margin-money-flow-final.html. Type is the
   app's IBM Plex Sans (no new font). Colours come from each theme's own tokens
   (--txt, --txt-ctl, --pop, --sheet, --thead-*, --range-bg, --pill-on, --ring),
   so bronze, petrol, stone and glass each keep their own surfaces and selected
   state. Only the three data hues (labour blue, overhead teal, margin lavender)
   and the semantic good/alert/negative colours are fixed. Pride Slate has its
   own dark layer below. Every selector is contained in the Margin Analysis view. */

/* ── Filter bar (markup in admin.html #kpiSec-ma .kpi-bar; restyled here only) ── */
#view-margin .kpi-bar{gap:12px;margin-bottom:18px}
#view-margin .kpi-bar .cal-sel{width:225px;min-height:39px;padding:9px 34px 9px 13px;border-radius:11px;font:400 12px 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer;-webkit-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 14px center;background-size:12px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235c534b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="petrol"] #view-margin .kpi-bar .cal-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234b5a5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="stone"] #view-margin .kpi-bar .cal-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235e5346' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="glass"] #view-margin .kpi-bar .cal-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235a534a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="slate"] #view-margin .kpi-bar .cal-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23c6d0da' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#view-margin .kpi-bar .kpi-seg{align-items:stretch;border-radius:19px;overflow:hidden}
#view-margin .kpi-bar .kpi-seg-btn{min-height:37px;padding:9px 23px;border-radius:0;font:500 12px 'IBM Plex Sans',system-ui,sans-serif}
#view-margin .kpi-bar .kpi-seg-btn.on{font-weight:600}
#view-margin .kpi-bar .kpi-fsc{display:inline-flex;align-items:center;min-height:33px;padding:8px 12px;border-radius:12px;font:500 12px 'IBM Plex Sans',system-ui,sans-serif}
#view-margin .kpi-bar .act-btn{min-height:39px;padding:9px 13px;gap:9px;border-radius:11px;font:400 12px 'IBM Plex Sans',system-ui,sans-serif}
/* Focus ring: the shell's --mf-focus values (the bar sits outside .mf-shell) */
#view-margin .kpi-bar{--mf-bar-focus:#2f77ce}
:root[data-theme="slate"] #view-margin .kpi-bar{--mf-bar-focus:#7fb0f5}
#view-margin .kpi-bar .cal-sel:focus-visible,#view-margin .kpi-bar .act-btn:focus-visible{outline:3px solid var(--mf-bar-focus);outline-offset:2px}
/* .kpi-seg clips its children (overflow:hidden), so the ring is drawn inside */
#view-margin .kpi-bar .kpi-seg-btn:focus-visible{outline:3px solid var(--mf-bar-focus);outline-offset:-3px}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .cal-sel{background-color:var(--pop);border:1px solid var(--thead-rule);color:var(--txt);box-shadow:0 2px 4px rgba(40,30,20,.03)}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .kpi-seg{background:var(--pop);border:1px solid var(--thead-rule);box-shadow:0 2px 4px rgba(40,30,20,.03)}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .kpi-seg-btn{color:var(--txt-ctl);background:transparent}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .kpi-seg-btn:hover{color:var(--txt)}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .kpi-seg-btn.on{background:var(--pill-on);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .kpi-fsc{background:var(--range-bg);color:var(--txt-ctl);box-shadow:inset 0 0 0 1px var(--thead-rule)}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .act-btn{background:var(--pop);border:1px solid var(--thead-rule);color:var(--txt);box-shadow:0 2px 4px rgba(40,30,20,.03)}
:root:not([data-theme="slate"]) #view-margin .kpi-bar .act-btn svg{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .kpi-bar .kpi-fsc{background:rgba(52,178,108,.14);color:#8fe0b5}

/* ── Shell: light-theme tokens are the active theme's own variables ── */
#view-margin .mf-shell{
  --mf-ink:var(--txt);--mf-muted:var(--txt-ctl);--mf-soft:var(--txt-ctl);--mf-line:var(--thead-rule);
  --mf-card:var(--pop);--mf-card-end:var(--thead-bg);--mf-halo:var(--pop);
  --mf-blue:#4a86dc;--mf-labour:#6f9fe5;--mf-overhead:#79c6d8;--mf-margin:#9284e8;--mf-good:#2d7068;
  --mf-alert:#9a5b0b;--mf-negative:#c2414d;--mf-focus:#2f77ce;
  --mf-tint-revenue:#2f66b3;--mf-tint-labour:#3a6fbf;--mf-tint-overhead:#2a7585;--mf-tint-margin:#6a5acd;
  color:var(--mf-ink);font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:14px;line-height:1.45;container-type:inline-size;margin-top:0
}
#view-margin .mf-shell *,#view-margin .mf-shell *::before,#view-margin .mf-shell *::after{box-sizing:border-box}
/* zero-specificity reset, so every class rule below can set its own margin */
:where(#view-margin .mf-shell) :where(h2,h3,p){margin:0}
#view-margin .mf-ico{display:block;width:17px;height:17px;flex-shrink:0}

/* ── Hero: Money flow ── */
#view-margin .mf-hero{padding:20px 23px 16px;background:linear-gradient(135deg,var(--pop),var(--thead-bg) 55%,var(--pop));border:1px solid var(--mf-line);border-radius:21px;box-shadow:var(--sh);margin-bottom:16px}
#view-margin .mf-hero-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}
#view-margin .mf-hero-title{display:flex;align-items:baseline;gap:18px;min-width:0;flex-wrap:wrap;row-gap:2px}
#view-margin .mf-hero h2{font-size:22px;line-height:1.25;letter-spacing:-.4px;font-weight:600;color:var(--mf-ink)}
#view-margin .mf-subtitle{font-size:12px;color:var(--mf-muted)}
#view-margin .mf-flow-context{font-size:11px;color:var(--mf-muted);white-space:nowrap}
#view-margin .mf-scope{position:relative;z-index:3;display:inline-flex;align-items:center;border:1px solid var(--mf-line);border-radius:17px;background:var(--pop);box-shadow:0 2px 4px rgba(40,30,20,.03);margin:10px 0 1px}
#view-margin .mf-scope button{min-height:31px;border:0;border-radius:16px;padding:6px 13px;background:transparent;color:var(--mf-muted);font:500 11px 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer}
#view-margin .mf-scope button:hover{color:var(--mf-ink)}
#view-margin .mf-scope button.on{background:var(--sheet);color:var(--mf-ink);font-weight:600;box-shadow:0 1px 5px rgba(40,30,20,.12),inset 0 0 0 1px var(--mf-line)}
#view-margin .mf-scope button:focus-visible,#view-margin .mf-flow-label:focus-visible,#view-margin .mf-export:focus-visible,#view-margin .mf-row-toggle:focus-visible,#view-margin .mf-cost-notes summary:focus-visible{outline:3px solid var(--mf-focus);outline-offset:3px}

/* Sankey. On the desktop layout the chart is pulled up so the endpoint column
   starts level with the Approved / Pending / Both row (the design's layout);
   the svg itself ignores the pointer so the pills underneath stay clickable. */
#view-margin .mf-flow-chart{position:relative;width:100%;height:300px;min-width:0;margin-top:-34px}
#view-margin .mf-flow-svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
#view-margin .mf-ribbon{pointer-events:visiblePainted;cursor:pointer;transition:filter .15s ease,opacity .15s ease}
#view-margin .mf-ribbon:hover{filter:brightness(1.035);opacity:1}
#view-margin .mf-flow-chart[data-mf-active="labour"] .mf-ribbon:not([data-kind="labour"]),
#view-margin .mf-flow-chart[data-mf-active="overhead"] .mf-ribbon:not([data-kind="overhead"]),
#view-margin .mf-flow-chart[data-mf-active="margin"] .mf-ribbon:not([data-kind="margin"]){opacity:.6}
#view-margin .mf-flow-labels{position:absolute;inset:0;pointer-events:none}
#view-margin .mf-flow-label{position:absolute;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:4px;height:88px;pointer-events:auto;text-align:left;font:inherit;color:var(--mf-ink);background:linear-gradient(115deg,var(--pop),var(--sheet));border:1px solid var(--mf-line);border-radius:13px;padding:11px 15px 11px 22px;box-shadow:0 7px 12px rgba(40,30,20,.05),0 1px 3px rgba(40,30,20,.04);line-height:1.2;cursor:help}
#view-margin .mf-flow-label::before{content:"";position:absolute;top:7px;bottom:7px;left:4px;width:5px;border-radius:5px;background:linear-gradient(90deg,#ffffff99,var(--mf-labour));box-shadow:0 0 0 2px var(--mf-halo)}
#view-margin .mf-flow-label[data-kind="overhead"]::before{background:linear-gradient(90deg,#c9edf3,var(--mf-overhead))}
#view-margin .mf-flow-label[data-kind="margin"]::before{background:linear-gradient(90deg,#c9bfff,var(--mf-margin))}
#view-margin .mf-flow-label span{font-size:12px;color:var(--mf-muted);white-space:nowrap}
#view-margin .mf-flow-label strong{font-size:22px;font-weight:600;letter-spacing:-.5px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mf-ink)}
#view-margin .mf-flow-label small{font-size:12px;color:var(--mf-muted)}
#view-margin .mf-flow-source{height:151px;padding:20px;border-radius:13px}
#view-margin .mf-flow-source::before{display:none}
#view-margin .mf-flow-source span{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:1px}
#view-margin .mf-flow-source strong{font-size:26px;margin-top:4px}
#view-margin .mf-flow-source small{font-size:18px;color:var(--mf-ink);font-weight:500;margin-top:2px}

/* Tooltip card with pointer arrow (above, below, or left of an endpoint card) */
#view-margin .mf-tooltip{position:absolute;z-index:6;display:flex;flex-direction:column;gap:3px;width:max-content;min-width:172px;max-width:min(300px,calc(100% - 16px));transform:translate(-50%,-100%);padding:12px 16px 13px;border-radius:10px;background:var(--pop);border:1px solid var(--mf-line);color:var(--mf-ink);font-size:11px;line-height:1.35;box-shadow:0 12px 26px rgba(40,30,20,.14),0 2px 6px rgba(40,30,20,.07);opacity:0;pointer-events:none;transition:opacity .12s}
#view-margin .mf-tooltip::after{content:"";position:absolute;left:calc(50% + var(--mf-tip-arrow,0px));bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid var(--mf-line);border-bottom:1px solid var(--mf-line);transform:translateX(-50%) rotate(45deg)}
#view-margin .mf-tooltip.is-below{transform:translate(-50%,0)}
#view-margin .mf-tooltip.is-below::after{bottom:auto;top:-7px;transform:translateX(-50%) rotate(225deg)}
#view-margin .mf-tooltip.is-left{transform:translate(-100%,-50%)}
#view-margin .mf-tooltip.is-left::after{left:auto;right:-7px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
#view-margin .mf-tooltip.is-open{opacity:1}
#view-margin .mf-tip-name{font-size:12px;font-weight:500;color:var(--mf-muted)}
#view-margin .mf-tip-value{font-size:15px;font-weight:600;letter-spacing:-.2px;font-variant-numeric:tabular-nums;color:var(--mf-ink)}
#view-margin .mf-tip-share{font-size:12px;color:var(--mf-muted)}

/* Non-ribbon states (empty / negative / unreconciled / broker-only) */
#view-margin .mf-flow-state{min-height:176px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:7px;color:var(--mf-muted);padding:24px 16px;border:1px dashed var(--mf-line);border-radius:16px;background:linear-gradient(135deg,var(--pop),var(--thead-bg));margin-top:12px}
#view-margin .mf-flow-state strong{font-size:15px;font-weight:600;color:var(--mf-ink)}
#view-margin .mf-flow-state span{max-width:540px;font-size:12px}
#view-margin .mf-flow-negative{border-color:#efc2ca;background:linear-gradient(135deg,#fffafa,#fff3f5)}
#view-margin .mf-flow-negative strong{color:var(--mf-negative)}
#view-margin .mf-broker-only{margin-bottom:16px}
#view-margin .mf-broker-only .mf-flow-state{min-height:96px}
#view-margin .mf-flow-caption{margin:6px 2px 0;color:var(--mf-soft);font-size:11px;line-height:1.55}
#view-margin .mf-flow-caption strong{color:var(--mf-ink);font-weight:500}

/* ── Finance cards (Aurora middle) ── */
#view-margin .mf-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:15px}
#view-margin .mf-card{position:relative;min-width:0;padding:15px 16px 15px 28px;background:linear-gradient(140deg,var(--mf-card),var(--mf-card-end));border:1px solid var(--mf-line);border-radius:17px;box-shadow:0 5px 9px rgba(40,30,20,.035),inset 0 1px 0 rgba(255,255,255,.9)}
#view-margin .mf-card::before{content:"";position:absolute;top:14px;bottom:14px;left:13px;width:3px;background:var(--mf-blue);border-radius:3px}
#view-margin .mf-labour::before{background:var(--mf-labour)}#view-margin .mf-overhead::before{background:var(--mf-overhead)}#view-margin .mf-margin::before{background:var(--mf-margin)}
#view-margin .mf-card-label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--mf-tint-revenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-margin .mf-labour .mf-card-label{color:var(--mf-tint-labour)}
#view-margin .mf-overhead .mf-card-label{color:var(--mf-tint-overhead)}
#view-margin .mf-margin .mf-card-label{color:var(--mf-tint-margin)}
#view-margin .mf-card-value{font-size:24px;line-height:1.3;letter-spacing:-.7px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mf-ink);margin-top:5px}
#view-margin .mf-card-note{font-size:11px;line-height:1.45;color:var(--mf-muted);margin-top:2px}
#view-margin .mf-negative-value .mf-card-value{color:var(--mf-negative)}

/* ── Driver labor cost strip (luminous aurora glass, in the theme's tints) ── */
#view-margin .mf-cost-strip{position:relative;overflow:hidden;border:1px solid var(--mf-line);outline:1px solid rgba(255,255,255,.85);outline-offset:-3px;border-radius:18px;padding:13px 24px 15px;background:radial-gradient(ellipse at 78% 160%,var(--ring),transparent 62%),radial-gradient(ellipse at 18% 0%,var(--range-bg),transparent 58%),linear-gradient(115deg,var(--pop),var(--range-bg) 40%,var(--thead-bg) 75%,var(--pop));box-shadow:0 5px 12px rgba(40,30,20,.04),inset 0 1px 0 #fff}
#view-margin .mf-cost-strip::before{content:"";position:absolute;pointer-events:none;width:64%;height:175px;right:-6%;bottom:-152px;border-radius:50%;border:4px solid #ffffff8f;box-shadow:0 -7px 19px #ffffffbd,0 -17px 28px #ffffff77;transform:rotate(-8deg)}
#view-margin .mf-cost-strip::after{content:"";position:absolute;pointer-events:none;width:46%;height:135px;left:-6%;bottom:-122px;border-radius:50%;border:2px solid #ffffff9e;box-shadow:0 -5px 15px #ffffffa8;transform:rotate(15deg)}
#view-margin .mf-cost-strip h3{position:relative;z-index:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--mf-ink);margin-bottom:11px}
#view-margin .mf-cost-strip h3 .mf-ico{color:var(--mf-muted)}
#view-margin .mf-cost-strip h3 span{font-size:11px;color:var(--mf-muted);font-weight:400}
#view-margin .mf-cost-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;z-index:1}
#view-margin .mf-cost-metric{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start;padding:0 20px 0 26px;min-width:0;border-left:1px solid var(--mf-line)}
#view-margin .mf-cost-metric:first-child{padding-left:0;border-left:0}
#view-margin .mf-cost-icon{display:grid;place-items:center;width:32px;height:32px;margin-top:2px;border-radius:50%;background:var(--pop);border:1px solid var(--mf-line);color:var(--mf-muted);box-shadow:0 2px 5px rgba(40,30,20,.04)}
#view-margin .mf-cost-icon .mf-ico{width:16px;height:16px}
#view-margin .mf-cost-text{min-width:0}
#view-margin .mf-cost-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;color:var(--mf-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-margin .mf-cost-metric strong{display:block;color:var(--mf-ink);font-size:21px;font-weight:600;letter-spacing:-.45px;line-height:1.3;margin-top:1px;font-variant-numeric:tabular-nums;white-space:nowrap}
#view-margin .mf-cost-metric small{display:block;color:var(--mf-muted);font-size:11px;margin-top:1px}
#view-margin .mf-cost-notes{position:relative;z-index:1;margin-top:11px;padding-top:8px;border-top:1px solid var(--mf-line);font-size:11px;color:var(--mf-muted)}
#view-margin .mf-cost-notes summary{display:inline-flex;align-items:center;gap:7px;min-height:24px;cursor:pointer;list-style:none;border-radius:6px}
#view-margin .mf-cost-notes summary::-webkit-details-marker{display:none}
#view-margin .mf-cost-notes summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
#view-margin .mf-cost-notes[open] summary::before{transform:rotate(45deg)}
#view-margin .mf-notes-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pop);border:1px solid var(--mf-line);font-size:10px;font-weight:600;color:var(--mf-ink)}
#view-margin .mf-cost-warning,#view-margin .mf-cost-note{font-size:11px;line-height:1.55;margin:6px 0 0 13px;color:var(--mf-muted)}
#view-margin .mf-cost-warning{color:var(--mf-alert)}
#view-margin .mf-cost-empty{background:linear-gradient(135deg,var(--pop),var(--thead-bg))}
#view-margin .mf-cost-empty p{position:relative;z-index:1;color:var(--mf-muted);font-size:12px}

/* ── Coverage + cohort disclosures (a caption block under the strip, aligned
      with the strip's text edge) ── */
#view-margin .mf-coverage{font-size:11px;line-height:1.65;color:var(--mf-soft);margin:14px 24px 0}
#view-margin .mf-coverage strong{font-weight:500;color:var(--mf-ink)}
#view-margin .mf-cohort{font-size:11px;line-height:1.55;color:var(--mf-soft);margin:4px 24px 0}

/* ── Driver detail + broker panels ── */
#view-margin .mf-table-panel,#view-margin .mf-broker-panel{background:var(--sheet);border:1px solid var(--mf-line);border-radius:18px;margin-top:15px;overflow:hidden;box-shadow:var(--sh)}
#view-margin .mf-broker-panel{padding-top:1px}
#view-margin .mf-table-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px 10px}
#view-margin .mf-table-heading-main{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;row-gap:2px}
#view-margin .mf-table-heading h3{font-size:14px;letter-spacing:-.1px;font-weight:600;color:var(--mf-ink)}
#view-margin .mf-table-heading p{font-size:11px;color:var(--mf-muted);margin-top:3px}
#view-margin .mf-table-heading .mf-table-caption{margin-top:0}
#view-margin .mf-export{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;padding:6px 11px;min-height:31px;border:1px solid var(--mf-line);border-radius:11px;background:var(--pop);color:var(--mf-ink);font:400 11px 'IBM Plex Sans',system-ui,sans-serif;box-shadow:0 2px 4px rgba(40,30,20,.03);cursor:pointer}
#view-margin .mf-export:hover{background:var(--sheet);border-color:var(--txt-dim)}
#view-margin .mf-export .mf-ico{width:15px;height:15px;color:var(--mf-muted)}
#view-margin .mf-table-panel .tw,#view-margin .mf-broker-panel .tw{overflow-x:auto}
#view-margin .mf-table-panel .fin-table,#view-margin .mf-broker-panel .fin-table{width:100%;min-width:760px;border-collapse:collapse;margin:0;background:transparent;font-size:12px}
#view-margin .mf-table-panel .fin-table th,#view-margin .mf-broker-panel .fin-table th{text-align:left;font-weight:500;font-size:11px;text-transform:none;letter-spacing:0;color:var(--thead-txt);padding:10px 18px;border-top:1px solid var(--thead-rule);border-bottom:1px solid var(--thead-rule);background:var(--thead-bg);white-space:nowrap}
#view-margin .mf-table-panel .fin-table td,#view-margin .mf-broker-panel .fin-table td{padding:12px 18px;border-bottom:1px solid var(--mf-line);color:var(--mf-muted);background:transparent}
#view-margin .mf-table-panel .fin-table .r,#view-margin .mf-broker-panel .fin-table .r{text-align:right;font-variant-numeric:tabular-nums}
/* Status column centred, as in the design (the expanded detail row is excluded) */
#view-margin .mf-table-panel .fin-table thead th:last-child,#view-margin .mf-table-panel .fin-table .fin-row td:last-child{text-align:center}
#view-margin .mf-table-panel .fin-table tbody tr:last-child td,#view-margin .mf-broker-panel .fin-table tbody tr:last-child td{border-bottom:0}
#view-margin .mf-table-panel .fin-row:hover td,#view-margin .mf-broker-panel .fin-row:hover td{background:var(--range-bg)}
#view-margin .mf-row-toggle{display:inline;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;font-weight:400;text-align:left;cursor:pointer;border-radius:3px}
#view-margin .mf-table-panel .fin-det td,#view-margin .mf-broker-panel .fin-det td{background:var(--thead-bg);color:var(--mf-muted);font-size:11.5px;line-height:1.6;white-space:normal}
#view-margin .mf-table-panel .fin-badge,#view-margin .mf-broker-panel .fin-badge{font-size:10px;font-weight:600;letter-spacing:.5px;padding:4px 10px;border-radius:14px;border:0;margin-left:6px}
#view-margin .mf-table-panel td>.fin-badge:first-child,#view-margin .mf-broker-panel td>.fin-badge:first-child{margin-left:0}
#view-margin .mf-table-panel .fin-badge.ok,#view-margin .mf-broker-panel .fin-badge.ok{background:#e8f4f2;color:var(--mf-good)}
#view-margin .mf-table-panel .fin-badge.warn,#view-margin .mf-broker-panel .fin-badge.warn{background:#fff6e5;color:var(--mf-alert);box-shadow:inset 0 0 0 1px #f3dcaa}
#view-margin .mf-table-panel .fin-badge.neg,#view-margin .mf-broker-panel .fin-badge.neg{background:#fdecee;color:#b4323f}
#view-margin .mf-table-panel .fin-table td.fin-neg,#view-margin .mf-broker-panel .fin-table td.fin-neg{color:var(--mf-negative);font-weight:600}
#view-margin .mf-table-panel .fin-mut,#view-margin .mf-broker-panel .fin-mut{color:var(--mf-muted);font-size:11px}
#view-margin .mf-table-panel .fin-open,#view-margin .mf-broker-panel .fin-open{border:1px solid var(--mf-line);background:var(--pop);color:var(--mf-ink);border-radius:8px;padding:2px 9px;font:500 11px 'IBM Plex Sans',system-ui,sans-serif}
#view-margin .mf-table-panel .fin-open:focus-visible,#view-margin .mf-broker-panel .fin-open:focus-visible{outline:2px solid var(--mf-focus);outline-offset:2px}
#view-margin .mf-table-panel .kpi-note,#view-margin .mf-broker-panel .kpi-note{margin:0;padding:4px 18px 16px;color:var(--mf-soft)}
#view-margin .mf-broker-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 18px 14px}
#view-margin .mf-broker-panel .mf-card{box-shadow:none;background:var(--thead-bg)}

/* ── Pride Slate: the one dark theme. Dark surfaces, theme ink hierarchy
      (--txt / --txt-ctl / --txt-dim), the green accent for selected state. ── */
:root[data-theme="slate"] #view-margin .mf-shell{--mf-ink:var(--txt);--mf-muted:var(--txt-ctl);--mf-soft:var(--txt-ctl);--mf-line:rgba(255,255,255,.09);--mf-card:#323b47;--mf-card-end:#2b333e;--mf-halo:#38424f;--mf-blue:#78a9f0;--mf-labour:#84b5f0;--mf-overhead:#78d0dd;--mf-margin:#b2a5ff;--mf-good:#6fdba4;--mf-alert:#f5c04a;--mf-negative:#ff9daa;--mf-focus:#7fb0f5;--mf-tint-revenue:#9cc0f5;--mf-tint-labour:#8fb6f0;--mf-tint-overhead:#86d3de;--mf-tint-margin:#b9adff}
:root[data-theme="slate"] #view-margin .mf-hero{background:linear-gradient(135deg,#313b47,#2a323d 55%,#2e3743);box-shadow:var(--sh)}
:root[data-theme="slate"] #view-margin .mf-flow-caption strong,:root[data-theme="slate"] #view-margin .mf-coverage strong{color:var(--txt)}
:root[data-theme="slate"] #view-margin .mf-scope{background:#262d36;border-color:rgba(255,255,255,.1);box-shadow:none}
:root[data-theme="slate"] #view-margin .mf-scope button{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-scope button:hover{color:var(--txt)}
:root[data-theme="slate"] #view-margin .mf-scope button.on{background:var(--pill-on);color:#fff;box-shadow:inset 0 1px 0 #ffffff2e}
:root[data-theme="slate"] #view-margin .mf-flow-label{background:linear-gradient(115deg,#38424f,#323b47);border-color:rgba(255,255,255,.1);color:var(--txt);box-shadow:0 7px 14px #0000003d}
:root[data-theme="slate"] #view-margin .mf-flow-label span,:root[data-theme="slate"] #view-margin .mf-flow-label small{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-tooltip{background:#3b4552;border-color:rgba(255,255,255,.14);box-shadow:0 12px 26px #00000066}
:root[data-theme="slate"] #view-margin .mf-tooltip::after{border-color:rgba(255,255,255,.14)}
:root[data-theme="slate"] #view-margin .mf-tip-name,:root[data-theme="slate"] #view-margin .mf-tip-share{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-flow-state{background:linear-gradient(135deg,#313a46,#2b333e);border-color:rgba(255,255,255,.16);color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-flow-negative{background:linear-gradient(135deg,#40303a,#352b33);border-color:#8a4c5a}
:root[data-theme="slate"] #view-margin .mf-card{box-shadow:inset 0 1px 0 #ffffff0d,0 4px 10px #0000002e}
:root[data-theme="slate"] #view-margin .mf-card-note{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-cost-strip{background:radial-gradient(ellipse at 78% 160%,#4a6f9a5c,transparent 62%),radial-gradient(ellipse at 18% 0%,#6a5aa03d,transparent 58%),linear-gradient(115deg,#2e3844,#2c3c48 40%,#313a4c 75%,#2e3844);border-color:#46566a;outline-color:#ffffff0d;box-shadow:0 5px 14px #00000033}
:root[data-theme="slate"] #view-margin .mf-cost-strip::before{border-color:#ffffff14;box-shadow:0 -7px 19px #ffffff0d}
:root[data-theme="slate"] #view-margin .mf-cost-strip::after{border-color:#ffffff12;box-shadow:0 -5px 15px #ffffff0a}
:root[data-theme="slate"] #view-margin .mf-cost-strip h3 .mf-ico,:root[data-theme="slate"] #view-margin .mf-cost-icon{color:#b8c9dc}
:root[data-theme="slate"] #view-margin .mf-cost-icon{background:#ffffff0f;border-color:#ffffff1f;box-shadow:none}
:root[data-theme="slate"] #view-margin .mf-cost-metric{border-color:#ffffff1a}
:root[data-theme="slate"] #view-margin .mf-cost-label{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-cost-metric small,:root[data-theme="slate"] #view-margin .mf-cohort{color:#c5d4e1}
:root[data-theme="slate"] #view-margin .mf-cost-strip h3 span{color:#c5d4e1}
:root[data-theme="slate"] #view-margin .mf-cost-notes{border-color:#ffffff1a;color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-cost-note{color:#c5d4e1}
:root[data-theme="slate"] #view-margin .mf-notes-count{background:#ffffff12;border-color:#ffffff24;color:var(--txt)}
:root[data-theme="slate"] #view-margin .mf-cost-empty{background:linear-gradient(135deg,#313a46,#2b333e)}
:root[data-theme="slate"] #view-margin .mf-cost-empty p{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-table-panel,:root[data-theme="slate"] #view-margin .mf-broker-panel{background:var(--sheet);border-color:var(--line);box-shadow:var(--sh)}
:root[data-theme="slate"] #view-margin .mf-table-heading p{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-export{background:#363f4b;border-color:rgba(255,255,255,.12);color:var(--txt);box-shadow:none}
:root[data-theme="slate"] #view-margin .mf-export:hover{background:#3d4754}
:root[data-theme="slate"] #view-margin .mf-export .mf-ico{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-table th,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-table th{background:var(--thead-bg);border-color:var(--thead-rule);color:var(--thead-txt)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-table td,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-table td{color:#d7dee6;border-color:rgba(255,255,255,.07)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-table td.fin-neg,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-table td.fin-neg{color:var(--mf-negative)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-row:hover td,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-row:hover td{background:#343e4a}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-det td,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-det td{background:#313a45;color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-badge.ok,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-badge.ok{background:rgba(52,178,108,.16);color:#6fdba4}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-badge.warn,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-badge.warn{background:rgba(217,119,6,.16);color:#f5c04a;box-shadow:inset 0 0 0 1px rgba(245,192,74,.28)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-badge.neg,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-badge.neg{background:rgba(248,113,113,.15);color:#fca5a5}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-mut,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-mut{color:var(--txt-ctl)}
:root[data-theme="slate"] #view-margin .mf-table-panel .fin-open,:root[data-theme="slate"] #view-margin .mf-broker-panel .fin-open{background:#363f4b;border-color:rgba(255,255,255,.14);color:var(--txt)}
:root[data-theme="slate"] #view-margin .mf-broker-panel .mf-card{background:#323b47}

/* ── Responsive (container = .mf-shell width; filter bar uses the viewport) ── */
@container (max-width:1250px){#view-margin .mf-card{padding:14px 10px 14px 24px}#view-margin .mf-card::before{left:11px}#view-margin .mf-card-value{font-size:21px}#view-margin .mf-card-label{font-size:11px;letter-spacing:.8px}#view-margin .mf-cost-metric{padding-left:18px;padding-right:10px;column-gap:10px;grid-template-columns:28px minmax(0,1fr)}#view-margin .mf-cost-icon{width:28px;height:28px}#view-margin .mf-cost-metric strong{font-size:19px}}
@container (max-width:999px){#view-margin .mf-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#view-margin .mf-card-value{font-size:22px}#view-margin .mf-hero{padding:18px 18px 14px}#view-margin .mf-hero-title{display:block}#view-margin .mf-subtitle{margin-top:3px}#view-margin .mf-cost-strip{padding-left:18px;padding-right:18px}#view-margin .mf-coverage,#view-margin .mf-cohort{margin-left:18px;margin-right:18px}#view-margin .mf-cost-metric{padding-left:12px;padding-right:6px;grid-template-columns:minmax(0,1fr)}#view-margin .mf-cost-metric:first-child{padding-left:0}#view-margin .mf-cost-icon{display:none}#view-margin .mf-cost-metric strong{font-size:18px}}
@container (max-width:749px){#view-margin .mf-flow-chart{margin-top:2px}#view-margin .mf-hero{padding:16px 14px 13px;border-radius:18px}#view-margin .mf-hero h2{font-size:20px}#view-margin .mf-subtitle{font-size:11px}#view-margin .mf-flow-context{display:none}#view-margin .mf-scope{margin-bottom:14px}#view-margin .mf-scope button{padding-left:14px;padding-right:14px}#view-margin .mf-flow-label{height:82px;padding:11px 10px 11px 18px;gap:4px;border-radius:12px}#view-margin .mf-flow-label span{font-size:11px;white-space:normal}#view-margin .mf-flow-label strong{font-size:18px}#view-margin .mf-flow-label small{font-size:11px}#view-margin .mf-flow-label.mf-flow-source{height:auto;min-height:84px;padding:11px 12px;gap:3px}#view-margin .mf-flow-source span{font-size:10px;letter-spacing:.55px;line-height:1.3}#view-margin .mf-flow-source strong{font-size:20px;margin-top:0}#view-margin .mf-flow-source small{font-size:12px;margin-top:0;font-weight:400;color:var(--mf-muted)}#view-margin .mf-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:12px}#view-margin .mf-card{padding:13px 10px 12px 22px;border-radius:14px}#view-margin .mf-card::before{left:10px;top:12px;bottom:12px}#view-margin .mf-card-label{font-size:10px;letter-spacing:.7px;white-space:normal}#view-margin .mf-card-value{font-size:20px;letter-spacing:-.55px;margin-top:4px}#view-margin .mf-card-note{font-size:11px}#view-margin .mf-cards .mf-card:last-child{grid-column:1/-1}#view-margin .mf-cost-strip{padding:13px 12px 13px;border-radius:16px}#view-margin .mf-cost-strip h3{gap:6px;font-size:12px}#view-margin .mf-cost-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#view-margin .mf-cost-metric,#view-margin .mf-cost-metric:first-child{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:8px;padding:10px 10px 10px 9px;border:1px solid rgba(255,255,255,.75);border-radius:12px;background:rgba(255,255,255,.55);box-shadow:0 3px 8px rgba(40,30,20,.04)}#view-margin .mf-cost-icon{display:grid;width:24px;height:24px;margin-top:0}#view-margin .mf-cost-icon .mf-ico{width:13px;height:13px}#view-margin .mf-cost-label{font-size:10px;letter-spacing:.5px;white-space:normal}#view-margin .mf-cost-metric strong{font-size:18px}#view-margin .mf-cost-metric small{font-size:10.5px}#view-margin .mf-coverage{margin:12px 12px 0}#view-margin .mf-cohort{margin-left:12px;margin-right:12px}#view-margin .mf-table-heading{padding:13px;gap:8px}#view-margin .mf-table-heading-main{display:block}#view-margin .mf-table-heading .mf-table-caption{margin-top:4px}#view-margin .mf-table-panel .fin-table th,#view-margin .mf-table-panel .fin-table td,#view-margin .mf-broker-panel .fin-table th,#view-margin .mf-broker-panel .fin-table td{padding-left:13px;padding-right:13px}#view-margin .mf-broker-cards{grid-template-columns:1fr;padding:0 13px 12px}#view-margin .mf-table-panel,#view-margin .mf-broker-panel{margin-top:12px}}
@container (max-width:390px){#view-margin .mf-hero{padding-left:12px;padding-right:12px}#view-margin .mf-card-value{font-size:18px}#view-margin .mf-card{padding-left:20px}#view-margin .mf-card::before{left:9px}#view-margin .mf-cost-metric strong{font-size:16px}#view-margin .mf-flow-label strong{font-size:17px}#view-margin .mf-scope button{padding-left:12px;padding-right:12px}}
@container (max-width:749px){:root[data-theme="slate"] #view-margin .mf-cost-metric,:root[data-theme="slate"] #view-margin .mf-cost-metric:first-child{background:#ffffff0a;border-color:#ffffff17;box-shadow:none}:root[data-theme="slate"] #view-margin .mf-flow-source small{color:var(--txt-ctl)}}
@media (max-width:749px){#view-margin .kpi-bar{gap:8px;margin-bottom:13px}#view-margin .kpi-bar .cal-sel{width:calc(42% - 4px);min-width:0!important;min-height:38px;padding-left:11px;padding-right:28px;background-position:right 10px center}#view-margin .kpi-bar .kpi-seg{width:calc(58% - 4px)}#view-margin .kpi-bar .kpi-seg-btn{flex:1;min-height:36px;padding-left:6px;padding-right:6px;font-size:11px}#view-margin .kpi-bar>span:not(.kpi-fsc){display:none}#view-margin .kpi-bar .rp-wrap{order:2}#view-margin .kpi-bar .kpi-fsc{order:3;margin-left:auto;font-size:11px}#view-margin .kpi-bar>.act-btn{order:4}#view-margin .kpi-bar .act-btn{padding-left:10px;padding-right:10px;gap:6px}}
@media (pointer:coarse){#view-margin .kpi-bar .cal-sel,#view-margin .kpi-bar .kpi-seg-btn,#view-margin .kpi-bar .act-btn,#view-margin .mf-scope button,#view-margin .mf-export{min-height:44px}#view-margin .mf-cost-notes summary{min-height:36px}#view-margin .mf-row-toggle{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;padding:0 4px}@container (min-width:750px){#view-margin .mf-flow-chart{margin-top:-47px}}}
@media (prefers-reduced-motion:reduce){#view-margin .mf-ribbon,#view-margin .mf-tooltip,#view-margin .mf-cost-notes summary::before{transition:none}}