/* Frame-safe finishing layer. Keep content readable; don't hide page overflow. */
html { scroll-behavior: smooth; scrollbar-gutter: stable; scroll-padding-top: var(--header-offset, 76px); }
html.dialog-open { overflow: hidden; }
html[data-motion=off] { scroll-behavior: auto; }
#content, dialog { overflow-wrap: anywhere; }
#content :is(.metric, .panel, .vehicle, .page-heading > div, .detail-head > div, .section-heading > div, .vehicle-title > div, .budget-compare-heading > strong) { min-width: 0; }
.vehicle-title > div, .section-heading > div { flex: 1; }
.vehicle-title .status, .section-heading > .btn { flex-shrink: 0; }
h1, h2, h3 { scroll-margin-top: var(--header-offset, 76px); }
.metric-value, .vehicle-values strong, .chart-total strong { overflow-wrap: anywhere; line-height: 1.15; }
.chart-total { min-width: 0; max-width: 100%; }
.chart-total > strong { display: block; }
.chart-axis { width: 64px; font-size: 11px; }
.card-actions { flex-wrap: wrap; }
.card-actions .btn, .card-actions .btn:last-child { flex: 1 1 110px; white-space: normal; text-align: center; }
.vehicle-notes { line-height: 1.8; }
.sidebar { overscroll-behavior-y: contain; scrollbar-width: thin; }
/* Only a table scrolls sideways, never the entire garage. */
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: thin; }
.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.record-table { table-layout: fixed; min-width: 960px; }
.record-table th:nth-child(1) { width: 12%; }
.record-table th:nth-child(2) { width: 18%; }
.record-table th:nth-child(3) { width: 26%; }
.record-table th:nth-child(4) { width: 14%; }
.record-table th:nth-child(5) { width: 17%; }
.record-table th:nth-child(6) { width: 13%; }
.record-table td { white-space: normal; overflow-wrap: anywhere; }
.record-table td:nth-child(4), .record-table td:nth-child(5) { white-space: nowrap; }
.record-table .record-notes { max-width: 100%; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
details.record-notes { white-space: normal; margin-top: 6px; }
details.record-notes > summary { cursor: pointer; min-height: 40px; padding: 10px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
details.record-notes > p { white-space: pre-wrap; margin: 4px 0 0; }
.table-scroll-hint { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
/* Header/footer remain in frame; only the form's body scrolls. */
dialog { max-height: calc(100dvh - 32px); overflow: hidden; border-color: var(--control); }
dialog[open] { display: flex; flex-direction: column; }
dialog > form { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 34px); }
.dialog-head, .dialog-actions { position: static; flex: 0 0 auto; min-width: 0; }
.dialog-head { align-items: flex-start; }
.dialog-head h2, .dialog-head > div { min-width: 0; }
.dialog-head h2 { line-height: 1.3; }
.dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-gutter: stable; }
.dialog-actions { flex-wrap: wrap; align-items: center; }
.dialog-actions > .actions { margin-left: auto; justify-content: flex-end; min-width: 0; }
.dialog-body :is(input, select, textarea) { scroll-margin-block: 16px; }
.budget-dialog-vehicle { font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.dialog-body > .subtitle { margin-bottom: 16px; }
.close { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.btn, .page-help { font-size: 12px; }
input, select, textarea { min-width: 0; font-size: 14px; }
.field { font-size: 12px; line-height: 1.6; }
.note, .form-note, .metric-note { font-size: 11px; line-height: 1.7; }
table { font-size: 12px; }
#toast { max-width: min(480px, calc(100vw - 32px)); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  input, select, textarea, .fuel-history .section-heading select { font-size: 16px; }
  .photo-choices input, .profile-photo-editor input { font-size: 12px; }
  .btn, .card-actions .btn, .page-heading > .btn, .detail-head .btn, .dialog-actions .btn { min-height: 44px; font-size: 12px; }
  .utility-button, .topbar .utility-button, .public-tools .utility-button { min-width: 44px; min-height: 44px; }
  .topbar .avatar { width: 44px; height: 44px; min-width: 44px; }
  .fuel-vehicle-link { min-width: 44px; min-height: 44px; }
  .reminder-item .btn { min-height: 44px; font-size: 12px; }
  .close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .sidebar nav a { font-size: 11px; min-height: 44px; }
  .chart-axis { width: 60px; font-size: 11px; }
  .page-help, .photo-remove, .help-faq summary { min-height: 44px; }
  .metric-value { font-size: clamp(26px, 7vw, 34px); }
  .record-table td .btn { min-height: 44px; font-size: 12px; }
}
@media (max-width: 480px) {
  .page-heading { flex-direction: column; align-items: stretch; gap: 16px; }
  .page-heading > .btn { align-self: flex-start; margin-top: 0; }
  .insight-filters > .field { flex: 1 1 200px; min-width: 0; }
  .topbar > span { font-size: 0; }
  .topbar > span .slash { display: none; }
  #breadcrumb { font-size: 12px; }
}
[data-theme=light] .profile-avatar img { outline-color: oklch(0 0 0 / .1); }
@media (max-height: 480px) {
  dialog { max-height: calc(100dvh - 16px); }
  dialog > form { max-height: calc(100dvh - 18px); }
  .dialog-head, .dialog-actions { padding-block: 12px; }
}
@media (prefers-reduced-motion: reduce) { html, .dialog-body, .table-wrap { scroll-behavior: auto; } }