/* The floor film, in the Food and drink section: the Tables plan on the tablet at the counter. A tab is opened for
   Table 2 and the plan follows. Built in code like the hero, so it
   stays true to the product. Every selector starts with .floor, and no class name in here may match one in site.css
   (see the note in hero.css). Colours inside the screens are the till's own, in its Path build. */

.floor { position: relative; }
.floor .f-tablet { position: relative; width: 100%; }

/* ---- The Tables screen on the tablet, in container units: 1em = 1% of the screen width. Measured from the Register
   on David's tablet (design/hero/reference/android-tables-2026-09-16.png). ---- */
.floor .tablet { box-sizing: border-box; padding: 2.3%; background: #101214; border-radius: 3% / 4.6%; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 28px 48px -24px rgba(11,12,12,.5), 0 0 0 1px rgba(11,12,12,.08); }
.floor .tscreen { position: relative; width: 100%; aspect-ratio: 1.6; background: #F5F5EF; border-radius: 1.4% / 2%; overflow: hidden; container-type: inline-size; }
.floor .plan-ui { position: absolute; inset: 0; font-size: 1cqw; display: flex; flex-direction: column; line-height: 1.2; color: #1A1F1B; font-family: var(--pp-font-body); transition: opacity .4s var(--pp-ease); }
.floor svg { display: inline-block; max-width: none; }
.floor .tscreen b { font-family: var(--pp-font-display); }
.floor .t-top { flex: none; height: 4.6em; background: #fff; border-bottom: .06em solid #E3E8E4; display: flex; align-items: center; gap: 1.1em; padding: 0 1.45em; }
.floor .t-burger { width: 2.9em; height: 2.9em; border-radius: .55em; background: #F1F4F1; display: grid; place-items: center; }
.floor .t-burger svg { width: 1.25em; height: 1.25em; }
.floor .t-mark { width: 2.5em; height: 2.5em; border-radius: .5em; background: #007E80; color: #fff; display: grid; place-items: center; }
.floor .t-mark b { font-size: .9em; font-weight: 700; }
.floor .t-biz { display: flex; flex-direction: column; gap: .05em; flex: 1; }
.floor .t-biz b { font-size: 1.2em; font-weight: 600; }.floor .t-biz span { font-size: .75em; color: #6E7872; }
.floor .t-pill { height: 2.07em; padding: 0 .9em; border-radius: .45em; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.floor .t-pill i { width: .32em; height: .32em; border-radius: 50%; background: currentColor; }.floor .t-pill span { font-size: .8em; font-weight: 500; }
.floor .t-sub { flex: none; height: 5em; background: #fff; border-bottom: .06em solid #E3E8E4; display: flex; align-items: center; gap: 1.1em; padding: 0 1.45em; white-space: nowrap; }
.floor .t-sub .ttl { display: flex; flex-direction: column; }.floor .t-sub .ttl b { font-size: 1.7em; font-weight: 600; line-height: 1.1; }.floor .t-sub .ttl span { font-size: .85em; color: #5C6660; }
.floor .t-sub .rule { width: .06em; height: 2.4em; background: #E3E8E4; }
.floor .t-seg { height: 2.9em; padding: 0 1em; border-radius: .55em; display: inline-flex; align-items: center; background: #F1F4F1; color: #5C6660; }
.floor .t-seg span { font-size: .95em; font-weight: 600; }.floor .t-seg.on { background: #1A1F1B; color: #fff; }
.floor .t-area { height: 2.9em; padding: 0 .95em; border-radius: .55em; display: inline-flex; align-items: center; gap: .5em; background: #F1F4F1; color: #5C6660; }
.floor .t-area i { width: .5em; height: .5em; border-radius: 50%; background: #B7791F; }.floor .t-area span { font-size: .95em; font-weight: 600; }.floor .t-area em { font-style: normal; font-size: .95em; font-weight: 400; }
.floor .t-area.on { background: #DDF6F6; color: #007E80; box-shadow: inset 0 0 0 .09em #007E80; }.floor .t-area.on i { background: #007E80; }
.floor .t-stat { display: flex; flex-direction: column; }.floor .t-stat span { font-size: .75em; color: #5C6660; }.floor .t-stat b { font-family: var(--pp-font-body); font-size: 1.4em; font-weight: 500; font-variant-numeric: tabular-nums; }
.floor .t-new { height: 3.3em; padding: 0 1.3em; border-radius: .6em; background: #1A1F1B; color: #fff; display: inline-flex; align-items: center; gap: .6em; }
.floor .t-new b { font-size: 1em; font-weight: 600; }.floor .t-new svg { width: 1em; height: 1em; }
.floor .t-legend { flex: none; height: 3em; background: #fff; border-bottom: .06em solid #E3E8E4; display: flex; align-items: center; gap: 1.4em; padding: 0 1.45em; white-space: nowrap; }
.floor .t-legend span { display: inline-flex; align-items: center; gap: .55em; font-size: .8em; color: #5C6660; }
.floor .t-legend i { width: 1em; height: 1em; border-radius: .22em; box-sizing: border-box; }
.floor .t-plan { flex: 1; position: relative; min-height: 0; }
.floor .t-strip { flex: none; height: 6.4em; background: #fff; border-top: .06em solid #E3E8E4; padding: .9em 1.45em; box-sizing: border-box; display: flex; flex-direction: column; gap: .6em; }
.floor .t-strip > span { font-size: .85em; font-weight: 600; }.floor .t-strip div { align-self: flex-start; background: #F1F4F1; border-radius: .5em; padding: .55em 1em; display: flex; gap: .7em; }
.floor .t-strip div b { font-family: var(--pp-font-body); font-size: .95em; font-weight: 700; }.floor .t-strip div em { font-style: normal; font-size: .95em; }
.floor .tbl { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em; text-align: center; border-radius: .9em; background: #fff; box-shadow: inset 0 0 0 .08em #CFD6D1; color: #1A1F1B; }
.floor .tbl b { font-size: 1.2em; font-weight: 600; line-height: 1.15; }.floor .tbl .amt { font-size: 1.3em; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }.floor .tbl .sub { font-size: .72em; color: #5C6660; font-weight: 500; }
.floor .tbl.round { border-radius: 50%; }.floor .tbl.stool b { font-size: 1.15em; }
.floor .tbl.seated, .floor .tbl.ordered, .floor .tbl.bill, .floor .tbl.quiet, .floor .tbl.clear { box-shadow: none; color: #fff; }.floor .tbl.seated .sub, .floor .tbl.ordered .sub, .floor .tbl.bill .sub, .floor .tbl.quiet .sub, .floor .tbl.clear .sub { color: #fff; font-weight: 700; }
.floor .tbl.seated { background: #1A1F1B; }.floor .tbl.ordered { background: #007E80; }.floor .tbl.bill { background: #2C6E8F; }.floor .tbl.quiet { background: #9A6419; }.floor .tbl.clear { background: #C73E5E; }
.floor .tbl .who { position: absolute; top: -.75em; right: -.75em; width: 1.9em; height: 1.9em; border-radius: .55em; background: #1A1F1B; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 .14em #F5F5EF; }
.floor .tbl .who b { font-size: .62em; font-weight: 700; }
.floor .tbl .ready { margin-top: .35em; background: #fff; color: #1A1F1B; border-radius: .5em; padding: .45em 1.6em; font-size: .8em; font-weight: 700; }

/* ---- What moves ---- */
.floor .tbl { transition: background-color .4s var(--pp-ease), color .4s var(--pp-ease), box-shadow .4s var(--pp-ease), outline-color .4s var(--pp-ease); outline: .28em solid transparent; outline-offset: .22em; }
.floor .tbl.focus { outline-color: rgba(0,186,188,.45); }
.floor .t-new { transition: transform .18s var(--pp-ease), filter .18s var(--pp-ease); }
.floor .t-new.pressed { transform: scale(.95); filter: brightness(.88); }
.floor .tick { display: inline-block; animation: floorTick .35s var(--pp-ease); }
@keyframes floorTick { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.floor.cut .plan-ui { opacity: 0; }