/**
 * Portfolio Charts - Main Stylesheet
 */

/* Scale wrapper — takes available width, applies CSS transform scaling */
.portfoliocharts-embed-scale-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Embed wrapper — always renders at full design width; scaled by parent.
   Also serves as a CSS normalization layer so that layout is identical
   regardless of the host page's base styles (theme, external site, etc.). */
.portfoliocharts-embed-wrap {
    width: 840px;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.portfoliocharts-embed-wrap *,
.portfoliocharts-embed-wrap *::before,
.portfoliocharts-embed-wrap *::after {
    box-sizing: border-box;
}

/* Form element normalization — prevent theme button/input/select styles from
   bleeding in (e.g. text-transform: uppercase on <button>). */
.portfoliocharts-embed-wrap button,
.portfoliocharts-embed-wrap input,
.portfoliocharts-embed-wrap select,
.portfoliocharts-embed-wrap textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent theme focus overrides (e.g. WordPress.com red focus backgrounds) */
.portfoliocharts-embed-wrap button:focus {
    outline: none;
    box-shadow: none;
}

/* ── Shared native select styling ────────────────────────────────────────── */

/* The scopes are the components that render a <select> outside
   .portfoliocharts-embed-wrap. AssetAllocation was one until its home country
   dropdown was removed — it now follows the page's country instead of offering
   its own — so it is no longer listed. */
.portfoliocharts-embed-wrap select.portfoliocharts-select,
.portfoliocharts-asset-builder select.portfoliocharts-select,
.portfoliocharts-country-ui select.portfoliocharts-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #888;
    padding: 5px 22.5px;
    text-align: center;
    text-align-last: center;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6.5px center;
}

.portfoliocharts-select:hover {
    background-color: #e4e4e4;
    border-color: #bbb;
}

.portfoliocharts-select:focus {
    background-color: #fff;
    color: #1a1a1a;
    border-color: #4AACC5;
    box-shadow: 0 0 0 2px rgba(74, 172, 197, 0.2);
}


.portfoliocharts-embed-wrap select.portfoliocharts-select--dashboard,
.portfoliocharts-country-ui select.portfoliocharts-select--dashboard {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background-color: #e06d5e;
    border-color: #e06d5e;
    min-width: 220px;
    padding: 8px 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fff'/%3E%3C/svg%3E");
    background-position: right 12px center;
}

.portfoliocharts-select--dashboard:hover {
    background-color: #e8897d;
    border-color: #e8897d;
}

.portfoliocharts-select--dashboard:focus {
    background-color: #e06d5e;
    color: #fff;
    border-color: #e06d5e;
    box-shadow: none;
}

/* NOTE: font-size here does NOT control the open dropdown list on macOS.
   That popup is drawn by the OS rather than laid out as DOM, and Chrome and
   Safari size it from the SELECT, ignoring this. Firefox and Windows do honour
   it, which is why it stays. If someone asks to resize the open list, changing
   this number will appear to do nothing on a Mac — the button's font-size is
   the only lever, and it moves both together. Decoupling them means replacing
   the native select with a div-based listbox. */
.portfoliocharts-select--dashboard option {
    color: #333;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
}

/* Table cells use content-box — the grid widths (80px headers, 40px cells)
   are content widths with padding added on top.  Keep them content-box so
   column alignment is preserved. */
.portfoliocharts-embed-wrap th,
.portfoliocharts-embed-wrap td {
    box-sizing: content-box;
}

