/* App-wide component contract. See docs/UISTANDARD.md. Domain styles own
   content and chart geometry; these rules own shared structure and states. */
:root {
  --ui-gap: 12px;
  --ui-section-gap: 16px;
  --ui-heading-gap: 12px;
  --ui-heading-kpi-size: 24px;
  --ui-dialog-padding-x: 28px;
  --ui-dialog-padding-y: 24px;
  --ui-dialog-compact: 520px;
  --ui-dialog-form: 680px;
  --ui-dialog-standard: 760px;
  --ui-dialog-editor: 860px;
  --ui-dialog-table: 980px;
  --ui-dialog-preview: 1100px;
  --ui-dialog-wide: 1180px;
}
[data-dialog-size="compact"] { --dialog-width: var(--ui-dialog-compact); }
[data-dialog-size="form"] { --dialog-width: var(--ui-dialog-form); }
[data-dialog-size="standard"] { --dialog-width: var(--ui-dialog-standard); }
[data-dialog-size="editor"] { --dialog-width: var(--ui-dialog-editor); }
[data-dialog-size="table"] { --dialog-width: var(--ui-dialog-table); }
[data-dialog-size="preview"] { --dialog-width: var(--ui-dialog-preview); }
[data-dialog-size="wide"] { --dialog-width: var(--ui-dialog-wide); }
:root body .asset-editor.dialog-standard {
  width: min(var(--dialog-width, var(--ui-dialog-standard)), var(--dialog-available-width));
  max-width: var(--dialog-available-width);
}
:root body .asset-editor__header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--ui-gap) 24px; padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x) 18px;
}
:root body .asset-editor__header > h2 { min-width: 0; overflow-wrap: anywhere; }
:root body .asset-editor__header .asset-editor__tabs {
  margin-left: auto; max-width: 100%; flex-wrap: wrap;
}
:root body .asset-editor__panel {
  padding: var(--ui-dialog-padding-y) var(--ui-dialog-padding-x) 28px;
}
:root body dialog .asset-editor__actions {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: 10px;
  padding: 16px var(--ui-dialog-padding-x);
}
:root body dialog .asset-editor__actions > * { flex: 0 0 auto; }
:root body dialog .asset-editor__actions > :is(.secondary-button, [data-asset-editor-close]) { order: 1; }
:root body dialog .asset-editor__actions > .primary-button { order: 2; }
:root body dialog[data-dialog-kind="confirmation"] .asset-editor__actions > .danger-button { order: 2; }
/* Footer-in-panel and footer-under-shell share the same visible padding. */
:root body .asset-editor__panel .asset-editor__actions {
  margin: 26px calc(-1 * var(--ui-dialog-padding-x)) -28px;
}
:root body .asset-editor__shell > .asset-editor__actions { position: static; margin: 0; flex-shrink: 0; }

