/* =============================================================
   desktop.css - Wide-screen enhancements
   -------------------------------------------------------------
   The app stays mobile-first: every rule here is gated behind a
   min-width media query and overrides the phone layout only when
   there is room. Keep broad shell changes first, then panel-level
   refinements in the same order as index.html. Tiers:
     760px+        — labeled side rail (BHX ⇄ AMS + dates), wider
                     panel padding, per-panel grids begin
     760–1040px    — the rail collapses to icons-only
     940/1120px    — density steps (category/spot grids)
     1180px+       — two-column layouts per panel (Schedule day
                     list beside the agenda, Money group page
                     split, Map beside its summary, Info main/side)
     1600px+       — extra grid columns on very wide screens
   ============================================================= */

@media (min-width:760px){
  body{
    min-height:100vh;
    background:
      linear-gradient(135deg, rgba(255,106,61,.16), transparent 34%),
      linear-gradient(315deg, rgba(15,122,120,.18), transparent 38%),
      var(--chrome);
  }

  .app{
    width:100%;
    max-width:none;
    margin:0;
    min-height:100vh;
    display:grid;
    grid-template-columns:176px minmax(0,1fr);
    grid-template-rows:1fr;
    background:var(--mist);
    box-shadow:none;
  }

  .panel{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:none;
    min-height:100vh;
    padding:34px clamp(34px,4.5vw,72px) 68px;
  }
  .panel.active{display:block}

  .bottom-nav{
    position:sticky;
    top:0;
    bottom:auto;
    left:auto;
    transform:none;
    grid-column:1;
    grid-row:1;
    width:176px;
    max-width:none;
    height:100vh;
    align-self:start;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:22px 14px;
    border-top:0;
    border-right:1px solid var(--chrome-line);
  }
  .bottom-nav::before{
    content:'BHX ⇄ AMS';
    display:block;
    color:var(--chrome-contrast);
    font-family:var(--font-display);
    font-size:31px;
    line-height:.95;
    letter-spacing:0;
    padding:4px 8px 16px;
  }
  .bottom-nav::after{
    content:'19-25 Jul 2026';
    display:block;
    margin-top:auto;
    padding:12px 8px 4px;
    color:var(--chrome-muted);
    font:700 10.5px/1.3 var(--font-mono);
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .nav-btn{
    flex:0 0 auto;
    min-height:46px;
    flex-direction:row;
    justify-content:flex-start;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
  }
  .nav-btn svg{width:20px; height:20px}
  .nav-btn span{font-size:12px}
  .nav-btn:hover{color:var(--chrome-contrast); background:rgba(255,255,255,.06)}
  .nav-btn.active{background:rgba(255,106,61,.12)}

  .section-title{font-size:24px; margin-top:30px}
  .section-sub{max-width:760px; font-size:14px}
  .quicklinks{flex-wrap:wrap; overflow:visible; align-content:flex-start}
  .qchip{white-space:nowrap}
  .foot{grid-column:1 / -1}

  /* Overview */
  #panel-overview.active{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
    gap:0 28px;
    align-items:start;
    align-content:start;
  }
  #panel-overview .overview-main{grid-column:1}
  #panel-overview .overview-side{grid-column:2}
  #panel-overview > .foot{grid-column:1 / -1}
  #panel-overview .overview-brief-title{margin-top:0}

  .ticket{margin-top:0}
  .ticket-top{padding:28px 30px 20px}
  .ticket-route{font-size:clamp(38px,5vw,56px); max-width:980px}
  .ticket-dates{font-size:14px}
  .ticket-stats{padding:20px 30px 26px}
  .tstat .num{font-size:20px}

  .brief{padding:6px 18px; margin-bottom:0}

  /* Schedule */
  #panel-schedule .schedule-strip-wrap,
  #panel-schedule .schedule-agenda{max-width:920px}
  .agenda-canvas{--hour-px:62px}
  .agenda-day-head{padding:16px 18px}
  .agenda-day-head h3{font-size:23px}

  /* Money */
  .stat-cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
  }
  .stat-card.wide{grid-column:auto}
  .donut-wrap{
    max-width:760px;
    gap:30px;
    padding:24px 28px;
  }
  .donut{width:164px; height:164px}
  .donut::after,
  .donut-center{inset:25px}
  #panel-money .note-box{margin-top:14px}
  .budget-editor-card{flex-direction:row; align-items:center; justify-content:space-between}
  .budget-editor-form{display:block}
  .budget-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .budget-form-wide{grid-column:1 / -1}
  .settlement-head{flex-direction:row; align-items:flex-start; justify-content:space-between}
  .settlement-totals{justify-content:flex-end}
  .checklist-add{max-width:640px}
  .admin-editor-head{flex-direction:row; align-items:flex-start; justify-content:space-between}
  .admin-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-editor-json{grid-column:1 / -1}
  .invite-card:not(.invite-form),
  .invite-head{flex-direction:row; align-items:flex-start; justify-content:space-between}
  .invite-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* Map + Money pager pages */
  .map-page-dots{bottom:22px; left:calc(50% + 88px)}
  #panel-map .map-page,
  #panel-money .map-page{padding-inline:clamp(24px,4vw,48px)}
  .route-summary{grid-template-columns:repeat(2,minmax(0,220px)); max-width:460px}
  .google-map-frame{height:min(58vh,620px)}
  .map-cta{justify-content:flex-end}
  .btn{max-width:220px}
  .stint-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spot-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}

  /* Info */
  #panel-info .info-app{margin-bottom:8px}
  #panel-info .app-pref-card{max-width:640px}
  #faq,
  #linkgroups,
  #member-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:start;
  }
  #faq{margin-bottom:22px}
  #linkgroups{gap:16px 10px}
  .faq-item,
  .linkgroup{margin-bottom:0}
  .linkgroup .lg-title{
    display:block;
    margin:0 0 10px;
    padding-left:2px;
    line-height:1;
  }

  /* Auth */
  .auth-screen{
    grid-column:1 / -1;
    padding:32px;
  }
  .app.auth-pending .auth-screen,
  .app.auth-blocked .auth-screen{
    align-items:center;
    justify-content:center;
  }
  .auth-card{
    max-width:420px;
    min-height:0;
    padding:30px;
    border-radius:var(--radius-md);
    background:var(--paper);
    box-shadow:var(--shadow);
  }
  .auth-title{font-size:54px}
  .auth-copy{max-width:320px}
}

