/* Shared workspace styles (design 8). Wholly inside @layer app: status colours and treatments come
   only from the locked layer of /tokens/tokens.css by class name, never from here. Touch floors
   (design 8.5): service controls 48 px, keypad keys, steppers, tiles and the Handy bottom bar 56 px,
   primary actions 64 px. System font stack from the tokens; no web font at runtime.

   Width tiers (batch I1, I1-D1 and I1-D2; web/platform/tiers.js states the rule once): compact under 600 px (the
   phone, 390x844), medium 600 to 1023 px (the iPad mini portrait 744x1133 and the iPad portrait 810 and 820), wide
   1024 px and up (the iPad landscape 1080x810 and 1180x820). The only width queries under web/platform, web/handy,
   web/cashier and web/login are '@media (min-width: 600px)' and '@media (min-width: 1024px)'; the compact layout is the
   unqueried base. The thresholds are BO-2.0-DESIGN.md section 1 item 2's. Safe areas: --safe-top and --safe-bottom
   from env(safe-area-inset-*), 0 where the browser reports none (I1-D14). */
@layer app {
  :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); }
  *, *::before, *::after { box-sizing: border-box; }
  html { font-family: var(--font-family-ui); font-size: var(--font-size-300); line-height: var(--font-lineHeight-normal); }
  body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
  [hidden] { display: none !important; }
  .num { font-variant-numeric: tabular-nums; }
  .h { font-size: var(--font-size-400); line-height: var(--font-lineHeight-normal); margin: var(--space-3) 0 var(--space-2); }
  h1.h { font-size: var(--font-size-600); line-height: var(--font-lineHeight-tight); }
  .glyph { flex: none; vertical-align: -0.125em; }
  .app { display: flex; flex-direction: column; min-height: 100vh; }
  .content { flex: 1; padding: var(--space-3) var(--space-4); }

  .topbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-height: var(--touch-service);
    padding: var(--space-1) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border);
    padding-top: calc(var(--space-1) + var(--safe-top)); }
  .topbar-title { font-size: var(--font-size-400); font-weight: 700; margin-right: auto; }
  .chip-sync, .chip-info { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--pill-height);
    padding: 0 var(--space-3); border-radius: var(--pill-radius); font-size: var(--font-size-200); }
  .chip-info { background: var(--panel); color: var(--text); }

  .banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-300); }
  .banner-actions { display: flex; gap: var(--space-2); margin-left: auto; }
  .banner-code { font-weight: 700; }
  .message { margin: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s);
    border: 1px solid var(--border); background: var(--panel); font-size: var(--font-size-200); }
  .message-error { border-left: var(--ticket-card-stripe) solid var(--accent); }
  .reason { color: var(--text-muted); font-size: var(--font-size-200); margin: var(--space-1) 0; }
  .empty { color: var(--text-muted); font-size: var(--font-size-300); padding: var(--space-4) 0; }
  .context { font-weight: 700; margin: 0 0 var(--space-2); }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-service);
    min-width: var(--touch-service); padding: 0 var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--border);
    background: var(--panel); color: var(--text); font: inherit; font-size: var(--font-size-300); cursor: pointer; }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; }
  /* Batch F (f6): no double-tap zoom or 300 ms delay on any control of a till or a phone (touch-action). */
  .btn, .chip, .key, .tile, .tab, .row, .list-row, .table-card, .fm-card, .seg, .input, .check, .dropzone { touch-action: manipulation; }
  .btn:focus-visible, .tile:focus-visible, .chip:focus-visible, .tab:focus-visible, .row:focus-visible, .key:focus-visible,
  .list-row:focus-visible, .input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .btn-primary { min-height: var(--touch-primary); background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
    font-weight: 700; font-size: var(--font-size-400); }
  .btn-wide { display: flex; width: 100%; margin: var(--space-2) 0; }
  .btn-small { min-height: var(--touch-service); padding: 0 var(--space-3); font-size: var(--font-size-200); }
  .btn-serve { min-height: var(--touch-keypad); }
  .key { min-height: var(--touch-keypad); min-width: var(--touch-keypad); border-radius: var(--radius-m); border: 1px solid var(--border);
    background: var(--panel); color: var(--text); font: inherit; font-size: var(--font-size-500); cursor: pointer; }
  .chip { min-height: var(--touch-service); min-width: var(--touch-service); padding: 0 var(--space-3); border-radius: var(--pill-radius);
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--font-size-200); cursor: pointer; }
  .chip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--touch-gap); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--touch-gap); justify-content: flex-end; margin-top: var(--space-3); }
  .input { min-height: var(--touch-service); padding: 0 var(--space-3); border-radius: var(--radius-s); border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font: inherit; font-size: var(--font-size-300); }
  .field { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; font-size: var(--font-size-200); }
  .check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-service); font-size: var(--font-size-300); }
  .check input { width: 24px; height: 24px; }

  .pill { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--pill-height); padding: 0 var(--space-2);
    border-radius: var(--pill-radius); font-size: var(--font-size-200); }
  .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--radius-s);
    font-size: var(--font-size-200); }

  /* Tiles (design addendum; 8.5 tiles at least 56 px) */
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--touch-gap); }
  .tile { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-height: var(--touch-keypad);
    padding: var(--space-2); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); color: var(--text);
    font: inherit; text-align: left; cursor: pointer; }
  .tile:disabled { opacity: 0.6; cursor: not-allowed; }
  .tile.is-selected { outline: 3px solid var(--focus); }
  .tile-media { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-s); overflow: hidden; background: var(--panel); }
  .tile-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .tile.has-image .swatch { display: none; }
  .tile-name { font-size: var(--font-size-300); font-weight: 700; line-height: var(--font-lineHeight-normal); }
  .tile-price { font-size: var(--font-size-300); }
  .tile-flag { font-size: var(--font-size-200); font-weight: 700; }
  .swatch { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--touch-keypad);
    font-size: var(--font-size-600); font-weight: 700; color: var(--ref-color-ink-900); }
  .swatch-0 { background: var(--ref-color-mint-300); }
  .swatch-1 { background: var(--ref-color-sky-100); }
  .swatch-2 { background: var(--ref-color-iris-100); }
  .swatch-3 { background: var(--ref-color-amber-100); }
  .swatch-4 { background: var(--ref-color-coral-100); }
  .swatch-5 { background: var(--ref-color-green-100); }
  .swatch-6 { background: var(--ref-color-magenta-100); }
  .swatch-7 { background: var(--ref-color-neutral-200); }
  /* Batch E icon chain (tiles.js): photo, custom icon, library icon, swatch; one tile size for all four. */
  .tile-custom, .tile-icon { position: absolute; inset: 0; margin: auto; width: var(--touch-keypad); height: var(--touch-keypad); }
  .tile-custom { object-fit: contain; }
  .tile-icon svg { display: block; width: 100%; height: 100%; }
  .tile.has-image .tile-custom, .tile.has-image .tile-icon, .tile.has-custom .tile-icon,
  .tile.has-custom .swatch, .tile.has-icon .swatch { display: none; }
  /* Category colour (e0 tokens category.<name>.fill and .ink); the chip always carries the category name. */
  .cat-mint { --cat-fill: var(--category-mint-fill); --cat-ink: var(--category-mint-ink); }
  .cat-sky { --cat-fill: var(--category-sky-fill); --cat-ink: var(--category-sky-ink); }
  .cat-iris { --cat-fill: var(--category-iris-fill); --cat-ink: var(--category-iris-ink); }
  .cat-amber { --cat-fill: var(--category-amber-fill); --cat-ink: var(--category-amber-ink); }
  .cat-coral { --cat-fill: var(--category-coral-fill); --cat-ink: var(--category-coral-ink); }
  .cat-green { --cat-fill: var(--category-green-fill); --cat-ink: var(--category-green-ink); }
  .cat-magenta { --cat-fill: var(--category-magenta-fill); --cat-ink: var(--category-magenta-ink); }
  .cat-neutral { --cat-fill: var(--category-neutral-fill); --cat-ink: var(--category-neutral-ink); }
  .tile-cat { align-self: flex-start; padding: 0 var(--space-2); border-radius: var(--pill-radius); border: 1px solid var(--border);
    background: var(--cat-fill, var(--panel)); color: var(--cat-ink, var(--text)); font-size: var(--font-size-100); font-weight: 700; }
  .allergens { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .allergen { padding: 0 var(--space-1); border-radius: var(--radius-s); border: 1px solid var(--border); font-size: var(--font-size-100); }
  .list { display: flex; flex-direction: column; gap: var(--space-1); }
  .list-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-keypad); padding: 0 var(--space-3);
    border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .list-name { font-weight: 700; margin-right: auto; }
  .carta-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--touch-gap); margin-bottom: var(--space-3); }
  .toggle { display: flex; gap: var(--space-1); }

  /* Rows, lines and sheets */
  .rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--touch-gap); }
  .row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--touch-primary);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .row.is-selected { outline: 3px solid var(--focus); }
  .row-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .row-side { color: var(--text-muted); font-size: var(--font-size-200); }
  .table-name { font-size: var(--font-size-400); }
  .lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .line { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-service); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-s); }
  .line-name { margin-right: auto; }
  .line-state { font-size: var(--font-size-200); }
  .qty { font-weight: 700; min-width: 2.5em; }
  .round { margin: var(--space-2) 0; }
  .round-head { min-height: var(--touch-service); display: flex; align-items: center; cursor: pointer; font-weight: 700; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow: auto; padding: var(--space-4);
    background: var(--surface); border-top: 2px solid var(--border); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; z-index: 10;
    padding-bottom: calc(var(--space-4) + var(--safe-bottom)); }
  /* I1-D5: the sheet keeps left 0 and right 0 at every tier, so every point beside an open sheet, at a height it covers,
     is the sheet; only its content column is capped, 600 px from the medium tier and 720 from the wide (the fixed
     sheet's containing block is the viewport, CSS 2.1 10.1 item 3, and a percentage padding resolves against its width,
     so the content box is 568 px from 600 and 688 from 1024). Never a max-width or auto inline margins on .sheet: a
     centred box leaves the page beside it hit-testable (web/platform/session.js:354-359 runs any [data-act] click). */
  @media (min-width: 600px) { .sheet { padding-inline: calc((100% - 600px) / 2 + var(--space-4)); } }
  @media (min-width: 1024px) { .sheet { padding-inline: calc((100% - 720px) / 2 + var(--space-4)); } }
  .stepper { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; }
  .stepper-value { font-size: var(--font-size-500); min-width: 2em; text-align: center; }
  .mods { border: 1px solid var(--border); border-radius: var(--radius-s); margin: var(--space-2) 0; }
  .panel { max-width: 1440px; }
  .tab { flex: 1; min-height: var(--touch-keypad); border: 0; border-top: 3px solid transparent; background: var(--surface); color: var(--text);
    font: inherit; font-size: var(--font-size-200); cursor: pointer; }
  .tab.is-on { border-top-color: var(--accent); font-weight: 700; }
  .bottombar { position: sticky; bottom: 0; display: flex; min-height: var(--touch-keypad); background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: var(--safe-bottom); }
  .grid-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--touch-gap); }
  .ready-card { padding: var(--space-3); border-radius: var(--radius-m); margin-bottom: var(--space-3); }

  /* Batch E offline state (offline.js): the snapshot age, the soft queue and its review. */
  .offline-panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) var(--space-4);
    font-size: var(--font-size-200); }
  .queue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
  .queue-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--touch-service);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-s); border: 1px dashed var(--border); }
  .queue-review { flex-basis: 100%; font-size: var(--font-size-200); }
  /* Batch I1 (R15, design/I1-R15-MEASURE.md): no sheet-in animation. The page repaints its root every second
     (web/platform/session.js:187-195), so an open sheet is a new node each second and the animation replayed from the
     viewport bottom; an animation on the first open only is batch I. */
}