/* Titles/descriptions and controls always occupy the same two slots. */
:root body .ui-panel-heading {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--ui-heading-gap) 20px;
  width: auto; min-width: 0; margin-bottom: 16px;
}
:root body .ui-panel-heading > .ui-heading-copy {
  flex: 1 1 280px; min-width: 0; max-width: 100%;
}
/* Compact summaries size the title by its content, not chart-description space. */
:root body .ui-panel-heading--compact > .ui-heading-copy { flex-basis: auto; }
:root body .ui-panel-heading > :is(h2, h3) { flex: 1 1 240px; min-width: 0; margin: 0; }
:root body .ui-panel-heading .chart-intro { margin: 6px 0 0; }
:root body .ui-panel-heading > .ui-heading-tools {
  display: flex; flex: 0 1 auto; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: flex-end; gap: var(--ui-gap);
  min-width: 0; max-width: 100%; width: auto; margin: 0 0 0 auto;
  grid-column: auto; grid-row: auto; align-self: flex-start; justify-self: auto;
}
:root body .ui-heading-tools > :is(.currency-badge, .chart-unit) { margin: 0; align-self: center; }
:root body .ui-heading-tools :is(.chart-range-switch, .history-legend-row) {
  max-width: 100%; flex-wrap: wrap;
}
/* View controls: context before the trailing select/tabs, legends in a separate row. */
:root body .ui-panel-heading > .ui-heading-controls {
  justify-content:flex-end; flex-direction:row; margin-left:auto;
}
:root body .ui-heading-controls > :is(select,.chart-range-switch) {
  order:1; flex-shrink:0; max-width:100%; margin:0;
}
:root body .ui-heading-controls > .chart-range-switch { width:max-content; }
:root body .ui-heading-controls > :is(.currency-badge,.chart-unit,.ui-heading-context) {
  order:0; flex-shrink:0; max-width:100%;
}
:root body .ui-heading-legend {
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center;
  gap:var(--chart-legend-row-gap,4px) var(--chart-legend-gap,16px); width:100%; max-width:100%; box-sizing:border-box;
}
/* One flat list; every wrapped line shares the same right content edge. */
:root body .ui-heading-legend > :is(span,button) {
 flex:0 1 auto; min-width:0; max-width:100%;
}
:root body .ui-heading-legend i { flex-shrink:0; }
:root body .ui-heading-legend[hidden] { display:none; }
:root body .ui-panel-heading > .ui-heading-legend {
  flex:1 0 100%; grid-column:1 / -1; grid-row:4; margin:0;
}
:root body .panel > .ui-heading-legend { margin:0 0 16px; }
:root body .ui-heading-tools .chart-legend { flex-wrap: wrap; }
:root body .ui-heading-tools .history-legend-row { display: flex; gap: var(--ui-gap); align-items: center; }
:root body .ui-heading-tools select { max-width: 100%; min-width: 0; }
/* Result KPIs outrank view controls: amount, then percentage, at the right edge. */
:root body .ui-heading-kpi {
 display:flex; flex-direction:column; align-items:flex-end; flex:0 0 auto;
 order:2; gap:2px; text-align:right; white-space:nowrap;
 font-variant-numeric:tabular-nums;
}
:root body .ui-heading-kpi > strong { font-size:var(--ui-heading-kpi-size); line-height:1.2; font-weight:var(--text-strong-weight); }

:root body .ui-panel-heading > .ui-heading-tools--stack { flex-direction: column; align-items: flex-end; }
:root body .ui-panel-heading > .ui-heading-tools--metric { gap: 4px; }
:root body .ui-heading-tools--metric > span { margin-top: 0; }

/* Counts belong to the grid, not to a domain name. */
:root body .metric-grid[data-metric-columns] { grid-template-columns: repeat(var(--metric-columns), minmax(0, 1fr)); }
[data-metric-columns="3"] { --metric-columns: 3; }
[data-metric-columns="4"] { --metric-columns: 4; }
:root body .metric-grid .metric-card { min-width: 0; }
:root body .metric-grid .metric-card > :is(span, small) { overflow-wrap: anywhere; }
.table-scroll[data-table-layout="scroll"] { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.empty-state { padding: 24px; color: var(--muted); text-align: center; }
.empty-state > :is(h2, strong) { color: var(--ink); }
.empty-state > p { margin: 8px 0 0; }
.disclosure-icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; transition: transform .15s ease; }
details[open] > summary .disclosure-icon { transform: rotate(90deg); }
.forecast-tax-layout { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: start; }
.forecast-tax-layout--single { grid-template-columns: minmax(0, 1fr); }
.forecast-tax-layout .form-field > input { width: 140px; max-width: 100%; }
.forecast-tax-layout .forecast-settings-recommendation { margin-top: 0; gap: 4px; }
.forecast-recommendation-value { display: flex; align-items: center; gap: 6px; min-height: var(--field-height); }
.forecast-tax-layout .forecast-recommendation-value { box-sizing: border-box; height: var(--field-height); padding: 0 10px; gap: 10px; border-radius: 6px; background: var(--dialog-section-bg); }
.forecast-tax-layout .forecast-recommendation-value > strong { display: flex; align-items: center; min-height: var(--field-height); flex: 0 0 auto; width: auto; padding: 0; border: 0; background: transparent; font-size: 14px; line-height: 1.25; white-space: nowrap; }
/* Explicit ordering roles replace selectors tied to a URL or dialog id. */
.topbar-actions > :is(.secondary-button, .icon-button):not([data-action-role]) { order: 2; }
.topbar-actions > [data-action-role="leading"] { order: 0; }
.topbar-actions > [data-action-role="primary"] { order: 1; }
.topbar-actions > [data-action-role="secondary"] { order: 2; }
.topbar-actions > [data-action-role="view"] { order: 3; }