/* Chart Container */
.portfoliocharts-chart-container {
    margin: 32px auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

/* Prevent top/bottom margins from collapsing through the embed-wrap.
   offsetHeight (used by the scale-wrap height calc) excludes collapsed
   margins, so overflow:hidden on the scale-wrap clips the footer. */
.portfoliocharts-embed-wrap > .portfoliocharts-chart-container:first-child {
    margin-top: 0;
}
.portfoliocharts-embed-wrap > .portfoliocharts-chart-container:last-of-type {
    margin-bottom: 0;
}

/* Extra spacing between consecutive charts in multi-chart embeds */
.portfoliocharts-embed-wrap .portfoliocharts-chart-container ~ .portfoliocharts-chart-container {
    margin-top: 96px;
}

/* Donut Chart - the JS manages its own dimensions; allow text label to show to the right */
.portfoliocharts-chart-container[data-chart-type="Donut"] {
    overflow: visible;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Standalone donut: tight-fit wrappers so the embedder can center/align freely.
   Overrides the fixed 840px design-width layout used by other charts. */
.portfoliocharts-standalone-donut {
    width: fit-content;
    overflow: visible;
}

.portfoliocharts-standalone-donut .portfoliocharts-embed-wrap {
    width: fit-content;
}

.portfoliocharts-standalone-donut .portfoliocharts-chart-container {
    width: fit-content;
    margin: 0;
}

.portfoliocharts-chart-container[data-chart-type="Donut"] .portfoliocharts-chart-content {
    overflow: visible;
    padding: 0;
}

.portfoliocharts-chart-container[data-chart-type="Donut"] .portfoliocharts-chart-content svg {
    max-width: none;
}

.portfoliocharts-chart-loading,
.portfoliocharts-chart-error,
.portfoliocharts-chart-content {
    padding: 32px;
    max-width: 100%;
}

.portfoliocharts-chart-content {
    overflow-x: auto;
    padding-top: 8px;
    padding-bottom: 16px;
}

.portfoliocharts-chart-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.portfoliocharts-chart-content svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── Fixed stage ─────────────────────────────────────────────────────────────
   chart="Demo", or any embed given stage="NNN". The drawing box is pinned to
   --pc-stage design pixels so that switching charts cannot move anything below
   the embed — see the stage note in class-portfoliocharts-chart-base.php.

   The fit is done by the replaced-element sizing rules rather than by script:
   every chart SVG carries a viewBox, so an intrinsic ratio plus max-width and
   max-height is already "contain". Width-limited charts are untouched; tall ones
   shrink until they fit the height.

   A flex COLUMN, not a block box. Some charts put controls in here alongside the
   drawing — Retirement Spending's withdrawal-rule settings are ~50-70px of it —
   and the SVG has to be capped at the stage MINUS whatever those take, or the
   box overflows and grows a scrollbar. Flex is the only thing that expresses
   "take what is left after your siblings" in CSS, and the shrunk item's height
   is definite, which is also what makes the percentage cap below resolve.

   This is why chart-base clears the inline display rather than writing 'block'
   when a render lands: an inline value would outrank this rule, and !important
   would then also beat the display:none the box starts in. */
.portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-content {
    height: var(--pc-stage);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Zeroed so the content box is exactly --pc-stage tall. The padding was only
       ever breathing room, and a box that centres its contents in a fixed height
       has that already. */
    padding-top: 0;
    padding-bottom: 0;
}

/* Shrink-only — `0 1 auto`, never `1 1 auto`. Allowing growth stretches the
   element box of every width-limited chart to the full stage height: the drawing
   still looks right (preserveAspectRatio letterboxes it) but the SVG is then
   lying about its size, which the PNG export measures. */
.portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-content > * {
    flex: 0 1 auto;
    /* Flex items floor at their content size without this, so the wrapper would
       refuse to shrink and the overflow would survive. */
    min-height: 0;
    max-width: 100%;
}

.portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-content svg {
    max-height: 100%;
    /* Explicit, though it is also the cascade's answer: it is what makes the two
       max- constraints resolve as "contain" rather than one of them winning. */
    width: auto;
}

/* Matches the stage exactly, so the spinner holds open the same box the chart
   will land in and the page does not move when it does. The chart's own
   reservation is suppressed for staged charts, so nothing sets this inline. */
.portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-loading,
.portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-error {
    height: var(--pc-stage);
    box-sizing: border-box;
}

/* Below the point where the embed's columns stack, width is the binding
   constraint and the alignment the stage was protecting no longer exists — a
   fixed height would only add letterboxing above and below every chart. Height
   floats again and charts size by width, exactly as they do everywhere else. */
@media (max-width: 782px) {
    .portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-content,
    .portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-loading,
    .portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-error {
        height: auto;
    }

    .portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-content svg {
        max-height: none;
    }

    /* Back to a plain block box: the padding is doing real work again once the
       box hugs its content, and the flex column has nothing left to ration. */
    .portfoliocharts-chart-container[data-pc-stage] .portfoliocharts-chart-content {
        display: block;
        padding-top: 8px;
        padding-bottom: 16px;
    }
}

/* Loading Spinner */
/* Centered in the flow so the spinner sits mid-box when the loading block is
   holding open a chart-sized min-height reservation (see get_reserved_height()
   in class-portfoliocharts-chart-base.php).  Charts re-showing the spinner set
   display:flex inline to match. */
.portfoliocharts-chart-loading {
    text-align: center;
    color: #666;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.portfoliocharts-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0891b2;
    border-radius: 50%;
    animation: portfoliocharts-spin 1s linear infinite;
}

@keyframes portfoliocharts-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* No-JS fallback line (also read by AI assistants fetching raw HTML) */
.portfoliocharts-chart-noscript {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 8px 0 0;
}

/* Error Message */
.portfoliocharts-chart-error {
    background: #fee;
    color: #c00;
    border-left: 4px solid #c00;
}
.portfoliocharts-chart-error.portfoliocharts-chart-notice {
    background: #fef9e7;
    color: #7d6608;
    border-left: 4px solid #d4ac0d;
}

.portfoliocharts-error-message {
    margin: 0;
    font-weight: 500;
}

/* Portfolio Key UI */
.portfoliocharts-portfolio-ui {
    padding: 16px 32px 12px;
}

.portfoliocharts-portfolio-ui-label {
    display: block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
    margin-bottom: 6.5px;
}

.portfoliocharts-portfolio-ui-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.portfoliocharts-portfolio-key-input {
    flex: 1;
    font-family: 'DM Mono', 'Fira Mono', monospace;
    font-size: 13px;
    padding: 7px 10.5px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #1a1a1a;
    background: #fafafa;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
}

.portfoliocharts-portfolio-key-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

.portfoliocharts-chart-this-btn {
    flex-shrink: 0;
    padding: 7px 16px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #c8702a;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.portfoliocharts-chart-this-btn:focus {
    outline: none;
    background: #c8702a;
}

.portfoliocharts-chart-this-btn:active {
    filter: brightness(0.9);
}

.portfoliocharts-chart-this-btn:disabled,
.portfoliocharts-chart-this-btn:disabled:hover {
    background: #cbd5e1;
    color: #1e293b;
    cursor: not-allowed;
    opacity: 1;
}

.portfoliocharts-chart-this-btn:not(:disabled) {
    background: #c8702a;
}

.portfoliocharts-chart-this-btn:not(:disabled):hover {
    background: #0e7490;
}

.portfoliocharts-portfolio-ui-error {
    margin: 6.5px 0 0;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    color: #c00;
}


/* Hover info — just below the gray divider line, left of home country selector */
.portfoliocharts-donut-hover-info {
    position: absolute;
    top: 110px; /* matches home country wrap: gray line at 100px + 2px + 8px gap */
    left: calc(200px - 8px + 16px + 8px); /* same left offset as the gray line + 8px */
    right: 210px;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    line-height: 1.3;
    pointer-events: none;
    min-height: 1.3em;
}

.portfoliocharts-donut-hover-info:empty {
    visibility: hidden;
}

/* Asset link inside the hover info — overrides pointer-events so the link is clickable */
.portfoliocharts-donut-hover-info a.portfoliocharts-hover-info-link {
    color: #e06d5e;
    text-decoration: underline;
    text-underline-offset: 2px;
    pointer-events: auto;
    cursor: pointer;
}

.portfoliocharts-donut-hover-info a.portfoliocharts-hover-info-link:hover {
    opacity: 0.8;
}

/* Subtext below the asset link — matches the "click to toggle" footnote style */
.portfoliocharts-hover-info-sub {
    display: block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0.03em;
    font-style: italic;
    margin-top: 4px;
}

/* Home country selector — right-aligned, label above gray line, dropdown below */
.portfoliocharts-home-country-wrap {
    position: absolute;
    top: 82px; /* label sits above the gray line (at 100px), dropdown below */
    right: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.portfoliocharts-home-country-top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* These are the tucked-under-the-line dropdown's overrides: dark text and a
   squared top edge, so it reads as a tab hanging off the header rule. That is
   the Full/Portfolio/Matrix dropdown. The Country UI's is a centred coral pill
   (.portfoliocharts-select--dashboard) instead, and it lives inside
   .portfoliocharts-embed-wrap too, so it has to be excluded by name — these
   rules sit later in the file and would otherwise win on document order and
   undo the pill's white text and rounded top corners. */
.portfoliocharts-embed-wrap select.portfoliocharts-home-country-select:not(.portfoliocharts-select--dashboard),
.portfoliocharts-country-ui select.portfoliocharts-home-country-select:not(.portfoliocharts-select--dashboard) {
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a1a;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.portfoliocharts-home-country-subtitle {
    display: block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0.03em;
    font-style: italic;
    text-align: center;
}

.portfoliocharts-home-country-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 2px;
}


/* ── Country UI — centered home country dropdown ─────────────────────────── */

.portfoliocharts-country-ui {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto 16px;
    /* Matches the embed wrapper's, for the standalone case below: the label
       and subtitle set their own font but not their leading, so without this
       a theme's line-height changes their box heights and the spacing drifts
       between an embedded control and a standalone one. */
    line-height: 1.5;
}

/* The [HomeCountry] shortcode renders this block on its own, outside
   .portfoliocharts-embed-wrap and therefore outside the normalization layer
   at the top of this file — no box-sizing inheritance, no form-element reset,
   nothing holding the host theme off. The rules below are that layer, scoped
   to this block, so a standalone control looks the same as one inside an
   embed. They are harmless when it IS inside an embed: identical values.

   Deliberately NOT redeclared here: font-size, font-weight, color, padding.
   Those differ between the block's two dropdown looks (the coral pill and the
   tucked-under tab) and are set by the rules that draw each. */
.portfoliocharts-country-ui,
.portfoliocharts-country-ui *,
.portfoliocharts-country-ui *::before,
.portfoliocharts-country-ui *::after {
    box-sizing: border-box;
}

.portfoliocharts-country-ui select {
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
    /* Below about 300px of column the pill's 220px min-width plus its 40px
       side padding would otherwise push past the edge. */
    max-width: 100%;
}

/* The closed button is sized off the theme's own type scale — 1rem, the
   theme's base body size. (H3 at 1.4rem and H4 at 1.2rem were both tried
   first; this one won by eye.)

   THE ONE PLACE IN THIS FILE THAT USES rem ON PURPOSE. The px-only rule at the
   top of this file exists because rem resolves against the host page's root,
   which varies — and everything else here is laid out in the fixed 840px
   design space where that variance would be pure damage. This control is the
   one piece deliberately OUTSIDE that space, sitting in the theme's own type
   context, so tracking the root is the feature here, not the bug.

   1rem is emphatically NOT the same as the 16px it replaced, and must not be
   "simplified" back to a px value. Illustratr scales its ROOT at a breakpoint:

       html { font-size: 1.375em }                      -> 22px
       @media (max-width: 767px) { html { 1.125em } }   -> 18px

   So this renders at 22px on desktop and 18px on phones, following the theme
   across that breakpoint with no media query of our own. A px number measured
   at one viewport would be wrong at the other — and wrong in the worst
   direction, since it is phones where this pill is tightest for width.

   Only [HomeCountry] renders this block outside a WordPress page, and there is
   no such thing — the shortcode does not run on the Fourthwall storefront,
   which reaches charts through embed.js instead. So there is no host here
   whose root is not Illustratr's.

   Both classes on the select so this beats the shared pill rule (0,3,1 vs
   0,2,1) rather than relying on document order. The Dashboard "Select Chart"
   and Global Explorer selects wear the same pill and stay at 16px. The open
   option list is untouched at 13px, as asked. */
.portfoliocharts-country-ui select.portfoliocharts-home-country-select.portfoliocharts-select--dashboard {
    font-size: 1rem;
}


/* ── Dashboard Chart Selector ─────────────────────────────────────────────── */

/* ── Slider ───────────────────────────────────────────────────────────────────
   A horizontal thumbnail strip used for two things: picking which chart a
   dashboard shows (slider="charts") and picking which portfolio a chart is drawn
   for (slider="portfolios"). Identical presentation either way — only the tiles'
   meaning differs, which is why one set of rules serves both.

   Non-paging on purpose: every tile is in the DOM at once and the row scrolls, so
   a known tile is one click away rather than several arrow presses. Thumbnails
   are real <img> (not ContentGrid's CSS background-image), so they are indexable.

   Behaviour lives in assets/js/portfoliocharts-slider.js. */

.portfoliocharts-slider {
    /* WIDTH BUDGET — sized so exactly 5 tiles fit with no partial tile showing.
       Every number below is load-bearing; changing one without the others
       reintroduces a cut-off sixth tile.

         840  embed design width
        -  80  two 40px arrows
        -  24  two 12px slider gaps
        = 736  track clientWidth
        -  16  track padding (8px each side)
        = 720  content width = 5x136 tiles + 4x10 gaps

       The tile is 136px and box-sizing is border-box (global reset), so the
       image inside is 136 - 8 (padding) - 2 (border) = 126px. That is also what
       PortfolioCharts_Slider::IMG_PX pins as sizes, and what the arrow offset below
       is derived from — keep all three in step. */
    --pc-slider-img: 126px;

    width: 840px;
    max-width: 100%;
    /* Matches the fallback row's margin so the slider sits identically in the
       flow. Collapses against the chart's own 32px margin-top (set below), same
       as the dropdown always did — the two never render together, so there is
       no case where both gaps apply. */
    margin: 0 auto 32px;
    box-sizing: border-box;

    display: flex;
    /* Arrows are pinned to the thumbnail's midline via margin-top, not centred
       against the whole tile — the label below the image would drag them low. */
    align-items: flex-start;
    gap: 12px;
}

/* Caption above a strip ("Charts" / "Portfolios"). Deliberately the
   same small-caps-over-a-rule treatment as the Full UI's bottom tables, so the two
   read as the same kind of section label. Width tracks the slider's own budget
   above — they are siblings, both centred, so the rule spans exactly the strip. */
.portfoliocharts-slider-heading {
    width: 840px;
    max-width: 100%;
    box-sizing: border-box;
    /* 2px, not more: the track adds 10px of its own padding above the tiles. */
    margin: 0 auto 2px;

    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    text-align: left;
    padding: 0 0 2px 0;
    border-bottom: 2px solid #ccc;
}

.portfoliocharts-slider-track {
    /* Makes the track each tile's offsetParent, so the centring maths in the
       portfoliocharts-slider.js can use offsetLeft — layout pixels, unaffected by
       the embed wrapper's transform: scale(). Remove this and the active tile
       centres against the wrong origin. */
    position: relative;
    flex: 1 1 auto;
    min-width: 0; /* let the track shrink inside the flex row instead of pushing the arrows out */
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    /* The 8px sides are load-bearing — they complete the width budget above.
       The vertical padding keeps focus rings and the active tile's border clear
       of the edges: overflow-x:auto forces overflow-y to compute to auto, so
       anything reaching past this padding is clipped rather than overflowing. */
    padding: 10px 8px 12px;
    -webkit-overflow-scrolling: touch;

    /* Mouse drag-to-scroll (see portfoliocharts-slider.js). grab/grabbing is
       the affordance; user-select:none stops a drag across the labels turning
       into a text selection. Touch scrolling is untouched — the script filters
       to pointerType "mouse" so the platform keeps its own momentum scrolling. */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;

    /* Hide the scrollbar without disabling scrolling — the arrows are an
       addition to swipe/trackpad/keyboard scrolling, never a replacement. */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* legacy Edge */
}

.portfoliocharts-slider-track::-webkit-scrollbar {
    display: none;              /* Safari + Chrome */
}

/* Applied to descendants too, or the tiles' own cursor:pointer wins mid-drag
   and the grab affordance flickers as the pointer crosses them. */
.portfoliocharts-slider-track.is-dragging,
.portfoliocharts-slider-track.is-dragging * {
    cursor: grabbing;
}

/* NO scroll-behavior HERE, deliberately. Smooth scrolling of the track is done
   in portfoliocharts-slider.js via scrollTo({behavior}), because with
   scroll-behavior:smooth declared in CSS a direct `scrollLeft = x` assignment is
   silently dropped in some engines — the track simply never moves, and the
   centring appears to break for no visible reason. Reduced motion is honoured by
   a matchMedia check in that script. */

.portfoliocharts-slider-item {
    flex: 0 0 136px; /* see the width budget on .portfoliocharts-slider */
    display: block;
    text-decoration: none;
    border-radius: 4px;
    padding: 4px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.portfoliocharts-slider-item:hover {
    border-color: #7f8d8c;
    background: #f5f5f5;
}

.portfoliocharts-slider-item.is-active {
    border-color: #464d4d;
    background: #f1f2f3;
}

/* Arrows: same visual language as the ContentGrid carousel arrows (round, white,
   #464d4d border, pure-CSS border triangle in currentColor, inverting on hover).
   Duplicated rather than shared because portfoliocharts-content-grid.css is only
   enqueued for [ContentGrid] — keep the two in sync by eye if either changes. */
/* Scoped under .portfoliocharts-embed-wrap on purpose. The form-element reset
   near the top of this file (`.portfoliocharts-embed-wrap button, …`) sets
   `margin: 0` and `color: inherit` at specificity 0,1,1 — a bare
   `.portfoliocharts-slider-arrow` is 0,1,0 and loses, which silently
   zeroed the margin-top below and dropped the triangle to the inherited #333.
   Any new button inside an embed hits this; match or beat 0,1,1. */
.portfoliocharts-embed-wrap .portfoliocharts-slider-arrow {
    /* Centre on the thumbnail's midline, not the tile's — the label below the
       image would otherwise drag the arrows low.

       margin-top puts the arrow's TOP edge on the image midline: 15px from the
       slider's top edge to the top of the image (10px track padding + 1px item
       border + 4px item padding), plus half the image. translateY(-50%) then
       lifts it by half its own rendered height, which is why no arrow height
       appears here — subtracting a hardcoded 20px would be off by the border
       and would silently drift if the button size ever changed. */
    margin-top: calc(15px + var(--pc-slider-img) / 2);
    transform: translateY(-50%);

    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #464d4d;
    background: #fff;
    border: 1px solid #464d4d;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.portfoliocharts-slider-arrow::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
}

.portfoliocharts-slider-arrow--prev::before {
    border-width: 8px 11px 8px 0;
    border-color: transparent currentColor transparent transparent;
    margin-right: 2px; /* optical centering of the leftward triangle */
}

.portfoliocharts-slider-arrow--next::before {
    border-width: 8px 0 8px 11px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 2px; /* optical centering of the rightward triangle */
}

/* The button keeps focus after a click. Without an explicit focus/active style a
   host theme's global button:focus colour (Illustratr paints it salmon-red) wins
   and sticks until focus leaves. Pinned back to the resting look, and placed
   *before* :hover so hovering a still-focused arrow still fills gray. */
.portfoliocharts-slider-arrow:focus,
.portfoliocharts-slider-arrow:active {
    color: #464d4d;
    background: #fff;
    border-color: #464d4d;
}

.portfoliocharts-slider-arrow:focus-visible {
    outline: 2px solid #464d4d;
    outline-offset: 2px;
}

.portfoliocharts-slider-arrow:hover {
    color: #fff;
    background: #464d4d;
    border-color: #464d4d; /* else a host theme's button:hover border shows */
}

.portfoliocharts-slider-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    color: #464d4d;
    background: #fff;
}

.portfoliocharts-slider-arrow[hidden] {
    display: none;
}

.portfoliocharts-slider-img {
    display: block;
    width: var(--pc-slider-img);
    height: var(--pc-slider-img);
    object-fit: cover;
    border-radius: 3px;
    background: #f1f2f3;
}

/* Tiles whose page has no featured image still render — dropping them would make
   that chart or portfolio unreachable, since the slider is the only selector. */
.portfoliocharts-slider-placeholder {
    background: repeating-linear-gradient(
        45deg,
        #f1f2f3,
        #f1f2f3 6px,
        #e7e9ea 6px,
        #e7e9ea 12px
    );
}

/* The "My Portfolio" tile on a portfolio slider. It has no /portfolios/ page and
   so no thumbnail — the Full UI draws a live donut of the current grid into it
   instead. Sized by the same custom property as a real thumbnail so the tile does
   not change height when the donut arrives, and centred because the donut's SVG
   is square-ish but not exactly --pc-slider-img wide at every scale. */
.portfoliocharts-slider-donut {
    display: flex;
    align-items: center;
    justify-content: center;
    /* NOT overflow:hidden. The donut fills the slot and its drop shadow reaches about
       1px past the bottom edge; clipping cut that off flat, which was visible as a
       hard line under the tile. The overhang lands in the tile's own 4px padding,
       well clear of the label 8px below, so letting it through costs nothing. */
    overflow: visible;
    /* Transparent, so the tile itself shows through and the donut picks up the
       hover and is-active backgrounds like any other tile content. A donut is line
       art on an open ground rather than a photo filling its box, so painting a
       surface behind it — the #f1f2f3 the thumbnail slots use, or plain white —
       reads as a patch sitting under the artwork. Overrides the
       .portfoliocharts-slider-img background this element also carries: same
       specificity, later in the file. */
    background: transparent;
}

.portfoliocharts-slider-donut svg {
    display: block;
    width: 100%;
    height: 100%;
    /* The donut is decoration here; the tile is the control. Without this its
       slices swallow the click and, worse, fire portfoliocharts:donut-hover — which
       the Full UI's grid listens to, so brushing past the tile would light up grid
       cells and fight the real donut in the header. */
    pointer-events: none;
}

/* ── DemoWide layout ─────────────────────────────────────────────────────────
   chart="DemoWide": the demo's two blocks side by side — sliders left, chart
   right — for a full-width page section rather than a column. The wrap's
   design width grows to fit both: 548 (three-tile slider: 3×136 tiles + 2×10
   gaps + 16 track padding + two 40px arrows with their 12px gaps) + 24 gutter
   + 840 (the charts' normal design width) = 1412. The scaling script reads
   this width off the element, so no JS knows the number.

   The slider strips need no width rules of their own: they are width:840 with
   max-width:100%, so the 548px column clamps them and the strip windows three
   tiles by the same mechanism that windows five at full width. */
.portfoliocharts-embed-demo-wide .portfoliocharts-embed-wrap {
    width: 1412px;
}

.portfoliocharts-demo-wide {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.portfoliocharts-demo-wide-controls {
    flex: 0 0 548px;
    min-width: 0;
}

.portfoliocharts-demo-wide-charts {
    flex: 1 1 auto;
    min-width: 0;
}

/* Top-align the chart with the first slider heading. The base container rule
   carries margin: 32px auto, and — the part that is easy to miss — the
   multi-chart sibling rule (`container ~ container`, 96px, for stacked
   embeds) matches every demo chart except the first in the DOM, since the
   hidden one-at-a-time siblings still count as siblings. That rule is
   (0,3,0), so this selector carries the wrap class to tie it and wins by
   order. Without the tie, whichever chart happened to be open sat 0 or 96px
   below the slider tops depending on its DOM position. */
.portfoliocharts-embed-wrap .portfoliocharts-demo-wide-charts .portfoliocharts-chart-container {
    margin-top: 0;
}

/* Below the stacking breakpoint (the same 782px where the stage releases) the
   columns stack — sliders above, chart below — but the canvas narrows to the
   CONTROLS width rather than widening to 840. That keeps the strips three
   tiles wide on mobile too, and because the scaling script reads the canvas
   width live, viewport/548 stretches the slider block edge to edge with
   tiles ~50% larger than a 840 canvas would give. The chart is unharmed: its
   SVG shrinks to the 548 column via max-width and the bigger transform scale
   buys that shrink back, so its rendered size on a phone is within a couple
   of percent of what the 840 canvas produced.

   margin auto is for the in-between widths (549–782px) where the 548 canvas
   fits without scaling and would otherwise sit flush left. */
@media (max-width: 782px) {
    .portfoliocharts-embed-demo-wide .portfoliocharts-embed-wrap {
        width: 548px;
        margin: 0 auto;
    }

    .portfoliocharts-demo-wide {
        display: block;
    }

    /* Same specificity story as the desktop zeroing above: one consistent gap
       below the stacked sliders, whichever chart is open. */
    .portfoliocharts-embed-wrap .portfoliocharts-demo-wide-charts .portfoliocharts-chart-container {
        margin-top: 32px;
    }
}

/* ── Demo stat column (stats="true", narrow Demo only) ───────────────────────
   Four number/label tiles beside the demo, each one ALIGNED with the demo
   element it describes: charts tile spanning exactly the chart slider strip
   (heading top edge to track bottom edge), portfolios and countries tiles
   likewise on their strips, and the history tile — kept square — with its
   top edge on the chart container's top edge. The statsrow is the flex
   pair: a "main" column holding sliders + chart exactly as the plain demo
   emits them, and the stat column beside it. The canvas widens to fit —
   ~243 (column) + 24 (gutter) + the demo's normal 840 ≈ 1107. As with
   every canvas width, the scaling script reads it off the element; no JS
   knows the number.

   Sizes are design pixels chosen for how they land AFTER scaling. In a
   homepage-style column (~550px) the ~1107 canvas scales near 0.5, so the
   48px figures render around 24px and the 20px labels around 10px — matching
   the horizontal stat band this column descends from. Same reasoning as the
   demo type-scale block below, applied at authoring time.

   The column is DOM-last but displays first via order:-1, so the sub-782px
   stacked layout (display:block ignores order) puts it BELOW the chart —
   see the assembly comment in portfolio-charts.php.

   The ALIGNMENT is pure arithmetic, no JS: the demo is a fixed design-px
   canvas, so every strip height is a constant. A strip is its heading
   (16px × 1.4 line + 2 padding + 2 border + 2 margin = 28.4) plus its
   slider (10 + 12 track padding + tile: 1 + 4 + 126 art slot + 8 label
   margin + two 17px × 1.3 label lines + 4 + 1 = 210.2) = 238.6 — ALL
   three strips, because the flag tiles carry margins that fill out the
   126px thumbnail slot (see .portfoliocharts-slider-flag). Strips are
   separated by the sliders' 32px bottom margin, and the same 32 separates
   the last strip from the chart container — so a 32px column gap plus
   per-tile heights lands tile 4's top edge exactly on the chart's top
   edge at 3 × 238.6 + 3 × 32 = 811.8 from the canvas top. If a strip's
   construction changes, re-derive.

   The column width is kept at the original six-square-tile derivation,
   1460/6 ≈ 243.33 (it also sets the history tile's square side, and the
   ~1107 canvas width above). The column no longer reaches the chart's
   bottom — the whitespace below the history tile is deliberate. */
.portfoliocharts-embed-demo-stats .portfoliocharts-embed-wrap {
    /* stats column (1460/6) + 24 gutter + 840 charts */
    width: calc(1460px / 6 + 864px);
}

.portfoliocharts-demo-statsrow {
    display: flex;
    gap: 24px;
}

.portfoliocharts-demo-statsrow-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Only the BOTTOM margin is zeroed. Sliders and charts are siblings inside
   the main column, so the slider ~ container rule further down restores the
   normal 32px sliders-to-chart gap (and its every-chart-equal override of
   the 96px sibling rule) all by itself. The bottom is different: the main
   column is a flex item (an independent formatting context), so the chart's
   32px bottom margin cannot collapse out of it and would stretch the band
   past the chart's visual bottom edge. */
.portfoliocharts-embed-wrap .portfoliocharts-demo-statsrow-main .portfoliocharts-chart-container {
    margin-bottom: 0;
}

.portfoliocharts-demo-stats-col {
    flex: 0 0 calc(1460px / 6); /* column width — see the section comment above */
    order: -1;
    display: flex;
    flex-direction: column;
    /* 32, matching the strip-to-strip and sliders-to-chart gaps in the main
       column — the gap IS the alignment (see the section comment). */
    gap: 32px;
    box-sizing: border-box;
}

/* Each stat is a tile in the embed's established tile language: the chart
   container's 8px radius and #ddd border, the strip gray fill. Radius
   matches the chart, not the slider items' 4px — the tiles sit beside the
   chart at comparable size, and the smaller radius read as an odd one out. */
.portfoliocharts-demo-stats-row {
    flex: none; /* heights are pinned per tile below, not shared out */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f1f2f3;
    border: 1px solid #ddd;
    border-radius: 8px;
    /* Real side padding so no text sits against the tile edge; the long
       notes wrap to two lines inside it, which is fine — the tiles have
       height to spare and everything stays centered. */
    padding: 14px 20px;
    box-sizing: border-box;
}

/* Per-tile heights — the strip-height constant derived in the section
   comment. Tiles 1–3 span the three slider strips (all 238.6 now that the
   flag tiles carry the thumbnail-slot margins — see .portfoliocharts-
   slider-flag), and tile 4 is square (side = column width) with its top on
   the chart container's top edge — position bought by the heights and gaps
   above it, not set here. */
.portfoliocharts-demo-stats-row:nth-child(1),
.portfoliocharts-demo-stats-row:nth-child(2),
.portfoliocharts-demo-stats-row:nth-child(3) {
    height: 238.6px;
}

.portfoliocharts-demo-stats-row:nth-child(4) {
    height: calc(1460px / 6);
}

.portfoliocharts-demo-stats-num {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.05;
    color: #e06d5e;
}

.portfoliocharts-demo-stats-lbl {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7f8d8c;
    line-height: 1.25;
}

/* Optional sub-note under a tile's label — quieter than the label on every
   axis (smaller, regular weight, sentence case, italic) so it reads as an
   aside, not a second label. */
.portfoliocharts-demo-stats-note {
    margin-top: 6px;
    font-size: 17px;
    font-style: italic;
    color: #7f8d8c;
    line-height: 1.3;
}

/* Stacked layout: the row becomes plain blocks (chart first, stats after —
   the DOM order), the canvas returns to the demo's normal 840, and the tiles
   reshape into a 2×2 grid. Font sizes are left alone: the 840 canvas scales
   the whole demo uniformly on a phone, and the grid's figures land near the
   same rendered size as the desktop column's. */
@media (max-width: 782px) {
    .portfoliocharts-embed-demo-stats .portfoliocharts-embed-wrap {
        width: 840px;
    }

    .portfoliocharts-demo-statsrow {
        display: block;
    }

    .portfoliocharts-demo-stats-col {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 32px;
    }

    /* Top-align the tile content. The desktop column centers it, and the
       spare height there makes that read as calm; in the grid the tiles sit
       side by side, and with one- and two-line notes mixed, centering puts
       the big numbers at different heights across a row. Anchoring at the
       top lines the numbers (and labels) up; only the note ends ragged. */
    .portfoliocharts-demo-stats-row {
        justify-content: flex-start;
    }

    /* The desktop strip-alignment heights mean nothing once the tiles leave
       the demo's side — release them and let the grid rows size to content.
       Carries the column class to tie the nth-child height rules' (0,2,0)
       specificity and win by order. */
    .portfoliocharts-demo-stats-col .portfoliocharts-demo-stats-row {
        height: auto;
    }
}

/* ── DemoSelect layout ───────────────────────────────────────────────────────
   chart="DemoSelect": the demo with one slider showing at a time. A row of
   three stat tiles (the stat column's charts / portfolios / countries tiles,
   turned into buttons) stands in for the three stacked strips; picking a tile
   reveals that strip in the pane below the row, and the chart follows. All
   three strips are server-rendered and stay in the DOM — the hidden attribute
   only hides them — so crawlers see every tile link on pageload.

   The canvas stays the demo's normal 840: the tile row, the visible strip and
   the chart all share it, so no media query is needed — the embed's transform
   scale handles narrow columns uniformly, exactly as the plain demo does. */
.portfoliocharts-demo-select-tiles {
    width: 840px;
    max-width: 100%;
    box-sizing: border-box;
    /* 32, matching the strip-to-strip gap the sliders' own bottom margin
       gives the plain demo — the row sits where a strip used to. */
    margin: 0 auto 32px;
    display: flex;
    gap: 24px;
}

/* Same tile language as the stat column rows (8px radius, num/lbl/note
   typography via the shared classes), but these are BUTTONS, so the states
   mirror the slider tiles': quiet at rest, gray on hover, dark border and the
   strip-gray fill when selected. Scoped under the wrap to beat the
   form-element reset (0,1,1 — see the slider-arrow note). */
.portfoliocharts-embed-wrap .portfoliocharts-demo-select-tile {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-anchored, not centred — the same reasoning as the stat column's
       mobile grid: the notes wrap to different line counts, so centring puts
       the big numbers at different heights across the row. Anchored at the
       top the numbers (and labels) line up; only the notes end ragged. */
    justify-content: flex-start;
    text-align: center;
    background: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px 20px;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.portfoliocharts-embed-wrap .portfoliocharts-demo-select-tile:hover {
    border-color: #7f8d8c;
    background: #f5f5f5;
}

.portfoliocharts-embed-wrap .portfoliocharts-demo-select-tile.is-active {
    border-color: #464d4d;
    background: #f1f2f3;
}

/* Slightly smaller than the stat column's 20px — scoped to the tiles so the
   Demo stat column keeps its own size. */
.portfoliocharts-demo-select-tile .portfoliocharts-demo-stats-lbl {
    font-size: 18px;
}

/* 13, matching the chart header's country + date range line, which DemoSelect
   renders at its normal base size (see the year-range override below). */
.portfoliocharts-demo-select-tile .portfoliocharts-demo-stats-note {
    font-size: 13px;
}

/* Belt and braces over the UA default — a pane is a plain div today, but any
   display rule added to it later would silently defeat the hidden attribute. */
.portfoliocharts-demo-select-pane[hidden] {
    display: none;
}

/* NO stage rules here on purpose: DemoSelect renders its charts at natural
   height (it takes no default stage — see the stage default in
   portfolio-charts.php), so there is no fixed box to align anything inside. */

/* ── Demo type scale ─────────────────────────────────────────────────────────
   A demo lives in a narrow page column, so the embed's transform scale runs
   well below 1 (the homepage column lands around 0.65) and the sliders' HTML
   text shrinks with it — an 11px heading renders near 7px. These bump the
   slider text up so it lands, AFTER scaling, near the sizes a full-width strip
   shows. Only the sliders: the chart SVG's text reads fine at the same scale
   and is deliberately untouched. Design pixels, like everything inside the
   scale wrap. */
.portfoliocharts-embed-demo .portfoliocharts-slider-heading {
    font-size: 16px;
}

.portfoliocharts-embed-demo .portfoliocharts-slider-label {
    /* 17, not the heading-matching 19: "Independence" is the longest single
       word any tile carries, and at 19px it spans ~116px of the 126px label
       width — unclipped but visibly crammed against the edges. 17px gives the
       word breathing room while staying well above the 14px base. */
    font-size: 17px;
}

/* The header's country + date range line ("Switzerland, 1970–2025"), scaled
   for the same reason as the slider text above. 13px base → 18px lands near
   the base size after the homepage column's ~0.65 scale. */
.portfoliocharts-embed-demo .portfoliocharts-chart-year-range {
    font-size: 18px;
}

/* DemoSelect opts back out: its charts render at their normal size, and a
   header line bumped past the 20px title beside it read as louder than the
   title. Same 0,2,0 specificity as the bump above — later in the file wins. */
.portfoliocharts-embed-demo-select .portfoliocharts-chart-year-range {
    font-size: 13px;
}

/* Same opt-out for the slider tile labels — back to the 14px every other
   embed's strip uses, so DemoSelect's slider matches the chart pages'.

   min-height reserves TWO label lines (2 × 1.3 line-height) on every tile.
   A strip is as tall as its tallest tile, and the three strips swap through
   one pane, so unequal strip heights move the chart on every pane switch:
   the chart strip always carries two-line labels ("Financial Independence")
   while at 14px every country name fits one line — without the reservation
   the countries pane sat one line shorter and the chart shifted up. */
.portfoliocharts-embed-demo-select .portfoliocharts-slider-label {
    font-size: 14px;
    min-height: 2.6em;
}

/* ── Country tiles ───────────────────────────────────────────────────────────
   Deliberately NO flex-basis override: country tiles take the same 136px slot
   as every other tile, so the strip shows the same five-at-a-time window the
   portfolio and chart strips do and all three read as one control family.

   The flag art (Nucleo's SVG flag set) is drawn on a square 32-grid canvas with
   its own rounded-rect border and gloss, so unlike the thumbnail slots it needs
   no box of its own: contain, not cover (a flag cropped to fill a square is a
   different flag), and a transparent ground — the base slot's gray would show
   as letterbox bars above and below the artwork. */
.portfoliocharts-slider-flag {
    /* cover, not contain — this is a CROP, and it is what closes the gap
       between flag and label. The art draws its flag across units 4–28 of a
       32-unit square canvas (measured identical on all twelve files), leaving
       transparent strips above and below; contain shows the whole canvas, so
       those strips read as ~13px of dead space on each side of the flag.

       Side padding shrinks the drawn art to 106px wide (border-box), and the
       82px height then makes cover scale the canvas to 106×106 and crop
       (106 − 82) / 2 = 12px = 3.62 canvas units per side — safely inside the
       4-unit strips, so no artwork is ever clipped and ~1px of strip survives
       as breathing room. The label's own 8px margin does the rest, matching
       the chart tiles' spacing. */
    object-fit: cover;
    background: transparent;
    padding: 0 10px;
    height: 82px;
    /* 22 + 82 + 22 = 126 = --pc-slider-img: the flag occupies the same
       vertical slot as a thumbnail, centered, WITHOUT scaling the art (the
       crop math below is delicate). Equalizes flag and thumbnail tile
       heights at every font scale — the strips' only height difference was
       the art slot — which the demo stat column's alignment counts on (see
       its section comment). A bonus: the arrows' thumbnail-midline offset
       (15 + 126/2 from the slider top) now passes through the flag's
       midline too, where the 82px slot had them riding 22px low.

       Only the TOP 22 sits above the flag: no bottom margin, so the label's
       own 8px margin-top gives the same art-to-label gap the thumbnails
       have, and the slot's bottom 22 is restored BELOW the label instead
       (next rule) to keep the tile height equal. */
    margin: 22px 0 0;
    /* saturate() is the one tunable knob for how loud the Nucleo art's
       national-flag colours sit next to the donut tiles' softened chart
       palette — a filter rather than edits to twelve source files. Currently
       neutral (1) after trying 0.85 and 0.9; lower it again if the flags
       start shouting.

       The drop shadow replaces the art's baked-in bevel ring and gloss, which
       ARE edited out of the files (the one departure from verbatim Nucleo —
       see slider.md): flat colour plus a soft shadow is the donut tiles' whole
       edge treatment, and it is what keeps Japan's white field readable now
       that no ring outlines it. The numbers mirror the donut filter at tile
       scale: its blur and offset land at ~4px and ~1px here, at the same 20%
       black. drop-shadow, not box-shadow — it follows the art's rounded
       silhouette rather than the img box. */
    filter: saturate(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
}

/* The bottom half of the flag's slot filler (see the margin comment above):
   with the label pulled up to the normal 8px art gap, the slot's remaining
   22 goes under the label so a flag tile still totals the thumbnail tiles'
   height — which the demo stat column's alignment counts on. Safe from
   collapsing out: the item's own 4px padding contains it. */
.portfoliocharts-slider-flag + .portfoliocharts-slider-label {
    margin-bottom: 22px;
}

.portfoliocharts-slider-label {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    /* Readability is preferred over fitting on one line: the longest labels wrap
       to two lines at this size, which is fine because the track's default
       align-items:stretch keeps every tile the same height regardless. Anything
       above ~11px wraps "Financial Independence", so single-line would mean text
       small enough to be a strain. */
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #464d4d;
}

.portfoliocharts-slider-item.is-active .portfoliocharts-slider-label {
    color: #25282c;
}

.portfoliocharts-slider-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 840px;
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 12px 20px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
}

.portfoliocharts-slider-fallback-title {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.portfoliocharts-embed-wrap .portfoliocharts-slider-fallback-next,
.portfoliocharts-embed-wrap .portfoliocharts-slider-fallback-random {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: #888;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 8px 20px;
    cursor: pointer;
    white-space: nowrap;
}

.portfoliocharts-slider-fallback-next:hover,
.portfoliocharts-slider-fallback-random:hover {
    background: #999;
    border-color: #999;
}

.portfoliocharts-slider-fallback-next:focus,
.portfoliocharts-slider-fallback-random:focus {
    outline: none;
    background: #888;
    border-color: #888;
    box-shadow: none;
}

/* When a chart slider renders, only one chart shows at a time — override the
   multi-chart sibling spacing so every chart gets the same margin.

   Must list BOTH selectors. The 96px rule above is a general-sibling match, and
   display:none siblings still count, so without this every chart except the
   first one in the DOM sits 96px down while the first sits at 32px — visible as
   the gap under the selector changing depending on which chart is showing.
   Whichever control renders (slider normally, dropdown as fallback) has to carry
   this override, or the inconsistency comes straight back.

   The demo-select container is the third carrier: DemoSelect wraps its sliders
   in panes inside that container, so the two selectors above stop matching —
   the container itself is what precedes the charts as a sibling there. Same
   0,3,0 specificity as the 96px rule; wins by order. */
.portfoliocharts-embed-wrap .portfoliocharts-slider-fallback ~ .portfoliocharts-chart-container,
.portfoliocharts-embed-wrap .portfoliocharts-slider ~ .portfoliocharts-chart-container,
.portfoliocharts-embed-wrap .portfoliocharts-demo-select ~ .portfoliocharts-chart-container {
    margin-top: 32px;
}

/* ── Full UI Grid ─────────────────────────────────────────────────────────── */

/* Table reset — prevents host page styles from affecting grid layout.
   Uses :where() for zero specificity so grid classes can override freely. */
.portfoliocharts-embed-wrap table {
    border-spacing: 0;
    border: none;
    margin: 0;
}

:where(.portfoliocharts-embed-wrap) th,
:where(.portfoliocharts-embed-wrap) td {
    padding: 0;
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
}

.portfoliocharts-portfolio-ui-full {
    padding: 0;
    overflow: visible; /* allow select dropdown to extend beyond the container */
    /* Was 96px, back when the next thing down was always a chart and the gap was
       the only thing separating "controls" from "output". A captioned slider now
       does that separating, so the wide gap read as a hole. Nothing stacks on top
       of this — the slider heading and the chart container both have a smaller or
       zero top margin, which collapses into this one.

       Measured from the bottom tables. It briefly meant "gap below the gauge row"
       while that row lived at the bottom of the UI, and was 16px to match the
       row's own margin; the row moved to the top, so this is back to being the
       plain gap under the UI. */
    margin-bottom: 48px;
}

.portfoliocharts-portfolio-ui-portfolio,
.portfoliocharts-portfolio-ui-matrix {
    padding: 0;
    overflow: visible;
    margin-bottom: 32px;
}

/* Read-only title in portfolio UI — disable editable affordances */
.portfoliocharts-portfolio-ui-title-readonly {
    cursor: default !important;
    border-bottom-color: transparent !important;
}
.portfoliocharts-portfolio-ui-title-readonly:hover {
    border-bottom-color: transparent !important;
}
.portfoliocharts-portfolio-ui-title-readonly:focus {
    border-bottom-color: transparent !important;
    outline: none;
}

/* Matrix UI — portfolio selector styled as a title-sized dropdown */
.portfoliocharts-embed-wrap select.portfoliocharts-matrix-portfolio-select {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
    padding: 5px 28px 5px 10px;
    position: relative;
    top: 2px;
    right: 2px;
    text-align: left;
    text-align-last: left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-position: right 4px center;
    transition: border-color 0.15s;
}
.portfoliocharts-embed-wrap select.portfoliocharts-matrix-portfolio-select:hover {
    background-color: #e4e4e4;
    border-color: #bbb;
}
.portfoliocharts-embed-wrap select.portfoliocharts-matrix-portfolio-select:focus {
    background-color: #fff;
    color: #1a1a1a;
    border-color: #4AACC5;
    box-shadow: 0 0 0 2px rgba(74, 172, 197, 0.2);
}
.portfoliocharts-portfolio-ui-matrix .portfoliocharts-full-ui-title-wrap {
    padding-bottom: 0;
    padding-left: 0;
    margin-left: 14px;
}
.portfoliocharts-embed-wrap select.portfoliocharts-matrix-portfolio-select option {
    font-size: 14px;
    font-weight: 400;
}

/* Header row: donut + title above the grid */
.portfoliocharts-full-ui-header {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    overflow: visible; /* allow select dropdown to open downward */
    margin-bottom: 0;
}

/* Gray divider line — vertically centered with the donut, spans to container right edge */
.portfoliocharts-full-ui-header::after {
    content: '';
    position: absolute;
    top: 100px; /* half of 200px donut height */
    left: calc(200px - 8px + 12px + 8px); /* donut width − left margin + gap + 8px */
    right: 3px;
    height: 2px;
    background: #ccc;
    pointer-events: none;
}

/* Title wrap: sits to the right of the donut, in the upper half (above the gray line) */
.portfoliocharts-full-ui-title-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
    padding: 0 0 6px 24px;
    margin-right: 200px;
    height: 100px; /* top half of the 200px donut = gray line position */
    align-self: flex-start;
    box-sizing: border-box;
}

/* Editable portfolio title */
.portfoliocharts-full-ui-title {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    min-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
    outline: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s;
}

.portfoliocharts-full-ui-title:hover {
    border-bottom-color: #d1d5db;
}

.portfoliocharts-full-ui-title:focus {
    border-bottom-color: #0891b2;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.portfoliocharts-full-ui-title:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    font-weight: 400;
}

/* Inline donut above the grid */
.portfoliocharts-full-ui-donut {
    flex: 0 0 200px;
    width: 200px;
    margin: 0;
    box-shadow: none;
    background: transparent;
    position: relative;
}

.portfoliocharts-full-ui-donut::after {
    content: none; /* line moved to portfoliocharts-full-ui-header::after */
}

.portfoliocharts-full-ui-donut .portfoliocharts-chart-loading {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
}

.portfoliocharts-full-ui-donut .portfoliocharts-chart-content {
    padding: 0;
}

.portfoliocharts-full-ui-grid-wrap {
    overflow-x: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0 16px 0;
    margin-top: -25px;
    box-sizing: border-box;
    width: 100%;
}

.portfoliocharts-full-ui-grid {
    border-collapse: collapse;
    table-layout: fixed;
}

.portfoliocharts-full-ui-grid-top {
    width: min-content;
}

/* ── Bottom tables: Countries + Custom (side by side) ────────────────────── */

.portfoliocharts-bottom-tables-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    position: relative;
    z-index: 11;
}

.portfoliocharts-bottom-table-country,
.portfoliocharts-bottom-table-custom {
    width: min-content;
}

.portfoliocharts-bottom-table-country::before,
.portfoliocharts-bottom-table-custom::before {
    display: block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    text-align: center;
    padding: 0 0 2px 0;
    border-bottom: 2px solid #ccc;
    margin-bottom: 1px;
}

.portfoliocharts-bottom-table-country::before {
    content: 'Individual Countries';
}

.portfoliocharts-bottom-table-custom::before {
    content: 'Custom Assets';
}

.portfoliocharts-embed-wrap .portfoliocharts-full-ui-grid-bottom {
    width: min-content;
}

.portfoliocharts-bottom-table-country .portfoliocharts-bottom-grid-col-name {
    width: 150px;
}

.portfoliocharts-bottom-table-custom .portfoliocharts-bottom-grid-col-name {
    width: 230px;
}

.portfoliocharts-bottom-grid-col-remove {
    width: 40px;
}

.portfoliocharts-full-ui-grid-bottom .portfoliocharts-grid-cell-na {
    border-color: #ddd;
}

.portfoliocharts-bottom-grid-name-cell {
    font-size: 13px;
    font-weight: 600;
    overflow: visible;
    color: #333;
}

.portfoliocharts-bottom-grid-remove-cell {
    background: #fff;
    border: none;
    padding: 0;
    vertical-align: middle;
}

.portfoliocharts-bottom-grid-empty-cell {
    background: #fff;
    border: none;
    padding: 0;
}

.portfoliocharts-bottom-grid-remove-centered {
    text-align: center;
    vertical-align: middle;
}


.portfoliocharts-country-row-remove {
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.portfoliocharts-country-row-remove:hover {
    color: #c33;
}

.portfoliocharts-country-add-wrap,
.portfoliocharts-custom-asset-add-wrap {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}


.portfoliocharts-dev-toggle-hint {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0.03em;
    font-style: italic;
    text-transform: none;
}

.portfoliocharts-dev-toggle-footnote {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0.03em;
    font-style: italic;
    white-space: nowrap;
    text-align: right;
    padding-right: 4px;
    vertical-align: middle;
    border: none;
    background: #fff;
}


/* Dev region row header — clickable to toggle XUS/DEV */
.portfoliocharts-dev-row-header {
    cursor: pointer;
    user-select: none;
}


.portfoliocharts-dev-row-label {
    display: block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    margin-bottom: 0;
    line-height: 1.2;
}

.portfoliocharts-dev-row-header-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.6;
}

.portfoliocharts-dev-toggle-btn {
    display: inline-block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    background: #f0f0f0;
    border: 1px solid #ddd;
    padding: 0 6px 1px;
    border-radius: 3px;
    line-height: 1.2;
    margin-top: 3px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}


/* Column group labels (e.g. "Stocks" above LCB–SCG) */
.portfoliocharts-col-group-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    text-align: center;
    padding: 0 0 2px 0;
    background: #fff;
    border: none;
}

.portfoliocharts-col-group-stocks {
    color: #111;
    font-size: 18px;
    border-bottom: 2px solid #C0504D;
    padding-bottom: 3px;
    padding-top: 0;
}

.portfoliocharts-col-group-bonds {
    color: #111;
    font-size: 18px;
    border-bottom: 2px solid #9BBB59;
    padding-bottom: 3px;
    padding-top: 0;
}

.portfoliocharts-col-group-real {
    color: #111;
    font-size: 18px;
    border-bottom: 2px solid #4AACC5;
    padding-bottom: 3px;
    padding-top: 0;
}



/* Corner & headers */
.portfoliocharts-grid-corner {
    width: 80px;
    padding: 0;
    background: #fff;
    border: none;
}

.portfoliocharts-grid-corner-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    text-align: right;
    padding: 0 6px 4px 0;
    vertical-align: bottom;
}

.portfoliocharts-grid-col-header,
.portfoliocharts-grid-row-header {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    text-align: center;
    padding: 4px 2px;
    background: #fff;
    border: none;
    white-space: nowrap;
}

.portfoliocharts-grid-col-header {
    width: 40px;
}

.portfoliocharts-grid-col-spacer {
    width: 15px;
    background: #fff;
    border: none;
    padding: 0;
}

.portfoliocharts-grid-col-spacer-lg {
    width: 60px;
}

.portfoliocharts-grid-row-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    text-align: left;
    padding: 0 0 0 8px;
    background: #fff;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
}

.portfoliocharts-grid-row-header {
    width: 80px;
    text-align: right;
    padding: 0 6px;
    background: #fff;
}

/* Cells — fixed square */
.portfoliocharts-grid-cell {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #ddd;
    background: #f0f0f0;
    overflow: hidden;
    position: relative;
}

.portfoliocharts-grid-cell:not(.portfoliocharts-grid-cell-na):hover {
    filter: brightness(0.88);
}

.portfoliocharts-grid-cell-donut-active {
    overflow: visible;
    z-index: 1;
}

.portfoliocharts-grid-cell-donut-active .portfoliocharts-grid-input {
    background: inherit;
}

.portfoliocharts-grid-cell-donut-active .portfoliocharts-grid-input,
input.portfoliocharts-grid-cell-donut-active {
    outline: 1px solid #555;
    outline-offset: -1px;
    transform: scale(1.15);
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: transform 200ms ease;
}

.portfoliocharts-grid-cell-na {
    background: #fff;
    border-color: #fff;
}

.portfoliocharts-grid-input {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333;
    cursor: text;
    padding: 0;
    /* Hide spin buttons */
    -moz-appearance: textfield;
    appearance: textfield;
}

.portfoliocharts-grid-input::-webkit-outer-spin-button,
.portfoliocharts-grid-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.portfoliocharts-grid-input:focus {
    outline: none;
}

.portfoliocharts-grid-input[style*="font-weight: bold"],
.portfoliocharts-grid-input[style*="font-weight:bold"] {
    font-weight: 700 !important;
}

/* PK output row */
.portfoliocharts-full-ui-pk-row {
    padding: 8px 16px 0;
}

.portfoliocharts-full-ui-pk-output {
    width: 100%;
    box-sizing: border-box;
    color: #555;
    cursor: text;
    user-select: all;
}

/* Custom Assets section */

.portfoliocharts-custom-assets-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0.03em;
    font-style: italic;
    text-transform: none;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
}

