/* ===== desktop-ui ===== */
/* Linked with media="(min-width:1024px)" from index.html: phones never wait for these rules
   (a non-matching stylesheet is not render-blocking), desktops get them before first paint.
   The @media wrappers stay so the rules are safe even if the file is linked without media. */
/* >= 1024 px only: the controls over and under the room get material and hierarchy.
   Same DNA: near-black, ember, bone, square corners, Bebas Neue + Source Serif 4. */
@media(min-width:1024px){
  /* ----- ticket docket: dark stock, ember hairline, perforation, torn bottom edge ----- */
  .home [data-sid="docket"]{--tear:10px;width:324px;border:0;padding-bottom:var(--tear);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),linear-gradient(rgb(239 230 216 / .045),rgb(239 230 216 / .015)),rgb(13 11 10 / .96);
    -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px var(--tear) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--tear) + 1px) no-repeat;
    mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px var(--tear) repeat-x,linear-gradient(#000 0 0) top/100% calc(100% - var(--tear) + 1px) no-repeat}
  .home [data-sid="docket"]:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--ember) 18%,var(--ember) 82%,transparent);box-shadow:0 0 12px rgb(255 107 26 / .6)}
  .home .docket-toggle{padding:18px 18px 14px}
  .home .docket-toggle>span:first-child{font:30px/1 var(--display);letter-spacing:.05em}
  .home .docket-toggle [data-cart-count]{font:22px/1 var(--display);color:var(--ember);min-width:2ch;text-align:right}
  /* Seated: the one-line bar keeps its small head (see restaurant-stage). */
  .home.room-seated .docket-toggle{padding:0 12px}
  .home.room-seated .docket-toggle>span:first-child{font-size:19px}
  .home [data-cart-total],.home .cart-row-price{font-variant-numeric:tabular-nums lining-nums}
  .home .docket-toggle [data-cart-total]{font-size:14px;min-width:8ch;text-align:right}
  .home #docket-content{padding:0 18px 16px;border-top:1px dashed rgb(239 230 216 / .22)}
  .home [data-cart-lines] .cart-row:first-child{border-top:0}
  /* A ticket lists lines; only the newest one carries its garpunkt/extras chips (the others stay
     editable in the pass below and on the checkout page), so two or three lines fit in view. */
  .home #docket-content{max-height:300px}
  .home [data-cart-lines]{max-height:none}
  .home [data-cart-lines] .cart-row:not(:last-child) :is(.review-config,.micro){display:none}
  .home .cart-row-top>span:first-child{font:17px/1.1 var(--display);letter-spacing:.03em}
  .home .docket-order{background:linear-gradient(90deg,rgb(255 107 26 / .14),rgb(255 107 26 / .04));border-color:rgb(255 107 26 / .55)}

  /* ----- view switch: a segmented control whose ember indicator slides to the view ----- */
  .home .room-views{position:relative;gap:0;padding:3px;border:1px solid var(--line)}
  .home .room-views button{position:relative;z-index:1;border:0;transition:text-shadow .3s ease}
  .home .room-controls .room-views button[aria-pressed="true"]{box-shadow:none;text-shadow:0 0 14px rgb(255 107 26 / .55)}
  .home .room-views:after{content:"";position:absolute;left:3px;top:3px;bottom:3px;width:154px;background:linear-gradient(rgb(255 107 26 / .17),rgb(255 107 26 / .05));box-shadow:inset 0 -2px var(--ember),0 0 24px rgb(255 107 26 / .2);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
  .home .room-views:has([data-view="overview"][aria-pressed="true"]):after{transform:translateX(154px)}
  .home .room-views:not(:has([aria-pressed="true"])):after{opacity:0}

  /* ----- buttons: an ember glow that ramps in, a real press ----- */
  .home .room-controls button,.home .strip-card,.home [data-sid="docket"] .button,.home .docket-inline-order{transition:box-shadow .35s ease,background-color .35s ease,border-color .35s ease,transform .12s ease}
  .home .room-controls button:hover,.home [data-sid="docket"] .button:hover,.home .docket-inline-order:hover{background-color:rgb(255 107 26 / .08);border-color:rgb(255 107 26 / .6);box-shadow:0 0 26px rgb(255 107 26 / .2),inset 0 0 16px rgb(255 107 26 / .08)}
  .home .room-controls button:active,.home .strip-card:active,.home [data-sid="docket"] .button:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 0 20px rgb(255 107 26 / .3);transition-duration:.06s}

  /* ----- burger strip: six cards replace the select (which stays for phones/tablets) ----- */
  .home .quick-grill{display:none}
  .home .burger-strip{display:flex;gap:8px;flex:1;justify-content:flex-end;min-height:62px}
  .strip-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:4px;flex:1 1 0;max-width:172px;min-width:0;height:62px;padding:6px 8px 6px 6px;text-align:left;border:1px solid var(--line);background:rgb(239 230 216 / .02)}
  .strip-card img{grid-row:1/3;width:48px;height:48px;object-fit:cover;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  /* Names wrap to two lines ("DOUBLE / SMOKE") instead of being cut off. */
  .strip-name{font:17px/.95 var(--display);letter-spacing:.03em;overflow-wrap:anywhere}
  .strip-price{font-size:12px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
  .strip-card:hover{border-color:rgb(255 107 26 / .6);background-color:rgb(255 107 26 / .07);box-shadow:0 0 26px rgb(255 107 26 / .18)}
  .strip-card:hover img{transform:scale(1.06)}

  /* ----- table tags: small ember-lit labels over each table in the overview ----- */
  .table-tags{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
  .table-tag{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:6px;padding:5px 9px 4px 7px;font-size:11px;line-height:1;white-space:nowrap;background:rgb(13 11 10 / .86);border:1px solid rgb(255 107 26 / .45);box-shadow:0 0 16px rgb(255 107 26 / .2);cursor:pointer;translate:-50% calc(-100% + 10px);opacity:0;visibility:hidden;transition:opacity .3s ease,translate .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
  .table-tag b{font:17px/1 var(--display);font-weight:400;color:var(--ember)}
  .table-tag:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:9px;background:linear-gradient(var(--ember),transparent)}
  .scene-ready.room-away:not(.room-seated) [data-sid="restaurant-stage"]:not(.is-travelling) .table-tag{pointer-events:auto;opacity:1;visibility:visible;translate:-50% calc(-100% - 9px);transition-delay:calc(var(--i) * 55ms)}
  .table-tag.is-hot{visibility:hidden!important}
  /* The hovered table's tag grows into the full label (same anchor, ember fill). */
  .home .table-label{translate:-50% calc(-100% - 6px);padding:8px 12px;font:19px/1 var(--display);letter-spacing:.04em;background:rgb(13 11 10 / .92);border-color:var(--ember);box-shadow:0 0 22px rgb(255 107 26 / .35),inset 0 -2px var(--ember)}
}
/* Narrow desktops: the strip takes its own row under the view switch. */
@media(min-width:1024px) and (max-width:1279px){
  .home .room-controls{flex-wrap:wrap}
  .home .burger-strip{flex:1 1 100%;justify-content:space-between}
  .strip-card{max-width:none}
}