/* ============ styles.order.css — ruokalista.html only ============
   Ordering, on the printed menu. Loaded after styles.css so these rules win on
   equal specificity; nothing here is a copy of a rule from that file.

   The printed list was a name, a description and a price. The price is now the
   control a guest orders that size with, and everything below exists to make
   that swap change as little as possible: the price keeps its Cormorant, its
   weight and its colour, and gains a border and a plus. A dish that is sold out
   keeps its place on the list and loses its button, because it is still on the
   menu tomorrow.
   ================================================================= */

/* ---- Why the type changed size when a guest tapped "+" ----
   iOS Safari ships text-size-adjust:auto, and nothing on this site ever set it.
   Auto means Safari runs its own text-inflation pass over a block and picks the
   size it thinks is readable — a guess it re-runs whenever the block changes
   shape. Every other page here is static, so that guess is made once and never
   moves. This one is not: adding a dish re-renders the whole list, Safari
   inflates the new markup to a different answer than the old, and the names,
   the pills and the prices all step up a size mid-order. It was the order
   page's defect before ordering moved here; the rule moved with it.

   100% pins the type to the size this stylesheet asks for, on the load and on
   every re-render after it. It is not a zoom lock — pinch-zoom, Safari's own
   text-size control and the OS accessibility sizes all still work; it only
   removes the automatic guess.

   NOT TESTED on a phone: WebKit will not launch on this machine and Chromium
   does not inflate text at all, so it can show neither the defect nor the fix. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---- The price, as a button ----
   .dish .price is a right-aligned column of prices — the first the plain one,
   the rest sizes. Each of them is now wrapped in .pr, which is the box the
   button, the stepper and the "vain 2 jäljellä" note share. */
.dish .price{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.dish .price .pr{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

.pr-add{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px;font-weight:700;color:var(--brown);white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;
  padding:5px 13px;border:1px solid var(--brass-soft);border-radius:30px;
  background:#fff;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.pr-add:hover{background:var(--brown);border-color:var(--brown);color:#fff}
.pr-add .pr-plus{font-family:'Jost',system-ui,sans-serif;font-size:15px;font-weight:400;line-height:1}
.pr-add[disabled]{opacity:.45;cursor:default}
.pr-add[disabled]:hover{background:#fff;color:var(--brown);border-color:var(--brass-soft)}

/* The second and later sizes are the small print on paper, and stay smaller
   here — same control, one step down. */
.dish .price .pr:not(:first-child) .pr-add{font-size:16px;padding:4px 11px}

/* ---- Sold out ----
   The dimming is on the whole row when every size of the dish has gone, and on
   the price alone when only one size has. Neither hides anything: a guest who
   came for that dish is told it exists and is out, which is the answer they
   came for. "Tänään" is the whole promise — the portion count starts again by
   itself every morning. */
.dish .price .pr-out{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:20px;font-weight:700;color:var(--taupe);white-space:nowrap;
  text-align:right;text-decoration:line-through;text-decoration-thickness:1px;
}
.dish .price .pr-out em{
  display:block;font-family:'Jost',system-ui,sans-serif;font-style:normal;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-text);text-decoration:none;margin-top:3px;
}
.dish-out .d-main h3,.dish-out .d-main p{opacity:.55}

/* Shown only at three portions or fewer — see LOW in ruokalista.html. */
.pr-left{
  font-family:'Jost',system-ui,sans-serif;font-style:normal;
  font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--brass-text);
}

/* ---- The basket, under the menu ----
   Not beside it: the printed list is two columns of dishes and a 340px panel
   in the middle of that would take the width the food is set in. Under the
   frame it is the width of a form and nothing else moves. The bar at the foot
   of the screen is what carries it back into view from anywhere on the list. */
.kl-order-foot{max-width:480px;margin:34px auto 0}
.kl-order-foot .kl-cart{position:static;top:auto}

/* An empty basket is one line of text and does not need a bordered panel
   announcing itself under a menu somebody is still reading. */
.kl-order-foot .kl-cart:empty{display:none}

/* Why the menu page's error line is not the cart's: this one is about the
   ordering being unavailable, and it belongs under the menu that is still
   perfectly readable without it. */
.kl-menu-err{
  font-family:'Jost',system-ui,sans-serif;font-size:13.5px;color:var(--brass-text);
  text-align:center;margin-top:18px;
}

/* ---- The basket bar, at every width ----
   styles.css shows .kl-bottom-bar below 1010px only, which was right when it
   was a link to another page: above that the header's button was on screen.
   The basket is different — it is under sixty dishes at any width, and a guest
   who has added something has to know it went somewhere. So the bar runs at
   every width here, and takes itself away whenever the basket is on screen
   (klar.js watches for that). The rules below are the phone bar's own, quoted
   from styles.css rather than re-invented, and they apply above 1010 only —
   below it that block is already in force. */
@media(min-width:1011px){
  .kl-bottom-bar{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    width:100%;border:0;border-top:1px solid rgba(255,255,255,.14);
    padding:15px 22px;padding-bottom:calc(15px + env(safe-area-inset-bottom));
    background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;
    font-family:'Jost',system-ui,sans-serif;font-weight:500;font-size:15px;
    letter-spacing:.06em;text-transform:uppercase;text-align:left;
    box-shadow:0 -6px 24px rgba(20,12,8,.20)
  }
  /* The attribute has to beat the display:flex above it — the UA sheet's rule
     for [hidden] does not. Without this the empty basket bar shows anyway. */
  .kl-bottom-bar[hidden]{display:none}
  .kl-bottom-bar .kl-bb-sum{margin-left:auto;color:var(--brass-soft);font-weight:600}
  .kl-bottom-bar .kl-bb-sum span{margin-left:10px}
  body.kl-bar-space{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* ---- Tap size ----
   The 44px floor styles.tilaa.css set for the order page's own buttons, on the
   controls that replaced them. Same breakpoint, same reason: below 900px a
   thumb is the pointer. */
@media(max-width:900px){
  .pr-add{min-height:44px}
  .dish .price .ki-stepb{width:44px;height:44px;font-size:19px}
  .kl-cart .kl-qty button{width:44px;height:44px;font-size:19px}
  .kl-cart .kl-line{align-items:center}
  .kl-cart .kl-line .kl-ln{min-width:0}
  .kl-cart .kl-seg button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* At the width where the dish row is at its tightest, the price column takes a
   line of its own under the name rather than pressing on it — the same two-row
   shape the order page's rows took at this width, for the same reason. */
@media(max-width:480px){
  .dish{flex-wrap:wrap;gap:6px 12px}
  .dish .d-main{flex:1 1 100%;min-width:0}
  .dish .price{
    flex:1 1 100%;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-end;gap:8px 12px;
  }
}