.portfoliocharts-embed-wrap .portfoliocharts-custom-asset-hash {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #888;
    padding: 5px 8px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    width: 150px;
    box-sizing: border-box;
    text-align: center;
}

.portfoliocharts-custom-asset-hash:hover {
    background: #e4e4e4;
    border-color: #bbb;
}

.portfoliocharts-custom-asset-hash:focus {
    background: #fff;
    color: #1a1a1a;
    border-color: #4AACC5;
    box-shadow: 0 0 0 2px rgba(74, 172, 197, 0.2);
}

.portfoliocharts-custom-asset-hash::placeholder {
    color: #888;
}

.portfoliocharts-custom-asset-hash:focus::placeholder {
    color: transparent;
}

.portfoliocharts-custom-asset-hash:disabled {
    opacity: 0.5;
}


.portfoliocharts-custom-asset-info {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
    color: #aaa;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 6px 0 0;
}

.portfoliocharts-custom-asset-name {
    /* Match standard row-label styling (USA / Europe / Developed) so universal
       Examples and member assets read as first-class rows. The parent <th>
       carries text-transform: uppercase via .portfoliocharts-grid-row-header,
       so we explicitly reset it here to preserve the original case of the
       asset name (e.g. "DBMF" stays mixed-case, not all-caps).
       Wrap behavior is permissive (unlike the standard row-header's nowrap)
       because custom asset names can be longer than the 3-letter codes used
       by built-in rows. */
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: #444;
    text-transform: none;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    cursor: pointer;
}

