/**
 * 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 ────────────────────────────────────────── */

.portfoliocharts-embed-wrap select.portfoliocharts-select,
.portfoliocharts-asset-builder 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 {
    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;
}

.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-content svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Loading Spinner */
.portfoliocharts-chart-loading {
    text-align: center;
    color: #666;
}

.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); }
}

/* 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;
}

.portfoliocharts-embed-wrap select.portfoliocharts-home-country-select {
    font-size: 16px;
    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;
}


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

.portfoliocharts-dashboard-selector {
    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-dashboard-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-dashboard-next-btn,
.portfoliocharts-embed-wrap .portfoliocharts-dashboard-random-btn {
    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-dashboard-next-btn:hover,
.portfoliocharts-dashboard-random-btn:hover {
    background: #999;
    border-color: #999;
}

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

/* In dashboard mode only one chart shows at a time — override the
   multi-chart sibling spacing so every chart gets the same margin. */
.portfoliocharts-embed-wrap .portfoliocharts-dashboard-selector ~ .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 */
    margin-bottom: 96px;
}

.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 {
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.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;
}

/* Footer bar */
.portfoliocharts-full-ui-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding: 9.5px 16px;
}

.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; }

.portfoliocharts-full-ui-footer .portfoliocharts-portfolio-ui-error {
    flex: 1;
    margin: 0;
}


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

/* Gauge / Update button — full UI */
.portfoliocharts-chart-this-btn-full {
    width: 300px;
    height: 45px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: --portfoliocharts-gauge-pct 0.25s ease, width 0.25s ease;
}

.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;
}

.portfoliocharts-chart-this-btn-full:not(:disabled) {
    background: #e06d5e;
    color: #fff;
}

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

.portfoliocharts-chart-this-btn-full:not(:disabled):focus {
    outline: none;
    background: #e06d5e;
}

.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 18px;
    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;
}

.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%;
}

.portfoliocharts-aa-header {
    margin-bottom: 16px;
}

.portfoliocharts-aa-country-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

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

.portfoliocharts-asset-allocation select.portfoliocharts-aa-country-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 200px;
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 16px;
    text-align: center;
    text-align-last: center;
    font-weight: 700;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 22.5px;
    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-aa-country-select:hover {
    background-color: #e4e4e4;
    border-color: #bbb;
}

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

.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);
}