/* App frame and content surfaces. Variant meanings: docs/UISTANDARD.md. */
:root {
  --layout-page-inset: 40px;
  --layout-page-top: 35px;
  --layout-page-bottom: var(--layout-page-top);
  --layout-box-gap: 24px;
  --layout-panel-padding: 24px;
  --layout-card-padding: 20px;
  --layout-metric-padding: var(--layout-card-padding);
  --layout-metric-gap: var(--layout-box-gap);
  --layout-compact-padding-y: 12px;
  --layout-compact-padding-x: 16px;
  --layout-radius: 8px;
  --app-toolbar-height: calc(95px + var(--safe-area-top));
  --chart-legend-gap: 12px;
  --chart-legend-row-gap: 4px;
}
:root body .page-shell {
  padding: var(--layout-page-top) var(--layout-page-inset) var(--layout-page-bottom);
  --page-box-gap: var(--layout-box-gap);
  min-width: 0;
}
:root body .topbar {
  height: auto; min-height: calc(95px + var(--safe-area-top));
  flex-wrap: wrap; gap: 12px 8px;
  padding: calc(12px + var(--safe-area-top)) var(--layout-page-inset) 12px;
}
:root body .topbar-title { min-width: 0; max-width: 100%; }
/* An empty live save status must not reserve a second title row. */
:root body .topbar-meta:has(> .settings-save-status:only-child:empty) { display: none; }
:root body .topbar-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; overflow: visible; }
:root body .settings-navigation {
  top: var(--app-toolbar-height); padding: 8px var(--layout-page-inset) 0;
}
/* Roles describe density, not the page that happens to contain the box. */
:root body [data-box-role] { min-width: 0; border-radius: var(--layout-radius); }
:root body [data-box-role="panel"] { padding: var(--layout-panel-padding); }
:root body [data-box-role="metric"] { padding: var(--layout-metric-padding); }
:root body [data-box-role="account"],
:root body [data-box-role="record"] { padding: var(--layout-compact-padding-y) var(--layout-compact-padding-x); }
:root body [data-box-role="catalog"] { padding: var(--layout-card-padding); }
:root body [data-box-role="settings"] { padding: 0; }
:root body .settings-section-body { padding: var(--layout-panel-padding); }
:root body :is(.card-grid,.data-card-grid,.data-section-grid,.property-summary-pair) { gap: var(--layout-box-gap); }
:root body .summary-facts > div { padding: var(--layout-compact-padding-y) var(--layout-compact-padding-x); }
/* Plot dimensions remain owned by each chart type; only shell/typography are shared. */
[data-chart-layout]:not(svg) { min-width: 0; max-width: 100%; }
:root body [data-chart-layout] :is(.chart-axis-label,.change-axis,.cost-stack-axis) { font-size: var(--chart-axis-font-size); }
:root body .chart-legend { gap: var(--chart-legend-row-gap) var(--chart-legend-gap); }
:root body .notification-popover { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1100px) {
  :root { --layout-page-inset: 20px; --layout-page-top: 28px; }
}
@media (max-width: 760px) {
  :root {
    --layout-page-inset: 14px; --layout-page-top: 24px;
    --layout-box-gap: 16px; --layout-panel-padding: 18px; --layout-card-padding: 18px;
  }
  :root body .topbar { min-height: calc(78px + var(--safe-area-top)); gap: 10px; }
}
/* Edge-to-edge tables/disclosures own their heading and row insets internally. */
:root body [data-box-role="table"],
:root body [data-box-role="disclosure"] { padding: 0; }
:root body [data-box-role="compact-panel"] { padding: var(--layout-card-padding); }

:root body .notification-popover[popover] { margin: 0; inset: auto; }

:root body main [data-layout-grid="boxes"] { gap: var(--layout-box-gap); }

/* Table titles align to the same interior edge as ordinary panel titles. */
:root body [data-box-role="table"] > .ui-panel-heading {
  padding: var(--layout-panel-padding) var(--layout-panel-padding) 0;
}
:root body .share-card-head { padding: var(--layout-panel-padding); }
:root body [data-box-role="inset"] { padding: var(--layout-card-padding); }