.portfoliocharts-custom-asset-name:hover {
    text-decoration: underline;
}
.portfoliocharts-custom-asset-name-locked {
    cursor: default;
}
.portfoliocharts-custom-asset-name-locked:hover {
    text-decoration: none;
}

.portfoliocharts-custom-asset-remove {
    background: none;
    border: none;
    font-size: 16px;
    color: #999;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    text-align: center;
}

.portfoliocharts-custom-asset-remove:hover {
    color: #c33;
}

/* NOTE: there is no .portfoliocharts-full-ui-footer rule any more, and no element
   for it. The gauge used to live in a row of its own — first below the grid, then
   above the header — held open by a min-height so that revealing it did not shove
   the rest of the UI down. Reserving that space meant a complete portfolio, which
   is the normal state, carried an empty 64px band it never used. The gauge now
   shares the portfolio title's slot instead (see the button rules below), so an
   allocation that totals 100% costs it nothing at all. */

.portfoliocharts-full-ui-total {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.portfoliocharts-full-ui-total-val {
    font-weight: 700;
}

.portfoliocharts-full-ui-total-val.portfoliocharts-total-ok  { color: #16a34a; }
.portfoliocharts-full-ui-total-val.portfoliocharts-total-bad { color: #dc2626; }

/* (The .portfoliocharts-full-ui-footer .portfoliocharts-portfolio-ui-error rule
   that sat here went with the footer row. The Full UI never showed that <p> — no
   code path in class-portfoliocharts-ui-full.php ever queried it — so the element
   went too. The Simple UI keeps its own.) */


/* Register --portfoliocharts-gauge-pct as a typed property so CSS can interpolate it */
@property --portfoliocharts-gauge-pct {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* Percentage gauge — full UI.
   Lives inside .portfoliocharts-full-ui-title-wrap and stands in for the portfolio
   title whenever the allocation does not total 100%; the JS shows exactly one of
   the two (showGauge()). The wrap is a fixed-height column that bottom-aligns its
   content, so swapping a 38px title for a 45px bar moves nothing around it — the
   gray divider line is positioned by the wrap, not by whatever is in it.
   flex: none because that column would otherwise stretch this to full width. */
.portfoliocharts-chart-this-btn-full {
    /* Fills the title slot: stretch across the wrap's content box, which is the
       header width less the donut and the wrap's own 24px indent. No `width` —
       align-self does it, so the bar tracks the header at any embed scale instead
       of needing a number kept in step with one. */
    align-self: stretch;
    height: 45px;
    flex: none;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Closed by default; .is-open wipes it open from the left, and removing that
       class wipes it back the same way. See showGauge() — the JS holds the element
       in the layout until the close finishes, then hands the slot to the title.

       clip-path rather than transform: scaleX(), which is the obvious way to do
       this and the wrong one here. Scaling squashes the centred label and thins
       the 2px border as the bar grows; the bar has to look like it is being drawn
       out, not stretched. Clipping leaves every pixel of geometry alone and just
       reveals more of it.

       ONE transition declaration for the whole element, listing the completion
       beat's properties too. .is-complete deliberately does not redeclare
       `transition` — doing so would drop clip-path from the list for the entire
       second the check is up, and the bar would snap shut instead of closing. */
    clip-path: inset(0 100% 0 0);
    transition:
        clip-path 0.25s ease,
        --portfoliocharts-gauge-pct 0.25s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.portfoliocharts-chart-this-btn-full.is-open {
    clip-path: inset(0 0 0 0);
}

/* Caption above the gauge, shown and hidden with it. Same treatment as the home
   country dropdown's "currency, inflation, & funds" — small italic grey — but
   left-aligned rather than centred, because it sits over a bar that starts at the
   wrap's left edge rather than under a centred control.

   Fades rather than wipes: the bar's clip-path reads as the bar being drawn, and
   applying the same wipe to a line of text would look like it was being typed.
   Same 0.25s either way, so the two read as one movement. */
.portfoliocharts-full-ui-gauge-note {
    display: block;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
    letter-spacing: 0.03em;
    font-style: italic;
    text-align: left;
    padding-bottom: 3px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.portfoliocharts-full-ui-gauge-note.is-open {
    opacity: 1;
}

/* The JS still waits out its OPEN_MS before hiding the element, which costs a
   barely perceptible delay before the title reappears and is not worth a second
   code path to avoid. */
@media (prefers-reduced-motion: reduce) {
    .portfoliocharts-chart-this-btn-full,
    .portfoliocharts-full-ui-gauge-note {
        transition: none;
    }
}

.portfoliocharts-chart-this-btn-full:disabled {
    background: linear-gradient(
        to right,
        #f0f0f0 var(--portfoliocharts-gauge-pct, 0%),
        #fff var(--portfoliocharts-gauge-pct, 0%)
    );
    border: 2px solid #e06d5e;
    color: #000;
    opacity: 1;
    pointer-events: none;
}

/* The completion beat: the allocation just reached 100%, and the bar fills solid
   with a check for a second before handing the slot back to the portfolio title.

   #9BBB59 is the domestic-bonds green from the allocation palette — the same value
   as cellColors.domesticBonds in class-portfoliocharts-ui-full.php and
   PortfolioDonutChart.CATEGORY_COLORS.domesticBonds. Keep all three in step; the
   point is that the confirmation reads as part of this UI rather than as a generic
   success colour borrowed from somewhere else.

   The label goes BLACK here, not white. White on #9BBB59 is about 2.2:1, which is
   unreadable; black is about 9.6:1. That is the trade for a palette green — it is
   much lighter than a purpose-picked success green would be.

   Written with :disabled in the selector to beat the gradient above — the gauge is
   permanently disabled, so a bare .is-complete would tie on specificity and win
   only by source order, which is a fragile thing to rely on. */
.portfoliocharts-chart-this-btn-full:disabled.is-complete {
    background: #9BBB59;
    border-color: #9BBB59;
    color: #000;
    font-size: 20px;
    /* No `transition` here on purpose — the base rule already carries these
       properties, and redeclaring would drop clip-path from the list. */
}

/* No :not(:disabled) rules here. The gauge is a readout — the Full UI keeps it
   disabled for its whole life (charting happens when the allocation reaches 100%,
   not on a click), so the enabled/hover/focus states this button used to have as
   an "Update" control would never match. The :disabled rule above is the only
   appearance it has. */

.portfoliocharts-gauge-label {
    pointer-events: none;
    user-select: none;
}

/* Copy link — chart footer */
.portfoliocharts-chart-copy-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.portfoliocharts-chart-copy-link:hover {
    color: #555;
}

.portfoliocharts-chart-copy-link-icon {
    flex-shrink: 0;
}

.portfoliocharts-chart-copy-link-status {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    margin-right: auto;
    align-self: center;
}

/* Save to Keychain — chart footer (toolkit only) */
.portfoliocharts-chart-save-keychain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.portfoliocharts-chart-save-keychain:hover {
    color: #555;
}

.portfoliocharts-chart-save-keychain-icon {
    flex-shrink: 0;
}

.portfoliocharts-chart-save-keychain-status {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    margin-right: auto;
    align-self: center;
}


/* Confetti burst on Create Link */
@keyframes portfoliocharts-confetti-pop {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(var(--pc-cx), var(--pc-cy)) rotate(var(--pc-cr)); opacity: 0; }
}
.portfoliocharts-confetti-particle {
    position: absolute;
    border-radius: 2px;
    pointer-events: none;
    z-index: 99999;
    animation: portfoliocharts-confetti-pop var(--pc-cd) ease-out forwards;
}

/* Stale chart overlay — shown when the UI has unsaved changes */
.portfoliocharts-chart-container {
    position: relative;
}

.portfoliocharts-chart-stale-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.72);
    z-index: 10;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.portfoliocharts-chart-container.portfoliocharts-chart-stale .portfoliocharts-chart-stale-overlay {
    display: flex;
}

.portfoliocharts-chart-stale-msg {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1px solid #0891b2;
    border-radius: 4px;
    padding: 6.5px 13.5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    pointer-events: none;
}

/* Chart title bar — portfolio name above the chart content */
.portfoliocharts-chart-title-bar {
    padding: 18px 32px 0;
}

.portfoliocharts-chart-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    margin: -18px -32px 0;
    padding: 18px 32px;
    border-bottom: 1px solid #ddd;
}

.portfoliocharts-chart-header-logo {
    height: 40px;
    width: auto;
}

.portfoliocharts-chart-title-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

/* The title links to the chart's explainer page. It inherits the header's
   colour rather than taking link styling — a 28px bold title rendered blue and
   underlined reads as a mistake, and the theme's link colour would otherwise
   win here. Underline on hover keeps it discoverable. Colour is inherited
   deliberately: the PNG export reads its colour from the title span, not the
   anchor, so the exported header matches what is on screen. */
.portfoliocharts-chart-title-link {
    color: inherit;
    text-decoration: none;
}

.portfoliocharts-chart-title-link:hover,
.portfoliocharts-chart-title-link:focus {
    color: inherit;
    text-decoration: underline;
}

.portfoliocharts-chart-title-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.portfoliocharts-chart-title-sub {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.portfoliocharts-chart-year-range {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
    text-align: right;
    margin-top: 2px;
}

/* Chart footer */
.portfoliocharts-chart-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f5;
    padding: 10px 32px;
    border-top: 1px solid #ddd;
}

.portfoliocharts-chart-footer-share-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    white-space: nowrap;
}

.portfoliocharts-chart-save-image {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.portfoliocharts-chart-save-image:hover {
    color: #555;
}

.portfoliocharts-chart-save-icon {
    flex-shrink: 0;
}

.portfoliocharts-chart-footer-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #888;
    white-space: nowrap;
}

/* D3 Chart Styles — scoped to .portfoliocharts-chart-content to avoid conflicts with other plugins */
.portfoliocharts-chart-content .grid line {
    stroke: #e8e8e8;
    stroke-width: 0.5;
}

.portfoliocharts-chart-content .grid path {
    stroke-width: 0;
}

/* SVG axis labels (inside the chart SVG for self-contained export) */
.portfoliocharts-chart-content .portfoliocharts-axis-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: #666;
}

.portfoliocharts-chart-content .axis text {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 12px;
    fill: #666;
}

/* Scenario Lines */
.portfoliocharts-chart-content .scenario-line {
    fill: none;
    stroke-width: 3;
    opacity: 0.5;
}

.portfoliocharts-chart-content .scenario-line.failed {
    stroke-dasharray: 3, 3;
    opacity: 0.3;
}

/* Main Lines */
.portfoliocharts-chart-content .safe-wr-line {
    fill: none;
    stroke: #f97316;
    stroke-width: 5;
}

.portfoliocharts-chart-content .perpetual-line {
    fill: none;
    stroke: #84cc16;
    stroke-width: 4;
}

.portfoliocharts-chart-content .ltwr-line {
    stroke: #f59e0b;
    stroke-width: 4;
    opacity: 1;
}

/* Reference Line */
.portfoliocharts-chart-content .reference-line {
    stroke: #888;
    stroke-width: 4;
    opacity: 0.5;
}

.portfoliocharts-chart-content .reference-line-group {
    cursor: ew-resize;
}

/* Areas */
.portfoliocharts-chart-content .perpetual-area {
    fill: rgba(132, 204, 22, 0.15);
}

.portfoliocharts-chart-content .full-swr-area {
    fill: rgba(132, 204, 22, 0.25);
}

/* Labels */
.portfoliocharts-chart-content .scenario-label,
.portfoliocharts-chart-content .wr-label {
    pointer-events: none;
}

.portfoliocharts-chart-content .ltwr-label-group text {
    pointer-events: none;
}

/* Hover Effects */
.portfoliocharts-chart-content .scenario-line-group {
    transition: opacity 0.2s ease;
}


/* ── Portfolio Growth Settings Bar ──────────────────────────────── */

.portfoliocharts-growth-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px 0 32px;
    margin-bottom: 0;
    gap: 4px;
}