/* Responsive matrix: card grids 900/620; panel tools 760; dialog fields 620.
   Data plots retain their separately documented 640px geometry boundary. */
@media (max-width: 900px) {
  :root body .metric-grid[data-metric-columns] { --metric-columns: 2; }
}
@media (max-width: 760px) {
  :root body .ui-panel-heading > .ui-heading-tools {
    flex-basis: 100%; justify-content: flex-start; align-items: center; margin-left: 0;
  }
  :root body .ui-panel-heading > .ui-heading-tools--stack { align-items: flex-start; }
  :root body .ui-heading-tools .history-legend-row { flex-wrap: wrap; }
  .forecast-tax-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .forecast-tax-layout .forecast-recommendation-value { flex-wrap: wrap; height: auto; }
}
@media (max-width: 620px) {
  :root { --ui-dialog-padding-x: 18px; --ui-dialog-padding-y: 18px; }
  :root body .metric-grid[data-metric-columns] { --metric-columns: 1; }
  :root body .asset-editor__header .asset-editor__tabs { width: 100%; margin-left: 0; }
  :root body .ui-panel-heading > .ui-heading-copy { flex-basis: 100%; }
  :root body .ui-heading-tools .chart-range-switch { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .disclosure-icon { transition: none; } }

/* Text roles: shared with dynamically created chart/help content. */
:root {
  --text-panel-size: 25px;
  --text-panel-weight: 650;
  --text-panel-line: 1.12;
  --text-panel-spacing: -.65px;
  --text-help-size: 13px;
  --text-help-line: 1.5;
  --text-tooltip-size: 12px;
  --text-tooltip-title-size: 14px;
  --text-tooltip-meta-size: 11px;
  --text-tooltip-line: 1.5;
  --text-emphasis-weight: 600;
  --text-strong-weight: 700;
  --select-chevron-image: url("icons/chevron-down.978390a82efd.svg");
}
@media (max-width: 760px) {
  :root { --text-panel-size: 22px; }
}
:root body :is(.ui-panel-heading h2, [data-text-role="panel-title"]) {
  font-size: var(--text-panel-size); font-weight: var(--text-panel-weight);
  line-height: var(--text-panel-line); letter-spacing: var(--text-panel-spacing);
}
:root body :is(.chart-intro, .panel-intro, .summary-panel-subtitle, .share-card-head p,
  .form-hint, .forecast-settings-note, .property-dialog p, .property-review-heading p, .property-review-heading small,
  .tax-section-heading p, .tax-proposal p, .import-resolution-hint, [data-text-role="help"]) {
  font-size: var(--text-help-size); font-weight: 400; line-height: var(--text-help-line);
  letter-spacing: normal; color: var(--muted);
}
:root body :is(.viewport-chart-tooltip, .form-help__content, .metric-info__content) {
  font-size: var(--text-tooltip-size); font-weight: 400; line-height: var(--text-tooltip-line);
  letter-spacing: normal; text-transform: none; color: var(--ink);
}
:root body :is(.viewport-chart-tooltip, .form-help__content, .metric-info__content) p {
  font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; color: inherit;
}
:root body :is(.viewport-chart-tooltip, .form-help__content, .metric-info__content) :is(strong, b) {
  font-size: inherit; font-weight: var(--text-emphasis-weight); line-height: inherit;
}
:root body :is(.viewport-chart-tooltip > strong, .change-tooltip > div:first-of-type > strong,
  .cost-stack-tooltip-header > strong, [data-text-role="tooltip-title"]) {
  font-size: var(--text-tooltip-title-size); font-weight: var(--text-emphasis-weight);
  line-height: var(--text-tooltip-line); color: var(--navy-2); letter-spacing: normal;
}
:root body :is(.viewport-chart-tooltip small:not(.liquidity-tooltip-scope), .cost-stack-tooltip-header > span,
  .cost-stack-tooltip-group, [data-text-role="tooltip-meta"]) {
  font-size: var(--text-tooltip-meta-size); font-weight: 400;
  line-height: var(--text-tooltip-line); color: var(--muted);
}

:root body .cost-stack-tooltip-group > b { font-size: var(--text-tooltip-size); }

/* Flat financial statement: labels and amounts first, optional comparisons below. */
.ui-financial-statement { margin-top: 14px; font-size: var(--table-body-font-size); }
.ui-financial-statement-heading, .ui-financial-statement-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ui-financial-statement-heading { margin-bottom: 8px; }
.ui-financial-list { margin:0; }
.ui-financial-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.ui-financial-row dt { min-width:0; color:var(--ink); }
.ui-financial-row dd { margin:0; }
.ui-financial-amount { text-align:right; font-weight:var(--text-emphasis-weight); font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-financial-comparisons:not([hidden]) { grid-column:1 / -1; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px 24px; color:var(--muted); font-size:12px; }
.ui-financial-comparisons > span:not([hidden]) { display:flex; align-items:baseline; gap:12px; }
.ui-financial-comparisons strong { font-weight:var(--text-emphasis-weight); font-variant-numeric:tabular-nums; }
.ui-financial-result { margin-top:12px; padding:0 14px; border-radius:8px; background:var(--surface-3); }
.ui-financial-result .ui-financial-row { border:0; }
.ui-financial-result dt { font-size:16px; font-weight:var(--text-emphasis-weight); }
.ui-financial-result .ui-financial-amount { font-size:18px; font-weight:var(--text-strong-weight); }
@media(max-width:599px) {
 .ui-financial-statement-tools { width:100%; justify-content:space-between; }
 .ui-financial-comparisons:not([hidden]) { justify-content:space-between; }
 .ui-financial-comparisons > span:not([hidden]) { flex-wrap:wrap; gap:4px 8px; }
}

@media(min-width:600px) {
 .ui-financial-row { grid-template-columns:minmax(0,1fr) minmax(88px,auto) auto; }
 .ui-financial-comparisons:not([hidden]) { grid-column:auto; flex-wrap:nowrap; }
 .ui-financial-comparisons > span:not([hidden]) { min-width:150px; justify-content:space-between; white-space:nowrap; }
 .ui-financial-comparisons strong { min-width:4ch; text-align:right; }
}

.ui-financial-columns { color:var(--muted); font-size:var(--table-header-font-size); padding-block:8px; }
.ui-financial-column-amount { text-align:right; }
.ui-financial-columns .ui-financial-comparisons { font-size:inherit; }
.ui-financial-columns .ui-financial-comparisons > span:not([hidden]) { justify-content:flex-end; }
.ui-financial-comparisons > span:not([hidden]) { justify-content:flex-end; }
@media(max-width:599px) {
 .ui-financial-row { grid-template-columns:minmax(0,1fr) auto auto; column-gap:10px; }
 .ui-financial-comparisons:not([hidden]) { grid-column:auto; flex-wrap:nowrap; gap:12px; }
 .ui-financial-comparisons > span:not([hidden]) { min-width:64px; }
 .ui-financial-statement[data-comparison-expanded="true"] .ui-financial-row { grid-template-columns:minmax(0,1fr) auto; }
 .ui-financial-statement[data-comparison-expanded="true"] .ui-financial-row dt,
 .ui-financial-statement[data-comparison-expanded="true"] .ui-financial-column-label { grid-column:1 / -1; }
 .ui-financial-statement[data-comparison-expanded="true"] .ui-financial-amount,
 .ui-financial-statement[data-comparison-expanded="true"] .ui-financial-column-amount { text-align:left; }
}

/* Compact phone KPI rows: copy left, amount right, optional help at the edge. */
@media(max-width:620px) {
 :root body .metric-grid[data-metric-columns] { --metric-columns:1; }
 :root body .metric-card {
   grid-template-columns:minmax(0,1fr) max-content;
   grid-template-rows:var(--metric-label-row,auto) var(--metric-note-row,auto);
   gap:4px 10px; align-content:center;
   min-height:calc(var(--metric-value-row,0px) + 26px);
 }
 :root body .metric-card:has(.metric-info) { grid-template-columns:minmax(0,1fr) max-content 22px; }
 :root body .metric-card > span:not(.metric-info) {
   grid-column:1; grid-row:1; padding:0; font-size:12px; line-height:1.3;
   white-space:normal; overflow:visible; text-overflow:clip;
 }
 :root body .metric-card > strong,
 :root body .metric-card > .metric-card-value {
   grid-column:2; grid-row:1 / 3; align-self:center; justify-self:end;
   text-align:right; min-width:0;
 }
 :root body .metric-card > strong,
 :root body .metric-card-value > strong { font-size:22px; line-height:1.2; letter-spacing:-.6px; }
 :root body .metric-card > small {
   grid-column:1; grid-row:2; display:block; font-size:11px; line-height:1.35;
   white-space:normal; overflow:visible; max-height:none; text-overflow:clip;
 }
 :root body .metric-card .metric-monthly { font-size:11px; line-height:1.35; letter-spacing:normal; }
 :root body .metric-card > .metric-info {
   position:static; grid-column:3; grid-row:1 / 3; align-self:center;
 }
 :root body .metric-card .metric-info__trigger { width:22px; height:22px; }
 :root body .metric-card .metric-info__trigger svg { width:18px; height:18px; }
 :root body .metric-grid > .metric-card[data-metric-wide] > strong,
 :root body .metric-grid > .metric-card[data-metric-wide] > .metric-card-value {
   grid-column:1 / -1; grid-row:3; justify-self:end;
 }
}
/* Very narrow phones retain one card per row and give copy the whole width. */
@media(max-width:359px) {
 :root body .metric-card,
 :root body .metric-card:has(.metric-info) { grid-template-columns:minmax(0,1fr) 22px; }
 :root body .metric-card > small { grid-column:1 / -1; }
 :root body .metric-card > strong,
 :root body .metric-card > .metric-card-value { grid-column:1 / -1; grid-row:3; justify-self:end; }
 :root body .metric-card > .metric-info { grid-column:2; grid-row:1; }
}


/* Mobile metric context lives in shared help; actions keep their visible row. */
.metric-info__mobile-note,
.metric-info--mobile { display:none; }
@media(max-width:620px) {
 :root body .metric-card { grid-template-rows:var(--metric-label-row,auto) var(--metric-note-row,0px); row-gap:0; }
 :root body .metric-card > span:not(.metric-info) { font-size:14px; font-weight:600; align-self:center; }
 :root body .metric-card > small:not(:has(a,button,input,select)) { display:none; }
 :root body .metric-card > .metric-info--mobile { display:block; }
 :root body .metric-info__mobile-note { display:block; margin-bottom:8px; font-weight:600; }
 :root body .metric-info__mobile-note:only-child { margin-bottom:0; }
}
@media(max-width:359px) {
 :root body .metric-card > strong,
 :root body .metric-card > .metric-card-value { margin-top:6px; }
}

/* Units share the title row even when their desktop tools are nested. */
@media(max-width:760px) {
 :root body .ui-panel-heading--unit {
   display:grid; grid-template-columns:minmax(0,1fr) auto;
   gap:var(--ui-heading-gap) 12px;
 }
 :root body .ui-panel-heading--unit > .ui-heading-copy { display:contents; }
 :root body .ui-panel-heading--unit .ui-heading-title { grid-column:1; grid-row:1; min-width:0; margin:0; }
 :root body .ui-panel-heading--unit > .ui-heading-copy > p { grid-column:1 / -1; grid-row:2; margin:0; }
 :root body .ui-panel-heading--unit > .ui-heading-unit {
   grid-column:2; grid-row:1; justify-self:end; align-self:start; margin:0;
 }
 :root body .ui-panel-heading--unit > .ui-heading-tools {
   grid-column:1 / -1; grid-row:3; width:100%; margin:0;
 }
 :root body .ui-panel-heading--unit > .ui-heading-tools--empty { display:none; }
}


/* Compact summary headings retain intrinsic title and KPI widths on phones. */
@media(max-width:760px) {
 :root body .ui-panel-heading--compact { gap:8px 12px; }
 :root body .ui-panel-heading--compact > .ui-heading-copy { flex:1 1 min-content; }
 :root body .ui-panel-heading--compact > .ui-heading-tools {
   flex:0 0 auto; width:auto; margin-left:auto; justify-content:flex-end;
 }
 :root body .ui-panel-heading--compact > .ui-heading-tools--stack { align-items:flex-end; }
}
.ui-title-help { white-space:nowrap; }
.ui-title-help > .metric-info {
 display:inline-flex; position:relative; inset:auto; vertical-align:middle;
 margin-left:6px; font-size:var(--text-tooltip-size); font-weight:400;
}


/* Scope, period and unit form one compact context group beside the title. */
:root body .ui-heading-context {
 display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 6px;
}
@media(max-width:760px) {
 :root body .ui-panel-heading--unit > .ui-heading-context {
   display:grid; grid-template-columns:repeat(2,max-content);
 }
 :root body .ui-heading-context > :first-child { grid-column:1 / -1; justify-self:end; }
 :root body .ui-panel-heading--unit > p { grid-column:1 / -1; grid-row:2; margin:0; }
}

@media(max-width:760px) {
 :root body .ui-heading-context:has(> :last-child:nth-child(2)) { display:flex; flex-wrap:wrap; max-width:100%; }
}

.ui-title-help > .metric-info[hidden] { display:none; }


/* Six facts: categories by period; phones compare month/year side by side. */
:root body .summary-facts[data-summary-layout="period-comparison"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
:root body .summary-facts[data-summary-layout="period-comparison"] > div { border:0; border-left:1px solid var(--line); }
:root body .summary-facts[data-summary-layout="period-comparison"] > div:nth-child(3n + 1) { border-left:0; }
:root body .summary-facts[data-summary-layout="period-comparison"] > div:nth-child(n + 4) { border-top:1px solid var(--line); }
@media(max-width:620px) {
 :root body .summary-facts[data-summary-layout="period-comparison"] {
   grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,auto); grid-auto-flow:column;
 }
 :root body .summary-facts[data-summary-layout="period-comparison"] > div:nth-child(n) { border:0; }
 :root body .summary-facts[data-summary-layout="period-comparison"] > div:nth-child(n + 4) { border-left:1px solid var(--line); }
 :root body .summary-facts[data-summary-layout="period-comparison"] > div:not(:nth-child(3n + 1)) { border-top:1px solid var(--line); }
}

/* Full-width, evenly distributed dialog tabs on phones; readable narrow fallback. */
@media(max-width:620px) {
 :root body .asset-editor__header .asset-editor__tabs[role="tablist"] {
   display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr));
   width:100%; margin-left:0; container:dialog-tabs / inline-size;
 }
 :root body .asset-editor__header .asset-editor__tabs[role="tablist"] > [role="tab"] {
   width:100%; min-width:0; white-space:normal;
 }
}
@container dialog-tabs (width < 306px) {
 :root body .asset-editor__header .asset-editor__tabs[role="tablist"] > :last-child:nth-child(3) { grid-column:1 / -1; }
}
@media(max-width:620px) {
 :root body .asset-editor__header .asset-editor__tabs[role="tablist"]:has(> :nth-child(4)) {
   grid-template-columns:repeat(2,minmax(0,1fr));
 }
}

