/* The Guide on a computer (docs/DESIGN_SYSTEM.md §2.7, §4.12, §6.3): its own layout, not a stretched phone.
 * From 960 px there is one side rail: header (logo, actions, city), Iris, the navigation and the footer, all inside
 * the rail. The page column starts at the rail and takes its width from the page template (<main data-layout>,
 * web/page-layout.js; widths in app.css). From 1100 px some pages use two columns (like the homes in home.css).
 * Loaded last. Widths, gutters and layers: web/tokens.css. */

@media (min-width: 960px) {
  :root { --rail-head: 188px; --rail-foot: 64px; }   /* heights of the header and footer inside the rail */
  .ptr { display: none !important; }                 /* pull to refresh is a touch gesture */
  .tg-map-grabber, .sheet-grabber { display: none; }

  /* ---------- Rail header: brand, actions on their own row, city ---------- */
  .app-header { position: fixed; top: 0; left: 0; z-index: calc(var(--layer-nav) + 1); width: var(--layout-side-w); height: var(--rail-head); padding: var(--space-6) var(--space-5) var(--space-5); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px 44px 44px; align-content: start; row-gap: var(--space-4); background: var(--color-surface); border: 0; border-right: var(--border-width) solid var(--color-outline); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app-header .app-brand { grid-column: 1 / -1; min-height: 44px; margin: -2px 0; }
  .app-header .brand-logo { height: 40px; }
  .app-header-actions { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0 0 0 -10px; gap: 0; }   /* own row: search, safety, bell and info never cover the logo */
  .app-header #connection { display: none; }
  .app-header .app-city.city-switch { grid-column: 1 / -1; grid-row: 3; display: flex; width: 100%; max-width: none; margin: 0; height: 44px; padding: 0 var(--space-4); justify-content: flex-start; border: var(--card-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--elevation-1); font: var(--type-label); color: var(--color-ink); }
  .app-header .app-city.city-switch .city-switch-caret { margin-left: auto; }
  body[data-page="map"] .app-header { display: grid; }

  /* ---------- Rail navigation: Iris first, the five tabs, then the fixed section ---------- */
  .app-bottom-nav { top: 0; bottom: 0; left: 0; right: auto; z-index: var(--layer-nav); width: var(--layout-side-w); height: auto; display: flex; flex-direction: column; gap: var(--space-1); padding: calc(var(--rail-head) + var(--space-2)) var(--space-4) calc(var(--rail-foot) + var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-top: 0; border-right: var(--border-width) solid var(--color-outline); background: var(--color-surface); }
  .app-bottom-nav a, .app-bottom-nav a[data-nav] { position: relative; flex: none; flex-direction: row; justify-content: flex-start; align-self: stretch; width: auto; gap: var(--space-4); min-height: 48px; padding: 0 var(--space-4); font: var(--type-label); font-size: var(--type-body-size); color: var(--color-ink-2); border-radius: var(--radius-md); transition: background var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); }
  .app-bottom-nav a::before { display: none; }
  .app-bottom-nav a:hover { background: var(--color-surface-2); color: var(--color-ink); }
  /* active entry: soft yellow with an ink bar on the left (not a second yellow block next to Iris) */
  .app-bottom-nav a.active { background: var(--color-yellow-soft); color: var(--color-ink); box-shadow: inset 4px 0 0 var(--color-ink); }
  :where([data-theme="dark"]) .app-bottom-nav a.active { color: var(--color-ink); box-shadow: inset 4px 0 0 var(--color-yellow); }
  .app-bottom-nav .app-nav-icon { width: 22px; height: 22px; flex: none; }
  .app-bottom-nav .app-nav-label { overflow: visible; white-space: normal; }
  .app-bottom-nav a[data-nav="tu"] { margin-bottom: var(--space-4); }
  .app-bottom-nav a[data-nav="tu"]::after { content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: calc(-1 * var(--space-3)); border-top: var(--border-hairline) solid var(--color-line); }
  /* Iris: the yellow circle of the phone becomes the main action of the rail */
  .app-bottom-nav a[data-nav="iris"] { order: -1; min-height: 52px; margin: 0 0 var(--space-3); padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--color-yellow); color: var(--color-block-yellow-text); border: var(--card-border); box-shadow: var(--elevation-2); justify-content: flex-start; }
  .app-bottom-nav a[data-nav="iris"] .app-nav-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .app-bottom-nav a[data-nav="iris"] .app-nav-icon { width: 24px; height: 24px; }
  .app-bottom-nav a[data-nav="iris"]:hover { background: color-mix(in srgb, var(--color-yellow) 82%, var(--color-surface)); }
  .app-bottom-nav a[data-nav="iris"].active { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--elevation-2); }
  .app-bottom-nav .nav-count { position: static; margin-left: auto; }

  /* ---------- Rail footer: at the bottom of the rail, never under a short page ---------- */
  .app-footer { position: fixed; left: 0; bottom: 0; z-index: calc(var(--layer-nav) + 1); width: var(--layout-side-w); height: var(--rail-foot); display: grid; align-content: center; gap: var(--space-1); max-width: none; margin: 0; padding: 0 var(--space-6); background: var(--color-surface); border-right: var(--border-width) solid var(--color-outline); border-top: var(--border-hairline) solid var(--color-line); color: var(--color-muted); font: var(--type-caption); }
  .app-footer > :first-child { color: var(--color-ink-2); font-weight: 800; }

  /* ---------- Page area: the column starts at the rail ---------- */
  .workspace { padding-left: var(--layout-side-w); padding-top: var(--space-7); padding-bottom: var(--space-9); min-height: 100dvh; }
  main { margin-left: 0; margin-right: auto; }
  .personal-tracking-banner { max-width: calc(var(--layout-content) + 2 * var(--gutter)); margin-left: 0; top: 0; }
  body[data-page="map"] .workspace { padding-top: 0; padding-bottom: 0; }
  #toast { bottom: var(--space-7); left: calc(var(--layout-side-w) + (100vw - var(--layout-side-w)) / 2); }

  /* Welcome and sign-in: no rail, the column in the middle (docs/AUDIT_DESIGN.md §4 n. 1) */
  body:is([data-page="welcome"], [data-page="auth"]) .app-bottom-nav, body:is([data-page="welcome"], [data-page="auth"]) .app-footer { display: none; }
  body[data-page="welcome"] .app-header { position: static; width: auto; height: auto; display: flex; padding: var(--space-5) var(--gutter); background: transparent; border-right: 0; }
  body[data-page="welcome"] .app-header-actions { margin-left: auto; }
  body[data-page="welcome"] .app-header .app-city.city-switch { width: auto; }
  body:is([data-page="welcome"], [data-page="auth"]) .workspace { padding-left: 0; padding-top: 0; }
  body:is([data-page="welcome"], [data-page="auth"]) main { margin: 0 auto; }

  /* ---------- Map and full-screen tools: everything right of the rail ---------- */
  .tg-map-page { inset: 0 0 0 var(--layout-side-w); display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .tg-map-page > .tg-map-main { position: relative; inset: auto; grid-column: 2; grid-row: 1 / span 2; }
  .tg-map-page > .tg-map-overlay { overflow-x: clip; position: relative; inset: auto; grid-column: 1; grid-row: 1; width: auto; padding: var(--space-5) var(--space-5) var(--space-2); background: var(--color-surface); border-right: var(--border-width) solid var(--color-outline); pointer-events: auto; z-index: 700; }
  .tg-map-page .tg-chip-scroll:not(.tg-map-subchips) { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); justify-content: start; gap: var(--space-3) var(--space-2); overflow-x: auto; margin: 0 calc(-1 * var(--space-5)); padding: var(--space-1) var(--space-5) var(--space-4); scrollbar-width: thin; }
  .tg-map-page .tg-chip-scroll .tg-chip, .tg-map-page .tg-chip-scroll > * { flex: none; }
  .tg-map-page [data-map-subtypes] { margin: 0 calc(-1 * var(--space-5)); }
  .tg-map-page [data-map-subtypes] > * { padding-left: var(--space-5); padding-right: var(--space-5); }
  .tg-map-page > .tg-map-sheet { position: relative; inset: auto; grid-column: 1; grid-row: 2; width: auto; height: auto !important; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; border-right: var(--border-width) solid var(--color-outline); border-top: var(--border-hairline) solid var(--color-line); }
  .tg-map-page .tg-map-sheet-head { display: none; }
  .tg-map-page .tg-map-map-actions { display: none; }
  .tg-map-page .tg-map-sheet > .tg-map-results { padding-top: var(--space-4); }
  .tg-map-page .tg-map-fabs, .tg-map-page[data-view="list"] .tg-map-fabs { opacity: 1; pointer-events: auto; bottom: 28px; right: var(--space-5); }
  .tg-map-page .tgv-bar { left: calc(400px + var(--space-5)) !important; right: var(--space-5) !important; top: var(--space-5) !important; }
  .tg-map-page .tg-map-attribution { bottom: 0; }
  .tg-map-page:is([data-vista="tutto"], [data-vista="per-te"]):has(.tg-map-subchips) .tgv-bar { top: var(--space-5) !important; }
  .iris-dock { bottom: 0; }

  /* the place sheet: a panel of 440 px on the right for details instead of a wide dialog in the middle (§4.9) */
  #detail-dialog { width: min(640px, calc(100vw - var(--layout-side-w) - 2 * var(--gutter))); }
}

