/* V20.14.90 -- portal-wide finishing layer (every page, loaded last). */

/* V20.14.91 -- the top-centre signal wave is back to its original cyan
   design (pulse-mission.css); the brand-colour version was removed. */

/* ---------------------------------------------------------------- Light theme surfaces
   Plain white boxes read flat next to the dark theme's glass. Every box now
   carries a faint cool tint that deepens toward its lower edge, a soft
   highlight along the top and a hint of the cyan accent in one corner, on a
   page background one step darker so the boxes still lift off it. */

:root[data-theme="light"] :is(.panel, .kpi-card, .mc-hud, .v46-brief, .v46-trustbar, .filterbar, .tabnav, .launch-map, .section-tab, .section-workspace, .route-report-node, .section-application, .login-card, .cp-stat, .stat-card, .report-catalog-card, .cfg-app, .cfg-stat, .cfg-item, .guide-feature-card, .guide-meta-card, .landing-section .card, .v24-data-health-item, .system-node, .pw86-card) {
  background: var(--mc-glass) !important;
  border-color: #c9d7e6 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(20, 50, 90, .05), 0 10px 26px rgba(20, 50, 90, .08) !important;
}
:root[data-theme="light"] body { background-color: var(--bg-void); }

/* ---------------------------------------------------------------- Filter "updating" indicator
   It used to sit in the header's flow, so the whole deck grew and shrank each
   time it appeared -- the page jumped on every filter change. It is now a
   floating pill under the top bar with a running progress line; nothing
   moves when it comes and goes. */
