/* ============================================================================
   RONIZ — tablet and desktop
   ----------------------------------------------------------------------------
   The site was designed phone-first and that base is correct. NOTHING in this
   file may change it: every rule here lives inside a min-width media query, so
   at 767px and below this stylesheet is inert. That is not a convention, it is
   checked by a test (apps/menu/tests/test_desktop_css.py).

   Breakpoints, from the brief:
     mobile   ≤ 767   untouched
     tablet   768–1023
     desktop  1024+
     wide     1440+   (only where extra room actually buys something)

   Tablet is not "small desktop". Portrait tablet is a big phone and keeps the
   phone's single column; landscape tablet is a small desktop and gets the
   desktop treatment, so a few rules key off orientation rather than width.

   RTL: logical properties only (inset-inline-*, margin-inline, padding-inline).
   In dir=rtl, inline-start is the RIGHT edge — which is where the cart drawer
   is meant to be, so it is also the correct side by the brief's own wording.
   ========================================================================= */


/* ==========================================================================
   1. DIALOGS — the loudest problem on a wide screen
   ==========================================================================
   The product sheet and the cart are bottom sheets: right on a phone, absurd
   on a 27" monitor, where a full-bleed panel means a 1400px-wide photograph
   and a checkout button a metre long.

   The product sheet becomes a centred modal: it is a focused detail view, you
   read it and you decide.

   The cart becomes a side drawer instead, and that difference is deliberate —
   a guest editing an order wants to keep seeing the menu they are ordering
   from, so the cart takes a column rather than the middle of the screen. At
   tablet width there is not enough room beside a drawer for the menu to stay
   useful, so there the cart is a centred modal too.

   Both keep their own inner scrolling; the page behind never scrolls. */

@media (min-width: 768px) {


/* ---------------------------------------------------------------------------
   A note on the doubled class names below (.rc-sheet.rc-sheet).

   The cart lives in a partial that is included at the END of the body, so its
   <style> block comes AFTER this file's <link> in the document. Same
   specificity, later position — it wins every tie, and the drawer quietly
   kept the phone's max-height:90vh while everything without a conflict
   applied. Doubling the class raises specificity by one class instead, which
   does not depend on where anyone chooses to include a partial next.
   ------------------------------------------------------------------------ */

  /* ---- shared dialog behaviour ---- */
  .sheet-ov,
  .rc-ov.rc-ov {
    /* a wash rather than a curtain: on a big screen you can see the page the
       dialog belongs to, which is what makes it read as a layer */
    background: rgba(4, 16, 9, .58);
  }

  /* ---- product sheet: centred modal ---- */
  .sheet {
    inset-block: auto;
    inset-inline: 0;
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100vw - 96px));
    margin-inline: auto;
    max-height: min(86vh, 780px);
    border-radius: 26px;
    border: 1px solid rgba(216, 180, 92, .3);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
    padding-bottom: 0;
    /* The base hides this with translateY(103%). Centred, that trick is gone,
       so the closed state needs saying explicitly — otherwise the sheet would
       simply sit in the middle of the screen, permanently. */
    transform: translateY(-50%) scale(.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.32, .72, 0, 1),
                opacity .2s ease;
  }
  .sheet.show {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* the grab handle is a touch affordance; a mouse does not drag sheets */
  .sheet .grip { display: none; }
  .sheet .media {
    margin-top: 20px;
    /* 1:1 stays 1:1 — capped by size, never by reshaping the frame */
    width: min(100% - 40px, 380px);
    max-height: none;
  }
  .sheet .body { padding: 18px 26px 26px; }

  /* ---- cart: centred modal at tablet width ---- */
  .rc-sheet.rc-sheet {
    inset-block: auto;
    inset-inline: 0;
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100vw - 96px));
    margin-inline: auto;
    max-height: min(86vh, 820px);
    border-radius: 26px;
    border: 1px solid rgba(216, 180, 92, .28);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
    padding-bottom: 18px;
    transform: translateY(-50%) scale(.97);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .26s cubic-bezier(.32, .72, 0, 1),
                opacity .2s ease;
  }
  .rc-sheet.rc-sheet.show {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .rc-grip.rc-grip { display: none; }
  .rc-pane.rc-pane { padding-inline: 24px; }
  /* vh caps were sized against a phone; inside a dialog that already has its
     own maximum they only make the list smaller than it needs to be */
  .rc-list.rc-list { max-height: 46vh; }
  .rc-addrs.rc-addrs { max-height: 44vh; }

  /* ---- image cropper (panel) ---- */
  .rzc { max-width: 520px; }
}


