/* Floor map by zone (floormap.js; batch F f6; addendum AIRPOS-2.0-DESIGN.md:1365-1376 item 6; design 3.1 and 8.6).
   A zone is a CSS grid of zone.w x zone.h square cells whose size follows the width of the map's container
   (100cqi / zone.w), capped at 64 px, so a map always fits its column and never scrolls inside it: the page repaints
   its root every second (web/platform/session.js paint), which would reset an inner scroll position. Batch I1
   (I1-D12, BATCH-I1-PLAN 6.2): the Cashier gives the map the whole body while no table is chosen (floor mode), the
   body's width minus 32 px: 24-column cells of 47.83 px at 1180, 43.67 at 1080 and 32.83 at 820, so a 2 x 2 table is
   95.67, 87.33 and 65.67 px; a 16-column zone is capped at 64 px on the wide tier (49.25 at 820, 48.63 at 810). A 1 x 1
   piece keeps the 48 px card floor only on a zone of at most 23 columns at 1180 (1148 / 48 = 23.92), 21 at 1080
   (1048 / 48 = 21.83) and 16 at 820 and 810 (788 / 48 = 16.42, 778 / 48 = 16.21), so a 1 x 1 on a 24-column zone
   (47.83 px at 1180, 43.67 at 1080) overflows its cell and overlaps a neighbouring 1 x 1: a batch I residual, because
   the room builder accepts zones up to 60 columns (floormap.js:34 ZONE_SIZE; gate refresh r1 M1). With a table
   chosen the Cashier shows the zone as the card grid in its rail, 240 to 310 px on the wide tier, where a 24-column
   zone would get 10 to 12.9 px cells; on the medium tier the rail spans the body above the ticket and the products.
   A map card (.fm-card, touch floor 48 px) never shrinks below that floor and is centred on its cell; in a card
   whose content box is 63 px or narrower (an outer 80 px at the widest edge; from 74 px with a 1 px edge, see the
   fold arithmetic below) the word gives way to the glyph and the name to its short form ("12" for "Mesa 12"), and a card
   too low keeps only those (container queries, whose arithmetic the next lines state); the full text stays in the
   card's aria-label and title.
   Batch I2 fold (design/I2-CHROMIUM-PASS.md FAIL 1): a container query reads the query container's CONTENT box, so
   the card's padding and its status border come off the width the query sees. The width threshold is therefore that
   outer size less both, at the widest edge a card can carry: 79 - 2 x 4 px padding - 2 x 4 px border = 63 px, so the
   name and the word show whenever the card's outer width is at least 80 px, whatever its border state (the edges a
   card carries are 1 px here, 2 px and 4 px from the locked status layer and 3 px from .fm-card.fm-open; measured in
   Chromium 145 before this fold, a 91.75 px card queried 78.75 px with the sent edge and 77.75 px open, and both hid
   the name). The height threshold stays 63 px on the content box and carries no such allowance, because the 59.33 px
   card at 744 queries 49.31 px and keeps its facts hidden (I2-D3), which an allowance would undo; a card's facts
   therefore need an outer height above 73 px (a 1 px edge) or 77 px (fm-open). web/tests/floormap.test.mjs computes
   both thresholds from the padding and the border widths, so the arithmetic is pinned, not copied. Pieces
   are placed by class (CSP style-src 'self' forbids a style attribute): fx-0..59 and fy-0..59 are the start cell,
   fw-1..60 and fh-1..60 the span, zw-4..60 and zh-4..60 the zone size (dto.ZONE_SIZE). Free tables and room
   elements use the f0 floor tokens; a table with a bill carries the locked status class (colour plus treatment)
   from the locked layer, which wins over this layer. Wholly inside @layer app. The placement rules after the
   marker are generated (floormap.test.mjs checks every one exists). Batch I2 (k0, BATCH-I2-PLAN 5.1 item 3, I2-D11): the
   Handy's opt-in options add .fm-card.fm-open (an open table with nothing ordered: the floor tokens, a 3 px edge and the
   word) and .fm-card:disabled (a table the page does not offer), which the Cashier never renders. */
