/* Tablet layout (served on tablet.* host via data-device="tablet").
   The desktop dashboard is reused; these rules tune it for a tablet.
   The 3-day calendar is driven by calendar.js (sets --cal-days: 3). */

/* Let the sidebar scroll so all icons remain reachable on shorter screens. */
[data-device="tablet"] .sidenav { overflow-y: auto; }

/* Tighter header so more vertical room goes to content. */
[data-device="tablet"] .dashboard { grid-template-rows: 96px 1fr; gap: var(--s-3); }

/* Slightly slimmer sidebar to give content more width in portrait. */
[data-device="tablet"] body { --sidenav-w: 104px; grid-template-columns: var(--sidenav-w) 1fr; }

/* Apps launcher: 3 across reads better than 4 on a tablet. */
[data-device="tablet"] .apps-grid { grid-template-columns: repeat(3, 1fr); max-width: none; }

/* Groceries: stack search over list in portrait widths. */
@media (max-width: 900px) {
  [data-device="tablet"] .groceries-view { grid-template-columns: 1fr; }
  [data-device="tablet"] .gro-list-col { max-height: 45vh; }
}

/* Pocket-money columns a touch wider for touch. */
[data-device="tablet"] .pm-board { grid-auto-columns: minmax(300px, 1fr); }

/* Comfortable calendar text in the 3-day view. */
[data-device="tablet"] .cal-day-head .dow,
[data-device="tablet"] .cal-day-head .num { font-size: 20px; }
[data-device="tablet"] .event .ev-title { font-size: var(--fs-md); }