/* Settings pages use one form surface; chart collections have no padded wrapper. */
:root body [data-settings-layout="charts"] > .settings-section-body { padding: 0; }
.settings-page .liquidity-planning-settings { gap: var(--layout-box-gap); }
.settings-page .liquidity-planning-settings .forecast-settings-section {
  padding: 0; border: 0; border-radius: 0; background: transparent;
}
.settings-page .liquidity-planning-settings > .forecast-settings-section,
.settings-page .forecast-settings-form > .forecast-settings-section {
  padding-bottom: var(--layout-box-gap); border-bottom: 1px solid var(--line);
}
/* Page navigation is distinct from chart/view segment controls. */
:root body .page-tabs {
  display: flex; flex-wrap: wrap; gap: 0 24px; max-width: 100%;
  padding: 0; margin: 0; width: auto; height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent;
}
:root body .page-tabs > a {
  display: flex; align-items: center; min-height: 44px; padding: 0 2px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted);
  font-size: 14px; font-weight: var(--tab-font-weight); white-space: nowrap;
}
:root body .page-tabs > a:hover { color: var(--navy); }
:root body .page-tabs > :is([aria-current="page"], .active) { border-bottom-color: var(--navy); color: var(--navy); background: transparent; box-shadow: none; font-weight: 600; }
:root body .page-tabs > a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (max-width: 760px) {
  :root body .settings-navigation { padding-block: 8px; }
  .settings-navigation:has(.settings-mobile-select) .page-tabs { display: none; }
  .settings-mobile-select { display: block; width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--navy); background: var(--surface); font: inherit; font-size: 17px; }
}

/* Global utilities stay in the first row; page actions wrap below on phones. */
:root body .topbar-actions { order: 1; }
:root body .topbar-utilities { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; order: 2; }
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) {
  :root body .topbar {
    display: grid; align-content: start; grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px 10px;
  }
  :root body .topbar > .mobile-menu { grid-column: 1; grid-row: 1; }
  :root body .topbar > .topbar-title { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; hyphens: auto; }
  :root body .topbar > .topbar-utilities { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  :root body .topbar > .topbar-actions {
    display: flex; grid-column: 1 / -1; grid-row: 2; justify-content: flex-end;
    width: 100%; margin: 0; padding: 0; gap: 8px;
  }
  :root body .topbar > .topbar-actions:not(:has(> :not([hidden], noscript, .settings-save-status:empty, .as-of))) { display: none; }
  :root body .topbar-actions :is(.primary-button, .secondary-button) { flex: 0 1 auto; }
}

/* Shared navigation and mobile action popover. Actions retain their original nodes. */
:root body .page-navigation { position: sticky; top: var(--app-toolbar-height); z-index: 25; padding: 8px var(--layout-page-inset) 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.page-navigation:not(:has(nav)) { display: none; }
:root body .page-tabs > a { flex: 0 0 auto; height: auto; }
:root body .topbar-actions[data-mobile-action-popover] {
  position: fixed; inset: auto; margin: 0; display: none;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--layout-radius);
  background: var(--surface); box-shadow: 0 12px 36px rgba(11,31,58,.18);
  overflow: auto; overscroll-behavior: contain;
}
:root body .topbar-actions[data-mobile-action-popover]:popover-open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
:root body .topbar-actions[data-mobile-action-popover] > * { flex: 0 0 auto; max-width: 100%; }
:root body .topbar-actions[data-mobile-action-popover] .cost-settings__panel { position: static; inset: auto; width: 100%; max-width: 100%; margin: 8px 0 0; box-shadow: none; }
@media (max-height: 600px) { .page-navigation { position: static; } }

@media(max-width:620px) {
 :root { --layout-metric-padding:12px; --layout-metric-gap:10px; }
 :root body main.page-shell .metric-grid[data-metric-columns] { gap:var(--layout-metric-gap); }
}

/* Auth feature badges: balanced rows, independent of individual label widths. */
.login-hero { container-type:inline-size; }
.login-feature-list {
 display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
 width:100%; max-width:500px;
}
.login-feature-list > span { box-sizing:border-box; text-align:center; white-space:nowrap; }
@container(max-width:400px) {
 .login-feature-list { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:300px; }
}