/* UI27 ownership: shared workflow components and responsive page composition.
   Colors/fonts: theme.css; legacy page drawings: their current files.
   DOM order is authoritative; do not use order to rearrange focusable areas. */
:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --radius-panel:12px; --radius-control:8px; }
body { font-size:14px; line-height:1.6; }
.ui-icon { width:20px; height:20px; flex:none; vertical-align:middle; }
.nav-icon { background:none; }
button, input, select { font:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid var(--link); outline-offset:3px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { min-height:40px; border-radius:var(--radius-control); }
input[type=range] { width:100%; min-height:24px; padding:0; }
input[type=checkbox], input[type=radio] { flex:0 0 18px; width:18px; height:18px; min-height:18px; }
small, .detail-note, .evidence-note, .status-line, .section-head>span, .field>label { font-size:13px; line-height:1.6; }
.field>label { color:var(--muted); }
.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:8px; }
th, td { font-variant-numeric:tabular-nums; }
td small { display:block; margin-top:4px; font-size:12px; }
#portfolio-transaction-rows td:nth-child(4), #portfolio-transaction-rows td:nth-child(5), #portfolio-transaction-rows td:nth-child(6) { text-align:right; }
html[data-density=compact] td, html[data-density=compact] th { padding-block:6px; }
html[data-density=comfortable] td, html[data-density=comfortable] th { padding-block:12px; }
.suggest-item { min-height:44px; cursor:pointer; }
.suggest-selection-action { position:absolute; right:0; z-index:40; min-height:44px; padding:8px 12px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:8px; }
.panel-load-state { padding:12px; border-inline-start:3px solid var(--link); }
[id^="platform-panel-"] { margin-block:16px; }
[data-compare-remove], [data-delete-transaction], [data-remove-search-filter], .list-view-toggle button { min-width:44px; min-height:44px; display:inline-flex; justify-content:center; align-items:center; }
.help-tip { width:28px; height:28px; flex:0 0 28px; display:inline-flex; justify-content:center; align-items:center; border:0; border-radius:50%; vertical-align:middle; }
.help-tip .ui-icon { width:16px; height:16px; }
.help-label { line-height:1.6; }
@media (pointer:coarse) { .help-tip { width:44px; height:44px; flex-basis:44px; } }
.secondary-workspace, .query-workspace, .history-secondary, .transaction-advanced { border:0; border-block-end:1px solid var(--line); margin:12px 0; padding:8px 0; background:transparent; }
summary { cursor:pointer; min-height:44px; align-content:center; font-size:14px; font-weight:600; }
.page-purpose { margin:0 0 16px; color:var(--muted); font-size:14px; }
.app-banner { display:grid; gap:8px; }
.app-banner[hidden] { display:none; }
.app-banner>section { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.app-banner>section+section { border-top:1px solid currentColor; padding-top:8px; }
.field-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:16px 0; }
.field-grid label, .appearance-settings label { display:grid; gap:6px; }
.field-grid input, .field-grid select { width:100%; min-width:0; }
.evidence-dialog { width:min(960px,calc(100vw - 24px)); max-height:90dvh; padding:0; }
.evidence-dialog>header { position:sticky; top:0; background:var(--panel); padding:16px; z-index:2; }
.evidence-dialog .evidence-body { padding:16px; max-height:75dvh; overflow:auto; }
.evidence-dialog pre, .evidence-dialog code { overflow-wrap:anywhere; white-space:pre-wrap; font-size:13px; }
.evidence-dialog td { min-width:90px; max-width:300px; overflow-wrap:anywhere; white-space:normal; }
.backup-row, .notification-row, .pending-application { padding:16px 0; border-bottom:1px solid var(--line); }
.backup-row p { overflow-wrap:anywhere; }
.app-search { flex:1; max-width:480px; min-width:0; }
.app-search>summary { display:none; }
.app-search>.toolbar-disclosure-content { position:static; display:block; visibility:visible; width:auto; min-width:0; box-shadow:none; border:0; padding:0; background:transparent; overflow:visible; }
.appearance-settings>.toolbar-disclosure-content { width:280px; display:grid; gap:16px; }
.appearance-settings .session, .appearance-settings #offline-wrap { max-width:none; white-space:normal; font-size:13px; }
.appearance-settings #theme-toggle { display:none; }
.appearance-settings #updown-toggle { min-height:44px; }
.portfolio-context-bar, .estimate-return { display:none; }
.portfolio-transaction-editor> .field:has(#portfolio-tx-code) { max-width:200px; }
.transaction-advanced { grid-column:1/-1; width:100%; }
.transaction-advanced .field-grid { margin:8px 0; }
.portfolio-print-header { color:var(--text); }
#view-markets .chart-shell { min-height:250px; }
.search-result .result-main>strong { white-space:normal; overflow-wrap:anywhere; }
.search-result .row-actions { gap:8px; }
.row-actions button { min-height:44px; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:var(--panel); color:var(--link); }
.row-actions button:hover { background:var(--panel-2); }
.mobile-compare-summary { display:none; }
.result-name { border:0; padding:6px 0; background:transparent; color:var(--link); text-align:left; font-size:14px; font-weight:600; cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
.fund-position-editor>summary { padding:4px 100px 4px 12px; color:var(--muted); font-size:12px; }
.fund-row { display:grid; grid-template-columns:minmax(0,1fr) 44px 44px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.fund-item { grid-column:1/-1; padding:12px; grid-template-areas:"name name" "code change" "nav nav"; align-items:start; }
.fund-position-editor { grid-column:1/-1; grid-row:2; min-width:0; }
.fund-item .name { grid-area:name; }
.fund-item .number { grid-area:change; white-space:nowrap; }
.fund-item .code:nth-child(3) { grid-area:code; overflow-wrap:anywhere; }
.fund-item .code:nth-child(4) { grid-area:nav; }
.fund-row .fund-refresh, .fund-row .fund-remove { position:relative; grid-row:2; align-self:start; z-index:1; width:44px; height:44px; min-width:44px; min-height:44px; top:auto; bottom:auto; right:auto; }
.fund-row .fund-refresh { grid-column:2; }
.fund-row .fund-remove { grid-column:3; }
.market-workspace { display:grid; grid-template-columns:minmax(260px,320px) minmax(0,1fr); gap:16px; align-items:start; }
.market-watchlist { min-width:0; }
.market-watchlist .market-list { display:grid; grid-template-columns:1fr; max-height:560px; overflow:auto; }
.market-watchlist .market-group { padding:4px 8px; font-size:13px; }
.market-list-head { flex-wrap:wrap; }
.market-list-head .section-head-actions { flex-wrap:wrap; }
.market-list-head .section-head-actions>span { display:none; }
.detail-tab-panel .grid-2:has(>:only-child),
.detail-tab-panel .detail-grid:has(>:only-child) { grid-template-columns:1fr; }
#portfolio-settings-dialog>.field { margin:12px 20px; }
.compare-seg-table th:first-child, .compare-seg-table td:first-child { position:sticky; left:0; background:var(--panel); z-index:1; min-width:140px; }
.compare-best { font-weight:800; text-decoration:underline; text-underline-offset:4px; }
.fund-research-tabs { border:0; border-bottom:1px solid var(--line); background:transparent; border-radius:0; }
.fund-research-tabs button { border-radius:4px; text-decoration:underline; text-underline-offset:5px; }
.detail-tabs button { text-decoration:none; }
.kpi-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.kpi-grid.estimate-basis { grid-template-columns:repeat(6,minmax(0,1fr)); }
.estimate-basis > .kpi { grid-column:span 2; }
.estimate-basis > .kpi:nth-child(n+4) { grid-column:span 3; }
.insight-strip, .discover-summary { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); }
.parts { display:flex; flex-wrap:wrap; }
.parts > .part { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.section-head { align-items:flex-start; flex-wrap:wrap; }
.section-head > span { max-width:100%; overflow-wrap:anywhere; }
.metric, .summary-main { min-width:0; overflow-wrap:anywhere; }
.chart-accessible output { overflow-wrap:anywhere; }
.chart-accessible .table-wrap table { min-width:0; }
.chart-accessible .table-wrap td { white-space:normal; overflow-wrap:anywhere; }
.detail-object-meta { color:var(--muted); margin:4px 0; }
.detail-hero .detail-kpis { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
.detail-hero .official-nav { border-inline-start:3px solid var(--primary); padding-inline-start:12px; }
.research-disclosure { margin-block:16px; }
.research-disclosure [data-research-body] { overflow-wrap:anywhere; }
.metric-row meter { width:100%; height:12px; }
#search-summary { display:block; margin:8px 0; padding:0; border:0; background:transparent; }
#search-summary[hidden] { display:none; }
#search-summary .detail-note { margin:0; }
.search-query-controls { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:12px; align-items:end; position:relative; margin-bottom:8px; }
.search-query-controls #search-toolbar { margin:0; }
.search-query-controls #search-filter-drawer { margin:0; }
.search-query-controls #search-filter-drawer[open]>.discover-tools { position:absolute; top:100%; right:0; left:0; z-index:12; background:var(--panel); box-shadow:0 8px 20px #0002; border:1px solid var(--line); }
.compare-sample-summary { margin-top:16px; }
.compare-view-toolbar { padding:12px; margin-bottom:8px; }
#view-compare .query-workspace { margin-top:16px; }
#compare-bar { margin-block:8px; padding:8px 12px; }
#compare-toolbar .field.grow { flex:1 1 150px; }
#detail-toolbar { padding:8px 12px; margin-bottom:8px; }
#detail-toolbar .field.grow { flex:1 1 160px; }
#view-detail .fund-context-label { display:none; }
#view-detail .fund-research-tabs { margin-bottom:8px; }
#search-toolbar { padding:8px 12px; margin-bottom:8px; }
#search-applied-filters { margin-block:8px; }
#search-status, #detail-status, #compare-status { margin-block:6px; }
#search-status:empty { display:none; }
.opportunity-intro { padding:12px; margin-bottom:12px; }
.opportunity-intro strong { font-size:18px; }
.opportunity-intro>span { margin-top:4px; }
.opportunity-summary { margin-top:16px; }
@media (min-width:1200px) {
  .estimate-layout[data-mode="table"] { grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); align-items:start; }
  .estimate-layout[data-mode="table"] .estimate-table-wrap { max-height:520px; }
}
.appearance-settings .pwa-boundary { display:block; margin:0; padding:0; border:0; }
@media (max-width:900px) {
  .sidebar { padding:0 12px; min-height:44px; }
  .sidebar .brand, .sidebar-foot { display:none; }
  .sidebar .nav { display:flex; width:100%; flex-wrap:nowrap; align-items:center; gap:4px; padding:0; }
  .sidebar .nav>button, .sidebar .nav>.mobile-nav-more>summary { min-height:44px; font-size:14px; padding:8px 6px; white-space:nowrap; }
  .sidebar .nav>button { width:auto; flex:1 1 auto; }
  .sidebar .nav-icon { display:none; }
  .main .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px; padding:4px 12px; min-height:0; position:relative; }
  .topbar .page-title { min-width:0; padding:0; }
  .topbar .page-title h1 { font-size:20px; line-height:1.3; margin:0; }
  .topbar .page-title p { display:none; }
  .topbar .top-actions { grid-column:3; grid-row:1; margin:0; gap:0; }
  .theme-controls { flex-wrap:nowrap; gap:4px; }
  .theme-controls>.btn, .appearance-settings>summary { min-height:44px; height:44px; padding:8px; }
  .topbar .app-search { grid-column:2; grid-row:1; width:auto; max-width:none; position:static; }
  .app-search>summary { display:inline-flex; min-height:44px; align-items:center; gap:6px; }
  .app-search:not([open])>.toolbar-disclosure-content { display:none; }
  .app-search[open]>.toolbar-disclosure-content { position:absolute; top:100%; left:12px; right:12px; padding:8px; z-index:40; background:var(--panel); border:1px solid var(--line); box-shadow:0 6px 20px #0002; border-radius:8px; }
  .global-search { width:100%; min-height:44px; }
  .global-search input, .global-search button[type=submit] { height:44px; font-size:16px; }
  .content { padding:12px 12px 96px; }
  .page-purpose { font-size:13px; margin-bottom:12px; }
  .field input:not([type=checkbox]):not([type=radio]), .field select, textarea { font-size:16px; }
  .view .toolbar { gap:8px; }
  .search-query-controls { display:block; }
  .search-query-controls #search-toolbar { margin-bottom:8px; }
  .search-query-controls #search-filter-drawer[open]>.discover-tools { position:static; box-shadow:none; }
  #detail-toolbar, #search-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }
  #detail-toolbar .field, #detail-toolbar .field.grow, #search-toolbar .field { width:auto; min-width:0; grid-column:1; }
  #detail-toolbar #detail-btn { grid-column:2; grid-row:1; width:auto; }
  #detail-toolbar label, #search-toolbar label { margin-bottom:4px; }
  #detail-toolbar #detail-refresh { position:absolute; right:12px; top:12px; }
  #detail-toolbar { position:relative; padding-right:60px; }
  #detail-toolbar #detail-cancel:not([hidden]) { grid-column:1/-1; }
  #view-detail .detail-hero { padding:12px; }
  #view-detail .detail-hero h2 { font-size:20px; margin-block:0 6px; }
  #view-detail .detail-object-meta { margin:4px 0; font-size:12px; }
  #view-detail .detail-kpis { margin-top:8px; gap:8px; }
  #view-detail .detail-kpi { padding:8px; }
  #view-detail .detail-hero-head { gap:4px; }
  #view-detail .detail-hero-head p { margin:4px 0; }
  #view-detail .detail-flags:empty { display:none; }
  .portfolio-context-bar { display:flex; position:fixed; left:12px; right:12px; bottom:calc(8px + env(safe-area-inset-bottom)); gap:8px; justify-content:space-between; align-items:center; background:var(--panel); padding:8px 12px; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 20px #0002; z-index:15; margin:8px 0; }
  .portfolio-context-bar button { min-height:44px; }
  body.soft-keyboard-open .portfolio-context-bar { position:static; }
  .portfolio-tabbar { flex-wrap:wrap; }
  #portfolio-center-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px; }
  #portfolio-center-toolbar .field { grid-column:1/-1; width:100%; min-width:0; }
  #portfolio-center-toolbar #portfolio-analyze { grid-column:1; width:auto; justify-self:start; }
  #portfolio-center-toolbar>.toolbar-disclosure { grid-column:2; margin:0; }
  .portfolio-tabbar { padding:8px; }
  #opportunity-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px; gap:8px; }
  #opportunity-toolbar .field, #opportunity-toolbar .field.grow { min-width:0; width:100%; grid-column:auto; }
  #opportunity-toolbar #opportunity-run { width:auto; }
  #portfolio-save-analyze { font-size:13px; }
  .evidence-dialog { max-height:94dvh; }
  .field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}
@media (max-width:620px) {
  .mobile-compare-summary { display:block; margin:16px 0; }
  .full-comparison { display:none; }
  .full-comparison.expanded { display:block; }
  .mobile-compare-summary select { max-width:100%; }
  .market-workspace { display:block; }
  .market-watchlist .market-list { display:flex; overflow-x:auto; max-height:none; gap:8px; padding-bottom:8px; }
  .market-watchlist .market-list>.market-group { display:none; }
  .market-watchlist .market-list>button { flex:0 0 220px; }
  .market-workspace #market-detail { margin-top:12px; }
  .market-workspace .market-chart { height:auto; min-height:240px; padding:12px; }
  .market-workspace .market-detail-canvas { height:240px; min-height:240px; }
  .market-actions { grid-template-columns:minmax(0,1fr) auto 44px; gap:8px; align-items:end; }
  .market-actions .market-auto { grid-column:1/-1; width:max-content; background:transparent; border-color:transparent; padding-left:0; }
  .market-actions .market-interval { min-width:0; }
  .market-actions .market-interval select { min-width:0; }
  #portfolio-tx-filter { display:grid; grid-template-columns:1fr 1fr; }
  #view-estimate.active { display:block; }
  .estimate-layout { display:block; }
  #view-estimate:not(.show-estimate-detail) #estimate-detail { display:none; }
  #view-estimate.show-estimate-detail .estimate-layout>.list-pane { display:none; }
  #view-estimate.show-estimate-detail .estimate-return { display:inline-flex; min-height:44px; margin-bottom:8px; }
  #estimate-toolbar .field.grow { flex:1 1 160px; }
  #estimate-toolbar button { min-height:44px; }
  #estimate-status { margin-block:8px; }
  .onboarding-card { padding:12px; }
  #view-markets .chart-shell { min-height:220px; }
  .search-result { grid-template-columns:minmax(0,1fr); gap:8px; align-items:start; }
  .search-result .result-main, .search-result .result-meta, .search-result .row-actions { grid-column:1; }
  .search-result .result-meta { text-align:left; }
  .search-result .row-actions { flex-wrap:wrap; justify-self:start; }
  .detail-disclosure > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:10px 12px; }
  .detail-disclosure > summary small { grid-column:1; grid-row:2; }
  .detail-disclosure > summary::after { grid-column:2; grid-row:1 / 3; }
  .portfolio-transaction-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .portfolio-transaction-editor>.field { min-width:0; max-width:none; }
  .portfolio-transaction-editor> .field:has(#portfolio-tx-code) { max-width:none; }
  .portfolio-transaction-editor input { width:100%; }
  .portfolio-transaction-editor .inline-check { grid-column:1/-1; }
  .ledger-filter { gap:8px; }
  #portfolio-tx-pager { flex-wrap:wrap; }
  .chart-shell { overflow:visible; }
  .kpi-grid.estimate-basis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .estimate-basis > .kpi, .estimate-basis > .kpi:nth-child(n+4) { grid-column:auto; }
  .estimate-basis > .kpi:first-child { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print {
  :root, html[data-theme=dark] { color-scheme:light; --text:#111; --muted:#444; --panel:#fff; --panel-2:#fff; --panel-3:#fff; --panel-solid:#fff; --surface:#fff; --surface-soft:#fff; --line:#999; --line-soft:#ddd; --bg:#fff; }
  .app { display:block!important; }
  body, .main, .content, .view, .section, .analysis-band { background:#fff!important; color:#111!important; box-shadow:none!important; }
  .topbar, .sidebar, .portfolio-context-bar, button, .toolbar, .app-banner, .secondary-workspace, .query-workspace, .estimate-return { display:none!important; }
  .pwa-boundary, .recent-objects, .list-pane-head-tools, .fund-position-editor, .market-actions, .market-list-head .section-head-actions { display:none!important; }
  .estimate-layout, .market-workspace { display:block; }
  .market-watchlist .market-list { max-height:none; overflow:visible; }
  .workbench-overview { grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
  .workbench-overview > button, .market-focus-strip > button, button.impact-tile { display:flex!important; background:#fff!important; color:#111!important; }
  button.market-row, button.fund-item, button.peer-row { display:grid!important; background:#fff!important; color:#111!important; }
  button.result-name, button.impact-group-link, button[data-impact-fund] { display:inline-block!important; background:#fff!important; color:#111!important; }
  .market-focus-strip { flex-wrap:wrap; overflow:visible; }
  table { width:100%; } thead { display:table-header-group; } tr, .insight-item { break-inside:avoid; }
  .table-wrap { overflow:visible; border:0; } .positive { color:#111; } .negative { color:#111; font-style:italic; }
  .chart-shell { break-inside:avoid; } .view:not(.active), #view-portfolio:not(.active) { display:none!important; }
}

/* Workflow control sizing and mobile metric comparison are owned here. */
.row-actions .action-toggle { width:auto; min-width:64px; font-size:14px; white-space:nowrap; padding:8px; }
.chart-accessible button { min-height:44px; padding:8px; border:1px solid var(--line-strong); border-radius:8px; color:var(--link); background:var(--panel); margin:4px; }
.chart-accessible select { max-width:100%; }
.mobile-compare-summary table { min-width:0; width:100%; table-layout:fixed; font-size:12px; }
.mobile-compare-summary th, .mobile-compare-summary td { min-width:0; white-space:normal; overflow-wrap:anywhere; padding:10px 4px; text-align:right; }
.mobile-compare-summary th:first-child, .mobile-compare-summary td:first-child { width:34%; text-align:left; }