@media (min-width: 1024px) {

  /* ---- cart: side drawer, pinned to the inline start (the right, in RTL) ---
     so the menu stays visible and usable while the order is being edited */
  .rc-sheet.rc-sheet {
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: 0;
    bottom: 0;
    width: min(430px, 40vw);
    margin-inline: 0;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border: none;
    border-inline-end: 1px solid rgba(216, 180, 92, .28);
    box-shadow: -30px 0 70px -40px rgba(0, 0, 0, .9);
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* the panes scroll, not the drawer */
    /* transforms are physical, not logical: +X is the visual right in both
       directions, and the drawer's home edge is the visual right */
    transform: translateX(100%) scale(1);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    opacity: 1;
    visibility: visible;
    padding-bottom: 0;
  }
  .rc-sheet.rc-sheet.show { transform: translateX(0); }
  .rc-pane.rc-pane {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 24px;
  }
  .rc-list.rc-list { max-height: none; }
  .rc-addrs.rc-addrs { max-height: none; }

  .sheet { width: min(600px, calc(100vw - 160px)); }
  .sheet .media { width: min(100% - 52px, 420px); }
}


/* ==========================================================================
   2. THE MENU — /order/ and /order/<key>/
   ==========================================================================
   A single 760px column on a 1440px screen is mostly empty green. The rows
   become a grid, and the category rail — a horizontal scroller on a phone —
   becomes a sticky column, so every category is visible at once instead of
   being somewhere off the side of a strip. */

@media (min-width: 768px) {
  /* hub: the category tiles have room for another column before they start
     looking like buttons rather than cards */
  .wrap { max-width: 1080px; }

  /* category page: two columns of dishes */
  .rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 26px;
  }
  /* A hairline under each row is a list convention; once the rows sit side by
     side it reads as a table instead. Cards say "grid" without adding any
     colour the palette does not already have. */
  .rows .row {
    border-bottom: none;
    border: 1px solid rgba(216, 180, 92, .13);
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .035);
    transition: border-color .2s, background .2s;
  }
  .rows .row:hover {
    border-color: rgba(216, 180, 92, .34);
    background: rgba(255, 255, 255, .06);
  }
  .rows .row.on { border-color: var(--gold); }

  /* the suggestion keeps its overlay design and its square frame; it is held
     back from spanning 1000px because a 1:1 frame that wide is a wall */
  .hero { grid-column: 1 / -1; }
  .hero .frame { max-width: 520px; margin-inline: auto; }
  .hero .body { max-width: 520px; margin-inline: auto; }
}

/* portrait tablet is a big phone: one column reads better than two narrow
   ones, and the thumbnails stay legible */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .rows { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  /* content stops growing before the line length stops being readable */
  .rows { gap: 10px 22px; }
  .wrap {
    max-width: 1180px;
    padding-inline: 28px;
  }

  /* ---- the category rail becomes a sticky sidebar ----
     .page is display:contents on mobile — an inert wrapper that exists only
     so this grid has something to hang on. */
  .page {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    max-width: 1280px;
    margin-inline: auto;
    gap: 0 24px;
    padding-inline: 24px;
  }
  .page .rail {
    position: sticky;
    top: calc(var(--hdr-h, 76px) + var(--rab-h, 0px) + 18px);
    z-index: 30;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding: 0;
  }
  .page .rail-in {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    overflow: visible;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(216, 180, 92, .16);
  }
  .page .rail-in .rc {
    width: 100%;
    justify-content: flex-start;
    min-height: 42px;
    white-space: normal;
  }
  .page .wrap {
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }
  /* the sidebar already carries the page's width; the grid must not add its
     own centring on top of it */
  .page .rows { gap: 6px 28px; }
}

@media (min-width: 1440px) {
  .page { max-width: 1340px; grid-template-columns: 250px minmax(0, 1fr); }
  .rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero .frame, .hero .body { max-width: 560px; }
}


/* ==========================================================================
   3. THE PANEL — used on a desk far more than on a phone
   ========================================================================== */



/* ==========================================================================
   4. HOME — deliberately left alone
   ==========================================================================
   The homepage already carries its own desktop rules and they are considered
   ones: the hero copy is pinned at right:8% with max-width:600px from 768 up,
   the menu grid goes to three columns at 1024, the top nav replaces the
   bottom bar at 900. Its <style> block also sits later in the document than
   this file, so anything written here would lose the tie and produce a page
   styled half from each opinion.

   Overriding a design that exists, from a stylesheet that cannot win, is
   worse than leaving it: it costs the next person an afternoon working out
   which of the two files is in charge. If the homepage is to be reworked, it
   should be reworked in its own <style> block, as its own task.
   ========================================================================= */