/* A wrapped control group remains attached to the right panel edge. */
@media(max-width:760px) {
 :root body .ui-panel-heading > .ui-heading-controls {
  flex-basis:100%; width:100%; justify-content:flex-end; margin-left:auto;
 }
}

/* Mobile tab boxes fill the panel; legends always follow underneath. */
@media(max-width:760px) {
 :root body .ui-heading-controls > .chart-range-switch {
  width:100%; flex-basis:100%; box-sizing:border-box;
 }
}

/* KPI fallback follows the ordinary mobile unit grid. */
@media(max-width:760px) {
 :root body .ui-panel-heading--kpi-stacked .ui-heading-title { grid-column:1 / -1; grid-row:1; }
 :root body .ui-panel-heading--kpi-stacked > .ui-heading-copy > p { grid-column:1 / -1; grid-row:2; }
 :root body .ui-panel-heading--kpi-stacked > .ui-heading-kpi { grid-column:1 / -1; grid-row:3; justify-self:end; }
 :root body .ui-panel-heading--kpi-stacked > .ui-heading-controls { grid-column:1 / -1; grid-row:4; }
}

/* Keep title/subtitle first; a separate KPI can share the subtitle row. */
@media(max-width:760px) {
 :root body .ui-panel-heading--kpi-subtitle .ui-heading-title { grid-column:1 / -1; grid-row:1; }
 :root body .ui-panel-heading--kpi-subtitle > .ui-heading-copy > p { grid-column:1; grid-row:2; }
 :root body .ui-panel-heading--kpi-subtitle > .ui-heading-kpi { grid-column:2; grid-row:2; justify-self:end; }
 :root body .ui-panel-heading--kpi-subtitle > .ui-heading-controls { grid-column:1 / -1; grid-row:3; }
}