.portfoliocharts-growth-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 20px;
}

.portfoliocharts-growth-field:first-child {
    margin-left: 0;
}

.portfoliocharts-growth-field-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    text-align: right;
}

.portfoliocharts-embed-wrap .portfoliocharts-growth-field-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    width: 80px;
    text-align: center;
}

.portfoliocharts-growth-field-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

/* Financial Independence chart settings bar */
.portfoliocharts-fi-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px 0 32px;
    margin-bottom: 0;
    gap: 4px;
}

.portfoliocharts-fi-settings-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: #666;
    border-radius: 4px;
    padding: 5px 12px;
    margin-right: 16px;
}

.portfoliocharts-fi-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 20px;
}

.portfoliocharts-fi-field:first-child {
    margin-left: 0;
}

.portfoliocharts-fi-field-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    text-align: right;
}

.portfoliocharts-fi-field-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}

.portfoliocharts-embed-wrap .portfoliocharts-fi-field-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 8px;
    width: 120px;
    text-align: center;
}

.portfoliocharts-embed-wrap .portfoliocharts-fi-field-input--narrow {
    width: 60px;
}

.portfoliocharts-fi-field-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

.portfoliocharts-fi-field-suffix {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.portfoliocharts-fi-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 180px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.portfoliocharts-fi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #8caa4b;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.portfoliocharts-fi-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #8caa4b;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.portfoliocharts-fi-field-value {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    min-width: 32px;
}

/* Rolling Returns chart settings bar */
.portfoliocharts-rr-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px 0 32px;
    margin-bottom: 0;
    gap: 4px;
}

.portfoliocharts-rr-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.portfoliocharts-rr-field-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
}

.portfoliocharts-rr-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 180px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.portfoliocharts-rr-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #4AACC5;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.portfoliocharts-rr-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #4AACC5;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.portfoliocharts-rr-field-value {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    min-width: 55px;
}


/* Savings Rates chart settings bar */
.portfoliocharts-sr-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px 0 32px;
    margin-bottom: 0;
}

.portfoliocharts-sr-field {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 20px;
}

.portfoliocharts-sr-field:first-child {
    margin-left: 0;
}

.portfoliocharts-sr-field-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
}

.portfoliocharts-sr-field-prefix,
.portfoliocharts-sr-field-suffix {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.portfoliocharts-embed-wrap .portfoliocharts-sr-field-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    width: 80px;
    text-align: center;
}

.portfoliocharts-embed-wrap .portfoliocharts-sr-field-input--narrow {
    width: 48px;
}

.portfoliocharts-sr-field-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

/* Retirement Spending chart settings bar */
.portfoliocharts-rs-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 32px 0 32px;
    margin-bottom: 0;
    gap: 30px;
    flex-wrap: wrap;
}

.portfoliocharts-rs-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.portfoliocharts-rs-left-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.portfoliocharts-rs-left-desc {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    color: #888;
    line-height: 1.3;
    max-width: 200px;
}

.portfoliocharts-rs-rules {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.portfoliocharts-rs-rules-title {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #666;
}

.portfoliocharts-rs-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portfoliocharts-rs-slider-heading {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    white-space: nowrap;
}

.portfoliocharts-rs-slider-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    line-height: 1.2;
    white-space: nowrap;
    width: 55px;
    flex-shrink: 0;
}

.portfoliocharts-rs-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    cursor: pointer;
}

.portfoliocharts-rs-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c8702a;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.portfoliocharts-rs-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #c8702a;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.portfoliocharts-rs-slider-value {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    min-width: 40px;
    text-align: center;
}

/* "Global" row label — sits to the right of COM on the USA row */
.portfoliocharts-glo-row-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #444;
    text-align: left;
    padding: 0 6px;
    background: #fff;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Asset Builder ───────────────────────────────────────────────────────── */

.portfoliocharts-asset-builder {
    padding: 24px 32px 32px;
}

/* Settings row — three fields side-by-side */
.portfoliocharts-ab-settings {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.portfoliocharts-ab-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 180px;
}