/* ==========================================================================
   5. PANEL — mostly already right, one thing that was not
   ==========================================================================
   The dashboard tiles are auto-fill and already form four columns on a wide
   screen; the calls board is two real columns from 760 up; menu management is
   a three-pane layout with its own breakpoint. Those needed nothing.

   The calls report strip did. `repeat(auto-fit, minmax(120px, 1fr))` fills
   the row with as many 120px tracks as fit — eight of them at desktop width —
   and the five tiles occupy the first five, so the numbers bunch into one
   half of the screen with three empty tracks beside them. Naming the count
   makes the five share the width. */

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


/* ==========================================================================
   6. THE ACCOUNT PAGE — /account/
   ==========================================================================
   /account/ never asked to be wide. Its own stylesheet says
   `.wrap{max-width:660px}` and always did; what happened is that section 2
   above widens `.wrap` for the MENU, and `.wrap` is the container class on a
   dozen pages. So the account page inherited 1080 at tablet and 1180 at
   desktop from rules written about a dish grid, and a reservation card with
   four small cells was stretched across 1124px of it.

   The fix is one container, not one rule per section: `.wrap.acct` carries
   the width, and the membership card, the tab bar and every tab's content
   fall inside it with a single left and right edge. Two classes beat the
   one-class `.wrap` rules above and the page's own, so this holds wherever
   anyone chooses to put a stylesheet next (doc 21's ordering trap).

   1040 is `.tframe` on the homepage — the virtual-tour frame. It is the only
   number on the site that was picked as "a comfortable frame centred on the
   page" rather than "as many dish columns as fit", and taking it means the
   two pages a guest sees most share an edge instead of each having its own
   arbitrary number. The panel's numbers (1080, 1180, 1280) are all the menu
   grid's and were rejected for that reason. */

@media (min-width: 768px) {
  .wrap.acct {
    max-width: 1040px;
    /* the page touched both screen edges at 768: the menu's max-width won
       over the account page's own 660 and there was nothing left to inset it
       by beyond the phone's 16px */
    padding-inline: 24px;
  }
}

/* ---------------------------------------------------------------------------
   From 1024 the container alone is not the whole answer: 1040px is a good
   page width and a terrible card width. A reservation card holds four cells
   of "label / short value"; at full width the label sits on one edge and the
   value on the other with half a metre of nothing between them. So the lists
   that are single-column on a phone take the second column the narrower page
   now has room for, which puts each card back at roughly the proportions it
   was designed at (~500px) — and that, not the container, is where most of
   the 30% comes from.

   1024 and not 768 on purpose: doc 21's rule is that a portrait tablet is a
   big phone and keeps one column.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {

  /* ---- orders: two lanes of the same timeline ----
     The rail and the dots are the design saying "these are events in
     sequence", so the second lane gets its own rail rather than losing it.
     Its position is not a guess: with two equal columns and a 44px gutter,
     the left column's dots land exactly `50% + gutter/2 - 6px` from the
     right edge — the same 6px offset the first rail has from its own dots. */
  .wrap.acct .tl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 44px;
    align-items: start;
  }
  .wrap.acct .tl::after {
    content: '';
    position: absolute;
    right: calc(50% + 16px);
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(216, 180, 92, .34),
                                        rgba(216, 180, 92, .05));
  }

  /* ---- reservations: two columns ---- */
  .wrap.acct #resList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 22px;
    align-items: start;
  }

  /* ---- experiences and favourites: one more column each ----
     Both are square photographs. Three across 990px is a 320px thumbnail of
     a phone snapshot with a two-word caption under it. */
  .wrap.acct .pg { grid-template-columns: repeat(4, 1fr); }
  .wrap.acct .favs { grid-template-columns: repeat(4, 1fr); }

  /* ---- profile: two columns of fields ----
     A text input a thousand pixels long is the worst of the four tabs: the
     label sits at one edge, and an email — which is Latin, so it lays out
     from the other side — sits at the opposite one. .fld is inert
     (display:contents) below this width, so the phone still sees one run of
     labels and inputs. */
  .wrap.acct .form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* the row gap does what the label's top margin did in a single column:
       in a grid that margin would space the two columns differently, because
       the taller cell decides where the next row starts */
    gap: 16px 22px;
    align-items: start;
    padding: 22px 24px 24px;
  }
  .wrap.acct .form .fld { display: block; }
  .wrap.acct .form .fld label:first-child { margin-top: 0; }

  /* the two buttons share the last row: save keeps its weight at the start
     of the line, and signing out sits at the far end where a destructive
     action belongs rather than as a slab of equal size under it */
  .wrap.acct .form .fld.acts {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }
  .wrap.acct .form .acts .save {
    width: auto;
    min-width: 260px;
    margin-top: 0;
  }
  .wrap.acct .form .acts .signout {
    width: auto;
    margin-top: 0;
    margin-inline-start: auto;
    padding-inline: 24px;
  }
}