/* 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. The Cashier
   gives the map the whole body while no table is chosen (floor mode: 2 x 2 tables at about 94 px on an iPad) and
   shows the zone as the card grid in its 300 px rail while a ticket is open. A map card (.fm-card, touch floor
   48 px) never shrinks below that floor and is centred on its cell; in a card narrower than 80 px the word gives
   way to the glyph and the name to its short form ("12" for "Mesa 12"), and in one lower than 64 px the facts go
   (container queries); the full text stays in the card's aria-label and title. 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). */
@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: 79px) { .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); }
  /* 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; }
}