@media (min-width:940px){
  #categories{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-items:start;
  }
  .cat-accordion{margin-bottom:0}
  .cat-body{padding-bottom:4px}

  .spot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (min-width:1120px){
  .spot-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (min-width:1180px){
  /* Schedule: day list beside the agenda, like a calendar sidebar */
  #panel-schedule.active{
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:0 30px;
    align-items:start;
    align-content:start;
  }
  #panel-schedule > .section-title,
  #panel-schedule > .section-sub,
  #panel-schedule > .tz-toggle,
  #panel-schedule > .admin-editor,
  #panel-schedule > .schedule-strip-wrap{
    grid-column:1;
  }
  #panel-schedule > .schedule-agenda{
    grid-column:2;
    grid-row:1 / span 5;
    max-width:none;
  }
  #panel-schedule .schedule-strip-wrap{
    max-width:none; padding-top:12px;
    box-shadow:none; clip-path:none; /* sidebar layout — no full-bleed band */
  }
  #panel-schedule .day-strip{grid-template-columns:1fr; gap:8px}
  #panel-schedule .day-chip{
    flex-direction:row;
    justify-content:flex-start;
    align-items:baseline;
    gap:10px;
    padding:11px 14px;
  }
  #panel-schedule .day-chip .dc-num{font-size:17px}
  .agenda-canvas{--hour-px:66px}

  /* Map: summary column beside the big map */
  #panel-map .map-page[aria-label="The map"]{
    display:grid;
    grid-template-columns:330px minmax(0,1fr);
    gap:0 26px;
    align-items:start;
    align-content:start;
  }
  #panel-map .map-page[aria-label="The map"] > .section-title,
  #panel-map .map-page[aria-label="The map"] > .section-sub,
  #panel-map .map-page[aria-label="The map"] > .admin-editor,
  #panel-map .map-page[aria-label="The map"] > .route-summary{
    grid-column:1;
  }
  #panel-map .map-page[aria-label="The map"] > .map-frame{
    grid-column:2;
    grid-row:1 / span 5;
  }
  #panel-map .map-page[aria-label="The map"] .route-summary{
    grid-template-columns:1fr;
    max-width:none;
  }
  .google-map-frame{height:min(70vh,720px)}

  /* Money: group budget page splits into summary + categories */
  #panel-money .map-page[aria-label="Group budget"]{
    display:grid;
    grid-template-columns:minmax(380px,430px) minmax(0,1fr);
    gap:0 24px;
    align-items:start;
    align-content:start;
  }
  #panel-money .money-main{grid-column:1}
  #panel-money .money-category-stack{grid-column:2}
  #panel-money .money-category-title{margin-top:2px}
  #panel-money .money-main .stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #panel-money .money-main .stat-card.wide{grid-column:1 / -1}
  #panel-money .money-main .donut-wrap{max-width:none}
  #panel-money .map-page[aria-label="My budget"] > *,
  #panel-money .map-page[aria-label="My checklist"] > *{max-width:760px}

  /* Info: FAQ/links beside crew */
  #panel-info.active{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
    gap:0 24px;
    align-items:start;
    align-content:start;
  }
  #panel-info > .info-app{grid-column:1 / -1}
  #panel-info > .info-main{grid-column:1; grid-row:2}
  #panel-info > .info-side{grid-column:2; grid-row:2}
  #panel-info .info-main-title,
  #panel-info .info-crew-title{margin-top:2px}
  #panel-info > .foot{grid-column:1 / -1}
  #panel-info #member-list{grid-template-columns:1fr}
}

@media (min-width:1600px){
  #categories{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stint-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .spot-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (min-width:760px) and (max-width:1040px){
  .app{grid-template-columns:78px minmax(0,1fr)}
  .bottom-nav{width:78px; padding-inline:7px}
  .bottom-nav::before,
  .bottom-nav::after{display:none}
  .nav-btn{flex-direction:column; min-height:66px; justify-content:center; gap:3px; padding:9px 6px}
  .nav-btn span{font-size:9.5px}

  #panel-overview.active{display:block}
  .stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card.wide{grid-column:1 / -1}
  .donut-wrap{align-items:flex-start}
  .route-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-page-dots{left:calc(50% + 39px)}
  .stint-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot-grid,
  #faq,
  #linkgroups,
  #member-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}