/* The Guide on a computer (docs/SITO_E_APP.md): its own layout, not a stretched phone.
 * ≥ 1100 px: a real sidebar (logo, city, navigation with labels, notifications), pages that use the width
 * (two columns where it helps), and a map with a fixed column of search, filters and results beside it.
 * 960–1099 px keeps the narrow rail of app.css, with the Iris button fixed. Loaded after creuza.css. */

/* ---------- 960–1099: narrow rail, Iris no longer covers «Mappa» ---------- */
@media (min-width: 960px) {
  .app-bottom-nav { grid-auto-rows: 74px; }
  .app-bottom-nav a[data-nav="iris"] { margin-top: 6px; align-self: center; }
  .ptr { display: none !important; }          /* pull to refresh is a touch gesture */
  .tg-map-grabber, .sheet-grabber { display: none; }
}

@media (min-width: 1100px) {
  :root { --side-w: 248px; --header-h: 0px; --gutter: 32px; }

  /* ---------- Sidebar: brand, city, actions, navigation ---------- */
  .app-header { position: fixed; top: 0; left: 0; z-index: 60; width: var(--side-w); height: auto; padding: 18px 18px 0; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 12px; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app-header .app-brand { grid-column: 1; }
  .app-header .brand-logo { height: 40px; }
  .app-header-actions { grid-column: 2; grid-row: 1; margin: 0; gap: 0; }
  .app-header #connection { display: none; }
  .app-header .app-city.city-switch { grid-column: 1 / -1; grid-row: 2; display: flex; width: 100%; max-width: none; margin: 0; height: 40px; padding: 0 14px; justify-content: flex-start; border: var(--card-border); border-radius: 14px; background: var(--surface); box-shadow: var(--card-shadow); font-size: 14px; color: var(--ink); }
  .app-header .app-city.city-switch .city-switch-caret { margin-left: auto; }

  .app-bottom-nav { top: 0; bottom: 0; left: 0; right: auto; width: var(--side-w); height: auto; display: flex; flex-direction: column; gap: 6px; padding: 148px 16px 20px; border-right: 2px solid var(--outline); border-top: 0; background: var(--surface); }
  .app-bottom-nav a { flex-direction: row; justify-content: flex-start; gap: 14px; height: 48px; padding: 0 14px; font-size: 15px; font-weight: 750; color: var(--ink-2); border-radius: 14px; transition: background .15s, color .15s; }
  .app-bottom-nav a::before { display: none; }
  .app-bottom-nav a:hover { background: var(--surface-2); color: var(--ink); }
  .app-bottom-nav a.active { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 2px var(--outline); }
  .app-bottom-nav .app-nav-icon { width: 22px; height: 22px; }
  .app-bottom-nav .app-nav-label { overflow: visible; }
  /* Iris: the yellow button of the phone becomes the main action of the sidebar */
  .app-bottom-nav a[data-nav="iris"] { order: -1; width: auto; height: 52px; margin: 0 0 10px; align-self: stretch; border-radius: 16px; background: var(--gold); color: var(--ink); border: var(--card-border); box-shadow: var(--card-shadow); padding: 0 14px; 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: #ffd35a; }
  .app-bottom-nav a[data-nav="iris"].active { background: var(--accent); color: #fff; }
  .app-bottom-nav .nav-count { position: static; margin-left: auto; }
  .app-bottom-nav a, .app-bottom-nav a[data-nav] { align-self: stretch; width: auto; }
  body[data-page="map"] .app-header { display: grid; }
  body[data-page="map"] .workspace { padding-top: 0; }

  /* ---------- Page area ---------- */
  .workspace { padding-left: var(--side-w); padding-top: 28px; padding-bottom: 48px; min-height: 100dvh; }
  main { max-width: 1120px; padding: 8px var(--gutter) 24px; }
  .app-footer { max-width: 1120px; padding: 0 var(--gutter); }
  .personal-tracking-banner { max-width: 1120px; top: 0; }
  /* forms, reading and settings stay at a readable width inside the wide page */
  :is(.cm-setup, .legal-page, .app-privacy-page, .tg-apponly, .sfy-page, .ntf-page) { max-width: 820px; margin-left: 0; margin-right: auto; }
  .app-iris-page { max-width: 880px; margin: 0 auto; }
  body:is([data-page="privacy"], [data-page="gusti"], [data-page="profile"], [data-page="notifiche"], [data-page="roadmap"]) main { max-width: 860px; }
  body[data-page="auth"] main { max-width: 520px; }
  body[data-page="auth"] .workspace { padding-left: 0; }
  body[data-page="welcome"] .workspace, body[data-page="welcome"] .app-header { padding-left: 0; }
  #toast { left: calc(var(--side-w) + (100vw - var(--side-w)) / 2); }

  /* ---------- Oggi: 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: 32px; 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-title { font-size: clamp(44px, 4.2vw, 64px); line-height: .95; }
  .home-hero .home-search { margin-top: 18px; }
  .home-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
  .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 { max-width: 620px; }
  .cm-friends-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 28px; align-items: start; }
  .cm-friends-page > .cm-invite { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 24px; margin: 0; }
  .cm-friends-page > .cm-invite .cm-invite-actions > * { flex: 1 1 100%; }
  .cm-friends-page > :not(.cm-invite) { grid-column: 2; }
  .rk-page .rk-scope { max-width: 620px; }
  .amici-seg, .rk-page .rk-scope { margin-left: 0; }
  .amici-body .grp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

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

  /* ---------- Map: a fixed column (search, filters, results) beside the map ---------- */
  .tg-map-page { inset: 0 0 0 var(--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: 16px 16px 6px; background: var(--surface); border-right: 2px solid var(--outline); pointer-events: auto; z-index: 700; }
  .tg-map-page .tg-chip-scroll:not(.tg-map-subchips) { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 8px; }
  .tg-map-page .tg-chip-scroll .tg-chip, .tg-map-page .tg-chip-scroll > * { flex: none; }
  .tg-map-page [data-map-subtypes] { margin: 0 -16px; }
  .tg-map-page [data-map-subtypes] > * { padding-left: 16px; padding-right: 16px; }
  .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: 2px solid var(--outline); border-top: 1px solid var(--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: 12px; }
  .tg-map-page .tg-map-fabs, .tg-map-page[data-view="list"] .tg-map-fabs { opacity: 1; pointer-events: auto; bottom: 28px; right: 16px; }
  .tg-map-page .tgv-bar { left: calc(400px + 16px) !important; right: 16px !important; top: 16px !important; }
  .tg-map-page .tg-map-attribution { bottom: 0; }
  .zones-page { inset: 0 0 0 var(--side-w); }
  .biz-cart-bar { left: calc(var(--side-w) + var(--gutter)); }

  #detail-dialog { width: min(720px, calc(100vw - 96px)); }
}

@media (min-width: 1500px) {
  :root { --side-w: 264px; }
  main, .app-footer { max-width: 1240px; }
}