/* Centre adjacent controls on the amount row, independently of the percentage. */
:root body .ui-heading-controls--kpi:has(> .ui-heading-kpi) {
 display:grid; grid-template-columns:max-content max-content max-content;
 grid-template-rows:auto auto; align-items:center; row-gap:2px;
}
:root body .ui-heading-controls--kpi:has(> .ui-heading-kpi) > :is(.currency-badge,.chart-unit,.ui-heading-context) {
 grid-column:1; grid-row:1;
}
:root body .ui-heading-controls--kpi:has(> .ui-heading-kpi) > :is(select,.chart-range-switch) {
 grid-column:2; grid-row:1;
}
:root body .ui-heading-controls--kpi > .ui-heading-kpi {
 display:grid; grid-template-rows:subgrid; grid-column:3; grid-row:1 / span 2;
 justify-items:end; align-items:center;
}

/* Optional semantic break: one flat legend, grouped only on phone widths. */
:root body .ui-heading-legend > .ui-legend-break { display:none; }
@media(max-width:620px) {
 :root body .ui-heading-legend:has(> .ui-legend-break) { row-gap:0; }
 :root body .ui-heading-legend:has(> .ui-legend-break) > :not(.ui-legend-break) {
  margin-bottom:var(--chart-legend-row-gap,4px);
 }
 :root body .ui-heading-legend > .ui-legend-break {
  display:block; flex:0 0 100%; width:100%; height:0; min-height:0; margin:0;
 }
}