/* /card and /dinner-night, EN + ES (18 Oct 2026): the stamp card and Dinner Night. @layer pages,
   scoped .lo (both pages). Tokens only; no raw colours below. */
@layer pages {
  .lo { max-width: 44rem; padding-bottom: var(--sec); }
  .lo-head { padding-top: var(--sp-lg); }
  .lo-head h1 { font-size: var(--step-4); }
  .lo-app { display: grid; gap: var(--sp-md); align-content: start; min-height: min(100svh, 62rem); }   /* no layout shift while the app loads (Lighthouse, 18 Oct) */
  .lo-wait { color: var(--muted); }
  .lo-msg { padding: .8rem 1rem; border-radius: var(--r); background: var(--tint); border-left: 3px solid var(--ember); }
  .lo-msg.ok { border-left-color: var(--ok); }
  .lo-hint { font-size: var(--step--1); color: var(--muted); }

  .lo-card, .lo-when { padding: var(--sp-md); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-1); display: grid; gap: .6rem; }
  .lo-card h2, .lo-when h2, .lo-lost h2 { font-size: var(--step-2); color: var(--ink); }
  .lo-dots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; max-width: 20rem; margin-block: .4rem; }
  /* SMASH card (Joe, 18 Oct 2026): a cheeseburger per smash. Outline = still to earn, full colour = earned. */
  .lo-dots span { aspect-ratio: 1; background: url(/assets/img/smash-off.svg) center / contain no-repeat; }
  .lo-dots span.on { background-image: url(/assets/img/smash-on.svg); }
  .lo-count { font-weight: 700; font-size: var(--step-1); }
  .lo-member { font-weight: 700; color: var(--navy); }
  .lo-reward { padding: .7rem .9rem; border-radius: var(--r); background: var(--tint-2); border-left: 3px solid var(--brass); }
  .lo-rule { font-size: var(--step--1); }

  .lo-form { display: grid; gap: .8rem; padding: var(--sp-md); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--tint); }
  .lo-fld { display: grid; gap: .3rem; min-width: 0; }
  .lo-fld label { font-weight: 700; font-size: var(--step--1); }
  .lo-fld input, .lo-fld select, .lo-fld textarea {
    width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1.5px solid var(--ctl-line); border-radius: 10px; background: var(--paper);
  }
  .lo-fld textarea { min-height: 4.5rem; }
  .lo-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.4; cursor: pointer; }
  .lo-check input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; flex: none; accent-color: var(--ember); }
  .lo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .lo-form .btn { justify-self: start; }
  .lo-out:empty { display: none; }

  .lo-dishes { display: grid; gap: .7rem; }
  .lo-dish { display: flex; gap: var(--sp-sm); align-items: center; justify-content: space-between; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
  .lo-dish.out { opacity: .6; }
  .lo-dish-t { min-width: 0; }
  .lo-dish h3 { font-size: var(--step-1); color: var(--ink); }
  .lo-dish p { font-size: var(--step--1); }
  .lo-meta { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
  .lo-qty { display: flex; align-items: center; gap: .3rem; flex: none; }
  .lo-step { min-width: 44px; min-height: 44px; border: 1.5px solid var(--ctl-line); border-radius: var(--r-pill); background: var(--paper); font-weight: 700; font-size: 1.2rem; line-height: 1; }
  .lo-step:disabled { opacity: .4; cursor: not-allowed; }
  .lo-n { min-width: 1.6rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
  .lo-total { font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; }

  /* Stamp card explainer + FAQ, and the membership levels (18 Oct 2026). */
  .lo-how { display: grid; gap: .6rem; padding: var(--sp-md); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
  .lo-how h2 { font-size: var(--step-2); color: var(--ink); }
  .lo-how h3 { margin-top: .6rem; font-size: var(--step-1); color: var(--ink); }
  .lo-how ol { padding-left: 1.3rem; display: grid; gap: .45rem; }
  .lo-how details { border-top: 1px solid var(--line); padding: .2rem 0; }
  .lo-how summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
  .lo-how details p { padding-bottom: .6rem; color: var(--muted); }
  .lo-periods { display: flex; flex-wrap: wrap; gap: .5rem; }
  .lo-periods .btn[aria-pressed="true"] { background: var(--ink); color: var(--white); box-shadow: none; }
  .lo-levels { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .lo-level .btn { justify-self: start; }
  .lo-price { font-family: var(--f-display); font-size: var(--step-3); color: var(--ember); line-height: 1; }
  .lo-perks { padding-left: 1.2rem; display: grid; gap: .35rem; font-size: var(--step--1); }
  .lo-terms { font-size: var(--step--1); color: var(--muted); }
  .lo-welcome h2 { font-size: var(--step-3); }
  .lo-welcome h3 { font-size: var(--step-1); color: var(--ink); }
  /* My account (18 Oct 2026) */
  .lo-acct-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); }
  .lo-hi { font-family: var(--f-display); text-transform: uppercase; font-size: var(--step-2); color: var(--ink); }
  .lo-next { font-weight: 700; color: var(--ember-dk); font-size: var(--step-1); }
  .lo-acct h2 { font-size: var(--step-1); }
  .lo-acct h3 { font-size: var(--step-0); color: var(--ink); }
  .lo-orders { padding-left: 1.1rem; display: grid; gap: .35rem; font-size: var(--step--1); }
}