#dailyCleanChecklist .bp-logbook-checkrow{grid-template-columns:minmax(0,1fr) auto minmax(140px,.42fr)}
#dailyCleanChecklist .bp-logbook-checkrow.is-done{background:#f1fbf4}
.bp-daily-clean-task{display:flex;min-width:0;flex-direction:column;gap:3px}
.bp-daily-clean-task-text{font-size:12px;font-weight:var(--w-strong,600);line-height:1.35}
.bp-daily-clean-created,.bp-daily-clean-created-output{color:#6d7b8c;font-size:11px;line-height:1.3}
.bp-daily-clean-created-output{display:block;min-height:34px;padding:7px 0}
.bp-daily-clean-done{min-height:34px;border:1px solid #2f6fbb;border-radius:8px;background:#fff;color:#225b9c;font-size:11px;font-weight:var(--w-strong,600);white-space:nowrap;padding:6px 9px;cursor:pointer}
.bp-daily-clean-done.is-done{border-color:#208653;background:#208653;color:#fff}
.bp-daily-clean-done:hover{filter:brightness(.97)}
@media(max-width:900px){#dailyCleanChecklist .bp-logbook-checkrow{grid-template-columns:minmax(0,1fr) auto}.bp-daily-clean-done{min-height:36px}.bp-daily-clean-created{grid-column:1/-1}.bp-daily-clean-note{grid-column:1/-1}}
@container bpops (max-width:900px){.bp-daily-clean-created{grid-column:1/-1}.bp-daily-clean-note{grid-column:1/-1}}
@media(max-width:560px){#dailyCleanChecklist .bp-logbook-checkrow{grid-template-columns:1fr}.bp-daily-clean-done{width:100%}}
@container bpops (max-width:560px){.bp-daily-clean-done{width:100%}}
/* ==========================================================
TOUCH DEVICES
==========================================================
Asked by capability, not by name. `pointer:coarse` is true on a phone or a
tablet and false on a trackpad, which is the thing that actually matters --
a finger needs a bigger target than a cursor. A user-agent string would have
to be kept in step with every new device and still gets a Surface or an iPad
with a keyboard wrong.
Measured on a 375px phone before this: the primary button was 33px tall, the
month selects 34px, a standalone link 15px. Apple asks for 44pt and Android
for 48dp; 42px with the row padding around it lands in that range without
re-laying-out screens that already work.
========================================================== */
/* ==========================================================
SMALL SCREENS — things that broke on a real phone
==========================================================
Each of these was visible in a screenshot from an iPhone, not inferred. */
/* "Print" came out as "Prin" / "t". A button label is one word; it should
overflow or shrink its box, never shatter down the middle. */
.btn,.smallbtn,.bpw-b{white-space:nowrap}
/* A control must never be wider than the card holding it. Several selects and
date fields ran off the right edge of the Report Center. */
.card select,.card input,.card textarea,
.bp-panel select,.bp-panel input,.bp-panel textarea{max-width:100%;box-sizing:border-box}
.field,.bp-field{min-width:0}
/* The Front Desk hotel chooser clipped its own text mid-word. */
.bp-ops-property select,.bp-ops-property input{max-width:100%;min-width:0;box-sizing:border-box}
/* A card in a .grid must not be wider than its own column.
`.two` is `1.2fr 0.8fr`, and an fr track's automatic minimum is its item's
min-content -- so a card holding a wide table quietly overruled the ratio it
was given. Measured at 1440px on History & Reports: the tracks came out
628/715 instead of 713/475, the pair needed 1357px of a 1202px row, and the
whole page scrolled 155px sideways. The inner .tablewrap already scrolls; it
just never got the chance, because the card never shrank to let it.
min-width:0 waives that automatic minimum. The fr ratio then decides the
widths and the table scrolls inside its own box, which is what it is for. */
.grid>.card,.grid>section.card{min-width:0}
@media(max-width:700px){
/* Four filter columns in 390px gives each about 85px. One column reads. */
.bp-report-filters{grid-template-columns:minmax(0,1fr)}
.bp-report-filters .bp-report-actions{display:flex;gap:7px;flex-wrap:wrap}
}
/* ==========================================================
OPERATIONS REPORT CENTER — the report table itself
==========================================================
Two separate faults, both measured in the harness at 390px and 768px.
1. `min-width:900px` was a fixed number for a table whose column count is
chosen by the Report dropdown. "Front Desk Shifts" has 12 columns and
"Cash Counts / Drops" has 18, so the cash report got 900/18 = 50px per
column: 165 of 270 cells wrapped, the header row stood 127px tall and
every data row 136px, and values broke mid-number -- `1,236.25` over
three lines, `2026-09-01` over three. Three rows fitted in the 60vh box.
`width:max-content` asks the table what it actually needs instead of
telling it, so a 12-column report stays narrow and an 18-column one gets
the room to put each value on one line. `min-width:100%` keeps it filling
the card when the report is narrow, and the cap on a cell keeps one long
free-text column (Drop Detail, Issue, Remarks) from running to 600px --
that one wraps, the numbers do not.
2. Scrolled 600px right, the visible columns were 10 through 17: a variance
of -12.50 with no date and no hotel anywhere on screen. The header row was
already pinned vertically; the first column now pins horizontally, so the
date stays put while the money scrolls past it. Same fault, same fix as
Settings, Timecards, Front Desk, Inventory and Documents. */
.bp-report-table table{width:max-content;min-width:100%}
/* A sticky cell with a z-index sits in the same stacking context as any sticky app header above it, so a pinned column paints over that header when the page scrolls. Containing them here scopes those z-indexes to the table. */
#pmHistory .tablewrap,#completedWO .tablewrap,#safetyReportLibrary .tablewrap,
.tablewrap.bp-report-table{position:relative;z-index:0}
.bp-report-table th,.bp-report-table td{max-width:260px}
.bp-report-table thead th{z-index:3}
.bp-report-table th:first-child,
.bp-report-table td:first-child{
position:sticky;
left:0;
background:#fff;
box-shadow:1px 0 0 #E0E7EF;
}
.bp-report-table td:first-child{z-index:2}
.bp-report-table thead th:first-child{z-index:4;background:#f7f8fa}
/* History & Reports keeps two more fixed tables under the Report Center. Both
are 720px wide in a 358px box on a phone, and scrolled 400px right only
columns 4-7 were left: a "PDF / Print" button with no way to tell which work
order it prints. Pin the ID. Above 900px both tables fit and nothing sticks. */
@media(max-width:900px){
#pmHistory th:first-child,#pmHistory td:first-child,
#completedWO th:first-child,#completedWO td:first-child{
position:sticky;
left:0;
background:#fff;
box-shadow:1px 0 0 #E0E7EF;
}
#pmHistory td:first-child,#completedWO td:first-child{z-index:2}
#pmHistory th:first-child,#completedWO th:first-child{z-index:4;background:#f7f8fa}
}
/* The Inspection report library is six columns of mostly short values; it reads
fine scrolled, it just lost its Date the moment you moved sideways. Pin it,
the same way. */
@media(max-width:900px){
#safetyReportLibrary th:first-child,#safetyReportLibrary td:first-child{
position:sticky;
left:0;
background:#fff;
box-shadow:1px 0 0 #E0E7EF;
}
#safetyReportLibrary td:first-child{z-index:2}
#safetyReportLibrary th:first-child{z-index:4;background:#f7f8fa}
}
/* Relocated out of the @media(max-width:760px) block above.
It used to be nested inside it, so its own 700px query could only ever narrow
that 760px -- raising it to 1180px there did nothing at all, because 760 AND
1180 is still 760. A media query nested in another is an AND, not an override.
At top level the 1180px actually applies. */
/* 1180px, not 700px: the portal shell takes a 238px sidebar plus padding, so a
1024px iPad in landscape leaves these tables 746px -- the same room a 768px
iPad portrait gives, where the inventory row stood 98px tall with 8 crushed
cells ("Case" in 47px, the PAR count in 43px) and a document row 167px. Same
breakpoint as the life-safety and vendor tables below. */
@media(max-width:1180px){
#inventoryItemTable .tablewrap,#documentLibrary .tablewrap{overflow:visible;border:0}
#inventoryItemTable table,#documentLibrary table{display:block;min-width:0;border-collapse:separate}
#inventoryItemTable tbody,#documentLibrary tbody,
#inventoryItemTable tr,#documentLibrary tr,
#inventoryItemTable td,#documentLibrary td{display:block;width:auto}
#inventoryItemTable tr:first-child,#documentLibrary tr:first-child{display:none}
#inventoryItemTable tr,#documentLibrary tr{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:9px}
#inventoryItemTable td,#documentLibrary td{border:0;padding:3px 0;display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:start;font-size:12px}
#inventoryItemTable td::before,#documentLibrary td::before{color:#64748b;font-weight:var(--w-strong,600);font-size:10px;text-transform:uppercase;letter-spacing:.03em}
#inventoryItemTable td:nth-child(1)::before{content:'Category'}
#inventoryItemTable td:nth-child(2)::before{content:'Item'}
#inventoryItemTable td:nth-child(3)::before{content:'SKU'}
#inventoryItemTable td:nth-child(4)::before{content:'Unit'}
#inventoryItemTable td:nth-child(5)::before{content:'PAR'}
#inventoryItemTable td:nth-child(6)::before{content:'Reorder'}
#inventoryItemTable td:nth-child(7)::before{content:'Last count'}
#inventoryItemTable td:nth-child(8)::before{content:'Status'}
#inventoryItemTable td:nth-child(2){font-size:14px}
/* The last cell is the row's action, not a field. */
#inventoryItemTable td:nth-child(9){grid-template-columns:none;padding-top:8px}
#inventoryItemTable td:nth-child(9)::before{content:none}
#documentLibrary td:nth-child(1)::before{content:'Scope'}
#documentLibrary td:nth-child(2)::before{content:'Category'}
#documentLibrary td:nth-child(3)::before{content:'Title'}
#documentLibrary td:nth-child(4)::before{content:'Expiry / review'}
#documentLibrary td:nth-child(5)::before{content:'Files'}
#documentLibrary td:nth-child(6)::before{content:'Notes'}
#documentLibrary td:nth-child(3){font-size:14px}
/* A cell holding more than one element cannot use the two-column grid: in a
grid container EVERY child is its own grid item, so the pieces scatter into
alternating tracks instead of flowing. Measured at 390px: a document with
three attachments put file 1 in the value column, file 2 in the 96px LABEL
column squeezed to 92px, and file 3 back in the value column. The Item cell
survives only by accident -- its
happens to absorb the odd track, and a
third element would break it too. Both become block cells with the label on
its own line. */
#documentLibrary td:nth-child(5),
#inventoryItemTable td:nth-child(2){display:block;padding:5px 0}
#documentLibrary td:nth-child(5)::before,
#inventoryItemTable td:nth-child(2)::before{display:block;margin-bottom:1px}
/* An empty state spans the row; it is not a record and gets no labels. */
#inventoryItemTable td[colspan],#documentLibrary td[colspan]{grid-template-columns:none;text-align:center}
#inventoryItemTable td[colspan]::before,#documentLibrary td[colspan]::before{content:none}
}
/* ==========================================================
LIFE SAFETY SCHEDULE AND VENDOR DIRECTORY — restacked as cards
==========================================================
These two are past the point a horizontal scroll can rescue. Measured at
390px:
The vendor directory is nine columns inside min-width:720px, so each gets
about 80px and every row stands 306px tall. "Portfolio" rendered 25px wide
and 81px tall -- one word per line, down the cell. The company name got 35px,
the street address 37px, the phone number 32px. It is a contact directory in
which you cannot read a phone number.
The inspection schedule is ten columns in the same 720px: rows 117px tall,
the hotel name wrapped over four lines in 94px, and the Overdue badge came
out 41px wide and 56px tall.
Neither has a column worth freezing: the first is the hotel, which is the
same on every row once a hotel is selected, and the identifier is the second.
So each row becomes a labelled card instead -- the same treatment the
inventory and document tables already get, and for the same reason. The
header row supplies the labels, so it is hidden and each cell carries its own.
The breakpoint is 1180px, not 700px, because the space these tables get is
not the viewport: the portal shell takes a 238px sidebar plus padding, so a
1024px iPad in landscape hands them 746px -- the same room a 768px iPad
portrait gives, where the vendor rows measured 306px tall with 28 crushed
cells. 1180px is the breakpoint this file already uses for "iPad landscape,
and any desktop with a browser side panel open". Above it both are ordinary
tables again. */
@media(max-width:1180px){
#safetyScheduleTable .tablewrap,#vendorList .tablewrap{overflow:visible;border:0}
#safetyScheduleTable table,#vendorList table{display:block;min-width:0;border-collapse:separate}
#safetyScheduleTable tbody,#vendorList tbody,
#safetyScheduleTable tr,#vendorList tr,
#safetyScheduleTable td,#vendorList td{display:block;width:auto}
/* The first row is the header; its text becomes the labels below. */
#safetyScheduleTable tr:first-child,#vendorList tr:first-child{display:none}
#safetyScheduleTable tr,#vendorList tr{
background:#fff;
border:1px solid var(--line);
border-radius:11px;
padding:11px 13px;
margin-bottom:9px;
}
/* The overdue and due-soon row tints have to survive the restack, or the
one thing the schedule exists to show stops showing. */
#safetyScheduleTable tr.schedule-row-overdue{background:#FFF6F6;border-color:#F0B7B7}
#safetyScheduleTable tr.schedule-row-due{background:#FFFBF2;border-color:#EFD8A8}
#safetyScheduleTable td,#vendorList td{
border:0;
font-size:12px;
line-height:1.4;
}
#safetyScheduleTable td::before,#vendorList td::before{
color:#64748b;
font-weight:var(--w-strong,600);
font-size:10px;
text-transform:uppercase;
letter-spacing:.03em;
}
/* Every cell in the schedule holds a single value, so the label sits beside
it and the card stays short -- there are a lot of inspections. */
#safetyScheduleTable td{
padding:3px 0;
display:grid;
grid-template-columns:96px minmax(0,1fr);
gap:10px;
align-items:start;
}
/* The vendor cells do not: Contact is a name plus a tel: link plus a mailto:
link, Documents is a run of doc-pill buttons and an "Add document" button,
Tax is three pills. A two-column grid makes EVERY child of the cell its own
grid item, so those scatter into separate tracks -- the Add-document button
landed in a 96px track holding 107px of label, clipped, and the Documents
cell stood 164px tall for two files. A block cell with a block label keeps
the content flowing as the renderer wrote it. */
#vendorList td{padding:5px 0;display:block}
#vendorList td::before{display:block;margin-bottom:1px}
#safetyScheduleTable td:nth-child(1)::before{content:'Hotel'}
#safetyScheduleTable td:nth-child(2)::before{content:'Inspection'}
#safetyScheduleTable td:nth-child(3)::before{content:'Area'}
#safetyScheduleTable td:nth-child(4)::before{content:'Frequency'}
#safetyScheduleTable td:nth-child(5)::before{content:'Last'}
#safetyScheduleTable td:nth-child(6)::before{content:'Next due'}
#safetyScheduleTable td:nth-child(7)::before{content:'Reminder'}
#safetyScheduleTable td:nth-child(8)::before{content:'Vendor'}
#safetyScheduleTable td:nth-child(9)::before{content:'Responsible'}
#safetyScheduleTable td:nth-child(2){font-size:14px}
/* The last cell is the row's action, not a field. */
#safetyScheduleTable td:nth-child(10){grid-template-columns:none;padding-top:8px}
#safetyScheduleTable td:nth-child(10)::before{content:none}
#vendorList td:nth-child(1)::before{content:'Scope'}
#vendorList td:nth-child(2)::before{content:'Vendor'}
#vendorList td:nth-child(3)::before{content:'Contact'}
#vendorList td:nth-child(4)::before{content:'Address'}
#vendorList td:nth-child(5)::before{content:'Tax / accounting'}
#vendorList td:nth-child(6)::before{content:'Contract'}
#vendorList td:nth-child(7)::before{content:'Documents'}
#vendorList td:nth-child(8)::before{content:'Notes'}
#vendorList td:nth-child(2){font-size:14px}
#vendorList td:nth-child(9){padding-top:8px}
#vendorList td:nth-child(9)::before{content:none}
/* An empty state spans the row; it is not a record and gets no labels. */
#safetyScheduleTable td[colspan]{grid-template-columns:none}
#safetyScheduleTable td[colspan],#vendorList td[colspan]{text-align:center}
#safetyScheduleTable td[colspan]::before,#vendorList td[colspan]::before{content:none}
}
/* ==========================================================
INVOICE REGISTER — restacked as cards
==========================================================
Nine columns inside min-width:720px. Measured at 375px: rows 362px tall and
20 of 45 cells crushed -- the date in a 37px column, "Simplex Grinnell Fire
Protection" at 42px wide and 109px tall, the description a 42x239 strip of
vertical text, "$2,480.00" at 36px, the Pending badge 26px across. At 768px
it is no better: still 20 crushed cells and 325px rows. Scrolled right, the
date is 376px off the left edge.
1180px for the same reason as the other registers: the shell takes a 238px
sidebar, so a 1024px viewport leaves this table 746px -- less than the 955px
it wants, and the same room a 768px viewport gives. */
@media(max-width:1180px){
#invoiceRegister .tablewrap{overflow:visible;border:0}
#invoiceRegister table{display:block;min-width:0;border-collapse:separate}
#invoiceRegister tbody,#invoiceRegister tr,#invoiceRegister td{display:block;width:auto}
#invoiceRegister tr:first-child{display:none}
#invoiceRegister tr{
background:#fff;
border:1px solid var(--line);
border-radius:11px;
padding:11px 13px;
margin-bottom:9px;
}
#invoiceRegister td{
border:0;
padding:3px 0;
display:grid;
grid-template-columns:96px minmax(0,1fr);
gap:10px;
align-items:start;
font-size:12px;
line-height:1.4;
}
#invoiceRegister td::before{
color:#64748b;
font-weight:var(--w-strong,600);
font-size:10px;
text-transform:uppercase;
letter-spacing:.03em;
}
#invoiceRegister td:nth-child(1)::before{content:'Date'}
#invoiceRegister td:nth-child(2)::before{content:'Hotel'}
#invoiceRegister td:nth-child(3)::before{content:'Vendor'}
#invoiceRegister td:nth-child(4)::before{content:'Category'}
#invoiceRegister td:nth-child(5)::before{content:'Invoice #'}
#invoiceRegister td:nth-child(6)::before{content:'Total'}
#invoiceRegister td:nth-child(7)::before{content:'Status'}
#invoiceRegister td:nth-child(8)::before{content:'Document'}
#invoiceRegister td:nth-child(3){font-size:14px}
/* Vendor is a name over a description, Document a pair of buttons, and the
last cell up to three. A two-column grid makes every child its own grid
item, so those scatter into alternating tracks. */
#invoiceRegister td:nth-child(3),
#invoiceRegister td:nth-child(8),
#invoiceRegister td:nth-child(9){display:block;padding:5px 0}
#invoiceRegister td:nth-child(3)::before,
#invoiceRegister td:nth-child(8)::before{display:block;margin-bottom:1px}
#invoiceRegister td:nth-child(9)::before{content:none}
#invoiceRegister td:nth-child(9){padding-top:8px}
/* An empty state spans the row; it is not a record and gets no labels. */
#invoiceRegister td[colspan]{display:block;text-align:center}
#invoiceRegister td[colspan]::before{content:none}
/* The invoice search filters by setting row.hidden rather than re-rendering,
and `[hidden]{display:none}` comes from the user-agent sheet -- which the
restack above outranks. Without this line, typing in the search box stops
hiding anything on a phone: every row keeps its card. */
#invoiceRegister tr[hidden]{display:none}
}
/* ==========================================================
GUEST RELATIONS — restacked on the width of the section itself
==========================================================
`#view-incidents` is the only section in this portal that lives in two
places. Opened from the portal nav it is a view inside ; opened from
Front Desk, bpOpenFrontDeskGuestRelations() appendChild's the very same node
into the Operations Center workspace. Measured width of the section:
viewport in in the Front Desk workspace
375 375 349
768 768 672
1200 962 486
1440 1202 726
One node, 349px to 1202px, and at a given viewport the two differ by up to
476px. No media query can describe that; the section has to be asked its own
width. Both tables read properly around 960px and above (rows 111-155px tall)
and not below it: at 768 the guest table stood 196px a row with the guest
names rendered 38px wide and 90px tall, one letter per line, and the type
pill 34px wide; at 1200 IN THE WORKSPACE the rows reached 456px, because
above 820px the min-width:720px floor stops applying and a 751px table is
squeezed into a 446px box instead of scrolling.
Below 900px of section width each row becomes a labelled card. */
#view-incidents{container-type:inline-size;container-name:bpincidents}
@container bpincidents (max-width:900px){
/* The section's own two-column layout has to collapse on the same signal.
`.two` drops to one column at a 1100px VIEWPORT, which says nothing about
this section: at a 1200px viewport inside the Front Desk workspace it is
486px wide and still split 1.2fr/0.8fr, so the follow-up queue card came
out 151px and the guest name rendered 42px wide and 49px tall. */
#view-incidents .grid.two,#view-incidents .grid.three{grid-template-columns:minmax(0,1fr)}
}
/* A phone number in a contact directory is the thing you came to tap. In the
Contacts cards and the vendor row these rendered 13px tall -- a link, not a
target. They each sit on their own line, so a hit area here costs nothing;
the same rule inside a sentence would space the text out, which is why it is
scoped to these two places rather than applied to every tel: link. */
@media (pointer:coarse){
.directory-card a[href^="tel:"],.directory-card a[href^="mailto:"],
#vendorList a[href^="tel:"],#vendorList a[href^="mailto:"]{
display:inline-flex;
align-items:center;
min-height:38px;
}
/* The two tabs that switch Guest Relations and Incidents were 33px. */
.bp-incident-tabs button{min-height:42px}
/* The Workspace done-toggle is an 18px circle. Tall enough already; too
narrow to hit. */
#bpTasksWorkspace .bp-tw-row-check{min-width:24px;flex:0 0 24px}
/* Same shape of problem as the rail collapse below: an SVG-only button with
1px/6px of padding and no width of its own, measured 16px across. */
.bp-ops-mobile-exit{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.bp-ops-mobile-exit svg{width:18px;height:18px}
/* The Front Desk rail's collapse control is an SVG with 7px of padding and no
width of its own: 14px across, measured on the icon-only rail. Giving it 40
costs 26px the 210px rail does not have -- with the control at full size the
brand ran 223px of content through a 209px box. The logo yields it. It is
decorative at that size, and this only happens on a touch device, where the
control has to be the thing that wins. */
.bp-ops-collapse{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}
.bp-ops-collapse svg{width:18px;height:18px}
.bp-ops-brand .bp-logo-home-btn{min-width:0;flex:0 1 auto}
.bp-ops-brand img{width:100%;max-width:120px}
}
@media (pointer:coarse){
.btn,.smallbtn,button.quick,select,input[type=date],input[type=month],input[type=time],
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number]{
min-height:42px
}
/* Dense boards would double in height at 42px, so they get the smaller of
the two accepted sizes rather than an unusable one. */
.bp-room-track-chip,.bp-chip,.bp-pill-btn{min-height:36px}
/* A checkbox is hit at its own size, so it grows rather than its row. */
input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
/* A link that acts as a control needs a hit area; one inside a sentence
must not gain one, or the text spaces out. */
a.btn,a.smallbtn,a[role=button],nav a,.bp-tab a{min-height:42px;display:inline-flex;align-items:center}
#bpAuthGate a[href="/privacy.html"],
.bp-legal-footer a[href="/privacy.html"]{min-height:38px;display:inline-flex;align-items:center;justify-content:center}
}
/* The legal footer is a SIBLING of .content, so .content's bottom padding never
moved it. Below 820px the fixed bottom nav (70px tall, sitting 8px off the
bottom) covered it: measured at 390x664, the Privacy policy link rendered at
y=604..642 with the nav starting at 586, and elementFromPoint at the link's
centre returned the nav button's own label -- tapping the link activated a nav
button instead. The footer now clears the nav, but only where the nav is
actually on screen: it is hidden in the public modes and in mobile work-order
mode, and padding there would just be dead space. */
@media(max-width:820px){
body:not(.public-inventory-mode):not(.public-inspection-mode):not(.public-employee-mode):not(.bp-mobile-workorder-active) .bp-legal-footer{
padding-bottom:calc(86px + env(safe-area-inset-bottom));
}
}
/* A pointer that can hover is a mouse: keep the tighter sizing it suits. */
@media (hover:hover) and (pointer:fine){
.bp-room-track-chip{min-height:32px}
}