/* ---------- From 1100 px: two columns where the page needs them (same step as the homes, home.css) ---------- */
@media (min-width: 1100px) {
  /* Oggi (no home chosen yet): title and search on the left, today's plan on the right */
  .home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--space-8); align-items: start; }
  .home-hero > :not(#home-slot-hero) { grid-column: 1; }
  .home-hero > #home-slot-hero { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
  .home-hero .home-search { margin-top: var(--space-5); }
  .home-quick { grid-template-columns: repeat(6, 96px); justify-content: start; gap: var(--space-4); max-width: none; }   /* grouped on the left, not 120 px apart */
  .app-carousel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-rail { --rail-w: calc((100% - 36px) / 4); }

  /* Amici: header, sections at their natural size, content in two columns */
  .amici-head { max-width: none; }
  .amici-seg, .rk-page .rk-scope { max-width: 620px; margin-left: 0; }
  .cm-friends-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--space-7); align-items: start; }
  .cm-friends-page > .cm-invite { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: var(--space-7); margin: 0; }
  .cm-friends-page > .cm-invite .cm-invite-actions > * { flex: 1 1 100%; }
  .cm-friends-page > :not(.cm-invite) { grid-column: 2; }
  .amici-body .grp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

  /* Tu: profile and tiles on the left, settings on the right */
  .tu-page:not(.tu-subpage) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .tu-page:not(.tu-subpage) > .tu-profile, .tu-page:not(.tu-subpage) > .tu-tiles { grid-column: 1; }
  .tu-page .tu-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .tu-page:not(.tu-subpage) > .app-menu-group { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .tu-page:not(.tu-subpage) > :not(.tu-profile, .tu-tiles, .app-menu-group) { grid-column: 1 / -1; }
}