/* FullPlate desktop / laptop layout. Loaded LAST so it overrides on equal
   specificity. Everything lives inside min-width media queries, so the phone
   layout (below 860px) is completely untouched. The app becomes a real
   desktop web app: wide shell, top navigation, a marketplace grid, and a
   two-lane owner dashboard, while diner ordering stays a tidy reading column. */

/* ============================ laptop shell (>=860px) ============================ */
@media(min-width:860px){
  /* drop the "phone on a desk" frame from the 540px rule; become a full app */
  html{background:var(--cream)}
  body{max-width:1180px;box-shadow:none}
  .app{padding-bottom:48px}

  /* brand header: sticky, sits at the top of the centered app column */
  header{height:60px}
  .tagline{display:none}

  /* bottom tab bar -> horizontal nav pinned to the top-right of the app column */
  .bottomnav{
    position:fixed;top:0;bottom:auto;left:50%;transform:translateX(-50%);
    width:min(1180px,100vw);max-width:none;height:60px;margin:0;padding:0 10px;
    background:transparent;border:0;backdrop-filter:none;
    justify-content:flex-end;gap:2px;z-index:51;pointer-events:none;
  }
  .navbtn{
    pointer-events:auto;flex:0 0 auto;flex-direction:row;width:auto;height:60px;
    gap:8px;padding:0 15px;font-size:13.5px;color:var(--muted);
  }
  .navbtn span{font-size:17px}
  .navbtn.on{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}

  /* cart: floating action pill, bottom-right */
  .cartbar{
    left:auto;right:24px;bottom:24px;width:auto;max-width:380px;
    border-radius:var(--pill);box-shadow:var(--shadow-lg);gap:20px;padding:14px 22px;
  }

  /* home / marketplace becomes a responsive card grid */
  .hero{max-width:780px}
  .hero h1{font-size:40px}
  .hero p{font-size:16px}
  .searchwrap{max-width:600px}
  .citytabs,.kindrow{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  #rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin:8px 16px}
  #rlist .rcard{margin:0;height:100%}

  /* diner ordering + account: a tidy centered reading column inside the wide page */
  #view-restaurant,#view-checkout,#view-account,#view-done,#view-onboard{max-width:720px;margin:0 auto}

  /* owner console uses the full width; tabs wrap instead of scrolling */
  .odash{padding:14px 16px 40px}
  .otabs{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .otabswrap.canright:after,.otabsmore{display:none !important}

  /* sheets / modals: a touch wider and comfortably centered */
  .sheet,.sheet.modsheet{max-width:560px}
}

/* ===================== owner dashboard: two lanes (>=1080px) ===================== */
@media(min-width:1080px){
  #ownerBody{column-count:2;column-gap:24px}
  /* full-width breaks for headers and the big revenue hero */
  #ownerBody .section-label,#ownerBody .ohero{column-span:all;margin-top:6px}
  /* keep every card/row intact within a lane (each lane is wider than a phone) */
  #ownerBody .fppos,
  #ownerBody .orow,
  #ownerBody .hrow,
  #ownerBody .rcard,
  #ownerBody .revstrip,
  #ownerBody .savecard,
  #ownerBody .ostatrow,
  #ownerBody .mrow,
  #ownerBody .co-line,
  #ownerBody .ai-launch,
  #ownerBody .golive,
  #ownerBody .embsnippet,
  #ownerBody .readyline,
  #ownerBody .profcard,
  #ownerBody .loyalcard,
  #ownerBody .trendcard,
  #ownerBody .ocard,
  #ownerBody .checklist{break-inside:avoid}

  /* uniform card-list tabs align into clean rows (a real grid, not newspaper
     column flow) so cards line up. Orders + Reviews were visibly staggered. */
  #ownerBody[data-otab="orders"],
  #ownerBody[data-otab="reviews"],
  #ownerBody[data-otab="promos"],
  #ownerBody[data-otab="bookings"]{
    column-count:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
  }
  /* rows that should run the full width of the grid */
  #ownerBody[data-otab="orders"] .oqsum,
  #ownerBody[data-otab="orders"] .realnote,
  #ownerBody[data-otab="orders"] .empty,
  #ownerBody[data-otab="reviews"] .oqsum,
  #ownerBody[data-otab="reviews"] .rvbar,
  #ownerBody[data-otab="reviews"] .empty,
  #ownerBody[data-otab="promos"] .section-label,
  #ownerBody[data-otab="promos"] .addbtn2,
  #ownerBody[data-otab="promos"] .realnote,
  #ownerBody[data-otab="promos"] .empty,
  #ownerBody[data-otab="bookings"] .section-label,
  #ownerBody[data-otab="bookings"] .fppos-note{grid-column:1 / -1}
  /* in grid mode the cards rely on grid gap, not their own vertical margin */
  #ownerBody[data-otab="orders"] .ocard,
  #ownerBody[data-otab="reviews"] .ocard,
  #ownerBody[data-otab="promos"] .ocard,
  #ownerBody[data-otab="bookings"] .fppos{margin:0}
}