/* IMPL-01 · component layer extracted from ratified HIFI 01-09 — rd- namespace, additive */
.rd-card{background:#fff;border:1px solid var(--rd-line);border-radius:var(--rd-r-md);box-shadow:var(--rd-shadow);padding:13px 15px;font-family:var(--rd-font)}
.rd-card>.rd-h{font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:var(--rd-ink)}
.rd-kpi{background:#fff;border:1px solid var(--rd-line);border-radius:var(--rd-r-md);padding:12px 14px;box-shadow:var(--rd-shadow);font-family:var(--rd-font);position:relative}
.rd-kpi .rd-icn{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;float:right}
.rd-kpi .rd-l{font-size:10px;color:var(--rd-gray);text-transform:uppercase;letter-spacing:.05em;font-weight:500;max-width:78%}
.rd-kpi .rd-v{font-size:23px;font-weight:800;margin-top:2px;color:var(--rd-ink)}
.rd-kpi .rd-v2{font-size:13px;color:var(--rd-gray);font-weight:700}
.rd-badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:10px;font-weight:800}
.rd-badge--compliant{background:#dff7ee;color:#00795a}
.rd-badge--partial{background:#fff5d6;color:#8a6d00}
.rd-badge--noncompliant{background:#ffe3e9;color:#c01536}
.rd-badge--assessment{background:#dff8fa;color:#0a7e86}
.rd-badge--nostatus{background:#ececef;color:#5d6a72}
.rd-badge--critical{background:#ffe9e0;color:#b8430f}
.rd-badge--substantial{background:#f3e8fc;color:#6d1fb0}
.rd-badge--manageable{background:#fff5d6;color:#8a6d00}
.rd-badge--marginal,.rd-badge--negligible{background:#e9e9ee;color:#5d6a72}
.rd-badge--open{background:#e3edfb;color:#1f5fae}
.rd-badge--accepted{background:#dff7ee;color:#00795a}
.rd-badge--rejected{background:#ffe3e9;color:#c01536}
.rd-table{border-collapse:collapse;width:100%;font-size:12px;background:#fff;border-radius:var(--rd-r-md);overflow:hidden;box-shadow:var(--rd-shadow);font-family:var(--rd-font)}
.rd-table thead th{background:var(--rd-purple);color:#fff;text-align:left;padding:9px 12px;font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;position:sticky;top:0}
.rd-table tbody td{padding:8px 12px;border-bottom:1px solid var(--rd-line)}
.rd-table tbody tr:nth-child(even){background:#fafafd}
.rd-table tbody tr:hover{background:#f3edf9}
.rd-pills{display:inline-flex;background:#efe9f6;border-radius:999px;padding:3px;gap:2px;font-family:var(--rd-font)}
.rd-pills>span{padding:6px 15px;border-radius:999px;font-size:12px;color:var(--rd-gray);font-weight:700;cursor:pointer}
.rd-pills>.rd-on{background:var(--rd-purple);color:#fff}
.rd-btn{font-family:var(--rd-font);font-weight:700;font-size:12px;border-radius:var(--rd-r-sm);padding:9px 16px;border:1.5px solid transparent;cursor:pointer;box-shadow:var(--rd-shadow)}
.rd-btn--pri{background:var(--rd-purple);color:#fff}
.rd-btn--ghost{background:#fff;border-color:var(--rd-purple);color:var(--rd-purple)}
.rd-btn--soft{background:#f1e8fa;color:var(--rd-purple)}
.rd-btn--danger{background:var(--rd-red);color:#fff}
.rd-fbar{display:flex;gap:8px;align-items:center;font-family:var(--rd-font)}
.rd-f{background:#fff;border:1px solid var(--rd-line);border-radius:var(--rd-r-sm);padding:8px 12px;font-size:12px;color:var(--rd-gray);flex:1;box-shadow:var(--rd-shadow)}
.rd-chrow{display:grid;grid-template-columns:minmax(130px,1.4fr) 1fr 40px;gap:8px;align-items:center;font-size:11px;padding:3px 0;color:#4a555d;font-family:var(--rd-font)}
.rd-chrow .rd-t{height:8px;border-radius:4px;background:#efeaf6;overflow:hidden}
.rd-chrow .rd-fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--rd-purple),var(--rd-lilac))}
.rd-chrow b{text-align:right;font-weight:800;font-size:11.5px}
.rd-cols2{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.rd-cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 16px}
.rd-dot{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
.rd-legend-li{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dashed var(--rd-line);font-size:12px;font-family:var(--rd-font)}
.rd-legend-li .rd-nm{display:flex;align-items:center;gap:7px;color:#4a555d}
.rd-legend-li .rd-pct{color:var(--rd-gray);font-size:10px;font-weight:500;margin-left:5px}
.rd-donut{border-radius:50%;position:relative}
.rd-donut[data-c]:after{content:attr(data-c);position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-family:var(--rd-font)}
.rd-attn{border:1.5px solid #e6c44a55;background:#fff9e6;border-radius:var(--rd-r-md);padding:11px}
.rd-stat{background:#f7f4fb;border:1px solid var(--rd-line);border-radius:10px;padding:8px 12px;font-family:var(--rd-font)}
.rd-stat .rd-l{font-size:10px;color:var(--rd-gray);text-transform:uppercase;font-weight:700}
.rd-stat .rd-v{font-size:17px;font-weight:800}
.rd-admin-row{background:#fff;border:1px solid var(--rd-line);border-radius:14px;box-shadow:var(--rd-shadow);padding:13px 15px 13px 18px;display:flex;gap:14px;align-items:center;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;cursor:pointer;font-family:var(--rd-font)}
.rd-admin-row:hover{transform:translateY(-1.5px);box-shadow:var(--rd-shadow-lift)}
.rd-admin-row .rd-acc{position:absolute;left:0;top:0;bottom:0;width:4.5px}
.rd-admin-row .rd-icn{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none}
.rd-admin-row .rd-mh{font-weight:800;font-size:14px}
.rd-admin-row p{font-size:11px;color:var(--rd-gray);line-height:1.5;margin:2px 0 0}
.rd-admin-row .rd-go{color:var(--rd-gray);font-weight:800;font-size:18px;flex:none;margin-left:auto}

/* IMPL-02 · RC Landscape page layout (rd- namespaced, additive) */
.rd-kpis20{display:grid;grid-template-columns:repeat(20,1fr);gap:11px}
.rd-kpis20 .rd-c5{grid-column:span 5}
.rd-kpis20 .rd-c4{grid-column:span 4}
.rd-kpis20 .rd-c10{grid-column:span 10}
.rd-kpi{cursor:pointer}
.rd-kpi .rd-alc{color:var(--rd-orange);display:inline-flex;vertical-align:middle;margin-left:5px}
@media(max-width:1100px){.rd-kpis20{grid-template-columns:repeat(2,1fr)}.rd-kpis20 .rd-c5,.rd-kpis20 .rd-c4,.rd-kpis20 .rd-c10{grid-column:auto}}

/* IMPL-02 · RC Landscape view rd-restyle (scoped to true-landscape ids; no bleed) */
#view-rc-true-landscape, #view-rc-true-landscape h3{font-family:var(--rd-font)}
#view-rc-true-landscape .rc-bu-card{border:1px solid var(--rd-line);border-radius:var(--rd-r-md);box-shadow:var(--rd-shadow)}
#view-rc-true-landscape .rc-bu-list-container{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 14px;overflow:visible;flex:none}
#view-rc-true-landscape .rc-bu-list-item{border:1px solid var(--rd-line);border-radius:9px;padding:7px 10px}
#view-rc-true-landscape .rc-bu-list-item.rc-bu-unspec{border-color:#e6c44a88;background:#fff9e6}
#view-rc-true-landscape .rc-bu-legend-pill{border-radius:999px;font-size:11px;font-weight:700;padding:3px 11px}
#view-rc-true-landscape .rc-bu-analysis-title,#view-rc-true-landscape .rc-bu-list-title{font-size:12px;font-weight:800;color:var(--rd-ink);text-transform:none}
#rc-health-risk-row .rc-compact-chart-card{border:1px solid var(--rd-line);border-radius:var(--rd-r-md);box-shadow:var(--rd-shadow)}
#rc-health-risk-row h3{font-size:15px;font-weight:800}
.rd-channels-card .rd-chstat{display:flex;gap:10px;margin-bottom:12px}
.rd-channels-card .rd-chcols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.rd-channels-card .rd-chh{font-size:12px;font-weight:800;margin:4px 0 6px;display:flex;justify-content:space-between;align-items:baseline;color:var(--rd-ink)}
.rd-channels-card .rd-chh small{font-size:10px;color:var(--rd-gray);font-weight:500}
.rd-channels-card .rd-chrow{grid-template-columns:minmax(150px,1.5fr) 1fr 38px}
#rc-data-table-section.card{border:1px solid var(--rd-line);border-radius:var(--rd-r-md);box-shadow:var(--rd-shadow)}
#rc-channels-row{display:block}
.rd-channels-card{width:100%;box-sizing:border-box}

/* IMPL-03 · Breakdown Tree overlay (scoped to #treeGraphModal) */
#treeGraphModal .rdtree-vp{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;background:var(--rd-bg);font-family:var(--rd-font);padding-top:12px}
#treeGraphModal .rdtree-stage{padding:8px 16px}
#treeGraphModal .tier{display:flex;justify-content:center;gap:12px;flex-wrap:nowrap;position:relative;margin-bottom:22px}
#treeGraphModal .tier:after{content:"";position:absolute;left:50%;bottom:-17px;width:1.5px;height:12px;background:var(--rd-gray)}
#treeGraphModal .tier.last:after,#treeGraphModal .tier.nostem:after{display:none}
#treeGraphModal .node{border:1px solid var(--rd-line);border-top:5px solid var(--rd-purple);border-radius:12px;background:#fff;padding:10px 14px;min-width:132px;text-align:center;box-shadow:var(--rd-shadow)}
#treeGraphModal .node .l{font-size:10px;color:var(--rd-gray);text-transform:uppercase;letter-spacing:.04em;margin:2px 0}
#treeGraphModal .node .v{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--rd-ink)}
#treeGraphModal .node .v2{font-size:12px;font-weight:700;color:var(--rd-gray)}
#treeGraphModal .node .cap{font-size:9px;color:var(--rd-gray)}
#treeGraphModal .node .ic{font-size:12px;color:var(--rd-gray);margin-bottom:2px}
#treeGraphModal .node.root{border-top-color:var(--rd-purple)}
#treeGraphModal .node.red{border-top-color:var(--rd-red)}
#treeGraphModal .node.amber{border-top-color:var(--rd-yellow)}
#treeGraphModal .node.green{border-top-color:var(--rd-green)}
#treeGraphModal .node.blue{border-top-color:var(--rd-blue);min-width:108px;padding:8px}
#treeGraphModal .node.lilac{border-top-color:var(--rd-lilac)}
#treeGraphModal .node.active-node{outline:2px solid var(--rd-purple);outline-offset:1px}
#treeGraphModal .unitbank{border:1.5px solid var(--rd-line);background:#fff;box-shadow:var(--rd-shadow);border-radius:13px;padding:18px 12px 10px;display:grid;grid-template-columns:repeat(6,minmax(108px,1fr));gap:8px;position:relative}
#treeGraphModal .unitbank .bh{position:absolute;top:-9px;left:14px;background:#fff;border-radius:6px;font-weight:800;padding:0 7px;font-size:9.5px;color:var(--rd-gray)}
#treeGraphModal .unitbank .node.unspec{border-top-color:var(--rd-orange);background:#fff9e6}
#treeGraphModal .branchrow{display:flex;justify-content:center;gap:24px;margin-bottom:18px;position:relative}
#treeGraphModal .branchrow:after{content:"";position:absolute;left:50%;bottom:-14px;width:1.5px;height:10px;background:var(--rd-gray)}
#treeGraphModal .branch{display:flex;align-items:center}
#treeGraphModal .chip{border:1.5px solid var(--rd-blue);border-radius:8px;padding:4px 9px;font-size:10.5px;font-weight:800;background:#fff;box-shadow:var(--rd-shadow)}
#treeGraphModal .edge{display:flex;align-items:center}
#treeGraphModal .edge .ln{width:22px;height:1.5px;background:var(--rd-gray)}
#treeGraphModal .edge .pill{border:1.5px solid var(--rd-lilac);color:var(--rd-purple);border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:800;background:#fff;white-space:nowrap}
#treeGraphModal .elbow{position:relative;height:30px;margin:-16px 0 4px}
#treeGraphModal .elbow span{position:absolute;background:var(--rd-gray)}
#treeGraphModal .elbow .v1{top:0;width:1.5px;height:13px}
#treeGraphModal .elbow .h{top:13px;height:1.5px}
#treeGraphModal .elbow .v2{top:13px;width:1.5px;height:15px}
#treeGraphModal .elbow .pill{position:absolute;top:4px;background:#fff;border:1.5px solid var(--rd-green);color:var(--rd-purple);border-radius:999px;padding:1px 8px;font-size:10px;font-weight:800;transform:translateX(-50%);white-space:nowrap}

/* IMPL-08 · Login reskin (HIFI_08 v2) — overrides legacy #entry-passkey-card styling */
#entry-passkey-overlay{background:radial-gradient(95% 95% at 80% -8%, rgba(79,0,140,.10), transparent 55%),radial-gradient(70% 70% at -8% 108%, rgba(255,55,94,.05), transparent 55%),var(--rd-bg)}
#entry-passkey-overlay::before{display:none}
#entry-passkey-card.rdlogin{background:#fff;border:1px solid var(--rd-line);border-radius:16px;box-shadow:var(--rd-shadow-lift);padding:30px 28px;max-width:360px;width:90%;text-align:center;font-family:var(--rd-font)}
#entry-passkey-card.rdlogin::before{display:none}
#entry-passkey-card.rdlogin h2{font-family:var(--rd-font);font-size:20px;font-weight:800;color:var(--rd-ink);margin:0}
.rdlogin-mark{width:54px;height:54px;border-radius:16px;background:linear-gradient(140deg,var(--rd-purple),var(--rd-red));margin:0 auto 14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;font-family:var(--rd-font)}
.rdlogin-sub{color:var(--rd-gray);font-size:12px;margin:4px 0 18px;font-family:var(--rd-font)}
.rdlogin-lab{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5a4a8a;margin:0 0 6px;text-align:left;font-family:var(--rd-font)}
#entry-passkey-card.rdlogin .pk-input-row{display:block;margin:0}
#entry-passkey-card.rdlogin #entry-passkey-input{border:1px solid var(--rd-line);border-radius:10px;background:#fbfafc;padding:11px 38px 11px 13px;font-size:13px;color:var(--rd-ink);width:100%;box-sizing:border-box;font-family:var(--rd-font)}
#entry-passkey-card.rdlogin #entry-passkey-btn{background:var(--rd-purple);color:#fff;font-family:var(--rd-font);font-weight:700;font-size:13px;border:0;border-radius:10px;padding:12px 18px;width:100%;margin-top:13px;cursor:pointer;box-shadow:var(--rd-shadow);overflow:visible}
#entry-passkey-card.rdlogin #entry-passkey-btn::after,#entry-passkey-card.rdlogin #entry-passkey-btn::before{display:none}
#entry-passkey-card.rdlogin #entry-passkey-error{color:var(--rd-red);font-size:11.5px;margin-top:10px}
.rdlogin-req{margin-top:14px;font-size:12px;color:var(--rd-gray);font-family:var(--rd-font)}
.rdlogin-req .req-link{background:none;border:0;color:var(--rd-purple);font-weight:800;cursor:pointer;font-size:12px;padding:0;font-family:var(--rd-font)}
.rdlogin-note{color:var(--rd-gray);font-size:10.5px;margin-top:16px;line-height:1.5;font-family:var(--rd-font)}
#entry-passkey-card.rdlogin .pk-eye-btn{right:10px}

/* IMPL-02 fix · prevent page-level horizontal scroll + stop the right cards
   from being clipped when the sidebar expands.
   ROOT CAUSE: .main-content is a flex item with default min-width:auto, so it
   refuses to shrink below its content's intrinsic width — expanding the 240px
   sidebar then forces it past the viewport and overflow-x:hidden clips the
   right-edge cards. min-width:0 lets it shrink and the minmax(0,1fr) card grids
   reflow to fit. flex-shrink:0 keeps the sidebar at its fixed width. */
html, body { overflow-x: hidden; }
.app-container { overflow-x: hidden; max-width: 100%; }
.sidebar { overflow-x: hidden; flex-shrink: 0; }
.main-content { overflow-x: hidden; min-width: 0; }
.rd-kpis20 { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.rd-channels-card .rd-chcols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* IMPL-02 fix · THE actual clipping culprit. styles.css:1954 sets the Detailed
   Breakdown grid to `repeat(4, 1fr) !important` — 1fr (not minmax(0,1fr)) keeps
   each column at its content min-width, so when the sidebar expands and the
   panel narrows the 4-col grid overflows right and is clipped. A non-!important
   override never won. This matches the base !important, loads later, and is
   gated to desktop so the mobile single-column rule (styles.css:2264) is
   untouched. */
@media (min-width: 769px) {
    .rc-bu-list-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    /* same shrink-resistant pattern on the channels row (RC landscape, below fold) */
    #rc-channels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    /* RC Landscape · channels — stack CBU/EBU into one column so each name+bar+count
       row gets full width (two side-by-side columns were too narrow → overlapping). */
    #rc-channels-row .rd-chcols,
    .rd-channels-card .rd-chcols { grid-template-columns: 1fr !important; gap: 14px; }
    /* Record-detail (and other standard) modals must sit above the fixed mobile header
       (.mob-header z-index:8000) so the header + close button are visible/tappable. */
    .modal-overlay { z-index: 8500; }
}

/* IMPL-02 fix · compact the centered domain-nav pill so all six tabs fit the
   content width (was ~1059→943px > ~820px → spilled/clipped). Scoped to
   #domainNav: executive-nav + mobile media queries untouched. !important
   overrides the inline padding on the refresh/executive buttons. */
#domainNav { padding: 4px; max-width: 100%; }
#domainNav .domain-tab {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.8rem;
    gap: 0.3rem;
}
#domainNav .domain-tab i { font-size: 0.95rem; }
#domainNav #btn-top-executive { margin-right: 0.4rem !important; margin-left: 0.1rem !important; }
/* Nav IA — rd active state (replaces the legacy teal gradient) so the top tabs match the
   sidebar/mobile rd purple. Font is already STC Forward via the app font-family. */
#domainNav .domain-tab.active {
    background: var(--rd-purple) !important;
    color: #fff !important;
    box-shadow: var(--rd-shadow) !important;
    font-weight: 700;
}
#domainNav .domain-tab.active i { color: #fff; }

/* IMPL-09 · Tools/Admin surface — completes the IMPL-01 .rd-admin-row pattern
   with the page scaffold (topbar, sections, 3-col capped grid) + button/text
   ergonomics. SITEWIDE admin pattern, reusable. Grid minmax(0,1fr) + .rd-tx
   min-width:0 per the IMPL-02 overflow lesson. */
.rd-adm-wrap { max-width: 1240px; margin: 0 auto; padding: 2rem 1.5rem 3rem; width: 100%; }
.rd-adm-topbar { display:flex; align-items:center; gap:11px; padding:12px 0 16px; border-bottom:1px solid var(--rd-line); margin-bottom:4px; font-family:var(--rd-font); }
.rd-adm-brand { font-weight:800; font-size:17px; color:var(--rd-ink); }
.rd-adm-badge { background:#f3e8fc; color:#6d1fb0; font-size:10px; font-weight:800; border-radius:6px; padding:3px 8px; letter-spacing:.04em; }
.rd-admin-sec { font-family:var(--rd-font); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5a4a8a; margin:18px 0 10px; font-weight:800; display:flex; align-items:center; gap:8px; }
.rd-admin-sec::after { content:""; flex:1; height:1px; background:var(--rd-line); }
.rd-adm-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; max-width:100%; }
.rd-admin-row { text-align:left; width:100%; color:var(--rd-ink); border-radius:14px; }
.rd-admin-row:focus-visible { outline:2px solid var(--rd-purple); outline-offset:2px; }
.rd-admin-row .rd-tx { flex:1; min-width:0; }
.rd-admin-row .rd-mh { display:block; color:var(--rd-ink); }
.rd-admin-row .rd-d { display:block; font-size:11px; color:var(--rd-gray); line-height:1.5; margin-top:2px; }
[data-theme='dark'] .rd-admin-row { background:#1b2430; border-color:#2c3947; }
[data-theme='dark'] .rd-admin-row .rd-mh { color:#e8edf2; }
@media (max-width:1000px) { .rd-adm-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:700px)  { .rd-adm-grid { grid-template-columns:1fr; } }

/* ============================================================================
   IMPL-07 · Assurance view (HIFI_07) — scoped to #assurance-content.
   EXPORT-SAFE SVG-arc gauges (html2canvas 1.4.1 can't render conic-gradient or
   CSS mask). Keeps .summary-widgets + #assurance-charts-grid (frozen exporters
   capture by those). Grid overrides carry !important + extra id to beat the
   inline #assurance-* rules in index.html <style>. No transition on the gauge
   fill so the export captures the final arc, not a mid-animation frame.
   ============================================================================ */
#assurance-content { font-family: var(--rd-font); }
#assurance-content .rd-asm-wrap { max-width: 1180px; margin: 0 auto; }
#assurance-content .rd-asm-h2 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-gray); margin: 18px 0 9px; font-weight: 700; }
/* KPIs (section keeps .summary-widgets for export capture) */
#assurance-content .summary-widgets.rd-asm-kpis { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 11px !important; padding: 0 !important; margin: 0 !important; }
#assurance-content .rd-asm-kpi { background: #fff; border: 1px solid var(--rd-line); border-radius: 12px; padding: 13px 15px; box-shadow: var(--rd-shadow); display: flex; gap: 12px; align-items: center; }
#assurance-content .rd-asm-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
#assurance-content .rd-asm-l { font-size: 10px; color: var(--rd-gray); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; line-height: 1.3; }
#assurance-content .rd-asm-v { font-size: 22px; font-weight: 800; margin-top: 1px; color: var(--rd-ink); }
/* activity cards (section keeps #assurance-charts-grid for export capture) */
#assurance-content #assurance-charts-grid.rd-asm-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 11px !important; }
#assurance-content .rd-asm-card { background: #fff; border: 1px solid var(--rd-line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--rd-shadow); }
#assurance-content .rd-asm-ch { font-weight: 800; font-size: 13.5px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--rd-ink); }
#assurance-content .rd-asm-cic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
#assurance-content .rd-asm-hero { text-align: center; padding: 18px 0 8px; }
#assurance-content .rd-asm-n { font-size: 42px; font-weight: 800; letter-spacing: -.02em; color: var(--rd-ink); line-height: 1; }
#assurance-content .rd-asm-chip { display: inline-block; border: 1px solid var(--rd-line); border-radius: 9px; padding: 5px 12px; font-size: 10px; color: var(--rd-gray); font-weight: 700; box-shadow: var(--rd-shadow); text-align: center; }
#assurance-content .rd-asm-chip b { display: block; font-size: 14px; color: var(--rd-ink); }
/* SVG semicircle gauge (export-safe) */
#assurance-content .rd-gauge { width: 168px; margin: 8px auto 0; display: block; }
#assurance-content .rd-gauge svg { display: block; width: 168px; height: 92px; }
#assurance-content .rd-gauge-pct { text-align: center; font-size: 19px; font-weight: 800; color: var(--rd-purple); margin-top: 4px; }
#assurance-content .rd-asm-grow { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--rd-gray); font-weight: 700; }
#assurance-content .rd-asm-grow b { display: block; font-size: 15px; color: var(--rd-ink); }
/* penalties table */
#assurance-content .rd-asm-pentable { max-width: 600px; margin: 0 auto; }
#assurance-content .rd-asm-table { border-collapse: collapse; width: 100%; font-size: 12.5px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--rd-shadow); }
#assurance-content .rd-asm-table thead th { background: var(--rd-purple); color: #fff; text-align: left; padding: 10px 14px; font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
#assurance-content .rd-asm-table tbody td { padding: 9px 14px; border-bottom: 1px solid var(--rd-line); color: var(--rd-ink); }
#assurance-content .rd-asm-table tbody tr:nth-child(even) { background: #fafafd; }
#assurance-content .rd-asm-pen { color: var(--rd-red); font-weight: 800; }
#assurance-content .rd-asm-rev { color: var(--rd-teal); font-weight: 800; }
#assurance-content .rd-asm-total td { padding: 10px 14px; font-weight: 800; border-top: 2px solid var(--rd-line); background: #fff; color: var(--rd-ink); }
@media (max-width: 900px) {
  #assurance-content .summary-widgets.rd-asm-kpis { grid-template-columns: 1fr 1fr !important; }
  #assurance-content #assurance-charts-grid.rd-asm-cards { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   IMPL-04 · Annual Plan Landscape (HIFI_04 v5) — scoped to #app-content.
   Cards + regulations are export-captured (html2canvas) → keep .summary-widgets
   + .chart-container.full-width; no conic/mask on those. Charts (donut/bars/
   channels) are NOT DOM-captured (export re-renders from data) → free styling.
   Grids use minmax(0,1fr) (overflow lesson).
   ============================================================================ */
#app-content { font-family: var(--rd-font); }
#app-content .rd-ls-h2 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-gray); margin: 18px 0 9px; font-weight: 700; }
/* 7 KPI cards — 12-col (3×span4 then 4×span3) */
#app-content .summary-widgets.rd-ls-kpis { display: grid !important; grid-template-columns: repeat(12, minmax(0,1fr)) !important; gap: 11px !important; padding: 0 !important; margin: 0 !important; }
#app-content .rd-ls-kpis .rd-s4 { grid-column: span 4; }
#app-content .rd-ls-kpis .rd-s3 { grid-column: span 3; }
#app-content .rd-kpi2 { background: #fff; border: 1px solid var(--rd-line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--rd-shadow); position: relative; }
#app-content .rd-kpi2 .rd-icn { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; float: right; }
#app-content .rd-kpi2 .rd-l { font-size: 10px; color: var(--rd-gray); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; max-width: 80%; line-height: 1.3; }
#app-content .rd-kpi2 .rd-v { font-size: 23px; font-weight: 800; margin-top: 3px; color: var(--rd-ink); }
#app-content .rd-kpi2 .rd-v .rd-v2 { font-size: 13px; color: var(--rd-gray); font-weight: 700; }
/* chart cards */
#app-content .rd-ls-row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
#app-content .rd-ls-row2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
#app-content .rd-ls-card { background: #fff; border: 1px solid var(--rd-line); border-radius: 12px; padding: 13px 15px; box-shadow: var(--rd-shadow); min-width: 0; }
#app-content .rd-ls-card .rd-ch { font-weight: 800; font-size: 13px; color: var(--rd-ink); margin-bottom: 10px; }
/* vertical bars */
#app-content .rd-vbars { display: flex; align-items: flex-end; gap: 9px; padding: 0 4px; height: 180px; }
#app-content .rd-vb { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: pointer; }
#app-content .rd-vb b { font-size: 12px; font-weight: 800; color: var(--rd-ink); margin-bottom: 3px; }
#app-content .rd-vb i { width: 100%; max-width: 34px; border-radius: 5px 5px 0 0; min-height: 2px; }
#app-content .rd-vb span { font-size: 10px; color: var(--rd-gray); font-weight: 700; margin-top: 5px; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* donut + legend */
#app-content .rd-donutwrap { display: flex; align-items: center; gap: 16px; }
#app-content .rd-donut2 { width: 120px; height: 120px; flex: none; display: block; }
#app-content .rd-leg { flex: 1; min-width: 0; }
#app-content .rd-legrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: 11.5px; cursor: pointer; border-bottom: 1px dashed var(--rd-line); }
#app-content .rd-legrow .rd-nm { display: flex; align-items: center; gap: 7px; color: #4a555d; min-width: 0; }
#app-content .rd-legrow .rd-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
#app-content .rd-legrow .rd-pct { color: var(--rd-gray); font-size: 10px; font-weight: 600; margin-left: 5px; }
/* channels one-line rd-chrow (reuse global .rd-chrow look, scoped track color) */
#app-content .rd-chrow { display: grid; grid-template-columns: minmax(120px,1.4fr) 1fr 38px; gap: 8px; align-items: center; font-size: 11px; padding: 3.5px 0; color: #4a555d; cursor: pointer; }
#app-content .rd-chrow .rd-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; text-align: right; }
#app-content .rd-chrow .rd-t { height: 8px; border-radius: 4px; background: #e7f7f9; overflow: hidden; }
#app-content .rd-chrow .rd-fill { display: block; height: 100%; border-radius: 4px; }
#app-content .rd-chrow b { text-align: right; font-weight: 800; font-size: 11.5px; color: var(--rd-ink); }
#app-content .rd-chstat { display: flex; gap: 10px; margin-bottom: 10px; }
/* regulations — one full-width card, 3 ranked columns */
#app-content .chart-container.full-width.rd-ls-regcard { border: 1px solid var(--rd-line); border-radius: 12px; box-shadow: var(--rd-shadow); background: #fff; }
#app-content .rd-reggrid { display: grid; grid-template-rows: repeat(10, auto); grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px 16px; }
#app-content .rd-reg { display: flex; align-items: center; justify-content: space-between; gap: 7px; border: 1px solid var(--rd-line); border-radius: 999px; padding: 3px 4px 3px 11px; font-size: 10px; box-shadow: var(--rd-shadow); background: #fff; cursor: pointer; }
#app-content .rd-reg .rd-rn { flex: 1; min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; color: var(--rd-ink); direction: rtl; }
#app-content .rd-reg .rd-rc { background: var(--rd-purple); color: #fff; border-radius: 999px; padding: 2px 7px; font-weight: 800; font-size: 9.5px; flex: none; }
/* requirements working table → rd-table */
#app-content #data-table-section.rd-ls-tablecard { background: #fff; border: 1px solid var(--rd-line); border-radius: 12px; box-shadow: var(--rd-shadow); }
#app-content #compliance-table.rd-table thead th { background: var(--rd-purple); color: #fff; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
#app-content #compliance-table.rd-table tbody tr:nth-child(even) { background: #fafafd; }
#app-content #compliance-table.rd-table tbody tr:hover { background: #f3edf9; }
@media (max-width: 1000px) {
  #app-content .summary-widgets.rd-ls-kpis { grid-template-columns: 1fr 1fr !important; }
  #app-content .rd-ls-kpis .rd-s4, #app-content .rd-ls-kpis .rd-s3 { grid-column: auto; }
  #app-content .rd-ls-row3 { grid-template-columns: 1fr; }
  #app-content .rd-ls-row2 { grid-template-columns: 1fr; }
  #app-content .rd-reggrid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: auto; }
}

/* IMPL-04 fix · the base .charts-section is a repeat(auto-fit,minmax(400px,1fr))
   grid that placed the row-divs side by side (cramming all 7 chart cards into
   one row + starving the donut legend). Stack the rd rows full-width instead. */
#app-content .charts-section { display: flex; flex-direction: column; gap: 11px; margin-bottom: 1.5rem; }

/* ============================================================================
   IMPL-05 · Annual Plan (HIFI_05 v3) — scoped to #annual-content.
   Cards + CST timeline + regulations are export-captured (html2canvas) → keep
   .summary-widgets / #cst-timeline-card / #annual-regulations-card and keep the
   CST timeline html2canvas-safe (CSS dots/diamonds, no conic on the timeline).
   Donuts/bars are NOT captured (export re-renders) → conic donuts OK on screen.
   ============================================================================ */
#annual-content { font-family: var(--rd-font); }
#annual-content .rd-an-h2 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rd-gray); margin: 18px 0 9px; font-weight: 700; }
/* team toggle → rd-pills look (keep #annual-team-toggle handlers) */
#annual-content .summary-widgets.rd-an-kpis { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 11px !important; padding: 0 !important; margin: 0 !important; }
#annual-content .rd-kpi2 { background:#fff; border:1px solid var(--rd-line); border-radius:12px; padding:12px 14px; box-shadow:var(--rd-shadow); position:relative; }
#annual-content .rd-kpi2 .rd-icn { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; float:right; }
#annual-content .rd-kpi2 .rd-l { font-size:10px; color:var(--rd-gray); text-transform:uppercase; letter-spacing:.05em; font-weight:600; max-width:80%; }
#annual-content .rd-kpi2 .rd-v { font-size:23px; font-weight:800; margin-top:3px; color:var(--rd-ink); }
#annual-content .rd-kpi2 .rd-v .rd-v2 { font-size:14px; color:var(--rd-gray); font-weight:700; }
/* chart card grids */
#annual-content .rd-an-grid { display:grid; gap:11px; }
#annual-content .rd-an-row3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
#annual-content .rd-an-row2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
#annual-content .rd-an-card { background:#fff; border:1px solid var(--rd-line); border-radius:12px; padding:13px 15px; box-shadow:var(--rd-shadow); min-width:0; }
#annual-content .rd-an-card .rd-ch { font-weight:800; font-size:13px; color:var(--rd-ink); margin-bottom:10px; }
/* donut + legend (conic; NOT export-captured) */
#annual-content .rd-dwrap { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
#annual-content .rd-donut2 { width:118px; height:118px; border-radius:50%; flex:none; position:relative; }
#annual-content .rd-donut2::after { content:""; position:absolute; inset:24px; background:#fff; border-radius:50%; }
#annual-content .rd-donut2 .rd-dc { position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:16px; color:var(--rd-ink); z-index:1; }
#annual-content .rd-leg { flex:1; min-width:130px; }
#annual-content .rd-legrow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; font-size:11.5px; border-bottom:1px dashed var(--rd-line); }
#annual-content .rd-legrow .rd-nm { display:flex; align-items:center; gap:7px; color:#4a555d; min-width:0; }
#annual-content .rd-legrow .rd-dot { width:9px; height:9px; border-radius:3px; flex:none; }
#annual-content .rd-legrow .rd-pct { color:var(--rd-gray); font-size:10px; font-weight:500; margin-left:5px; }
/* Center % inside the donut (opt-in via rd-dc-show; overrides the annual default that hides .rd-dc) */
#annual-content .rd-dwrap .rd-donut2 .rd-dc.rd-dc-show { display:grid; font-size:21px; }
/* Total-requirements line beneath the Completion Progress legend numbers */
#annual-content .rd-leg-total { margin-top:7px; padding-top:6px; border-top:1px solid var(--rd-line); font-size:11px; font-weight:700; color:var(--rd-ink); }
/* Per-team completion % shown to the LEFT of the Completion Progress donut */
#annual-content .rd-teampct { display:flex; flex-direction:column; gap:8px; flex:none; min-width:78px; }
#annual-content .rd-tp-row { display:flex; flex-direction:column; gap:1px; }
#annual-content .rd-tp-nm { font-size:10px; font-weight:600; color:var(--rd-gray); text-transform:uppercase; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#annual-content .rd-tp-v { font-size:18px; font-weight:800; color:var(--rd-ink); line-height:1; }
/* Unique Fully Completed — "X / Y" text to the right of the donut */
#annual-content .rd-uniq-side { flex:1; min-width:120px; }
#annual-content .rd-uniq-big { font-size:22px; font-weight:800; color:var(--rd-ink); }
#annual-content .rd-uniq-big .rd-uniq-sep { color:var(--rd-gray); font-weight:600; }
#annual-content .rd-uniq-cap { margin-top:4px; font-size:11px; color:var(--rd-gray); line-height:1.35; }
/* horizontal stacked bars (team) */
#annual-content .rd-hbar { margin:8px 0; }
#annual-content .rd-hbar .rd-hl { font-size:11px; font-weight:800; margin-bottom:4px; color:#4a555d; }
#annual-content .rd-hstack { display:flex; height:24px; border-radius:7px; overflow:hidden; box-shadow:var(--rd-shadow); }
#annual-content .rd-hstack i { display:grid; place-items:center; font-size:8.5px; color:#fff; font-weight:800; min-width:0; overflow:hidden; }
/* vertical stacked / grouped bars */
#annual-content .rd-vstack { display:flex; align-items:flex-end; gap:14px; padding:0 6px; height:180px; }
#annual-content .rd-vcol { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
#annual-content .rd-vcol .rd-vseg { width:100%; max-width:54px; flex:none; display:flex; align-items:center; justify-content:center; font-size:8.5px; color:#fff; font-weight:800; white-space:nowrap; overflow:hidden; }
#annual-content .rd-vcol .rd-vseg:first-of-type { border-radius:7px 7px 0 0; }
/* Risk card stretches its bars to fill the (taller) merged-team card height */
#annual-content .rd-an-card.rd-fillcard { display:flex; flex-direction:column; }
#annual-content .rd-an-card.rd-fillcard .rd-vstack { flex:1; height:auto; min-height:240px; }
#annual-content .rd-vcol .rd-vx { font-size:10px; color:var(--rd-gray); font-weight:700; margin-top:6px; text-align:center; }
/* vstack legend (HIFI .lgd) */
#annual-content .rd-lgd { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-size:10px; color:var(--rd-gray); font-weight:700; margin-top:10px; }
#annual-content .rd-lgd span { display:flex; align-items:center; gap:5px; }
#annual-content .rd-lgd .rd-ldot { width:9px; height:9px; border-radius:3px; flex:none; }
/* Team Progress by Quarter — native rd grouped/stacked chart (crisp HTML, like other rd bars) */
#annual-content .rd-tqouter { width:100%; }
#annual-content .rd-tqlgd { margin:4px 0 14px; }
#annual-content .rd-tq { display:flex; align-items:stretch; }
#annual-content .rd-tqgroup { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; padding:0 8px; border-right:1px dashed var(--rd-line); }
#annual-content .rd-tqgroup:last-child { border-right:0; }
#annual-content .rd-tqbars { display:flex; gap:12px; align-items:flex-end; }
#annual-content .rd-tqcol { display:flex; flex-direction:column; align-items:center; min-width:0; }
#annual-content .rd-tqbar { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:200px; width:46px; max-width:46px; }
#annual-content .rd-tqstack { display:flex; flex-direction:column; width:100%; overflow:hidden; border-radius:6px 6px 0 0; }
#annual-content .rd-tqseg { width:100%; flex:none; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; font-weight:800; white-space:nowrap; overflow:hidden; }
#annual-content .rd-tqpill { margin-top:9px; font-size:9px; font-weight:800; color:#fff; padding:3px 10px; border-radius:7px; white-space:nowrap; }
#annual-content .rd-tqq { margin-top:8px; font-size:13px; font-weight:800; color:var(--rd-ink); }
#annual-content .rd-vgrp { display:flex; align-items:flex-end; gap:3px; height:100%; width:100%; max-width:60px; justify-content:center; }
#annual-content .rd-vgrp i { flex:1; max-width:16px; border-radius:4px 4px 0 0; min-height:2px; position:relative; }
#annual-content .rd-vgrp i b { position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; color:var(--rd-ink); }
/* 7 unit donuts grid + color-keyed legend */
#annual-content .rd-units { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:14px; padding-top:6px; }
#annual-content .rd-unit { text-align:center; }
#annual-content .rd-unit .rd-un { font-size:11px; font-weight:800; color:var(--rd-ink); margin-top:6px; }
#annual-content .rd-unit .rd-donut2 { width:92px; height:92px; margin:0 auto; }
#annual-content .rd-unit .rd-donut2::after { inset:19px; }
#annual-content .rd-uleg { display:flex; justify-content:center; gap:16px; margin-top:14px; font-size:11px; color:var(--rd-gray); flex-wrap:wrap; }
#annual-content .rd-uleg span { display:inline-flex; align-items:center; gap:6px; }
#annual-content .rd-uleg i { width:11px; height:11px; border-radius:3px; }
/* CST PLAN TIMELINE — html2canvas-safe CSS timeline, fit-to-view via JS scale */
#annual-content .rd-tlwrap { overflow:hidden; padding:8px 4px 4px; }
#annual-content .rd-tl { display:flex; align-items:center; min-width:900px; position:relative; height:230px; transform-origin:left center; }
#annual-content .rd-tl::before { content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--rd-line); }
#annual-content .rd-tli { flex:1; position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#annual-content .rd-tli .rd-nd { width:15px; height:15px; border-radius:50%; border:2.5px solid #fff; box-shadow:var(--rd-shadow); z-index:2; }
#annual-content .rd-tli .rd-nd.rd-dia { border-radius:3px; transform:rotate(45deg); }
#annual-content .rd-tli .rd-tlb { position:absolute; width:118px; font-size:8.5px; line-height:1.3; color:#4a555d; text-align:center; }
#annual-content .rd-tli .rd-tlb span { display:block; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
#annual-content .rd-tli .rd-tlb b { display:block; margin-top:2px; color:var(--rd-ink); font-size:9px; }
#annual-content .rd-tli.rd-u .rd-tlb { bottom:calc(50% + 14px); }
#annual-content .rd-tli.rd-d .rd-tlb { top:calc(50% + 14px); }
@media (max-width: 768px) {
    /* Team Progress by Quarter — keep bars readable; scroll horizontally (the grouped
       46px×2 bars overflow/overlap the shrunk quarter columns otherwise). */
    #annual-content .rd-tqouter { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    #annual-content .rd-tq { min-width:600px; }
    /* CST timeline — natural size, scroll horizontally to read (fit-scale would shrink the
       900px timeline to an unreadable strip). Height/scroll also set by fitCstTimeline(). */
    #annual-content .rd-tlwrap { overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
    #annual-content .rd-tl { transform:none !important; }
    /* Legend flows BELOW the timeline (was absolute-positioned, overlapping the milestones). */
    #annual-content #cst-timeline-card { padding-bottom:16px !important; }
    #annual-content #cst-timeline-card .cst-legend { position:static !important; bottom:auto !important; right:auto !important; margin-top:16px; justify-content:flex-start; gap:16px 26px; flex-wrap:wrap; }
}
/* regulations progress chips (3 cols) */
#annual-content #annual-regulation-grid.rd-an-reggrid { display:grid !important; grid-template-rows:repeat(10,auto); grid-auto-flow:column; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 16px; }
#annual-content .rd-preg { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--rd-line); border-radius:999px; padding:4px 5px 4px 12px; font-size:10px; box-shadow:var(--rd-shadow); background:#fff; }
#annual-content .rd-preg .rd-rn { flex:1; min-width:0; overflow:hidden; text-overflow:clip; white-space:nowrap; direction:rtl; color:var(--rd-ink); }
#annual-content .rd-preg .rd-badges { display:flex; gap:5px; flex:none; align-items:center; }
#annual-content .rd-preg .rd-pbadge { border-radius:999px; padding:2px 9px; font-weight:800; font-size:9.5px; flex:none; }
#annual-content .rd-preg .rd-pn { background:var(--rd-purple); color:#fff; border-radius:999px; min-width:22px; height:19px; display:grid; place-items:center; padding:0 7px; font-size:9.5px; font-weight:800; flex:none; }
@media (max-width:1000px){
  #annual-content .summary-widgets.rd-an-kpis { grid-template-columns:1fr 1fr !important; }
  #annual-content .rd-an-row3, #annual-content .rd-an-row2 { grid-template-columns:1fr; }
  #annual-content #annual-regulation-grid.rd-an-reggrid { grid-template-columns:1fr; grid-auto-flow:row; }
}

/* IMPL-05 fix · unit donuts as HIFI .md cards (ring + name + 3 legend rows) */
#annual-content #annual-unit-pies-container.rd-mds { display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; padding-top:6px; }
#annual-content .rd-md { text-align:center; }
#annual-content .rd-mdh { font-size:11px; font-weight:800; color:#5a4a8a; margin-bottom:6px; }
#annual-content .rd-mdwrap { position:relative; width:92px; height:92px; margin:0 auto 6px; }
#annual-content .rd-mdo { width:92px; height:92px; border-radius:50%; -webkit-mask:radial-gradient(circle 30px,transparent 98%,#000); mask:radial-gradient(circle 30px,transparent 98%,#000); }
#annual-content .rd-mdc { position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:15px; color:var(--rd-ink); }
#annual-content .rd-mr { display:flex; justify-content:space-between; font-size:9px; color:var(--rd-gray); font-weight:700; padding:1.5px 6px; border-bottom:1px dashed var(--rd-line); }
#annual-content .rd-mr span { display:flex; align-items:center; gap:4px; }
#annual-content .rd-mr .rd-mc { color:var(--rd-ink); font-weight:800; }
#annual-content .rd-mdot { width:7px; height:7px; border-radius:2.5px; display:inline-block; flex:none; }
/* HIFI donuts have no centre number — masked ring + legend only */
#annual-content .rd-dwrap .rd-donut2 .rd-dc { display:none; }
@media(max-width:1000px){ #annual-content #annual-unit-pies-container.rd-mds { grid-template-columns:repeat(2,1fr); } }

#annual-content .rd-vcol .rd-vtot { font-size:11px; font-weight:800; color:var(--rd-ink); margin-bottom:3px; }

/* IMPL-05 fix · stack chart rows (2-per-row) — base #annual-charts-grid grid was cramming the rd rows into 4-across */
#annual-content #annual-charts-grid { display:flex !important; flex-direction:column; gap:11px; }