.portfoliocharts-ab-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.portfoliocharts-ab-name-input,
.portfoliocharts-ab-label-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    padding: 7px 10.5px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #1a1a1a;
    background: #fafafa;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    height: 35px;
}

.portfoliocharts-ab-name-input:focus,
.portfoliocharts-ab-label-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

.portfoliocharts-ab-name-input::placeholder,
.portfoliocharts-ab-label-input::placeholder {
    color: #bbb;
    font-style: italic;
}

.portfoliocharts-ab-optional {
    font-weight: 400;
    color: #999;
}

.portfoliocharts-ab-currency-select,
.portfoliocharts-ab-rep-asset-select {
    width: 100%;
    text-align: left;
    text-align-last: left;
}

.portfoliocharts-ab-rep-desc {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    color: #888;
    min-height: 1em;
}

/* Annual returns */
.portfoliocharts-ab-returns {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 24px;
}

.portfoliocharts-ab-returns-header {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 16px;
}

.portfoliocharts-ab-returns-header-year {
    width: 60px;
    flex-shrink: 0;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.portfoliocharts-ab-returns-header-val {
    flex: 1;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.portfoliocharts-ab-returns-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 4px 0;
}

.portfoliocharts-ab-return-row {
    display: flex;
    align-items: center;
    padding: 3px 16px;
}

.portfoliocharts-ab-return-row:hover {
    background: #fafafa;
}

.portfoliocharts-ab-year-label {
    width: 60px;
    flex-shrink: 0;
    font-family: 'DM Mono', 'Fira Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.portfoliocharts-ab-return-input {
    flex: 1;
    min-width: 0;
    font-family: 'DM Mono', 'Fira Mono', monospace;
    font-size: 14px;
    padding: 5px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    color: #1a1a1a;
    background: #fff;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
    appearance: textfield;
}

.portfoliocharts-ab-return-input::-webkit-outer-spin-button,
.portfoliocharts-ab-return-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.portfoliocharts-ab-return-input::placeholder {
    color: #ccc;
    opacity: 1;
}

.portfoliocharts-ab-return-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.portfoliocharts-ab-return-usd {
    flex: 1;
    min-width: 0;
    font-family: 'DM Mono', 'Fira Mono', monospace;
    font-size: 14px;
    padding: 5px 8px;
    color: #888;
}

/* Output */
.portfoliocharts-ab-output {
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/* ── Asset Builder: Create / Update actions ────────────────────────────── */

.portfoliocharts-ab-actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.portfoliocharts-ab-create-btn {
    font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 24px;
    border: none;
    border-radius: 4px;
    background: #e06d5e;
    color: #fff !important;
    cursor: pointer;
    transition: background 0.15s;
}

.portfoliocharts-ab-create-btn:hover {
    background: #e8897d;
}

.portfoliocharts-ab-create-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.portfoliocharts-ab-create-result {
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f0fdf4;
    margin-top: 8px;
}

.portfoliocharts-ab-result-title {
    font-weight: 600;
    color: #166534;
    margin-bottom: 6.5px;
}

.portfoliocharts-ab-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.portfoliocharts-ab-result-label {
    color: #6b7280;
    font-size: 13px;
}

.portfoliocharts-ab-result-hash {
    font-family: 'DM Mono', 'Fira Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    background: #e5e7eb;
    padding: 2.5px 8px;
    border-radius: 3px;
    user-select: all;
}

.portfoliocharts-ab-copy-btn {
    font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    padding: 3px 9.5px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

.portfoliocharts-ab-copy-btn:hover {
    background: #f3f4f6;
}

.portfoliocharts-ab-result-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 5px;
}

.portfoliocharts-ab-create-error {
    padding: 8px 12px;
    border-radius: 4px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    margin-top: 8px;
}

/* ── Asset Builder: Update section ─────────────────────────────────────── */

.portfoliocharts-ab-update-section {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.portfoliocharts-ab-update-header {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin-bottom: 8px;
}

.portfoliocharts-ab-update-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.portfoliocharts-ab-update-hash-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    padding: 7px 10.5px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fafafa;
    box-sizing: border-box;
    height: 35px;
}

.portfoliocharts-embed-wrap .portfoliocharts-ab-update-hash-input {
    width: 140px;
}

.portfoliocharts-ab-update-hash-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.portfoliocharts-ab-load-btn {
    font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    padding: 6.5px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

.portfoliocharts-ab-load-btn:hover {
    background: #f3f4f6;
}

.portfoliocharts-ab-load-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.portfoliocharts-ab-update-status {
    font-size: 13px;
    margin-top: 6.5px;
    padding: 6.5px 9.5px;
    border-radius: 4px;
}

.portfoliocharts-ab-update-status-success {
    background: #f0fdf4;
    color: #166534;
}

.portfoliocharts-ab-update-status-error {
    background: #fef2f2;
    color: #991b1b;
}

.portfoliocharts-ab-legacy-section {
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.portfoliocharts-ab-legacy-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    padding: 7px 10.5px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fafafa;
    box-sizing: border-box;
    height: 35px;
    flex: 1;
    min-width: 0;
}

.portfoliocharts-ab-legacy-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.portfoliocharts-ab-legacy-load-btn {
    font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    padding: 6.5px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

.portfoliocharts-ab-legacy-load-btn:hover {
    background: #f3f4f6;
}

.portfoliocharts-ab-legacy-load-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.portfoliocharts-ab-legacy-status {
    font-size: 13px;
    margin-top: 6.5px;
    padding: 6.5px 9.5px;
    border-radius: 4px;
}


/* ── Portfolio Matrix ─────────────────────────────────────────────────── */

/* Settings bar */
.portfoliocharts-pm-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 32px;
    margin-bottom: 12px;
}

.portfoliocharts-pm-settings-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    white-space: pre-line;
    text-align: center;
    line-height: 1.2;
}

.portfoliocharts-pm-settings-label--light {
    color: #666;
}

.portfoliocharts-embed-wrap .portfoliocharts-pm-settings-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 8px;
    width: 44px;
    text-align: center;
}

.portfoliocharts-pm-settings-input:hover {
    background: #e4e4e4;
    border-color: #bbb;
}

.portfoliocharts-pm-settings-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

/* SVG chart wrapper */
.portfoliocharts-pm-chart-wrap {
    margin-bottom: 16px;
}

.portfoliocharts-pm-chart-wrap svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Weight inputs inside SVG foreignObject */
input.portfoliocharts-pm-weight-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #f0f0f0;
    border: 1px solid #ddd;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
}

input.portfoliocharts-pm-weight-input:hover {
    background: #e4e4e4;
    border-color: #bbb;
}

input.portfoliocharts-pm-weight-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

/* ── Optimizer chart ─────────────────────────────────────────── */

/* Settings bar */
.portfoliocharts-opt-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 32px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.portfoliocharts-opt-settings-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.portfoliocharts-opt-settings-label--light {
    color: #888;
}

.portfoliocharts-opt-cagr-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.portfoliocharts-embed-wrap .portfoliocharts-opt-settings-input {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 8px;
    width: 40px;
    text-align: center;
}

.portfoliocharts-opt-settings-input:hover {
    background: #e4e4e4;
    border-color: #bbb;
}

.portfoliocharts-opt-settings-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
    background: #fff;
}

/* SVG chart wrapper */
.portfoliocharts-opt-chart-wrap {
    margin-bottom: 16px;
}

.portfoliocharts-opt-chart-wrap svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Asset Allocation shortcode ──────────────────────────────────────────── */

.portfoliocharts-asset-allocation {
    line-height: 1.5;
    color: #333;
    width: 100%;
}

/* Override absolute positioning when used inside centered contexts (the Country
   UI; the AssetAllocation block no longer renders a country control of its own) */
.portfoliocharts-home-country-wrap-centered {
    position: static;
    display: inline-flex;
}

.portfoliocharts-aa-donut {
    margin: 0 auto 16px;
    border: none;
    background: none;
    width: 200px;
    overflow: visible;
}

.portfoliocharts-aa-table {
    width: 100%;
    border-collapse: collapse;
}

.portfoliocharts-aa-table thead th {
    padding: 4px 8px 6px;
    border-bottom: 2px solid #ccc;
}

.portfoliocharts-aa-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.portfoliocharts-aa-col-pct {
    text-align: center;
    width: 60px;
    font-variant-numeric: tabular-nums;
}

.portfoliocharts-aa-col-asset {
    text-align: left;
}

.portfoliocharts-aa-table tbody tr:last-child td {
    border-bottom: none;
}

.portfoliocharts-aa-table a {
    text-decoration: underline;
}

.portfoliocharts-aa-table a:hover {
    text-decoration: underline;
}

.portfoliocharts-aa-table tbody tr {
    transition: background-color 0.15s ease;
    cursor: default;
}

.portfoliocharts-aa-table tbody tr.portfoliocharts-aa-row-highlight {
    background-color: rgba(0, 0, 0, 0.04);
}

/* ── Global Explorer ─────────────────────────────────────────────
   Global Explorer renders its own asset/country filters instead of pairing with a
   reusable UI, so the filter styles live with the chart. The scatter and the
   detail panel below it share one SVG (matching the Optimizer), so their
   styles are scoped under .portfoliocharts-chart-content. */

.portfoliocharts-global-explorer {
    font-family: inherit;
    /* Query container so the HTML filter notes can size themselves relative to
       the chart width, matching the SVG notes (which scale with the 800-wide
       viewBox). See .portfoliocharts-global-explorer-filter-note. */
    container-type: inline-size;
}

.portfoliocharts-global-explorer-message {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Filters */
.portfoliocharts-global-explorer-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 16px;
}

.portfoliocharts-global-explorer-filter-col {
    flex: 1 1 300px;
    min-width: 0;
}

.portfoliocharts-global-explorer-filter-heading {
    margin: 24px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #666;
    text-align: center;
}

/* Filter section header: title on the left, note on the right, sharing one
   underline below the row. */
.portfoliocharts-global-explorer-filter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

/* Heading sits left in the row — drop the standalone block's centring, margins
   and border (the row owns those now). */
.portfoliocharts-global-explorer-filter-head .portfoliocharts-global-explorer-filter-heading {
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
    line-height: 1.2;
}

/* Note sits right in the row — matches the hero's "Each column…" axis-sub note
   (12px / #777). Uses the hero note's full font stack (with system-ui / Segoe UI
   / Roboto): IBM Plex Sans isn't actually loaded here, and that middle of the
   chain is what makes the two resolve to the same fallback font. */
.portfoliocharts-global-explorer-filter-note {
    font-family: 'IBM Plex Sans', -apple-system, 'system-ui', 'Segoe UI', Roboto, sans-serif;
    /* 12px is the SVG notes' size in the 800-wide viewBox; 1.5cqw (= 12/800 of
       the chart width) reproduces their scaled-down rendered size, so all notes
       match at any width. The px line is the fallback where cqw is unsupported. */
    font-size: 12px;
    font-size: 1.5cqw;
    line-height: 1.2;
    color: #777;
    text-align: right;
}

/* "Explore by" metric selector — sits above the hero, chooses the stat the whole
   board is ranked and detailed by. The <select> itself reuses the toolkit's
   .portfoliocharts-select--dashboard styling (see "Shared native select styling");
   only the bar layout and the label are Global Explorer-specific here, and the label matches
   the dashboard selector's title. */
