/* Mobile summaries, breakdowns and details. The initial Overview stays unchanged. */
/* These rules cover the evidence inside disclosures as well as their summaries. */
:is(.drawer, .section-shell, #viewAnalysis) .metric-row { min-width: 0; gap: 12px; }
:is(.drawer, .section-shell, #viewAnalysis) .metric-row > div { min-width: 0; }
:is(.drawer, .section-shell, #viewAnalysis) .metric-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
:is(.drawer, .section-shell) { --brand-2: var(--s2); }
:is(.drawer, .section-shell, #viewAnalysis, #viewRecords) select.m-input { text-overflow: ellipsis; }
.drawer .record-form label { overflow: clip; overflow-clip-margin: 6px; }
:is(.drawer, .section-shell) :is(button, summary, a, input, select, textarea):focus-visible { outline: 2px solid var(--s1); outline-offset: 3px; }
.drawer .drawer-card { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.drawer .drawer-head { align-items: center; }
.drawer .drawer-head h2 { font-size: clamp(20px, 3vw, 26px); }
.drawer .drawer-head .m-btn { flex: none; min-height: 44px; }
.detail-drawer.mi-drawer .drawer-card { grid-column: 2; }
@media (max-width: 1023px) {
  .detail-drawer.mi-drawer { grid-template-columns: minmax(0, 1fr); }
  .detail-drawer.mi-drawer .drawer-card { grid-column: 1; }
}
:is(.drawer, .section-shell) :is(.muted, .form-hint, .detail-hint) { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
:is(.drawer, .section-shell) .detail-section { border: 1px solid var(--border); background: var(--panel-strong); border-radius: 18px; padding: 20px; margin-bottom: 16px; gap: 16px; }
:is(.drawer, .section-shell) .detail-section h3 { font-size: 18px; line-height: 1.35; }
:is(.drawer, .section-shell) .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
:is(.drawer, .section-shell) .detail-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; gap: 10px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
:is(.drawer, .section-shell) .detail-summary .metric-row { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 12px; padding: 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
:is(.drawer, .section-shell) .detail-summary .metric-row:first-child { grid-column: 1 / -1; background: color-mix(in srgb, var(--s1) 9%, var(--panel-strong)); border-color: color-mix(in srgb, var(--s1) 28%, var(--border)); }
:is(.drawer, .section-shell) .metric-row strong { font-size: 14px; font-weight: 550; }
:is(.drawer, .section-shell) .metric-row span { font-size: 13px; line-height: 1.6; margin-top: 6px; }
:is(.drawer, .section-shell) .detail-summary .metric-value { font-size: 23px; line-height: 1.25; text-align: left; letter-spacing: -.035em; }
:is(.drawer, .section-shell) .detail-summary .metric-row:first-child .metric-value { font-size: clamp(28px, 5vw, 38px); }
:is(.drawer, .section-shell) .detail-visual { padding: 16px; background: var(--bg-soft); border-radius: 14px; }
:is(.drawer, .section-shell) .detail-visual:empty { display: none; }
:is(.drawer, .section-shell) .detail-bars { min-height: 220px; }
:is(.drawer, .section-shell) .detail-bar-label { font-size: 13px; }
:is(.drawer, .section-shell) .detail-table-wrap { border-radius: 12px; }
:is(.drawer, .section-shell) .detail-table :is(th, td) { font-size: 14px; padding: 12px; }
:is(.drawer, .section-shell) details { min-width: 0; }
:is(.drawer, .section-shell) :is(.mi-evidence, .mi-more-charts, .mi-model, .record-advanced, .ownership-inputs, .ownership-cash, .tire-details, .obd-topic, .obd-reading-manage, .detail-fold) { border: 1px solid var(--border); background: var(--panel-strong); border-radius: 16px; padding: 0; margin: 16px 0; overflow: hidden; }
:is(.drawer, .section-shell) :is(.mi-evidence, .mi-more-charts, .mi-model, .record-advanced, .ownership-inputs, .ownership-cash, .tire-details, .obd-topic, .obd-reading-manage, .detail-fold) > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 16px; font-size: 14px; font-weight: 600; line-height: 1.5; cursor: pointer; list-style: none; }
:is(.drawer, .section-shell) summary::-webkit-details-marker { display: none; }
:is(.drawer, .section-shell) :is(.mi-evidence, .mi-more-charts, .mi-model, .record-advanced, .ownership-inputs, .ownership-cash, .tire-details, .obd-topic, .obd-reading-manage, .detail-fold) > summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--muted); flex: none; }
:is(.drawer, .section-shell) :is(.mi-evidence, .mi-more-charts, .mi-model, .record-advanced, .ownership-inputs, .ownership-cash, .tire-details, .obd-topic, .obd-reading-manage, .detail-fold)[open] > summary::after { content: "−"; }
:is(.drawer, .section-shell) :is(.mi-evidence, .mi-model, .ownership-inputs, .ownership-cash, .detail-fold) > :not(summary) { margin: 0 16px 16px; }
.drawer .mi-evidence > .detail-section { margin: 0 12px 12px; }
.drawer .mi-evidence--groups { border: 0; border-radius: 0; background: transparent; margin-top: 28px; }
.drawer .mi-evidence--groups > :not(summary) { margin: 0 0 12px; }
.drawer .mi-evidence--groups > h3 { font-size: 18px; margin-bottom: 16px; }
:is(.drawer, .section-shell) .detail-fold > summary small { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
:is(.drawer, .section-shell) .detail-fold-body { display: grid; gap: 16px; min-width: 0; }
:is(.drawer, .section-shell) .detail-summary--facts .metric-row:first-child { grid-column: auto; background: var(--bg-soft); border-color: var(--border); }
:is(.drawer, .section-shell) .detail-summary--facts .metric-row:first-child .metric-value { font-size: 23px; }
:is(.drawer, .section-shell) .detail-summary--facts > :not(.metric-row) { grid-column: 1 / -1; }
:is(.drawer, .section-shell) .detail-fold-body > p { margin: 0; }
:is(.drawer, .section-shell) .reject-list li { padding: 14px 0; font-size: 14px; line-height: 1.65; }
:is(.drawer, .section-shell) .reject-list li span { display: block; margin-top: 6px; }
.section-shell .obd-topic-content { padding: 16px; }
.section-shell .obd-topic-content :is(.obd-hint, .obd-read-note) { font-size: 14px; line-height: 1.65; }
#viewRecords .journal :is(.journal-method, .journal-mile-day, .journal-cost-row) { border-radius: 14px; }
#viewRecords .journal :is(.journal-method, .journal-mile-day, .journal-cost-row) > summary { min-height: 56px; padding: 16px; font-size: 15px; line-height: 1.5; }
#viewRecords .journal .journal-day-detail { padding: 16px; }
#viewRecords .journal :is(.journal-day-detail, .journal-method) :is(p, small) { font-size: 14px; line-height: 1.65; }
#viewRecords .journal .journal-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#viewRecords .journal .journal-facts > div { display: block; min-width: 0; padding: 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; }
#viewRecords .journal .journal-facts dt { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
#viewRecords .journal .journal-facts dd { text-align: left; margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 736px) {
  :is(.drawer, .section-shell, #viewAnalysis) .metric-row { flex-direction: column; align-items: stretch; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); margin-top: 10px; }
  :is(.drawer, .section-shell, #viewAnalysis) .metric-row .metric-value { text-align: left; font-size: 23px; line-height: 1.35; }
  :is(.drawer, .section-shell, #viewAnalysis) .metric-row > div > span { font-size: 14px; line-height: 1.65; }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-summary .metric-row { margin-top: 0; }
  :is(.drawer, .section-shell) .detail-summary--facts { grid-template-columns: minmax(0, 1fr); }
}
.section-shell .panel-head { padding-bottom: 18px; }
.section-shell .panel-body { padding-top: 0; }
.section-shell :is(.ownership-hero, .tire-sets-grid) { gap: 12px; }
.section-shell .ownership-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-shell .ownership-hero > div:first-child { grid-column: 1 / -1; background: color-mix(in srgb, var(--s1) 9%, var(--panel-strong)); border-color: color-mix(in srgb, var(--s1) 28%, var(--border)); }
.section-shell .ownership-hero > div:first-child strong { font-size: 38px; letter-spacing: -.04em; }
.section-shell :is(.ownership-hero small, .tire-set-note) { font-size: 13px; }
.section-shell .tire-set-card { padding: 20px 16px; border-radius: 16px; }
.section-shell .tire-set-card.is-active { background: color-mix(in srgb, var(--s3) 10%, var(--panel-strong)); border-color: var(--s3); }
.section-shell .tire-set-km { font-size: 28px; letter-spacing: -.04em; }
.section-shell .tire-legal { font-size: 18px; }
.section-shell .plan-reco { padding: 20px; border-radius: 14px; }
.section-shell .plan-reco-amps b { font-size: 38px; }
.section-shell .plan-form label { font-size: 14px; }
.section-shell .obd-topic-content > .detail-section { border: 0; padding: 0; }
.section-shell .obd-report { background: color-mix(in srgb, var(--s1) 6%, var(--panel-strong)); }
.drawer .record-form { gap: 16px 14px; }
.drawer .record-form label { font-size: 14px; line-height: 1.5; min-width: 0; }
.drawer .record-form .m-input { margin-top: 7px; min-height: 48px; font-size: 16px; width: 100%; }
.drawer .record-form .m-check { background: var(--bg-soft); padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.drawer .record-form .m-check input { margin-top: 3px; flex: none; }
.drawer .form-section-title { grid-column: 1 / -1; margin: 16px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 17px; }
.drawer .form-section-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.drawer .record-advanced-grid { padding: 16px; }
.drawer .context-fieldset { background: var(--bg-soft); border-radius: 12px; padding: 16px; }
.drawer .record-form-actions { bottom: 0; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin: 8px 0 0; }
.drawer .record-form-actions .m-btn { min-height: 48px; }
.drawer .service-item { border-radius: 14px; padding: 16px; }
.drawer .service-actions button { min-height: 44px; }

/* One leading number, a pair of supporting cards, then one primary chart. */
.metric-insights .mi-nav { padding-bottom: 14px; gap: 6px; }
.metric-insights .mi-nav button { min-height: 44px; padding: 10px 14px; font-size: 14px; }
.metric-insights .mi-heading { padding: 22px 0 16px; }
.metric-insights .mi-heading p { font-size: 14px; }
.metric-insights .mi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; border: 0; }
.metric-insights .mi-stats > div { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: var(--bg-soft); }
.metric-insights .mi-stats > div:first-child { grid-column: 1 / -1; padding: 22px; background: color-mix(in srgb, var(--s1) 9%, var(--panel-strong)); border-color: color-mix(in srgb, var(--s1) 28%, var(--border)); }
.metric-insights .mi-stats > div:first-child strong { font-size: clamp(36px, 6vw, 46px); }
.metric-insights .mi-stats span { font-size: 13px; margin-bottom: 8px; }
.metric-insights .mi-stats strong { font-size: 24px; line-height: 1.25; }
.metric-insights .mi-stats small { font-size: 13px; display: inline; }
.mi-cash-context { font-size: 14px; color: var(--soft); margin: 12px 2px 24px; }
.metric-insights .mi-chart-grid { display: block; }
.metric-insights .mi-primary { margin-top: 20px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-soft); }
.mi-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 0 16px 16px; }
.metric-insights .mi-chart { padding-top: 16px; }
.metric-insights .mi-chart-head h4 { font-size: 15px; }
.metric-insights .mi-chart-head > span { font-size: 12px; }
.metric-insights .mi-plot text { font-size: 12px; }
.metric-insights .mi-legend { font-size: 13px; gap: 8px 16px; }
.metric-insights .mi-note { font-size: 13px; line-height: 1.7; }
.metric-insights .mi-selection { padding: 16px; border-radius: 16px; }
.metric-insights .mi-selection label, .metric-insights .mi-context { font-size: 14px; }
.metric-insights select { min-height: 44px; font-size: 16px; }
.metric-insights input[type="range"] { min-height: 32px; }
.metric-insights .mi-scenario { font-size: 14px; margin-bottom: 18px; }
.metric-insights .mi-readout { font-size: 14px; }
.mi-model > summary strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-model p { font-size: 14px; line-height: 1.7; color: var(--soft); }
.mi-breakdown { margin: 24px 0; }
.mi-breakdown h4 { font-size: 18px; margin: 0 0 16px; }
.mi-share { display: flex; gap: 3px; height: 14px; border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.mi-share i { min-width: 0; }
.mi-categories { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.mi-category + .mi-category { border-top: 1px solid var(--border); }
.mi-category > summary { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 12px; align-items: center; gap: 12px; padding: 16px; list-style: none; cursor: pointer; min-height: 72px; font-size: 15px; }
.mi-category summary > i { height: 10px; width: 10px; border-radius: 50%; }
.mi-category summary small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.mi-category summary > strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.mi-category[open] > summary { background: var(--bg-soft); }
.mi-category summary em { color: var(--muted); font-size: 18px; font-style: normal; }
.mi-category[open] summary em { font-size: 0; }
.mi-category[open] summary em::after { content: "−"; font-size: 18px; }
.mi-items { list-style: none; margin: 0; padding: 0 16px; background: var(--bg-soft); }
.mi-items li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); font-size: 14px; }
.mi-items li div { min-width: 0; }
.mi-items li span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.mi-items li strong { font-weight: 500; overflow-wrap: anywhere; }
.mi-items li b { flex: none; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  :is(#viewAnalysis, #viewRecords) .view-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; padding-right: 8px; }
  :is(#viewAnalysis, #viewRecords) .view-actions .m-input { width: 100%; min-width: 0; }
  .drawer .drawer-card { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
  .drawer .drawer-head { margin: -16px -16px 18px; padding: 16px; }
  :is(.drawer, .section-shell) .detail-section { padding: 16px; }
  :is(.drawer, .section-shell) .detail-summary .metric-row { padding: 14px; }
  .drawer .record-form { grid-template-columns: minmax(0, 1fr); }
  .section-shell .plan-form { grid-template-columns: minmax(0, 1fr); }
  .section-shell .plan-form .span-2 { grid-column: 1; }
  .section-shell .plan-form .m-input { min-width: 0; width: 100%; font-size: 16px; min-height: 48px; }
  .drawer .record-form .span-2, .drawer .form-section-title { grid-column: 1; }
  .drawer .record-advanced-grid { grid-template-columns: minmax(0, 1fr); }
  .drawer .record-form-actions { display: flex; flex-direction: column; align-items: stretch; }
  .mi-secondary-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-insights .mi-primary { padding: 16px 12px; }
  .metric-insights .mi-nav button { padding: 10px 12px; }
  .metric-insights .mi-stats strong { font-size: 23px; }
  .metric-insights .mi-stats small { display: block; margin-top: 4px; }
  .metric-insights .mi-stats > div:first-child small { display: inline; }
  .metric-insights .mi-chart-head { flex-wrap: wrap; }
  .mi-model > summary { flex-wrap: wrap; }
  .mi-category > summary { gap: 10px; padding: 14px 12px; font-size: 14px; }
  .mi-category summary > strong { font-size: 15px; }
  /* Preserve table semantics and add each column's name beside its value. */
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table:has(td[data-label]) { display: block; width: 100%; min-width: 0; }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table:has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table:has(td[data-label]) thead :is(tr, th) { display: block; width: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table:has(td[data-label]) tbody { display: block; }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table:has(td[data-label]) tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--bg-soft); }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; white-space: normal; text-align: right; padding: 8px 0; border: 0; font-size: 14px; overflow-wrap: anywhere; }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table td[data-label]::before { content: attr(data-label); color: var(--muted); text-align: left; font-size: 13px; flex: 0 0 42%; }
  :is(.drawer, .section-shell, #viewAnalysis) .detail-table td[data-label]:first-child { font-weight: 650; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 4px; }
  :is(.drawer, .section-shell, #viewAnalysis) .plan-table td[data-label].plan-col-kw { display: flex; }
}
@media (max-width: 359px) {
  :is(.drawer, .section-shell) .detail-summary { grid-template-columns: minmax(0, 1fr); }
  .section-shell .ownership-hero { grid-template-columns: minmax(0, 1fr); }
  .mi-category > summary { grid-template-columns: 8px minmax(0, 1fr) 12px; }
  .mi-category summary > strong { grid-column: 2; }
  .mi-category summary em { grid-column: 3; grid-row: 1; }
}

/* Analysis uses the same cash summary and breakdown as its expanded view. */
#viewAnalysis { --brand-2: var(--s2); }
#viewAnalysis .an-pane { grid-template-columns: minmax(0, 1fr); }
#viewAnalysis .an-pane > * { min-width: 0; }
#viewAnalysis .panel-head > div { min-width: 0; }
#viewAnalysis .m-btn { white-space: normal; max-width: 100%; }
#viewAnalysis .an-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; min-width: 0; }
#viewAnalysis .an-tabs button { min-width: 0; min-height: 46px; padding: 10px 4px; font-size: 14px; white-space: normal; }
#viewAnalysis .panel-head { align-items: center; flex-direction: row; justify-content: space-between; gap: 12px; padding-bottom: 18px; }
#viewAnalysis .panel-head h3 { font-size: 20px; }
#viewAnalysis .card-link { min-height: 44px; }
.analysis-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.analysis-summary .metric-row { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-soft); }
.analysis-summary .metric-row:first-child { grid-column: 1 / -1; padding: 22px; background: color-mix(in srgb, var(--s1) 9%, var(--panel-strong)); border-color: color-mix(in srgb, var(--s1) 28%, var(--border)); }
.analysis-summary .metric-row strong { font-size: 14px; font-weight: 500; }
.analysis-summary .metric-row span { font-size: 13px; line-height: 1.6; margin-top: 6px; }
.analysis-summary .metric-value { font-size: 24px; letter-spacing: -.035em; text-align: left; overflow-wrap: anywhere; white-space: normal; }
.analysis-summary .metric-row:first-child .metric-value { font-size: clamp(34px, 6vw, 44px); }
#viewAnalysis :is(.note, .muted, .mi-note, .analysis-caption) { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.analysis-model { border: 1px solid var(--border); border-radius: 16px; margin: 18px 0; overflow: hidden; }
.analysis-model > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 56px; padding: 16px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; }
.analysis-model > summary::-webkit-details-marker { display: none; }
.analysis-model > summary::after { content: "+"; font-size: 22px; color: var(--muted); }
.analysis-model[open] > summary::after { content: "−"; }
.analysis-model > :not(summary) { margin: 0 16px 16px; }
.source-breakdown { margin: 24px 0 0; }
.source-breakdown h4 { margin: 0; font-size: 18px; }
.source-row { border: 1px solid var(--border); border-radius: 14px; margin: 12px 0; background: var(--bg-soft); }
.source-row > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 16px; font-size: 15px; cursor: pointer; list-style: none; min-height: 72px; }
.source-row > summary::-webkit-details-marker { display: none; }
.source-row > summary::after { content: "+"; color: var(--muted); font-size: 22px; }
.source-row[open] > summary::after { content: "−"; }
.source-row summary small { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); }
.source-row summary strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.source-row > div { padding: 0 16px 16px; }
.analysis-model .metric-row { gap: 12px; }
#viewAnalysis .bar-list { padding: 18px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-soft); }
#viewAnalysis .bar-row + .bar-row { margin-top: 20px; }
#viewAnalysis .bar-meta { font-size: 14px; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
#viewAnalysis .bar-track { height: 10px; }
#viewAnalysis .bar-row:nth-child(4n + 2) .bar-fill { background: var(--s2); }
#viewAnalysis .bar-row:nth-child(4n + 3) .bar-fill { background: var(--s3); }
#viewAnalysis .bar-row:nth-child(4n + 4) .bar-fill { background: var(--s4); }
#viewAnalysis .cons-chart { padding: 16px 0; }
#viewAnalysis :is(button, summary, select):focus-visible { outline: 2px solid var(--s1); outline-offset: 3px; }

/* Records: month groups, distinct cards, readable context and touch-sized actions. */
#viewRecords .records-tabs:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#viewRecords .records-tabs button { min-height: 46px; padding: 10px 8px; font-size: 14px; }
#viewRecords .journal-list { gap: 12px; }
#viewRecords .journal-group { font-size: 16px; font-weight: 600; color: var(--text); margin: 22px 2px 0; }
#viewRecords .journal-item { border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px; background: var(--bg-soft); gap: 12px; }
#viewRecords .journal-title { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
#viewRecords .journal-title :is(small, .journal-mode) { font-size: 13px; }
#viewRecords .journal-amount { font-size: 18px; }
#viewRecords .journal-meta { margin-top: 8px; font-size: 14px; line-height: 1.6; }
#viewRecords .journal-chips { gap: 6px; margin-top: 12px; }
#viewRecords .chip { font-size: 13px; padding: 5px 10px; font-weight: 450; }
#viewRecords .chip--note { border-radius: 10px; font-style: normal; font-size: 14px; line-height: 1.6; }
#viewRecords .journal-actions { flex-direction: row; justify-content: flex-end; }
#viewRecords .mini-action { min-height: 44px; padding: 0 14px; }
#viewRecords .records-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
#viewRecords .records-summary > div { background: color-mix(in srgb, var(--s1) 8%, var(--panel-strong)); border: 1px solid color-mix(in srgb, var(--s1) 25%, var(--border)); border-radius: 14px; padding: 16px; }
#viewRecords .records-summary span { display: block; font-size: 13px; color: var(--muted); }
#viewRecords .records-summary strong { display: block; margin-top: 8px; font-size: 24px; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
#viewRecords .records-summary small { font-size: 12px; color: var(--muted); }
#viewRecords .journal :is(p, small, .journal-muted) { font-size: 14px; line-height: 1.65; }
#viewRecords .journal :is(button, summary) { min-height: 44px; }
#viewRecords .journal-mile-row { padding: 16px; border-radius: 14px; background: var(--bg-soft); margin-bottom: 10px; }
#viewRecords .journal-mile-row > strong { font-size: 24px; }
#viewRecords .journal-day-card { border-radius: 16px; padding: 16px; }
#viewRecords .journal-day-summary { min-height: 56px; }
#viewRecords .journal-row { border-radius: 14px; padding: 16px; }
#viewRecords .journal-kpis > div { padding: 16px; border-radius: 14px; background: color-mix(in srgb, var(--s1) 8%, var(--panel-strong)); }
#viewRecords .journal-tools { gap: 12px; }
#viewRecords .journal input, #viewRecords .journal select { min-height: 48px; }

/* Vehicle: profile facts and clearly separated destination cards. */
#viewMenu .veh-grid { gap: 18px; grid-template-columns: minmax(0, 1fr); }
#viewMenu .veh-grid > *, #viewMenu .card-h > div { min-width: 0; }
#viewMenu .card-h { flex-wrap: wrap; }
#viewMenu .card-h h2 { font-size: 20px; }
#viewMenu #menuVehicleName { font-size: 28px; letter-spacing: -.035em; }
#viewMenu .veh-facts { gap: 12px; margin-top: 20px; }
#viewMenu .veh-facts div { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-soft); gap: 8px; }
#viewMenu .veh-facts span { font-size: 13px; }
#viewMenu .veh-facts b { font-size: 21px; letter-spacing: -.025em; overflow-wrap: anywhere; }
#viewMenu .row-item { min-height: 76px; gap: 14px; padding: 16px 0; }
#viewMenu .row-title { font-size: 16px; }
#viewMenu .row-meta { font-size: 14px; line-height: 1.6; margin-top: 4px; }
#viewMenu .row-ic { width: 44px; height: 44px; border-radius: 14px; }
#viewMenu .m-btn { min-height: 44px; }
#viewMenu .row-item[aria-current] { background: color-mix(in srgb, var(--s1) 9%, var(--panel-strong)); border-radius: 14px; padding: 16px 12px; }
#viewMenu #themeToggle .pill { white-space: normal; text-align: right; }
@media (max-width: 600px) {
  #viewRecords .journal-head { flex-wrap: wrap; gap: 6px 16px; }
  #viewRecords .journal-actions { grid-column: 2; }
  #viewAnalysis .analysis-summary .metric-row { padding: 14px; }
  #viewAnalysis .analysis-summary .metric-row:first-child { padding: 20px; }
  #viewAnalysis .analysis-summary .metric-value { font-size: 23px; }
  #viewAnalysis .analysis-summary .metric-row:first-child .metric-value { font-size: 36px; }
  #viewMenu .veh-facts b { font-size: 20px; }
}
@media (max-width: 359px) {
  #viewAnalysis .an-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewRecords .records-summary, #viewAnalysis .analysis-summary { grid-template-columns: minmax(0, 1fr); }
  #viewMenu .veh-facts { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  #viewAnalysis .an-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #viewMenu .veh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}