.scope-update-indicator {
  position: fixed !important; top: 44px !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translateX(-50%); z-index: 1450 !important; margin: 0 !important;
  max-width: min(520px, calc(100vw - 32px)) !important; padding: 7px 14px 9px !important; overflow: hidden;
  border: 1px solid rgba(93, 220, 255, .5) !important; border-radius: 999px !important;
  background: rgba(8, 22, 42, .95) !important; color: #eaf8ff !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38) !important; white-space: nowrap !important; font-size: 12px !important;
  animation: scopePillIn .18s cubic-bezier(.2, .8, .2, 1) both;
}
.scope-update-indicator::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, #00d9ff, #ffc93c, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: scopeRun 1.1s linear infinite; }
.scope-update-indicator.is-error { border-color: rgba(255, 108, 124, .7) !important; background: rgba(48, 20, 34, .97) !important; white-space: normal !important; border-radius: 14px !important; }
.scope-update-indicator.is-error::after { display: none; }
@keyframes scopePillIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes scopeRun { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (max-width: 700px) { .scope-update-indicator { top: auto !important; bottom: 14px !important; } }

/* ---------------------------------------------------------------- Branch map
   The connector is a beam: it draws itself, glows, carries a flowing dash and
   two travelling sparks, and lands on a pulsing node. The branch boxes are
   compact -- one line for the name, volume and growth, one row of four small
   figures -- so more branches fit beside the map. */
.v21-map-leader.v21-leader-beam { stroke: url(#v21-leader-grad) !important; stroke-width: 2.2 !important; stroke-dasharray: 100; stroke-dashoffset: 100; animation: v90BeamDraw .7s cubic-bezier(.3, .7, .2, 1) forwards; }
.v21-leader-halo { fill: none; stroke-width: 9; stroke-linecap: round; opacity: .9; filter: blur(3px); }
.v21-leader-flow { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 9; opacity: .75; animation: v90BeamFlow .9s linear infinite; }
.v21-leader-spark { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px rgba(0, 217, 255, .8)); }
.v21-leader-end { filter: drop-shadow(0 0 6px rgba(0, 217, 255, .9)); }
.v21-leader-end-ring { fill: none; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: v21FocusRing 1.3s ease-out infinite; }
@keyframes v90BeamDraw { to { stroke-dashoffset: 0; } }
@keyframes v90BeamFlow { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) { .v21-map-leader.v21-leader-beam { animation: none; stroke-dashoffset: 0; } .v21-leader-flow, .v21-leader-end-ring { animation: none; } }

.v21-map-callouts { gap: 4px !important; }
.v21-map-callout { padding: 6px 10px 6px 12px !important; }
.v21-map-callout-top { align-items: center !important; }
.v21-map-callout b { font-size: 11.5px !important; }
.v21-map-callout .v21-map-gain { font-size: 12px !important; }
.v21-map-callout-lead { margin-top: 3px !important; padding-bottom: 5px !important; gap: 6px !important; }
.v21-map-callout-lead strong { font-size: 15px !important; }
.v21-map-callout-lead em { font-size: 11px !important; }
.v21-map-callout-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2px 8px !important; margin-top: 4px !important; }
.v21-map-callout-grid span { font-size: 11px !important; letter-spacing: .04em !important; }
.v21-map-callout-grid strong { font-size: 11.5px !important; margin-top: 1px !important; }

/* ---------------------------------------------------------------- WHAT-IF planner */
.v21-scenario-modal .v21-modal { animation: v90ModalIn .32s cubic-bezier(.2, .9, .25, 1.05) both; }
.v21-scenario-modal .v21-scenario-control, .v21-scenario-modal .v21-scenario-result-panel, .v21-scenario-modal .v21-scenario-presets { animation: v90Rise .42s cubic-bezier(.2, .8, .2, 1) both; }
.v21-scenario-modal .v21-scenario-control:nth-of-type(1) { animation-delay: .05s; }
.v21-scenario-modal .v21-scenario-control:nth-of-type(2) { animation-delay: .1s; }
.v21-scenario-modal .v21-scenario-control:nth-of-type(3) { animation-delay: .15s; }
.v21-scenario-modal .v21-scenario-control:nth-of-type(4) { animation-delay: .2s; }
.v21-scenario-modal .v21-scenario-result-panel { animation-delay: .12s; }
.v21-scenario-modal input[type="range"] { accent-color: var(--cyan); }
.v21-scenario-modal input[type="range"]::-webkit-slider-thumb { transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 0 0 4px rgba(0, 217, 255, .18), 0 0 14px rgba(0, 217, 255, .6); }
.v21-scenario-modal input[type="range"]:active::-webkit-slider-thumb, .v21-scenario-modal input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); box-shadow: 0 0 0 7px rgba(0, 217, 255, .2), 0 0 20px rgba(0, 217, 255, .85); }
.v21-scenario-value.sc-bump { animation: v90Bump .32s ease; }
.v21-scenario-line { transition: d .45s cubic-bezier(.3, .7, .2, 1), stroke .3s ease; stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(0, 217, 255, .55)); }
.v21-scenario-area { transition: d .45s cubic-bezier(.3, .7, .2, 1); fill: url(#v21ScenarioGradient); opacity: .16; stroke: none; }
.v21-scenario-baseline { fill: none; stroke: rgba(160, 190, 220, .45); stroke-width: 1; stroke-dasharray: 4 5; }
.v21-scenario-dot { fill: #ffc93c; transition: cy .45s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 0 6px rgba(255, 201, 60, .9)); animation: v90DotPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.scenario-up .v21-scenario-dot { fill: #3ee6a0; filter: drop-shadow(0 0 6px rgba(62, 230, 160, .9)); }
.scenario-down .v21-scenario-dot { fill: #ff5f6e; filter: drop-shadow(0 0 6px rgba(255, 95, 110, .9)); }
.v21-scenario-gauge { display: grid; gap: 7px; margin: 12px 0 4px; }
.v21-sg-row { display: grid; grid-template-columns: 64px 1fr 56px; align-items: center; gap: 8px; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.v21-sg-row b { font: 700 11.5px var(--font-mono); color: var(--text-hi); text-align: right; }
.v21-sg-track { height: 9px; border-radius: 999px; background: rgba(120, 170, 220, .12); overflow: hidden; }
.v21-sg-bar { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .5s cubic-bezier(.3, .7, .2, 1), background .3s ease; }
.v21-sg-bar.is-base { background: linear-gradient(90deg, rgba(160, 190, 220, .35), rgba(160, 190, 220, .7)); }
.v21-sg-bar.is-scn { background: linear-gradient(90deg, #00d9ff, #3ee6a0); box-shadow: 0 0 12px rgba(0, 217, 255, .45); }
.v21-sg-bar.is-scn.is-down { background: linear-gradient(90deg, #ff9a3c, #ff5f6e); box-shadow: 0 0 12px rgba(255, 95, 110, .4); }
.v21-scenario-metric, .v21-sr-big { transition: box-shadow .3s ease, border-color .3s ease; }
.v21-scenario-metric.sc-up, .v21-sr-big.sc-up { animation: v90FlashUp .6s ease; }
.v21-scenario-metric.sc-down, .v21-sr-big.sc-down { animation: v90FlashDown .6s ease; }
.v21-scenario-preset { transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.v21-scenario-preset:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 217, 255, .18); }
.v21-scenario-preset.active { border-color: var(--cyan) !important; box-shadow: 0 0 0 1px var(--cyan), 0 0 18px rgba(0, 217, 255, .35); }
@keyframes v90ModalIn { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes v90Rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes v90Bump { 0% { transform: scale(1); } 45% { transform: scale(1.18); box-shadow: 0 0 14px rgba(0, 217, 255, .5); } 100% { transform: scale(1); } }
@keyframes v90DotPulse { 50% { transform: scale(1.35); } }
@keyframes v90FlashUp { 0% { box-shadow: 0 0 0 0 rgba(62, 230, 160, 0); } 35% { box-shadow: 0 0 0 2px rgba(62, 230, 160, .55), 0 0 22px rgba(62, 230, 160, .35); } 100% { box-shadow: 0 0 0 0 rgba(62, 230, 160, 0); } }
@keyframes v90FlashDown { 0% { box-shadow: 0 0 0 0 rgba(255, 95, 110, 0); } 35% { box-shadow: 0 0 0 2px rgba(255, 95, 110, .55), 0 0 22px rgba(255, 95, 110, .3); } 100% { box-shadow: 0 0 0 0 rgba(255, 95, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .v21-scenario-modal *, .v21-scenario-modal .v21-modal { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------- Executive briefing */
.briefing-page { max-width: 1080px !important; }
.briefing-sheet { max-width: 1080px !important; position: relative; overflow: hidden; }
/* V20.14.157 -- the NEGATIVE MARGIN is gone, and it is what was cutting the
   masthead in every exported PDF: the brand mark printed as "ed Bull" with its
   left edge sliced off, and the title's ascenders shaved.
   `margin: -8px -8px 18px` was a bleed, correct when this header was a tinted
   card that needed to reach the edges of a padded panel. pulse-briefing.css
   later redesigned the head as a document masthead -- `padding: 0 0 22px;
   border: 0; background: none` -- and its !important padding, border and
   background all override the ones on this line. The margin had nothing left
   to bleed INTO, so all it did was push the header 8px outside `.briefing-sheet`,
   which is `overflow: hidden` on the line above. Content pushed outside a clip
   gets clipped.
   V20.14.120 already met this: its comment here describes "a square whose left
   edge already sits on .briefing-head's own clipped boundary" and shrank the
   logo ring to dodge it. That treated the symptom; this is the cause.
   `overflow: hidden` STAYS -- .bx-head-glow is an absolutely positioned blob
   inset -40% and must still be contained. The margin-bottom stays too; only
   the negative bleed goes, so pulse-briefing.css's own 26px masthead gap is
   what applies now. */
.briefing-head { position: relative; overflow: hidden; padding: 22px 24px !important; margin: 0 0 18px !important; border-radius: 14px; background: linear-gradient(120deg, rgba(0, 217, 255, .12), rgba(157, 139, 255, .10) 55%, rgba(255, 201, 60, .08)); border: 1px solid rgba(0, 217, 255, .28); }
.bx-head-glow { position: absolute; inset: -40% -10% auto auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 217, 255, .22), transparent 65%); animation: v90Drift 9s ease-in-out infinite alternate; pointer-events: none; }
.briefing-brand-logo { position: relative; }
/* V20.14.120 -- inset 0, so the ring IS the badge rather than a circle drawn
   7px outside a square whose left edge already sits on .briefing-head's own
   clipped boundary. The mark is sized against this circle in pulse-briefing.css;
   keeping both radii the same number means the two cannot drift apart. */
.briefing-brand-logo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(0, 217, 255, .55); animation: v90Spin 14s linear infinite; }
.briefing-snapshot { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; border: 0 !important; background: transparent !important; }
.briefing-snapshot article { position: relative; border: 1px solid var(--bg-panel-line) !important; border-radius: 14px !important; padding: 16px 16px 14px !important; background: var(--mc-glass) !important; overflow: hidden; animation: v90Rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transition: transform .2s ease, box-shadow .2s ease; }
.briefing-snapshot article:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.briefing-snapshot article::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent); }
.briefing-snapshot article.positive::before { background: linear-gradient(90deg, var(--green), transparent); }
.briefing-snapshot article.negative::before { background: linear-gradient(90deg, var(--red), transparent); }
.briefing-kpi-icon { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--cyan); background: rgba(0, 217, 255, .1); border: 1px solid rgba(0, 217, 255, .3); animation: v90Float 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.6s); }
.briefing-kpi-icon svg { width: 16px; height: 16px; stroke-dasharray: 60; stroke-dashoffset: 60; animation: v90Draw 1.1s ease forwards; animation-delay: calc(.25s + var(--i, 0) * 90ms); }
.briefing-snapshot article.positive .briefing-kpi-icon { color: var(--green); background: rgba(62, 230, 160, .1); border-color: rgba(62, 230, 160, .35); }
.briefing-snapshot article.negative .briefing-kpi-icon { color: var(--red); background: rgba(255, 95, 110, .1); border-color: rgba(255, 95, 110, .35); }
.briefing-section { position: relative; padding: 18px 20px !important; margin: 14px 0 !important; border: 1px solid var(--bg-panel-line) !important; border-radius: 14px !important; background: var(--mc-glass) !important; animation: v90Rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.briefing-section:nth-of-type(2) { animation-delay: .08s; } .briefing-section:nth-of-type(3) { animation-delay: .16s; } .briefing-section:nth-of-type(4) { animation-delay: .24s; } .briefing-section:nth-of-type(5) { animation-delay: .32s; } .briefing-section:nth-of-type(6) { animation-delay: .4s; }
.briefing-sec-icon.is-orbit { position: relative; display: inline-grid !important; place-items: center; width: 30px !important; height: 30px !important; border-radius: 50% !important; color: var(--cyan); background: radial-gradient(circle, rgba(0, 217, 255, .18), rgba(0, 217, 255, .04)) !important; border: 1px solid rgba(0, 217, 255, .35) !important; }
.briefing-sec-icon .bx-orbit { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--cyan); border-right-color: rgba(0, 217, 255, .35); animation: v90Spin 2.6s linear infinite; }
.briefing-sec-icon.is-orbit svg { animation: v90Breathe 2.4s ease-in-out infinite; }
.briefing-list li { position: relative; padding: 9px 12px 9px 14px !important; margin: 6px 0 !important; list-style: none; border-radius: 10px; background: rgba(120, 170, 220, .06); border-left: 2px solid var(--cyan); transition: transform .15s ease, background .15s ease; }
.briefing-list li:hover { transform: translateX(3px); background: rgba(0, 217, 255, .08); }
.briefing-list { padding-left: 0 !important; }
.briefing-list li::before, .briefing-list li::marker { display: none !important; content: none !important; }
.briefing-section h3 { border-bottom-color: transparent !important; }
.bx-buckets { display: grid; gap: 8px; margin: 6px 0 14px; }
.bx-bucket { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 12px; animation: v90Rise .5s ease both; animation-delay: calc(.1s + var(--i) * 80ms); }
.bx-bucket-label { font: 600 12px var(--font-body); color: var(--text-hi); }
.bx-bucket-label small { display: block; font: 500 11px var(--font-mono); color: var(--text-dim); }
.bx-bucket-track { height: 12px; border-radius: 999px; background: rgba(120, 170, 220, .1); overflow: hidden; }
.bx-bucket-bar { display: block; height: 100%; width: 0; border-radius: inherit; animation: v90Grow .9s cubic-bezier(.3, .7, .2, 1) forwards; animation-delay: calc(.25s + var(--i) * 90ms); }
.bx-bucket.is-pos .bx-bucket-bar { background: linear-gradient(90deg, rgba(62, 230, 160, .35), #3ee6a0); box-shadow: 0 0 12px rgba(62, 230, 160, .35); }
.bx-bucket.is-neg .bx-bucket-bar { background: linear-gradient(90deg, rgba(255, 95, 110, .35), #ff5f6e); box-shadow: 0 0 12px rgba(255, 95, 110, .3); }
.bx-bucket b { font: 700 13px var(--font-mono); text-align: right; }
.bx-bucket.is-pos b { color: var(--green); } .bx-bucket.is-neg b { color: var(--red); }
@keyframes v90Grow { from { width: 0; } to { width: var(--w); } }
@keyframes v90Spin { to { transform: rotate(360deg); } }
@keyframes v90Float { 50% { transform: translateY(-3px); } }
@keyframes v90Draw { to { stroke-dashoffset: 0; } }
@keyframes v90Breathe { 50% { transform: scale(.88); opacity: .75; } }
@keyframes v90Drift { to { transform: translate(-40px, 30px); } }
@media (max-width: 900px) { .briefing-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .bx-bucket { grid-template-columns: 110px 1fr 70px; } }
@media (prefers-reduced-motion: reduce) { .briefing-page *, .briefing-page *::after { animation: none !important; } .bx-bucket-bar { width: var(--w); } .briefing-kpi-icon svg { stroke-dashoffset: 0; } }
@media print { .briefing-page *, .briefing-page *::after { animation: none !important; } .bx-bucket-bar { width: var(--w) !important; } .briefing-kpi-icon svg { stroke-dashoffset: 0 !important; } .bx-head-glow, .briefing-brand-logo::after, .bx-orbit { display: none !important; } }

/* ---------------------------------------------------------------- Report workspace window
   Was pinned to the top-left corner (the page's margin reset removed the
   dialog's automatic centring) and looked like a bare form. */
.pw86-dialog { margin: auto !important; inset: 0; width: min(860px, calc(100vw - 28px)) !important; border-radius: 20px !important; border: 1px solid rgba(0, 217, 255, .35) !important; background: linear-gradient(160deg, #10203a, #0b1729) !important; box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05) !important; animation: v90ModalIn .3s cubic-bezier(.2, .9, .25, 1.05) both; }
.pw86-dialog::backdrop { background: rgba(2, 10, 22, .66) !important; backdrop-filter: blur(5px); }
.pw86-head { position: relative; gap: 14px !important; padding: 18px 22px !important; background: linear-gradient(120deg, rgba(0, 217, 255, .12), rgba(157, 139, 255, .08) 60%, transparent); }
.pw86-head-mark { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(0, 217, 255, .45); background: radial-gradient(circle, rgba(0, 217, 255, .2), transparent 70%); display: grid; place-items: center; }
.pw86-head-mark i { position: absolute; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #00d9ff; }
.pw86-head-mark i:nth-child(1) { inset: 6px; animation: v90Spin 2.4s linear infinite; }
.pw86-head-mark i:nth-child(2) { inset: 11px; border-top-color: #ffc93c; animation: v90Spin 1.7s linear infinite reverse; }
.pw86-head-mark i:nth-child(3) { inset: 16px; background: #00d9ff; border: 0; box-shadow: 0 0 10px #00d9ff; }
.pw86-head-copy { flex: 1; min-width: 0; }
.pw86-kicker { display: block; font: 600 11px var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: #5fe3ff; }
.pw86-head h2 { font-size: 19px !important; margin-top: 2px !important; }
.pw86-close { width: 34px; height: 34px; padding: 0 !important; border-radius: 10px !important; display: grid; place-items: center; }
.pw86-lead { margin: 0 0 14px !important; color: #9db1c9; font-size: 13px; }
.pw86-menu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }
.pw86-dialog button.pw86-tile { position: relative; display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 16px !important; border-radius: 14px !important; border: 1px solid #2f4d6d !important; background: linear-gradient(160deg, #15294a, #10213b) !important; font-weight: 400; overflow: hidden; animation: v90Rise .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.08s + var(--i, 0) * 70ms); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pw86-dialog button.pw86-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 0%, rgba(0, 217, 255, .14), transparent 55%); opacity: 0; transition: opacity .2s ease; }
.pw86-dialog button.pw86-tile:hover { transform: translateY(-3px); border-color: #00d9ff !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 217, 255, .35); background: linear-gradient(160deg, #183056, #10213b) !important; }
.pw86-dialog button.pw86-tile:hover::before { opacity: 1; }
.pw86-tile-icon { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #00d9ff; background: rgba(0, 217, 255, .1); border: 1px solid rgba(0, 217, 255, .35); }
.pw86-tile-icon svg { width: 20px; height: 20px; transition: transform .25s ease; }
.pw86-tile:hover .pw86-tile-icon svg { transform: scale(1.12) rotate(-4deg); }
.pw86-tile-copy { position: relative; flex: 1; min-width: 0; }
.pw86-tile-copy b { display: block; font-size: 14.5px; color: #eaf4ff; margin-bottom: 4px; }
.pw86-tile-copy small { display: block; font-size: 12px; line-height: 1.45; color: #9db1c9; }
.pw86-tile-go { position: relative; align-self: center; color: #5fe3ff; font-size: 16px; transition: transform .18s ease; }
.pw86-tile:hover .pw86-tile-go { transform: translateX(4px); }
[data-theme="light"] .pw86-dialog { background: linear-gradient(160deg, #f7fbff, #eaf2fa) !important; border-color: #a9c6de !important; }
[data-theme="light"] .pw86-dialog button.pw86-tile { background: linear-gradient(160deg, #ffffff, #eef5fb) !important; border-color: #bcd3e6 !important; }
[data-theme="light"] .pw86-tile-copy b { color: #16344b; } [data-theme="light"] .pw86-tile-copy small, [data-theme="light"] .pw86-lead { color: #4d6a85; }
@media (prefers-reduced-motion: reduce) { .pw86-dialog, .pw86-dialog * { animation: none !important; } }

/* ================================================================ V20.14.93
   Taller top bar. The bar was 34px with 16px icons, which read as tiny. It was
   doubled to 64px, which turned out to be more than it needed; V20.14.101
   settles it half-way, at 52px, with the buttons, icons, logo and wave scaled
   to match. Every
   offset that sat under the old 34px bar (page padding, the sticky report
   deck, the Control Panel shell, drawers, the "updating" pill) follows the
   one --mc-bar-h value. */
:root { --mc-bar-h: 52px; }
html.mc-has-telemetry body { padding-top: var(--mc-bar-h) !important; }
.mc-telemetry { height: var(--mc-bar-h) !important; padding: 0 20px !important; gap: 15px !important; font-size: 11.5px !important; }
.mc-tel-left, .mc-tel-right { gap: 15px !important; }
.mc-tel-brand { font-size: 13px !important; gap: 8px !important; }
.mc-tel-logo { width: 28px !important; height: 28px !important; }
.mc-tel-brand .hud-icon { width: 22px !important; height: 22px !important; }
.mc-tel-page { padding: 6px 12px !important; border-radius: 7px !important; font-size: 11.5px !important; gap: 7px !important; }
.mc-tel-page .hud-icon { width: 16px !important; height: 16px !important; }
.mc-tel-agent { height: var(--mc-bar-h) !important; }
/* V20.14.193 -- 0, not the bar height: this header sticks inside #mainShell,
   whose box already starts below the fixed bar, so the offset was clearance for
   something already cleared and pushed the deck 52px onto the content under it.
   Stated in both files that set it, because leaving one behind would mean the
   corrected one loses to it -- the lesson from V20.14.191's badge offset. See
   pulse-v151-user-revision.css for the measurements. */
/* V20.14.200 -- the same --mc-bar-h this file defines above and that every
   other element clearing the fixed bar already uses. See
   pulse-v151-user-revision.css for why the deck had stopped using it. */
.pulse-sticky-header { top: var(--mc-bar-h, 0px) !important; }
.cp-sticky-shell { top: var(--mc-bar-h) !important; }
.section-switcher { top: var(--mc-bar-h) !important; }
.qa-drawer, html.mc-has-telemetry .qa-drawer { top: var(--mc-bar-h) !important; height: calc(100vh - var(--mc-bar-h)) !important; max-height: calc(100vh - var(--mc-bar-h)) !important; }
.qa-backdrop { top: var(--mc-bar-h) !important; }
html.mc-has-telemetry .v38-drawer { top: var(--mc-bar-h) !important; height: calc(100vh - var(--mc-bar-h)) !important; }
html.mc-has-telemetry .v38-backdrop { top: var(--mc-bar-h) !important; }
.ptb-drawer { top: var(--mc-bar-h) !important; }
.scope-update-indicator { top: calc(var(--mc-bar-h) + 10px) !important; }

/* Top-right cluster: buttons 38x36 (were 30x28), icons 20px (were 16px).
   V20.14.101 -- scaled back with the bar when it came down to 52px. */
.ptb-cluster { gap: 10px !important; }
.ptb-sep-v { height: 26px !important; margin: 0 6px !important; }
.ptb-cluster .ptb-btn,
.ptb-cluster .ptb-slot > button,
.ptb-cluster .ptb-slot > a,
.ptb-cluster .ptb-slot .icon-btn,
.ptb-cluster .ptb-slot .header-icon,
.ptb-cluster #themeToggle,
.ptb-cluster #profileToggle { width: 38px !important; height: 36px !important; min-width: 38px !important; border-radius: 11px !important; color: #c3d6ee !important; border-color: rgba(120, 200, 255, .3) !important; background: rgba(255, 255, 255, .05) !important; }
.ptb-cluster :is(.ptb-btn, .icon-btn, .header-icon, #themeToggle) svg { width: 20px !important; height: 20px !important; stroke-width: 1.8; }
.ptb-photo, .ptb-cluster #profileToggle img { border-radius: 10px !important; }
/* V20.14.191 -- the SIZE only. `top`/`right` were restated here as -6px and
   silently outranked pulse-topbar.css, so correcting the offset there alone
   would have changed nothing. The position has one owner now, and it is the
   file that owns the cluster. */
.ptb-cluster :is(.ptb-badge, .pulse-notice-badge, .notification-badge) { min-width: 18px; height: 18px; font-size: 11px; }
.ptb-cluster :is(.ptb-dot, .whats-new-dot) { width: 10px; height: 10px; }

/* Control Panel mark in the bar: it took the page's theme colours (a dark
   cyan and near-black signal in the light theme) and a 20px box, so it looked
   dimmed on the always-dark bar in both themes. It now uses the bar's own
   bright colours, a brighter glow, and fills the button. */
.mc-telemetry .pulse-nova { filter: drop-shadow(0 0 5px rgba(0, 229, 255, .85)) drop-shadow(0 0 12px rgba(0, 229, 255, .35)) !important; opacity: 1 !important; }
.mc-telemetry .pulse-nova .nova-halo { fill: rgba(0, 229, 255, .16); stroke: #00e5ff; opacity: .6; }
.mc-telemetry .pulse-nova .nova-orbit > circle:first-child { stroke: #00e5ff; stroke-width: 2.6; }
.mc-telemetry .pulse-nova .nova-counter > circle:first-child { stroke: #ffc93c; stroke-width: 2; }
.mc-telemetry .pulse-nova .nova-pip { fill: #7df3ff; }
.mc-telemetry .pulse-nova .nova-counter .nova-pip { fill: #ffc93c; }
.mc-telemetry .pulse-nova .nova-core > path:first-child { fill: rgba(0, 229, 255, .22); stroke: #00e5ff; stroke-width: 2; }
.mc-telemetry .pulse-nova .nova-heart { fill: #5ff0ff; opacity: 1; }
.mc-telemetry .pulse-nova .nova-signal { stroke: #ffffff; stroke-width: 2.2; }

@media (max-width: 760px) {
  :root { --mc-bar-h: 52px; }
  .mc-telemetry { padding: 0 10px !important; gap: 8px !important; }
  .ptb-cluster { gap: 5px !important; }
  .ptb-cluster .ptb-btn, .ptb-cluster .ptb-slot > button, .ptb-cluster .ptb-slot > a, .ptb-cluster .ptb-slot .icon-btn, .ptb-cluster .ptb-slot .header-icon, .ptb-cluster #themeToggle, .ptb-cluster #profileToggle { width: 36px !important; height: 36px !important; min-width: 36px !important; }
  .ptb-cluster :is(.ptb-btn, .icon-btn, .header-icon, #themeToggle) svg { width: 19px !important; height: 19px !important; }
  .ptb-cluster .ptb-cp-admin, .ptb-cluster .ptb-cp-admin .pulse-nova, #mcTelemetry .ptb-cluster .ptb-cp-admin svg { width: 26px !important; height: 26px !important; }
  .mc-tel-logo { width: 26px !important; height: 26px !important; }
  .mc-tel-brand { font-size: 12px !important; }
}

/* Report tab icons in the light theme: the pale cyan tile and thin #006e98
   line washed out, and on the active (blue) tab the icon disappeared. */
#tabNav .pulse-tab-icon .mc-tab-icon { stroke-width: 2.1; }
:root[data-theme="light"] #tabNav .pulse-tab-icon { color: #005a80 !important; background: rgba(0, 132, 184, .15) !important; border-color: rgba(0, 104, 146, .5) !important; }
:root[data-theme="light"] #tabNav .pulse-tab-icon svg, :root[data-theme="light"] #tabNav .pulse-tab-icon svg * { stroke: currentColor; opacity: 1 !important; }
:root[data-theme="light"] #tabNav .tab-btn:hover .pulse-tab-icon { color: #003f5c !important; background: rgba(0, 132, 184, .24) !important; }
:root[data-theme="light"] #tabNav .tab-btn.active .pulse-tab-icon { color: #ffffff !important; background: rgba(255, 255, 255, .2) !important; border-color: rgba(255, 255, 255, .7) !important; }
/* The header's own Agent/Admin mark buttons had the same dim look in light. */
:root[data-theme="light"] #headerIconGroup .pulse-nova { filter: drop-shadow(0 0 3px rgba(0, 132, 184, .5)) !important; }
:root[data-theme="light"] #headerIconGroup .pulse-nova .nova-orbit > circle:first-child { stroke: #0078a8; stroke-width: 2.4; }
:root[data-theme="light"] #headerIconGroup .pulse-nova .nova-core > path:first-child { stroke: #0078a8; stroke-width: 2; }
:root[data-theme="light"] #headerIconGroup .pulse-nova .nova-heart, :root[data-theme="light"] #headerIconGroup .pulse-nova .nova-pip { fill: #0078a8; }
:root[data-theme="light"] #headerIconGroup .pulse-nova .nova-counter > circle:first-child { stroke: #c78b00; }
/* The :is(... #themeToggle) icon rule above carries an ID's weight, so it
   used to squeeze the Control Panel mark's SVG to the 16px icon size inside
   its box -- the "tiny, dim" look. The ID here outranks it. */
#headerIconGroup .v21-admin-btn { padding: 0 !important; justify-content: center !important; }
#headerIconGroup .v21-admin-btn .future-admin-mark, #headerIconGroup .v21-admin-btn .pulse-nova, #headerIconGroup .v21-admin-btn .pulse-nova svg { width: 26px !important; height: 26px !important; margin: 0 !important; }
.ptb-cluster .ptb-cp-admin, .ptb-cluster .ptb-cp-admin .pulse-nova, #mcTelemetry .ptb-cluster .ptb-cp-admin svg, .ptb-cluster .ptb-cp-admin svg#ptbCpMarkSvg { width: 34px !important; height: 34px !important; }
@media (max-width: 760px) { .ptb-cluster .ptb-cp-admin, .ptb-cluster .ptb-cp-admin .pulse-nova, #mcTelemetry .ptb-cluster .ptb-cp-admin svg { width: 26px !important; height: 26px !important; } }

/* V20.14.103 -- the scrollbar's width is reserved on every page, whether or
   not that page scrolls.
   Switching between Reporting Categories and the report moved everything ten
   pixels sideways: one page was long enough to show a scrollbar and the other
   was not, so the layout viewport changed width and the whole top bar -- the
   icon cluster included -- slid under the pointer. Reserving the gutter keeps
   the two pages on the same grid. */
html { scrollbar-gutter: stable; }
/* ...and the gutter is the same width everywhere. The report styled its
   scrollbar at 10px while Reporting Categories and the Control Panel kept the
   browser's 15px, so reserving the gutter on its own still left the two pages
   five pixels apart. One scrollbar, one width, portal-wide. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--bg-panel-line, var(--line)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
html { scrollbar-width: thin; }

/* V20.14.103 -- Branch Map full screen, cards and all. The panel is fixed over
   the page rather than cloned into a modal, so the leader lines still land on
   their cards and selecting a branch still filters the report. */
.v21-map-panel { position: relative; }
.v21-map-expand { position: absolute; top: 14px; right: 14px; z-index: 6; }
.v21-map-expand svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html.v21-map-fullscreen { overflow: hidden; }
/* V20.14.140 -- it opened edge to edge, `inset` pinned to all four sides, and
   read as having navigated somewhere rather than as having enlarged a panel.
   Every other chart on the report enlarges into a CARD over a dimmed page, and
   the map is a chart like the rest of them -- so it gets the same shape, a
   little larger because it carries its callout column beside the stage.
   Reference: .v46-chart-card is min(1400px, 96vw) by min(88vh, 900px). */
/* V20.14.145 -- the scrim is an ELEMENT inside the portal now, not html::before.
   As a root-level pseudo-element it out-painted the panel, because the panel
   lives under #mainShell's `isolation: isolate` and therefore composites inside
   that stacking context no matter what z-index it is given. Scrim and panel are
   siblings in the portal, so 1 < 2 means what it says. */
.v21-map-portal {
  position: fixed; inset: 0; z-index: 1590;
  /* Centred structurally. Auto margins centred against the DOCUMENT's content
     box, which changes width the instant html gets overflow:hidden and the
     scrollbar goes -- measured as a 10px asymmetry (43px left, 53px right).
     The portal is the viewport by construction, so centring in it cannot drift
     with the scrollbar. The top padding keeps the card clear of the bar. */
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--mc-bar-h, 52px) + 14px) 16px 16px;
}
.v21-map-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(4, 10, 20, .62); backdrop-filter: blur(2px);
}
.v21-map-panel.is-fullscreen {
  position: relative; z-index: 2; margin: 0; overflow: auto;
  width: min(1560px, 100%);
  height: min(90vh, 960px);
  max-height: 100%;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong, rgba(90, 160, 220, .35));
  border-radius: 16px;
  background: var(--bg-deep) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
:root[data-theme="light"] .v21-map-panel.is-fullscreen { background: var(--bg-panel) !important; }
/* The stage and the callouts size against the CARD now, not the viewport: with
   a bounded card, viewport maths overflows it by exactly the card's own margins. */
.v21-map-panel.is-fullscreen .v21-territory-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.v21-map-panel.is-fullscreen .v21-map-stage { height: 100%; min-height: 320px; }
.v21-map-panel.is-fullscreen .v21-map-frame { width: min(calc(100% - 24px), 900px); }
.v21-map-panel.is-fullscreen .v21-map-callouts { max-height: 100%; overflow: auto; }
@media (max-width: 900px) {
  .v21-map-panel.is-fullscreen { width: 96vw; height: auto; top: calc(var(--mc-bar-h, 52px) + 10px); bottom: 10px; }
  .v21-map-panel.is-fullscreen .v21-territory-layout { min-height: 0; }
  .v21-map-panel.is-fullscreen .v21-map-stage { height: 46vh; }
  .v21-map-panel.is-fullscreen .v21-map-callouts { max-height: none; }
}