.portfoliocharts-global-explorer-metric-bar {
    /* Shrink-to-fit so the label can centre over the dropdown; inset the left edge
       by the hero's margin.left (70) / width (800) = 8.75% so the dropdown lines up
       with the chart's content-left (title/plot), which scales the same way since
       the SVG is width:100%. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px 0 16px 8.75%;
}

.portfoliocharts-global-explorer-metric-label {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    /* Neutralise the theme's default label/form margins so the flex `gap` is the
       only spacing between the label and the dropdown (otherwise the theme margin
       dominates and shrinking the gap looks like nothing changed). */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.portfoliocharts-global-explorer-metric-bar .portfoliocharts-global-explorer-metric-select {
    margin: 0 !important;
}

/* Portfolios-shown slider */
.portfoliocharts-global-explorer-slider {
    max-width: 280px;
}

.portfoliocharts-global-explorer-slider-value {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.portfoliocharts-global-explorer-slider-input {
    width: 100%;
    accent-color: #4AACC5;
    cursor: pointer;
}

.portfoliocharts-global-explorer-slider-ends {
    display: flex;
    justify-content: space-between;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* Best / worst segmented toggle */
.portfoliocharts-global-explorer-toggle {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.portfoliocharts-global-explorer-toggle-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: none;
    padding: 5px 18px;
    cursor: pointer;
}

.portfoliocharts-global-explorer-toggle-btn + .portfoliocharts-global-explorer-toggle-btn {
    border-left: 1px solid #d1d5db;
}

.portfoliocharts-global-explorer-toggle-on {
    background: #4AACC5;
    color: #fff;
}

/* Pagination bar between the hero chart and the detail panel. Pages run
   best-first; the last page is the worst cases. */
.portfoliocharts-global-explorer-pager-bar {
    display: flex;
    justify-content: center;
    margin: -6px 0 14px;
}

.portfoliocharts-global-explorer-pager-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.portfoliocharts-global-explorer-pager-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-width: 34px;
    padding: 6px 10px;
    cursor: pointer;
}

/* Neutralise the theme's button :focus/:active colours (it tints them red) so
   these controls keep their own look — including a just-clicked or disabled one. */
.portfoliocharts-global-explorer-pager-btn:focus,
.portfoliocharts-global-explorer-pager-btn:focus-visible,
.portfoliocharts-global-explorer-pager-btn:active {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
    outline: none;
    box-shadow: none;
}

.portfoliocharts-global-explorer-pager-btn:hover:not([disabled]) {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.portfoliocharts-global-explorer-pager-btn[disabled],
.portfoliocharts-global-explorer-pager-btn[disabled]:hover,
.portfoliocharts-global-explorer-pager-btn[disabled]:focus,
.portfoliocharts-global-explorer-pager-btn[disabled]:active {
    background: #fff;
    color: #d1d5db;
    border-color: #e5e7eb;
    cursor: default;
    outline: none;
    box-shadow: none;
}

.portfoliocharts-global-explorer-pager-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    min-width: 96px;
    text-align: center;
}

/* Click-to-edit page number inside the pager label */
.portfoliocharts-global-explorer-pager-num {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #333;
    background: transparent;
    border: none;
    border-bottom: 1px dashed #b0b0b0;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    line-height: 1;
}

.portfoliocharts-global-explorer-pager-num:hover {
    color: #000;
    border-bottom-color: #888;
}

.portfoliocharts-global-explorer-pager-input {
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: #333;
    width: 3.5em;
    text-align: center;
    padding: 0 2px;
    margin: 0;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
}

.portfoliocharts-global-explorer-pager-input:focus {
    outline: none;
    border-color: #555;
}

/* "Find a specific portfolio" — a collapsed disclosure that sits with the
   filters. Closed by default so the standard view is unchanged. */
.portfoliocharts-global-explorer-find {
    max-width: 50%;
    margin: 0 auto 56px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.portfoliocharts-global-explorer-find-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #f9fafb;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: center;
}

.portfoliocharts-global-explorer-find-toggle:hover {
    background: #f3f4f6;
}

.portfoliocharts-global-explorer-find-toggle:focus,
.portfoliocharts-global-explorer-find-toggle:focus-visible,
.portfoliocharts-global-explorer-find-toggle:active {
    background: #f3f4f6;
    color: #555;
    outline: none;
    box-shadow: none;
}

/* The title text matches the pager label. It must live on this inner span, not
   the button: the theme overrides <button> font-size/color with !important, but
   does not target spans, so a plain rule here wins (exactly as the pager label,
   a span, does). */
.portfoliocharts-global-explorer-find-toggle-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.portfoliocharts-global-explorer-find-body {
    padding: 12px 16px 16px;
    border-top: 1px solid #e5e7eb;
}

/* Nine slot steppers in a single column. */
.portfoliocharts-global-explorer-find-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.portfoliocharts-global-explorer-find-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.portfoliocharts-global-explorer-find-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.portfoliocharts-global-explorer-find-label {
    flex: 1 1 auto;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfoliocharts-global-explorer-find-stepper {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.portfoliocharts-global-explorer-find-step {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    padding: 0;
    cursor: pointer;
}

.portfoliocharts-global-explorer-find-step:hover:not([disabled]) {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.portfoliocharts-global-explorer-find-step:focus,
.portfoliocharts-global-explorer-find-step:focus-visible,
.portfoliocharts-global-explorer-find-step:active {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
    outline: none;
    box-shadow: none;
}

.portfoliocharts-global-explorer-find-step[disabled] {
    color: #d1d5db;
    border-color: #e5e7eb;
    cursor: default;
}

.portfoliocharts-global-explorer-find-val {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    min-width: 3em;
    text-align: right;
}

.portfoliocharts-global-explorer-find-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* The divider now sits above the total, so the total reads below the line. */
.portfoliocharts-global-explorer-find-total {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #555;
    text-align: right;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f1f3;
}

.portfoliocharts-global-explorer-find-total-ok {
    color: #555;
}

.portfoliocharts-global-explorer-find-go,
.portfoliocharts-global-explorer-find-clear {
    font-family: 'DM Sans', sans-serif;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
}

/* Button labels sit in spans so their size beats the theme's !important on
   <button>. Colour follows the button (white on the filled Find, grey on Clear). */
.portfoliocharts-global-explorer-find-btn-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.portfoliocharts-global-explorer-find-go .portfoliocharts-global-explorer-find-btn-text    { color: #fff; }
.portfoliocharts-global-explorer-find-clear .portfoliocharts-global-explorer-find-btn-text { color: #6b7280; }
.portfoliocharts-global-explorer-find-go[disabled] .portfoliocharts-global-explorer-find-btn-text { color: #f8fafc; }

.portfoliocharts-global-explorer-find-go {
    color: #fff;
    background: #e06d5e;
    border: 1px solid #e06d5e;
}

.portfoliocharts-global-explorer-find-go:hover:not([disabled]),
.portfoliocharts-global-explorer-find-go:focus:not([disabled]),
.portfoliocharts-global-explorer-find-go:active:not([disabled]) {
    background: #e8897d;
    border-color: #e8897d;
    color: #fff;
    outline: none;
    box-shadow: none;
}

.portfoliocharts-global-explorer-find-go[disabled] {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #f8fafc;
    cursor: default;
}

.portfoliocharts-global-explorer-find-clear {
    color: #6b7280;
    background: #fff;
    border: 1px solid #d1d5db;
}

.portfoliocharts-global-explorer-find-clear:hover,
.portfoliocharts-global-explorer-find-clear:focus,
.portfoliocharts-global-explorer-find-clear:active {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #9ca3af;
    outline: none;
    box-shadow: none;
}

.portfoliocharts-global-explorer-find-msg {
    margin: 10px 0 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    min-height: 1em;
    text-align: center;
    color: #555;
}

.portfoliocharts-global-explorer-find-msg-ok   { color: #555; }
.portfoliocharts-global-explorer-find-msg-warn { color: #b45309; }
.portfoliocharts-global-explorer-find-msg-info { color: #555; }

.portfoliocharts-global-explorer-asset-grid,
.portfoliocharts-global-explorer-country-grid {
    display: grid;
    gap: 2px 12px;
}

/* 9 assets in two columns, filling down (5 + 4) rather than across, so the
   stocks / bonds / other grouping in slotOrder stays readable. */
.portfoliocharts-global-explorer-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
}

.portfoliocharts-global-explorer-country-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfoliocharts-global-explorer-check {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 2px 0;
    cursor: pointer;
    user-select: none;
}

.portfoliocharts-global-explorer-check-label {
    font-size: 13px;
    color: #666;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfoliocharts-global-explorer-check-off .portfoliocharts-global-explorer-check-label {
    color: #999;
}

.portfoliocharts-global-explorer-check-box {
    flex: 0 0 auto;
    width: 30px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.portfoliocharts-global-explorer-check-tick {
    color: #fff;
    font-size: 14px;
    line-height: 1;
}

/* The real input drives state; the styled box is the visible control. */
.portfoliocharts-global-explorer-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Dimmed while a filter change is in flight */
.portfoliocharts-global-explorer-loading {
    opacity: 0.45;
    transition: opacity 0.15s;
}

/* SVG (scatter + detail panel share one viewBox) */
.portfoliocharts-global-explorer-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Hero page-slide: only the clipped columns layer moves. The incoming page group
   is built one plot-width to the side and the slider translates to it, while the
   title, axes and labels stay fixed. */
.portfoliocharts-global-explorer-cols-slider {
    will-change: transform;
    transition: transform 280ms ease;
}

/* Positioning context for the hero hover note. */
.portfoliocharts-global-explorer-chart-area {
    position: relative;
}

/* Hover note: names the asset type of the column segment under the cursor. */
.portfoliocharts-global-explorer-hero-tip {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: rgba(75, 85, 99, 0.95);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Axis tick text and the primary axis labels reuse the shared Optimizer
   classes (.axis / .portfoliocharts-axis-label) so the two scatter charts stay
   in visual lockstep. Only the Global Explorer-specific "worst case across countries"
   subtitle below each label is styled here. */
/* Small annotation labels, all sharing the hero sub-heading's style: the
   "Each column…" caption and the per-country chart's "Worst Case" label +
   year values. */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-axis-sub,
.portfoliocharts-chart-content .portfoliocharts-global-explorer-country-year {
    font-size: 12px;
    fill: #777;
}

/* Broken-axis band — blanks the gap when an axis starts above 0, so the grid
   stops cleanly at the first value instead of running to the axis line. */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-axis-break {
    fill: #ffffff;
}

/* Cursor lives on the group so the 10,000 circles need no per-node styling. */
/* The dots are not hit-tested — the overlay above them is, via a quadtree — so
   they carry no cursor or :hover of their own. The highlight ring marks the
   point under the pointer instead. */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-tip-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    fill: #333;
}

/* Detail panel — mirrors the Optimizer's */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-tab-text {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-detail-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    fill: #888;
}

/* Column headings — "Asset Allocation", "<metric> by Country" — and the
   "<metric>: <value>" stat line below the country chart, which reads as a heading
   of the same rank. One rule rather than a matching copy, so the stat line cannot
   drift away from the title it echoes. */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-col-title,
.portfoliocharts-chart-content .portfoliocharts-global-explorer-stat-line {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    fill: #666;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-bar-title {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    fill: #555;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-bar-value {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    fill: #555;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-bar-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
}

/* The donut's asset list: one row per holding, swatch + name + percentage.
   Swatches repeat the donut's own fill (hatch included) and are built in JS.
   Rows highlight while the matching donut slice is hovered — which is what
   replaced the single "30% Domestic Stocks" line that used to sit here. */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-alloc-name,
.portfoliocharts-chart-content .portfoliocharts-global-explorer-alloc-pct {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    fill: #555;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-alloc-pct {
    font-weight: 600;
    fill: #333;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-alloc-swatch {
    stroke: #ffffff;
    stroke-width: 1;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-alloc-row.is-active text {
    font-weight: 700;
    fill: #111;
}

/* The salmon box around the stat lines — the one spot of colour in an otherwise
   greyscale panel, so the chart's conclusion is findable at a glance. Shaped like
   the "Explore by" dropdown (1px border, 4px radius); unfilled, so it sits on the
   panel rather than becoming a second surface. Its size is set in JS from the text
   it wraps, since the metric names differ in length. */
.portfoliocharts-chart-content .portfoliocharts-global-explorer-stat-box {
    fill: none;
    stroke: #e06d5e;
    stroke-width: 1;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-stat-rank {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    fill: #777;   /* matches the filter "Considered…" notes */
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-swr-endpoint {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    fill: #374151;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-country-val {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    fill: #555;
}

.portfoliocharts-chart-content .portfoliocharts-global-explorer-worst-rule {
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

/* ── Optimizer: the donut's asset list ───────────────────────────
   Same treatment as the Global Explorer legend: swatch + name + percentage, with
   the row marked while its slice is hovered. Swatch fills come from
   PortfolioDonutChart.swatchFill in JS, so only type and state live here.

   These carry the project class prefix, unlike the file's other opt-* names —
   those are JS-only markers that no stylesheet matches, whereas these are real
   rules and so need to be safe from theme collisions. */
.portfoliocharts-chart-content .portfoliocharts-opt-alloc-name,
.portfoliocharts-chart-content .portfoliocharts-opt-alloc-pct {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    fill: #555;
}

.portfoliocharts-chart-content .portfoliocharts-opt-alloc-pct {
    font-weight: 600;
    fill: #333;
}

.portfoliocharts-chart-content .portfoliocharts-opt-alloc-swatch {
    stroke: #ffffff;
    stroke-width: 1;
}

.portfoliocharts-chart-content .portfoliocharts-opt-alloc-row.is-active text {
    font-weight: 700;
    fill: #111;
}

/* ── Summary Stats ───────────────────────────────────────────────
   [SummaryStats] block. Unlike the charts this is plain document
   content, not a scaled embed, so it inherits the host page's font
   and flows at the page's own width. */

.portfoliocharts-summary-stats {
    margin: 0 0 32px;
    transition: opacity 0.15s ease;
}

.portfoliocharts-summary-stats.portfoliocharts-ss-stale {
    opacity: 0.45;
}

/* Matches the Full UI's portfolio name (.portfoliocharts-full-ui-title). The
   font stack is copied verbatim rather than resolved: IBM Plex Sans is not
   loaded anywhere in the plugin, so both titles fall through to the same
   -apple-system fallback and only stay matched if the stacks stay identical.
   The Full UI's editing affordances — nowrap, ellipsis, hover underline,
   text cursor — are deliberately not carried over; this title is not
   editable and needs to wrap on narrow screens. */
.portfoliocharts-ss-title {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 6px;
    text-align: center;
}

.portfoliocharts-ss-lede {
    margin: 0 0 50px;
    line-height: 1.6;
}

/* Horizontal hairlines only: no column rules, and `border: none` to drop the
   theme's own default table border (illustratr draws a 1px #f1f2f3 frame on
   every table — omitting a border rule here is not enough to remove it).

   No font-size: the VISIBLE block — lede, this table — keeps the theme's
   body size on purpose (user, 2026-08-20: a same-day move of the whole block
   to ChartStats' 14px was reverted; only the disclosed all-countries content
   matches ChartStats — see .portfoliocharts-ss-countries-table). */
.portfoliocharts-ss-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin: 0;
}

/* Deliberately larger than the title's 6px margin above — the caption sits
   close to the heading it belongs with and is set apart from the table below.
   Note the two are not comparable as written: title and caption run at
   different line-heights (33.6px vs 22.95px), so each carries different
   half-leading inside its box and equal numbers here would not read as equal
   white space. */
.portfoliocharts-ss-caption {
    text-align: center;
    caption-side: top;
    padding: 0 0 18px;
    color: #7f8d8c;
    font-size: 0.85em;
}

.portfoliocharts-ss-table thead th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid #ccc;
    font-weight: 600;
    color: #333;
}

.portfoliocharts-ss-table tbody th,
.portfoliocharts-ss-table tbody td {
    padding: 9px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: middle;
}

.portfoliocharts-ss-table tbody tr:last-child th,
.portfoliocharts-ss-table tbody tr:last-child td {
    border-bottom: none;
}

/* Measure names are <th scope="row"> because this is a data table and the
   row header is what makes each value self-describing. Themes style every
   th alike, though — illustratr fills them #f1f2f3 — which would paint the
   whole first column like the header row. Transparent (not #fff) so it
   matches the sibling td cells on any page background. */
.portfoliocharts-ss-table tbody th.portfoliocharts-ss-col-measure {
    text-align: left;
    font-weight: 400;
    background: transparent;
}

/* Leading column, matching the AssetAllocation table's "%" column
   (.portfoliocharts-aa-col-pct): same 60px width and tabular figures, but
   right-justified rather than centered. Doubly-classed so it outranks
   `.portfoliocharts-ss-table thead th`, which would otherwise left-align the
   "#" header away from its column. */
.portfoliocharts-ss-table .portfoliocharts-ss-col-value {
    text-align: center;
    width: 60px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* #333, matching the AssetAllocation percentages. That table sets its own
   colour on the .portfoliocharts-asset-allocation wrapper; this block inherits
   the theme's lighter body colour instead, so the numbers only line up if this
   is stated explicitly. Body cells only — the "#" header keeps the header
   colour. */
.portfoliocharts-ss-table tbody td.portfoliocharts-ss-col-value {
    color: #333;
}

.portfoliocharts-ss-col-measure {
    width: 35%;
}


/* Definitions column. No font-family: it inherits the host theme's face, the
   same way the Assets Explorer table does (that block sets a size and colour
   but deliberately no family — only its labels and selects use IBM Plex Sans).

   Body only — the header row stays uniform across all three columns. At this
   size the column wraps comfortably even on a phone, which is what lets the
   table keep three columns without ever hiding one. */
.portfoliocharts-ss-table tbody td.portfoliocharts-ss-col-desc {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* ── All home countries ──────────────────────────────────────────
   Collapsed disclosure holding one row per home country. Collapsed is a
   presentation choice, not a hiding one: the rows are in the markup whether
   or not it is open, which is what makes them readable to anything that
   extracts text from the page (see summary-stats.md). Never swap this for a
   hidden div — content served to crawlers but never rendered is cloaking. */
.portfoliocharts-ss-countries {
    margin: 28px 0 0;
}

/* Typed to match the definitions column (`.portfoliocharts-ss-col-desc`):
   same 13px/400/1.4, no colour of its own, and no font-family so it inherits
   the host theme's face. Those two must be kept in step — including the
   700px step up to 15px at the end of this section. The label is part of the
   VISIBLE block, so it stays on the page's own scale; only the disclosed
   content below it runs at ChartStats' 14px.

   The default disclosure triangle is replaced with one drawn in currentColor,
   so it follows the inherited text colour instead of Safari's black native
   marker. list-style covers Firefox/Chrome; ::-webkit-details-marker covers
   older Safari, which ignores list-style on summary. */
.portfoliocharts-ss-countries-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

.portfoliocharts-ss-countries-summary::-webkit-details-marker {
    display: none;
}

.portfoliocharts-ss-countries-summary::before {
    content: '';
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

.portfoliocharts-ss-countries[open] > .portfoliocharts-ss-countries-summary::before {
    transform: rotate(90deg);
}

/* Hover feedback without a resting-state difference: the label must match the
   definitions text when idle, and an underline only on hover keeps it feeling
   like the control it is. Keyboard focus is left to the browser's own ring. */
.portfoliocharts-ss-countries-summary:hover {
    text-decoration: underline;
}

/* Heading over the disclosed all-countries content — "Summary Stats by Home
   Country", first thing inside the open disclosure (user, 2026-08-20).
   .portfoliocharts-cs-title's type (22px/700, #333, no font-family so the
   theme's face applies) so the two stats blocks head their disclosed data
   identically site-wide — keep the sizes in step by hand. Centered is the
   one deliberate difference: ChartStats' disclosed content is left-aligned
   and its heading follows it; this block's caption and table values are
   centered, so this heading follows them. Its own class rather than the
   shared one on purpose — the cs-title comment in the Chart Stats section
   explains why cross-block heading classes went wrong before. */
.portfoliocharts-ss-section-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #333;
    margin: 16px 0 8px;
}

/* Eight columns will not fit a phone. The wrapper scrolls so the page does
   not — the one place in this block where content can be out of view, and it
   is reachable by scroll or keyboard rather than gone. */
.portfoliocharts-ss-countries-scroll {
    overflow-x: auto;
    padding-top: 12px;
}

/* The 12px above is sized against the summary label, for the heading="none"
   case where the table follows it directly. With the disclosure heading in
   between, that padding stacked onto the heading's 8px margin and pushed
   the caption 20px away — ChartStats runs 8px between its block heading and
   the line below (.portfoliocharts-cs-title margin-bottom, next paragraph
   margin 0), so the heading's own margin is the whole gap (user,
   2026-08-20). */
.portfoliocharts-ss-section-title + .portfoliocharts-ss-countries-scroll {
    padding-top: 0;
}

/* 14px like .portfoliocharts-cs-table (user, 2026-08-20): the DISCLOSED
   content — this table and the deep-link note under it — matches ChartStats,
   whose tables are the same kind of machine-facing grid. The visible block
   above (lede, main table, disclosure label) deliberately keeps the theme's
   own scale; a same-day move of the whole block to 14px was reverted. */
.portfoliocharts-ss-countries-table {
    font-size: 14px;
}

/* The caption joins the rest of the disclosed content at the full 14px
   (user, 2026-08-20 — the shared class's 0.85em resolved against the table
   size and left it the one smaller line in the section; ChartStats' table
   captions were fixed the same way, same day). The muted colour is what
   keeps it reading as a caption; it does not need to be small too. The base
   0.85em stays for the visible main-table caption above, which sizes
   against the theme's body text instead. */
.portfoliocharts-ss-countries-table .portfoliocharts-ss-caption {
    font-size: 14px;
}

/* Country names, not measure labels: the 35% hint sized for a three-column
   table is far too wide here, and the value columns need the room. */
.portfoliocharts-ss-countries-table th.portfoliocharts-ss-col-measure {
    width: auto;
    white-space: nowrap;
    padding-right: 16px;
}

/* Values match the country names beside them, which take the theme's body
   colour. The base rule above paints value cells #333 to line up with the
   AssetAllocation percentages — right for the main table, where the value is
   the row's subject, but here it would make the numbers darker than the
   labels for no reason. `inherit` rather than a literal so the two cannot
   drift apart if the page's colour changes.

   Body cells only: the header row keeps the header colour, same as the main
   table. Equal specificity to the base rule, so this must stay after it. */
.portfoliocharts-ss-countries-table tbody td.portfoliocharts-ss-col-value {
    color: inherit;
}

/* Short headers carry the full label in a title attribute. Kill the browser
   default underline/help cursor — the main table above already spells every
   measure out, so this is a reminder, not the primary definition. */
.portfoliocharts-ss-countries-table abbr[title] {
    text-decoration: none;
    cursor: inherit;
    border-bottom: none;
}

/* No styling for the rendered country's row — every row looks the same, by
   decision (2026-08-17). The .portfoliocharts-ss-country-current class is
   still applied by the renderer and still tracked by the country-switch JS,
   so a marker can be reinstated here without touching PHP; it just draws
   nothing today. */

/* The ?home= deep-link note inside the disclosure, below the countries
   table — the portfolio pages' counterpart of .portfoliocharts-cs-deeplink,
   and typed identically: 14px body with the <code> runs a point smaller so
   the URL grammar reads as an annotation inside the sentence, not shouting
   over it. Part of the disclosed content, so it shares that content's
   ChartStats sizing rather than the visible block's theme scale. */
.portfoliocharts-ss-deeplink {
    font-size: 14px;
    line-height: 1.5;
    margin: 1.5em 0 0;
}

.portfoliocharts-ss-deeplink code {
    font-size: 13px;
}

/* The block's only responsive rules, and they change wrapping and size only —
   nothing is ever display:none, which is the point (see summary-stats.md).
   These must stay at the end of the section: media queries add no specificity,
   so an identical selector earlier in the file would simply lose to the base
   rules above.

   nowrap makes each measure label its own min-content width, which auto table
   layout honours over the 35% hint, so the column sizes itself to the longest
   label and the definitions column absorbs the difference. Both are released
   below 700px, where a ~263px measure column would push the table past a
   phone's width and the smaller definition text wraps more tightly. */
@media (min-width: 700px) {
    .portfoliocharts-ss-table .portfoliocharts-ss-col-measure {
        white-space: nowrap;
    }
    /* The disclosure label tracks the definitions text at both sizes — it is
       styled to match it, so a step here without the other would split them
       apart above 700px only. Visible text only: the countries table and
       deep-link note inside the disclosure hold ChartStats' fixed 14px. */
    .portfoliocharts-ss-table tbody td.portfoliocharts-ss-col-desc,
    .portfoliocharts-ss-countries-summary {
        font-size: 15px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   Chart Stats ([ChartStats] shortcode)
   ═══════════════════════════════════════════════════════════════════
   A chart's headline measures for every standard portfolio in every home
   country, server-rendered inside a collapsed <details> — the chart-page
   counterpart of the Summary Stats all-countries table, and it borrows that
   block's disclosure (.portfoliocharts-ss-countries*) and scroll wrapper. It
   does NOT borrow the heading: see .portfoliocharts-cs-title below. Visible
   when closed is the summary line alone; the chart above is the page's
   content. Three type sizes only: 22px and 18px for the heading levels,
   14px for everything a person reads as text.
   See docs/architecture/chart-stats.md.

   Same no-hiding rule as Summary Stats: nothing here is ever display:none.
   The disclosure is collapsed by default, and that is the only sense in
   which any of it is out of view. */
.portfoliocharts-chart-stats {
    margin: 0;
}

/* Heading and lede live INSIDE the disclosure (2026-08-19), so the block's
   whole visible footprint on a closed chart page is the summary line.

   The block runs on three sizes (2026-08-19): 22px for this heading — the
   title of the disclosed content, set apart from the twelve country
   headings by size as well as weight; 18px for the country headings; 14px for the summary label, the lede, the deep-link
   note and the tables.

   All of these are corrections, not defaults. The title first borrowed
   `.portfoliocharts-ss-title` (28px/700, centered, IBM Plex) from Summary
   Stats, where it is the page's heading for a block a person reads; here it
   labels disclosed data behind a control, and at 28px over 22px lede text it
   shouted louder than the chart it belongs to. It then sat at 18px left,
   level with the country headings, which read as the first of thirteen
   rather than the title of all of them — 22px is the middle (user,
   2026-08-19; tried centered, left-aligned like the rest of the block). The lede was worse — it set no size at all, so it inherited
   the theme's 22px body text and came out larger than the country headings
   under it.

   Do not reintroduce `.portfoliocharts-ss-title` on this heading. It also
   carries a font-family (IBM Plex Sans, falling through to -apple-system)
   that differs from the Source Sans Pro everything else here inherits from
   the theme, which is invisible at a glance and wrong at this size.

   .portfoliocharts-ss-section-title copies this rule's type — size, weight,
   colour (2026-08-20, alignment deliberately differs) — so the Summary Stats
   disclosure heading matches this one; a type change here must be mirrored
   there. */
.portfoliocharts-cs-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: #333;
    margin: 16px 0 8px;
}

.portfoliocharts-cs-lede {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 4px;
}

/* The "about" paragraph — what the chart itself shows — sits directly under
   the title on every page (2026-08-19). What follows carries the gap: in
   table mode the deep-link note, then the lede (which otherwise sits tight
   over the tables it introduces); in description mode the "where the
   numbers are" paragraph. */
.portfoliocharts-cs-about {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* The table heading — "Withdrawal Rates by Portfolio and Home Country" —
   sits between the deep-link note and the lede, one level under the block
   heading and one over the twelve country headings (2026-08-19). Same
   22px/700 as the block heading (user: the two are peers on the page even
   though the outline nests them — each opens its own half of the block);
   the one-line gap above it is the block's standard. The lede under it is
   tight, like a lede under any heading. */
.portfoliocharts-cs-table-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 1.5em 0 4px;
    color: #333;
}

/* The deep-link note under the lede: same 14px body, separated from the
   lede by one blank line (1.5em at 14px = the line-height, so the gap is
   exactly one line of text) and a touch more room below before the first
   country heading. The <code> runs inherit the page's code styling; only
   the size is pinned so the URL grammar doesn't shrink against the
   sentence around it. */
.portfoliocharts-cs-deeplink {
    font-size: 14px;
    line-height: 1.5;
    margin: 1.5em 0 0;
}

.portfoliocharts-cs-deeplink code {
    font-size: 13px;
}

/* Description-mode paragraphs: the "where the numbers are" sentence and the
   two code lists. Both pin their size for the same reason the lede does —
   text added to this block without one inherits the theme's 22px body and
   comes out larger than the headings above it. The code lists are given a
   little extra line-height because they are long runs of Name (code) pairs
   that wrap several times.

   Every paragraph in the block is separated by one blank line — the same
   1.5em (= one line-height at 14px) the deep-link note uses. Uniform on
   purpose: in description mode the block is four or five paragraphs of solid
   text with no tables to break it up, and the code lists in particular wrap
   to several lines each, so anything tighter runs them together. */
.portfoliocharts-cs-where {
    font-size: 14px;
    line-height: 1.5;
    margin: 1.5em 0 0;
}

.portfoliocharts-cs-codelist {
    font-size: 14px;
    line-height: 1.6;
    margin: 1.5em 0 0;
}

/* Portfolio names in the code list link to their own pages, where the
   citable numbers are. Same deliberate 400 weight as the Matrix links: the
   list is a reference, and bold links would make it a wall of emphasis. */
.portfoliocharts-cs-codelist a {
    font-weight: 400;
}

/* The ?pk= / ?home= code that follows each portfolio name and country
   heading — "Golden Butterfly (gb)", "Australia (aus)". Muted and lighter so
   it reads as an annotation, never as part of the name. Also used by the
   Summary Stats all-countries table (2026-08-20), whose deep-link note cites
   these codes the same way. */
.portfoliocharts-cs-code {
    font-weight: 400;
    color: #7f8d8c;
}

/* The disclosure label shares its class with the Summary Stats one, which
   steps 13px -> 15px at 700px to track that block's definitions column. This
   block has no definitions column to track, so it is pinned to the same 14px
   as the lede and the tables. Two classes plus the child combinator, so it outranks
   the single-class media query at the end of the Summary Stats section
   regardless of source order. */
.portfoliocharts-cs-details > .portfoliocharts-ss-countries-summary {
    font-size: 14px;
    /* Centred (user, 2026-08-19): the block sits last on a chart page, after
       the Articles list and directly above the breadcrumb, where a single
       left-aligned line under a list reads as a stray item. The summary is
       a flex row (triangle + label), so justify-content centres the pair.
       Only the control is centred: the disclosed content keeps the block's
       left alignment, which the heading experiment earlier the same day
       settled. */
    justify-content: center;
}

/* The disclosure is the block's only child, so it carries no gap of its own —
   the surrounding page content sets the spacing. */
.portfoliocharts-chart-stats .portfoliocharts-cs-details {
    margin-top: 0;
}

.portfoliocharts-cs-country {
    margin: 26px 0 0;
}

/* Country headings are h3 (or h4 under an h3 block heading). 18px, matching
   the block heading rather than sitting under it — a country name is the
   anchor a person scans for once the disclosure is open, so it keeps the size
   the theme's heading scale would give it. The lighter 600 weight is what
   separates it from the block title. No font-family, so it inherits the
   page's face like the table. */
.portfoliocharts-cs-country-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 2px;
    color: #333;
}

/* Same hairline table as Summary Stats (border: none drops illustratr's
   #f1f2f3 frame). Cells carry no classes — the renderer emits 252 compact
   rows per block — so everything is addressed through the table. */
.portfoliocharts-cs-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    margin: 0;
    font-size: 14px;
}

/* The caption repeats the block title, country and vintage for anything
   that lifts the table out on its own; on the page it sits under the
   country heading, left rather than centred like the Summary Stats caption.
   Full 14px like everything else in the block (user, 2026-08-20 — the
   shared class's 0.85em resolved against the table's 14px and made the
   caption the one smaller line; the muted colour alone marks it as a
   caption). The Summary Stats countries-table caption was fixed the same
   way, same day. */
.portfoliocharts-cs-table caption.portfoliocharts-ss-caption {
    text-align: left;
    padding: 0 0 8px;
    font-size: 14px;
}

.portfoliocharts-cs-table thead th {
    text-align: center;
    padding: 6px 6px;
    border-bottom: 2px solid #ccc;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.portfoliocharts-cs-table thead th:first-child {
    text-align: left;
}

.portfoliocharts-cs-table tbody th,
.portfoliocharts-cs-table tbody td {
    padding: 7px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: middle;
}

.portfoliocharts-cs-table tbody tr:last-child th,
.portfoliocharts-cs-table tbody tr:last-child td {
    border-bottom: none;
}

/* Portfolio names are row headers; reset the theme's th fill (see the
   Summary Stats note) and keep them on one line so the table scrolls
   sideways rather than wrapping names into two-line rows. */
.portfoliocharts-cs-table tbody th {
    text-align: left;
    font-weight: 400;
    background: transparent;
    white-space: nowrap;
    padding-right: 14px;
}

.portfoliocharts-cs-table tbody td {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.portfoliocharts-cs-table abbr[title] {
    text-decoration: none;
    cursor: inherit;
    border-bottom: none;
}