@layer app {
  .floormap { container-type: inline-size; width: 100%; margin: var(--space-2) 0; }
  .fm-zone { --fm-cell: min(calc(100cqi / var(--fm-cols, 24)), var(--touch-primary)); display: grid;
    grid-template-columns: repeat(var(--fm-cols, 24), var(--fm-cell)); grid-template-rows: repeat(var(--fm-rows, 16), var(--fm-cell));
    width: max-content; max-width: 100%; background: var(--floor-zone-bg); border-radius: var(--radius-m); }
  .fm-card { position: relative; container-type: size; display: flex; flex-direction: column; place-self: center; width: 100%; height: 100%;
    min-height: var(--touch-service); min-width: var(--touch-service); margin: 0; padding: var(--space-1); gap: 0; overflow: hidden; align-items: center; justify-content: center; text-align: center;
    background: var(--floor-table-fill); color: var(--floor-table-ink); border: 1px solid var(--floor-table-ink);
    font: inherit; font-size: var(--font-size-100); line-height: var(--font-lineHeight-tight); cursor: pointer; z-index: 1; }
  .fm-card.is-selected { z-index: 2; outline: 3px solid var(--focus); }
  .fm-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  .fm-card.shape-square { border-radius: var(--radius-s); }
  .fm-card.shape-round { border-radius: 50%; }
  .fm-card.shape-stool { border-radius: 50%; background: var(--floor-stool-fill); }
  .fm-name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-size-200); font-weight: 700; }
  .fm-state, .fm-facts { display: flex; align-items: center; justify-content: center; gap: var(--space-1); max-width: 100%; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-size-100); }
  .fm-word { overflow: hidden; text-overflow: ellipsis; }
  .fm-short { display: none; font-size: var(--font-size-300); font-weight: 800; }
  @container (max-width: 63px) { .fm-word, .fm-name { display: none; } .fm-short { display: block; } }
  @container (max-height: 63px) { .fm-facts { display: none; } }
  .fm-rot { position: absolute; inset: var(--space-1); pointer-events: none; }
  .fm-rot::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: var(--space-1); border-radius: var(--radius-s);
    background: currentColor; opacity: 0.5; }
  .fm-rot.rot-90 { transform: rotate(90deg); }
  .fm-rot.rot-180 { transform: rotate(180deg); }
  .fm-rot.rot-270 { transform: rotate(270deg); }
  .fm-el { display: block; pointer-events: none; }
  .fm-wall { background: var(--floor-wall-fill); border-radius: var(--radius-s); }
  .fm-door { background: repeating-linear-gradient(90deg, var(--floor-door-fill) 0 6px, transparent 6px 10px); border: 2px solid var(--floor-door-fill);
    border-radius: var(--radius-s); }
  .fm-plant { background: var(--floor-plant-fill); border-radius: 50%; }
  .table-minutes { font-size: var(--font-size-100); }
  .fm-card.fm-open { border-width: 3px; font-weight: 700; }
  .fm-card:disabled { opacity: 0.55; cursor: not-allowed; }
  /* generated placement rules */
  .zw-4 { --fm-cols: 4; }
  .zw-5 { --fm-cols: 5; }
  .zw-6 { --fm-cols: 6; }
  .zw-7 { --fm-cols: 7; }
  .zw-8 { --fm-cols: 8; }
  .zw-9 { --fm-cols: 9; }
  .zw-10 { --fm-cols: 10; }
  .zw-11 { --fm-cols: 11; }
  .zw-12 { --fm-cols: 12; }
  .zw-13 { --fm-cols: 13; }
  .zw-14 { --fm-cols: 14; }
  .zw-15 { --fm-cols: 15; }
  .zw-16 { --fm-cols: 16; }
  .zw-17 { --fm-cols: 17; }
  .zw-18 { --fm-cols: 18; }
  .zw-19 { --fm-cols: 19; }
  .zw-20 { --fm-cols: 20; }
  .zw-21 { --fm-cols: 21; }
  .zw-22 { --fm-cols: 22; }
  .zw-23 { --fm-cols: 23; }
  .zw-24 { --fm-cols: 24; }
  .zw-25 { --fm-cols: 25; }
  .zw-26 { --fm-cols: 26; }
  .zw-27 { --fm-cols: 27; }
  .zw-28 { --fm-cols: 28; }
  .zw-29 { --fm-cols: 29; }
  .zw-30 { --fm-cols: 30; }
  .zw-31 { --fm-cols: 31; }
  .zw-32 { --fm-cols: 32; }
  .zw-33 { --fm-cols: 33; }
  .zw-34 { --fm-cols: 34; }
  .zw-35 { --fm-cols: 35; }
  .zw-36 { --fm-cols: 36; }
  .zw-37 { --fm-cols: 37; }
  .zw-38 { --fm-cols: 38; }
  .zw-39 { --fm-cols: 39; }
  .zw-40 { --fm-cols: 40; }
  .zw-41 { --fm-cols: 41; }
  .zw-42 { --fm-cols: 42; }
  .zw-43 { --fm-cols: 43; }
  .zw-44 { --fm-cols: 44; }
  .zw-45 { --fm-cols: 45; }
  .zw-46 { --fm-cols: 46; }
  .zw-47 { --fm-cols: 47; }
  .zw-48 { --fm-cols: 48; }
  .zw-49 { --fm-cols: 49; }
  .zw-50 { --fm-cols: 50; }
  .zw-51 { --fm-cols: 51; }
  .zw-52 { --fm-cols: 52; }
  .zw-53 { --fm-cols: 53; }
  .zw-54 { --fm-cols: 54; }
  .zw-55 { --fm-cols: 55; }
  .zw-56 { --fm-cols: 56; }
  .zw-57 { --fm-cols: 57; }
  .zw-58 { --fm-cols: 58; }
  .zw-59 { --fm-cols: 59; }
  .zw-60 { --fm-cols: 60; }
  .zh-4 { --fm-rows: 4; }
  .zh-5 { --fm-rows: 5; }
  .zh-6 { --fm-rows: 6; }
  .zh-7 { --fm-rows: 7; }
  .zh-8 { --fm-rows: 8; }
  .zh-9 { --fm-rows: 9; }
  .zh-10 { --fm-rows: 10; }
  .zh-11 { --fm-rows: 11; }
  .zh-12 { --fm-rows: 12; }
  .zh-13 { --fm-rows: 13; }
  .zh-14 { --fm-rows: 14; }
  .zh-15 { --fm-rows: 15; }
  .zh-16 { --fm-rows: 16; }
  .zh-17 { --fm-rows: 17; }
  .zh-18 { --fm-rows: 18; }
  .zh-19 { --fm-rows: 19; }
  .zh-20 { --fm-rows: 20; }
  .zh-21 { --fm-rows: 21; }
  .zh-22 { --fm-rows: 22; }
  .zh-23 { --fm-rows: 23; }
  .zh-24 { --fm-rows: 24; }
  .zh-25 { --fm-rows: 25; }
  .zh-26 { --fm-rows: 26; }
  .zh-27 { --fm-rows: 27; }
  .zh-28 { --fm-rows: 28; }
  .zh-29 { --fm-rows: 29; }
  .zh-30 { --fm-rows: 30; }
  .zh-31 { --fm-rows: 31; }
  .zh-32 { --fm-rows: 32; }
  .zh-33 { --fm-rows: 33; }
  .zh-34 { --fm-rows: 34; }
  .zh-35 { --fm-rows: 35; }
  .zh-36 { --fm-rows: 36; }
  .zh-37 { --fm-rows: 37; }
  .zh-38 { --fm-rows: 38; }
  .zh-39 { --fm-rows: 39; }
  .zh-40 { --fm-rows: 40; }
  .zh-41 { --fm-rows: 41; }
  .zh-42 { --fm-rows: 42; }
  .zh-43 { --fm-rows: 43; }
  .zh-44 { --fm-rows: 44; }
  .zh-45 { --fm-rows: 45; }
  .zh-46 { --fm-rows: 46; }
  .zh-47 { --fm-rows: 47; }
  .zh-48 { --fm-rows: 48; }
  .zh-49 { --fm-rows: 49; }
  .zh-50 { --fm-rows: 50; }
  .zh-51 { --fm-rows: 51; }
  .zh-52 { --fm-rows: 52; }
  .zh-53 { --fm-rows: 53; }
  .zh-54 { --fm-rows: 54; }
  .zh-55 { --fm-rows: 55; }
  .zh-56 { --fm-rows: 56; }
  .zh-57 { --fm-rows: 57; }
  .zh-58 { --fm-rows: 58; }
  .zh-59 { --fm-rows: 59; }
  .zh-60 { --fm-rows: 60; }
  .fx-0 { grid-column-start: 1; }
  .fx-1 { grid-column-start: 2; }
  .fx-2 { grid-column-start: 3; }
  .fx-3 { grid-column-start: 4; }
  .fx-4 { grid-column-start: 5; }
  .fx-5 { grid-column-start: 6; }
  .fx-6 { grid-column-start: 7; }
  .fx-7 { grid-column-start: 8; }
  .fx-8 { grid-column-start: 9; }
  .fx-9 { grid-column-start: 10; }
  .fx-10 { grid-column-start: 11; }
  .fx-11 { grid-column-start: 12; }
  .fx-12 { grid-column-start: 13; }
  .fx-13 { grid-column-start: 14; }
  .fx-14 { grid-column-start: 15; }
  .fx-15 { grid-column-start: 16; }
  .fx-16 { grid-column-start: 17; }
  .fx-17 { grid-column-start: 18; }
  .fx-18 { grid-column-start: 19; }
  .fx-19 { grid-column-start: 20; }
  .fx-20 { grid-column-start: 21; }
  .fx-21 { grid-column-start: 22; }
  .fx-22 { grid-column-start: 23; }
  .fx-23 { grid-column-start: 24; }
  .fx-24 { grid-column-start: 25; }
  .fx-25 { grid-column-start: 26; }
  .fx-26 { grid-column-start: 27; }
  .fx-27 { grid-column-start: 28; }
  .fx-28 { grid-column-start: 29; }
  .fx-29 { grid-column-start: 30; }
  .fx-30 { grid-column-start: 31; }
  .fx-31 { grid-column-start: 32; }
  .fx-32 { grid-column-start: 33; }
  .fx-33 { grid-column-start: 34; }
  .fx-34 { grid-column-start: 35; }
  .fx-35 { grid-column-start: 36; }
  .fx-36 { grid-column-start: 37; }
  .fx-37 { grid-column-start: 38; }
  .fx-38 { grid-column-start: 39; }
  .fx-39 { grid-column-start: 40; }
  .fx-40 { grid-column-start: 41; }
  .fx-41 { grid-column-start: 42; }
  .fx-42 { grid-column-start: 43; }
  .fx-43 { grid-column-start: 44; }
  .fx-44 { grid-column-start: 45; }
  .fx-45 { grid-column-start: 46; }
  .fx-46 { grid-column-start: 47; }
  .fx-47 { grid-column-start: 48; }
  .fx-48 { grid-column-start: 49; }
  .fx-49 { grid-column-start: 50; }
  .fx-50 { grid-column-start: 51; }
  .fx-51 { grid-column-start: 52; }
  .fx-52 { grid-column-start: 53; }
  .fx-53 { grid-column-start: 54; }
  .fx-54 { grid-column-start: 55; }
  .fx-55 { grid-column-start: 56; }
  .fx-56 { grid-column-start: 57; }
  .fx-57 { grid-column-start: 58; }
  .fx-58 { grid-column-start: 59; }
  .fx-59 { grid-column-start: 60; }
  .fy-0 { grid-row-start: 1; }
  .fy-1 { grid-row-start: 2; }
  .fy-2 { grid-row-start: 3; }
  .fy-3 { grid-row-start: 4; }
  .fy-4 { grid-row-start: 5; }
  .fy-5 { grid-row-start: 6; }
  .fy-6 { grid-row-start: 7; }
  .fy-7 { grid-row-start: 8; }
  .fy-8 { grid-row-start: 9; }
  .fy-9 { grid-row-start: 10; }
  .fy-10 { grid-row-start: 11; }
  .fy-11 { grid-row-start: 12; }
  .fy-12 { grid-row-start: 13; }
  .fy-13 { grid-row-start: 14; }
  .fy-14 { grid-row-start: 15; }
  .fy-15 { grid-row-start: 16; }
  .fy-16 { grid-row-start: 17; }
  .fy-17 { grid-row-start: 18; }
  .fy-18 { grid-row-start: 19; }
  .fy-19 { grid-row-start: 20; }
  .fy-20 { grid-row-start: 21; }
  .fy-21 { grid-row-start: 22; }
  .fy-22 { grid-row-start: 23; }
  .fy-23 { grid-row-start: 24; }
  .fy-24 { grid-row-start: 25; }
  .fy-25 { grid-row-start: 26; }
  .fy-26 { grid-row-start: 27; }
  .fy-27 { grid-row-start: 28; }
  .fy-28 { grid-row-start: 29; }
  .fy-29 { grid-row-start: 30; }
  .fy-30 { grid-row-start: 31; }
  .fy-31 { grid-row-start: 32; }
  .fy-32 { grid-row-start: 33; }
  .fy-33 { grid-row-start: 34; }
  .fy-34 { grid-row-start: 35; }
  .fy-35 { grid-row-start: 36; }
  .fy-36 { grid-row-start: 37; }
  .fy-37 { grid-row-start: 38; }
  .fy-38 { grid-row-start: 39; }
  .fy-39 { grid-row-start: 40; }
  .fy-40 { grid-row-start: 41; }
  .fy-41 { grid-row-start: 42; }
  .fy-42 { grid-row-start: 43; }
  .fy-43 { grid-row-start: 44; }
  .fy-44 { grid-row-start: 45; }
  .fy-45 { grid-row-start: 46; }
  .fy-46 { grid-row-start: 47; }
  .fy-47 { grid-row-start: 48; }
  .fy-48 { grid-row-start: 49; }
  .fy-49 { grid-row-start: 50; }
  .fy-50 { grid-row-start: 51; }
  .fy-51 { grid-row-start: 52; }
  .fy-52 { grid-row-start: 53; }
  .fy-53 { grid-row-start: 54; }
  .fy-54 { grid-row-start: 55; }
  .fy-55 { grid-row-start: 56; }
  .fy-56 { grid-row-start: 57; }
  .fy-57 { grid-row-start: 58; }
  .fy-58 { grid-row-start: 59; }
  .fy-59 { grid-row-start: 60; }
  .fw-1 { grid-column-end: span 1; }
  .fw-2 { grid-column-end: span 2; }
  .fw-3 { grid-column-end: span 3; }
  .fw-4 { grid-column-end: span 4; }
  .fw-5 { grid-column-end: span 5; }
  .fw-6 { grid-column-end: span 6; }
  .fw-7 { grid-column-end: span 7; }
  .fw-8 { grid-column-end: span 8; }
  .fw-9 { grid-column-end: span 9; }
  .fw-10 { grid-column-end: span 10; }
  .fw-11 { grid-column-end: span 11; }
  .fw-12 { grid-column-end: span 12; }
  .fw-13 { grid-column-end: span 13; }
  .fw-14 { grid-column-end: span 14; }
  .fw-15 { grid-column-end: span 15; }
  .fw-16 { grid-column-end: span 16; }
  .fw-17 { grid-column-end: span 17; }
  .fw-18 { grid-column-end: span 18; }
  .fw-19 { grid-column-end: span 19; }
  .fw-20 { grid-column-end: span 20; }
  .fw-21 { grid-column-end: span 21; }
  .fw-22 { grid-column-end: span 22; }
  .fw-23 { grid-column-end: span 23; }
  .fw-24 { grid-column-end: span 24; }
  .fw-25 { grid-column-end: span 25; }
  .fw-26 { grid-column-end: span 26; }
  .fw-27 { grid-column-end: span 27; }
  .fw-28 { grid-column-end: span 28; }
  .fw-29 { grid-column-end: span 29; }
  .fw-30 { grid-column-end: span 30; }
  .fw-31 { grid-column-end: span 31; }
  .fw-32 { grid-column-end: span 32; }
  .fw-33 { grid-column-end: span 33; }
  .fw-34 { grid-column-end: span 34; }
  .fw-35 { grid-column-end: span 35; }
  .fw-36 { grid-column-end: span 36; }
  .fw-37 { grid-column-end: span 37; }
  .fw-38 { grid-column-end: span 38; }
  .fw-39 { grid-column-end: span 39; }
  .fw-40 { grid-column-end: span 40; }
  .fw-41 { grid-column-end: span 41; }
  .fw-42 { grid-column-end: span 42; }
  .fw-43 { grid-column-end: span 43; }
  .fw-44 { grid-column-end: span 44; }
  .fw-45 { grid-column-end: span 45; }
  .fw-46 { grid-column-end: span 46; }
  .fw-47 { grid-column-end: span 47; }
  .fw-48 { grid-column-end: span 48; }
  .fw-49 { grid-column-end: span 49; }
  .fw-50 { grid-column-end: span 50; }
  .fw-51 { grid-column-end: span 51; }
  .fw-52 { grid-column-end: span 52; }
  .fw-53 { grid-column-end: span 53; }
  .fw-54 { grid-column-end: span 54; }
  .fw-55 { grid-column-end: span 55; }
  .fw-56 { grid-column-end: span 56; }
  .fw-57 { grid-column-end: span 57; }
  .fw-58 { grid-column-end: span 58; }
  .fw-59 { grid-column-end: span 59; }
  .fw-60 { grid-column-end: span 60; }
  .fh-1 { grid-row-end: span 1; }
  .fh-2 { grid-row-end: span 2; }
  .fh-3 { grid-row-end: span 3; }
  .fh-4 { grid-row-end: span 4; }
  .fh-5 { grid-row-end: span 5; }
  .fh-6 { grid-row-end: span 6; }
  .fh-7 { grid-row-end: span 7; }
  .fh-8 { grid-row-end: span 8; }
  .fh-9 { grid-row-end: span 9; }
  .fh-10 { grid-row-end: span 10; }
  .fh-11 { grid-row-end: span 11; }
  .fh-12 { grid-row-end: span 12; }
  .fh-13 { grid-row-end: span 13; }
  .fh-14 { grid-row-end: span 14; }
  .fh-15 { grid-row-end: span 15; }
  .fh-16 { grid-row-end: span 16; }
  .fh-17 { grid-row-end: span 17; }
  .fh-18 { grid-row-end: span 18; }
  .fh-19 { grid-row-end: span 19; }
  .fh-20 { grid-row-end: span 20; }
  .fh-21 { grid-row-end: span 21; }
  .fh-22 { grid-row-end: span 22; }
  .fh-23 { grid-row-end: span 23; }
  .fh-24 { grid-row-end: span 24; }
  .fh-25 { grid-row-end: span 25; }
  .fh-26 { grid-row-end: span 26; }
  .fh-27 { grid-row-end: span 27; }
  .fh-28 { grid-row-end: span 28; }
  .fh-29 { grid-row-end: span 29; }
  .fh-30 { grid-row-end: span 30; }
  .fh-31 { grid-row-end: span 31; }
  .fh-32 { grid-row-end: span 32; }
  .fh-33 { grid-row-end: span 33; }
  .fh-34 { grid-row-end: span 34; }
  .fh-35 { grid-row-end: span 35; }
  .fh-36 { grid-row-end: span 36; }
  .fh-37 { grid-row-end: span 37; }
  .fh-38 { grid-row-end: span 38; }
  .fh-39 { grid-row-end: span 39; }
  .fh-40 { grid-row-end: span 40; }
  .fh-41 { grid-row-end: span 41; }
  .fh-42 { grid-row-end: span 42; }
  .fh-43 { grid-row-end: span 43; }
  .fh-44 { grid-row-end: span 44; }
  .fh-45 { grid-row-end: span 45; }
  .fh-46 { grid-row-end: span 46; }
  .fh-47 { grid-row-end: span 47; }
  .fh-48 { grid-row-end: span 48; }
  .fh-49 { grid-row-end: span 49; }
  .fh-50 { grid-row-end: span 50; }
  .fh-51 { grid-row-end: span 51; }
  .fh-52 { grid-row-end: span 52; }
  .fh-53 { grid-row-end: span 53; }
  .fh-54 { grid-row-end: span 54; }
  .fh-55 { grid-row-end: span 55; }
  .fh-56 { grid-row-end: span 56; }
  .fh-57 { grid-row-end: span 57; }
  .fh-58 { grid-row-end: span 58; }
  .fh-59 { grid-row-end: span 59; }
  .fh-60 { grid-row-end: span 60; }
}