/* W5 · Tablet 600–1023 px. The phone objects stay as they are; the page gets two columns
   instead of one stretched phone column. Loaded after every other v9 sheet. */
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* Overview: two balanced columns of cards; the strips keep the full width. */
  #ovGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-count: 2;
    gap: 16px;
    align-items: start;
    grid-auto-flow: row dense;
  }
  #ovGrid > * { min-width: 0; margin: 0; }
  #ovGrid[data-desktop-packed] { grid-auto-rows: 8px; }
  #ovGrid[data-desktop-packed] > * { grid-row: auto / span var(--desktop-rows, 1); }
  #ovGrid > [data-w="spend_split"] { order: 1; }
  #ovGrid > [data-w="upcoming"]    { order: 2; }
  #ovGrid > [data-w="accounts"]    { order: 3; }
  #ovGrid > #r8Limits              { order: 4; }
  #ovGrid > #r8Season              { order: 5; }
  #ovGrid > #r8Health              { order: 6; }
  #ovGrid > #ovStrip               { order: 7; grid-column: 1 / -1; column-span: all; }
  #ovGrid > #restore2Hints         { order: 8; grid-column: 1 / -1; column-span: all; }
  #ovGrid > [data-w="recent"]      { order: 9; }
  #ovGrid > [data-w="budgets"]     { order: 10; }
  #ovGrid > [data-w="cashback"]    { order: 11; }
  #ovGrid > [data-w="next_step"]   { order: 12; }
  #ovStrip, #restore2Hints { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
  #ovStrip > *, #restore2Hints > * { min-width: 0; flex: 1 1 280px; margin: 0; }

  /* Keep the complete sync status below the title and action in narrow cards. */
  #ovAcc .acc__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title sync" "status status";
    gap: 4px 12px;
  }
  #ovAcc .acc__title { grid-area: title; }
  #ovAcc .acc__sync { grid-area: sync; }
  #ovAcc .acc__status { grid-area: status; display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--sans); }
  #ovAcc [data-last-sync] { white-space: nowrap; }

  /* Limits: the page uses the full width (same left edge as the other screens), tiles in two columns. */
  #page-budgets .page-inner { max-width: none; margin: 0; }
  #m4bLimits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  #m4bLimits > * { min-width: 0; margin: 0; }
  #m4bLimits > .m4v2-minis2 { grid-column: 1 / -1; gap: 16px; }

  /* Analysis: KPI tiles side by side, the cards below flow in two balanced columns. */
  html body #page-analytics #r29AnalyticsKpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px; align-items: stretch; }
  html body #page-analytics #r29AnalyticsKpis > .r29-health-kpi { grid-row: span 2; grid-column: 1; margin: 0; }
  html body #page-analytics #r29AnalyticsKpis > :not(.r29-health-kpi) { grid-column: 2; margin: 0; min-width: 0; }
  html body #page-analytics #r29AnalyticsKpis > #r29HealthDetail { grid-column: 1 / -1; }
  #page-analytics #anSpending:not([hidden]) { display: block; column-count: 2; column-gap: 16px; }
  #page-analytics #anSpending :is(.an-r1, .an-r2) { display: contents; }
  #page-analytics #anSpending .card, #page-analytics #anSpending > * { break-inside: avoid; margin: 0 0 16px; min-width: 0; }
}