/* The Handy's floor plan (batch I2, k1; BATCH-I2-PLAN 7.1 item 3, I2-D1 to I2-D4, I2-D20): the room picker, the plan of
   the chosen room (web/handy/tables.js tablesView over web/platform/floormap.js floorRail) and the room's open rows.
   Linked after /handy/app.css (web/handy/index.html), so the page cascades tokens, base, floormap, app, plan; every rule
   is scoped to .app-handy .hd-plan (or .app-handy .hd-open), which the Cashier never renders.
   - I2-D2, the compact tier (under 600 px, the unqueried base): the same markup as a card grid, three cards across in
     floor order, (W - 32 - 2 x 8) / 3 wide (114 px at 390, 104 at 360) and --table-card-minHeight (96 px) tall,
     the walls, doors, plants and rotation bars hidden. .fm-zone is a wrapping flex row there, so the grid placement
     classes of floormap.css (fx-, fy-, fw-, fh-) are inert; from 600 it is a grid again and they place every card.
     Batch I2 fold (design/I2-CHROMIUM-PASS.md side observation 1): that 96 px is a definite height, not a min-height
     on height: auto. The card is the query container of floormap.css's container queries (container-type: size) and a
     size container reports the size it is given, so an auto block axis left the query with nothing to read: measured
     in Chromium 145 on 2026-09-27, a max-height: 1px query matched a 114 x 96 card and a min-height: 1px query did
     not, which hid .fm-facts on every compact card and cost the phone the covers and the minutes I2-D2 promises. The
     min-height stays beside it (the 48 px card floor of floormap.css is what it overrides), and the box is the same
     96 px: under size containment the card's content never sizes it.
   - From 600 the map is floormap.css's own (the values below repeat its .fm-zone and .fm-card declarations): the cell
     min((W - 32) / zone.w, 64 px), BATCH-I2-PLAN 1.3: 29.67 px for the 24-column Sala and Terraza and 44.5 px for the
     16-column Barra at 744 (a 2 x 2 card 59.33 px; a 1 x 1 stool keeps the 48 px card floor, 1.75 px over each side of
     its cell, no overlap at the seed's 3-cell pitch of 133.5 px, I2-D4), 45.88 and 64 px at 1133.
   - I2-D3: under the plan, the room's open tables as the rows of app.css (.rows, 2 across) from 600 to 1023 only,
     where the 59.33 px cards show the number and the glyph (the container queries of floormap.css); hidden on the
     compact tier (the 114 px cards carry the facts) and from 1024 (the cards are 82.67 px and more).
   - The card grid of floormap.js (a floor without zones, a zone without cells, the "Sin zona" tab): the Handy's own
     .table-grid and .table-card, which only the Cashier's stylesheet styled before.
   - I2-D20, last: the room picker is sticky at the top of the plan (the Sala at 1133x744 is 734 px tall), under the
     bottom bar's z-index 6 and above the map cards' 1 and 2.
   Only the two tier queries; no .sheet rule; the status treatment comes from the locked layer by class name. Wholly
   inside @layer app; tokens only. */
@layer app {
  .app-handy .hd-plan .fm-zone { display: flex; flex-wrap: wrap; gap: var(--touch-gap); width: 100%; background: transparent; }
  .app-handy .hd-plan .fm-card { flex: 0 0 calc((100% - 2 * var(--touch-gap)) / 3); width: auto; height: var(--table-card-minHeight); min-height: var(--table-card-minHeight); }
  .app-handy .hd-plan .fm-el, .app-handy .hd-plan .fm-rot { display: none; }
  .app-handy .hd-plan .table-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--touch-gap); }
  .app-handy .hd-plan .table-card { display: flex; flex-direction: column; gap: var(--space-1); min-height: var(--table-card-minHeight);
    padding: var(--space-2) var(--space-3); border-radius: var(--table-card-radius); border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .app-handy .hd-plan .table-card.is-selected { outline: 3px solid var(--focus); }
  .app-handy .hd-plan .table-card.is-open { border-width: 3px; font-weight: 700; }
  .app-handy .hd-plan .table-card:disabled { opacity: 0.55; cursor: not-allowed; }
  .app-handy .hd-plan .table-state { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-200); }
  .app-handy .hd-open { display: none; }
  @media (min-width: 600px) {
    .app-handy .hd-plan .fm-zone { display: grid; gap: 0; width: max-content; background: var(--floor-zone-bg); }
    .app-handy .hd-plan .fm-card { width: 100%; height: 100%; min-height: var(--touch-service); }
    .app-handy .hd-plan .fm-el, .app-handy .hd-plan .fm-rot { display: block; }
    .app-handy .hd-plan .table-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .app-handy .hd-open { display: block; }
  }
  @media (min-width: 1024px) {
    .app-handy .hd-open { display: none; }
  }
  .app-handy .hd-plan .zone-tabs { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: var(--space-2) 0; }
}