/* Settings — PORTED from the legacy dashboard (Codex settings-migration stage, 21 Jul 2026). ------------------------------------------------------------------------------------------------- These 150 rules are lifted from assets/style.css UNCHANGED. They are not retyped and not "improved": the legacy Settings screen is the golden reference for this stage, and behavioural parity has to be proven before anything is restyled. Editing these rules now would make the comparison meaningless. THE COMPATIBILITY LAYER BELOW IS WHY THEY WORK UNCHANGED. The dashboard and the slice use different token names for the same design system, so rather than find/replace across 150 rules -- which is a lot of silent breakage for no benefit -- the dashboard's names are DEFINED here in terms of the slice's. Two things fall out of that, both deliberate: * dark mode works for free. --bg/--card/--ink/--line/--cream/--paper exist in BOTH stylesheets, so they resolve to the SLICE's values, which already flip with the theme. * the eventual restyle is a one-place change: re-point these variables, don't rewrite the rules. Scoped to #setMount so none of it can leak into Today, Floor, Week or Guests. --------------------------------------------------------------------------------------------- THAT LAST SENTENCE WAS NOT TRUE WHEN IT WAS WRITTEN, AND THE RULES BELOW HAVE BEEN REBUILT. Two mechanical faults, both introduced by lifting rules out of style.css by class name: (1) NOT ACTUALLY SCOPED. The lifted rules were bare class selectors, and this sheet loads AFTER slice.css, so three names collided and the settings sheet quietly restyled the Floor tab: `.fRow` is a settings form row here and a FLOOR LIST ROW there; `.fLbl` is a field label here and a floor TILE label there; `.empty` is defined in both. Floor tile labels were rendering uppercase, letter-spaced and grid-laid-out. Every selector is now prefixed with `:where(#setMount,.modalBack,.pinPad)`. `:where()` adds ZERO specificity, so the lifted cascade is preserved exactly as it was written — which `#setMount .x` would not do, and did not: prefixing with a bare id inverted the cascade and stripped the background off every button on the page. The two body-level components this module appends to (the confirm modal and the PIN pad) are in the scope list because they are outside #setMount, and their ROOT selectors are left unscoped. (2) THE @media WRAPPERS WERE DROPPED. The extraction kept the rules and threw away the conditions, so FIFTEEN media blocks' worth of phone and tablet rules were applying at every width. Visible consequences: `.tabPane .fRow{1fr}` kept Settings permanently single-column, so a text field measured 1073px on a desktop — undoing the 18 Jul column cap on purpose; `.setHub{grid-template-columns:repeat(3,1fr)}` put the phone's 3+2 tab layout on every screen; `.roomCanvas{height:340px}` and `.aBtn{min-height:44px}` likewise. Each rule has been matched back to style.css and re-wrapped in the condition it was written under. Nothing was retyped; only the wrappers were restored. --------------------------------------------------------------------------------------------- */ #setMount,.modalBack,.pinPad{ /* names the slice has no equivalent for */ --dark:var(--plum); --espresso2:var(--plum); --ink2:var(--ink-2); --accent:var(--terra); --accent2:var(--terra); --accent2-hover:var(--terra-2); --red:var(--safety); --cream2:var(--cream); /* the legacy type/radius scale, kept literal so ported spacing is identical */ --fs-2xs:10.5px; --fs-sm:12.5px; --fs-md:13.5px; --r-xs:8px; --r-sm:10px; --r-md:12px; } :where(#setMount,.modalBack,.pinPad) .npIcon.on{color:var(--accent2);background:var(--bg)} :where(#setMount,.modalBack,.pinPad) .npTab.on{background:var(--dark);color:#fff} :where(#setMount,.modalBack,.pinPad) .npIc.warn{background:#fdf1e3;color:#a5631a} /* ---------- manager PIN (staff protection) ---------- */ :where(#setMount,.modalBack,.pinPad) .pinStatus{font-size:var(--fs-md);color:var(--ink2);margin:10px 0 12px;line-height:1.45} :where(#setMount,.modalBack,.pinPad) .pinStatus b{color:var(--ink)} :where(#setMount,.modalBack,.pinPad) .pinDot.on{background:#3a9d54} :where(#setMount,.modalBack,.pinPad) .pinCheck{display:flex;align-items:center;gap:9px;margin:14px 0 4px;font-size:var(--fs-md);font-weight:600;cursor:pointer} :where(#setMount,.modalBack,.pinPad) .pinCheck input{width:17px;height:17px} :where(#setMount,.modalBack,.pinPad) .pinBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} :where(#setMount,.modalBack,.pinPad) .billingBar.warn{background:#fbe7d8;border-color:var(--accent2,var(--accent2));color:var(--accent2,var(--accent2))} :where(#setMount,.modalBack,.pinPad) .billingBar.hidden{display:none} :where(#setMount,.modalBack,.pinPad) .setupCard .suFoot .hint{font-size:var(--fs-sm)} :where(#setMount,.modalBack,.pinPad) .pinDots i.on{background:var(--accent);border-color:var(--accent)} :where(#setMount,.modalBack,.pinPad) .viewToggle button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)} :where(#setMount,.modalBack,.pinPad) .wlForm .fLbl{margin-top:8px} :where(#setMount,.modalBack,.pinPad) .fRow{display:grid;grid-template-columns:repeat(2,minmax(0,480px));gap:10px;margin-bottom:10px} /* column cap: below ~970px containers this behaves exactly like the old 1fr 1fr (tracks shrink evenly, so modals/phones are unchanged); in a full-width card the fields stop at 480px each instead of stretching to 800 (Graham, 18 Jul) */ :where(#setMount,.modalBack,.pinPad) .fRow.one{grid-template-columns:minmax(0,980px)} /* single-field rows cap at the pair's combined width — textareas stay generous, not absurd */ :where(#setMount,.modalBack,.pinPad) .fLbl{font-size:var(--fs-sm);font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:4px} /* Guests hub sub-tabs */ :where(#setMount,.modalBack,.pinPad) .gHub, :where(#setMount,.modalBack,.pinPad) .setHub{display:flex;gap:4px;flex-wrap:wrap;margin:12px 0 16px;border-bottom:1px solid var(--line)} /* .setHub = Settings categories (IA regroup 18 Jul) — same look as the Guests hub, distinct classes because renderGuestHub toggles .gHubTab globally */ :where(#setMount,.modalBack,.pinPad) .gHubTab, :where(#setMount,.modalBack,.pinPad) .setHubTab{font-weight:700;font-size:var(--fs-md);color:var(--ink2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0} :where(#setMount,.modalBack,.pinPad) .gHubTab:hover, :where(#setMount,.modalBack,.pinPad) .setHubTab:hover{color:var(--ink);background:#faf6ee} :where(#setMount,.modalBack,.pinPad) .gHubTab.on, :where(#setMount,.modalBack,.pinPad) .setHubTab.on{color:var(--dark);border-bottom-color:var(--accent)} :where(#setMount,.modalBack,.pinPad) .gFiltBtn.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .gActs .aBtn{text-decoration:none} :where(#setMount,.modalBack,.pinPad) .resvField.one{margin-bottom:11px} :where(#setMount,.modalBack,.pinPad) .resvField .fLbl{display:flex;align-items:center;gap:5px} :where(#setMount,.modalBack,.pinPad) .quickDay:hover:not(:disabled):not(.on){color:var(--dark);border-color:#cbbfae} :where(#setMount,.modalBack,.pinPad) .quickDay.on{color:var(--cream);background:var(--dark);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .sideNav button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(43,38,32,.12)} :where(#setMount,.modalBack,.pinPad) .sideNav button:hover:not(.on){background:#ece4d4} :where(#setMount,.modalBack,.pinPad) .navBadge.hidden{display:none} :where(#setMount,.modalBack,.pinPad) .tabPane{flex:1;min-width:0;padding:24px 28px;max-width:1080px} :where(#setMount,.modalBack,.pinPad) .paneTitle{font-size:22px;font-weight:800;margin-bottom:3px} :where(#setMount,.modalBack,.pinPad) .paneSub{color:var(--ink2);font-size:var(--fs-md);margin-bottom:20px} :where(#setMount,.modalBack,.pinPad) .aBtn{font-size:var(--fs-sm);font-weight:600;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 10px;background:#fff;color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .aBtn:focus-visible, :where(#setMount,.modalBack,.pinPad) .primaryBtn:focus-visible, :where(#setMount,.modalBack,.pinPad) .addBtn:focus-visible, :where(#setMount,.modalBack,.pinPad) .sideNav button:focus-visible{outline:2px solid var(--accent2);outline-offset:2px} :where(#setMount,.modalBack,.pinPad) .aBtn:hover{border-color:#c9b89d;color:var(--ink)} :where(#setMount,.modalBack,.pinPad) .aBtn.warn:hover{color:var(--red);border-color:#dcc7c0} :where(#setMount,.modalBack,.pinPad) .aBtn.go{background:var(--dark);color:var(--cream);border-color:var(--dark)} /* selected day = the SAME dark-plum fill as the Floor strip's .dayBtn.on — the old thin outline wasn't findable at a glance (Graham, 18 Jul) */ :where(#setMount,.modalBack,.pinPad) .dayCell.sel .dn{color:inherit} /* mirrors .dayBtn.on: inherit+opacity so covers/cancelled read on the dark fill */ :where(#setMount,.modalBack,.pinPad) .dayCell.sel .cvNs{color:#f2b3a3} /* --red #a8402f is illegible on the dark plum — same lifted hue as .dayBtn.on .cvNs */ :where(#setMount,.modalBack,.pinPad) .dayCell.sel .bar{background:rgba(247,240,226,.28)} /* settings */ :where(#setMount,.modalBack,.pinPad) .setCard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;margin-bottom:16px} :where(#setMount,.modalBack,.pinPad) .setCard h4{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-h4);margin-bottom:12px} :where(#setMount,.modalBack,.pinPad) .findSetRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:2px} :where(#setMount,.modalBack,.pinPad) .findSetBtn{display:flex;align-items:center;gap:8px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fs-md);font-weight:600;color:var(--ink);cursor:pointer} :where(#setMount,.modalBack,.pinPad) .findSetBtn::after{content:"→";margin-left:auto;color:var(--ink2);font-weight:700} :where(#setMount,.modalBack,.pinPad) .findSetBtn:hover{border-color:var(--accent2);color:var(--accent2)} :where(#setMount,.modalBack,.pinPad) .findSetBtn:hover::after{color:var(--accent2)} :where(#setMount,.modalBack,.pinPad) .dsDayBtn.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .svc2Toggle{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:700;color:var(--ink);cursor:pointer} :where(#setMount,.modalBack,.pinPad) .svc2Toggle input{width:auto;flex-shrink:0} :where(#setMount,.modalBack,.pinPad) .svc2Eg{font-weight:400;color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .hoursOk{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 14px;font-size:var(--fs-md);font-weight:700;color:var(--ink2);cursor:pointer} :where(#setMount,.modalBack,.pinPad) .hoursOk:hover{background:var(--cream2);color:var(--ink)} :where(#setMount,.modalBack,.pinPad) .addRow{font-size:var(--fs-md);font-weight:700;color:var(--accent2);padding:6px 0} :where(#setMount,.modalBack,.pinPad) .saveBar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;position:sticky;bottom:0;z-index:6;background:var(--bg);padding:13px 0 14px;margin-top:6px;border-top:1px solid var(--line)} @media(max-width:760px){ /* audit F51: lift sticky save bars clear of the fixed bottom nav so "Save changes" is tappable on a phone */ :where(#setMount,.modalBack,.pinPad) .saveBar{bottom:calc(62px + env(safe-area-inset-bottom));z-index:61} } :where(#setMount,.modalBack,.pinPad) .saveHint{margin:0;font-size:var(--fs-sm)} :where(#setMount,.modalBack,.pinPad) .primaryBtn{background:var(--accent2);color:#fff;border-radius:var(--r-sm);padding:11px 22px;font-weight:700} :where(#setMount,.modalBack,.pinPad) .primaryBtn:hover{background:var(--accent2-hover)} :where(#setMount,.modalBack,.pinPad) .hidden{display:none!important} :where(#setMount,.modalBack,.pinPad) .codeBox{display:flex;gap:8px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-md);margin:8px 0} :where(#setMount,.modalBack,.pinPad) .codeBox code{flex:1;min-width:0;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;line-height:1.5} :where(#setMount,.modalBack,.pinPad) .copyBtn{flex-shrink:0;font-size:var(--fs-sm);font-weight:700;border:1px solid var(--line);border-radius:var(--r-xs);padding:5px 10px;background:#fff;color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .copyBtn:hover{color:var(--accent2);border-color:#dca493} :where(#setMount,.modalBack,.pinPad) .linkCard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin-bottom:14px} :where(#setMount,.modalBack,.pinPad) .linkCard h4{font-size:var(--fs-body);margin-bottom:6px} :where(#setMount,.modalBack,.pinPad) .linkCard .hint{font-size:var(--fs-sm);color:var(--ink2);margin-top:4px} @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .codeBox{flex-wrap:wrap} :where(#setMount,.modalBack,.pinPad) .codeBox code{flex-basis:100%} } :where(#setMount,.modalBack,.pinPad) .setCard .hint{font-size:var(--fs-sm);color:var(--ink2);margin:2px 0 12px} :where(#setMount,.modalBack,.pinPad) .primaryBtn.danger{background:var(--red)} :where(#setMount,.modalBack,.pinPad) .primaryBtn.danger:hover{background:#8d3526} :where(#setMount,.modalBack,.pinPad) .modalActs .aBtn.warn{color:var(--red);border-color:#e6c4bc} @media(max-width:480px){ :where(#setMount,.modalBack,.pinPad) .modalActs .aBtn, :where(#setMount,.modalBack,.pinPad) .modalActs .primaryBtn{flex:1 1 auto;min-height:44px} } @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .modalActs .aBtn{flex:1 1 calc(50% - 4px);min-height:44px} :where(#setMount,.modalBack,.pinPad) .modalActs .primaryBtn{flex:1 1 100%;order:9;min-height:48px} } /* covers-at-a-glance, mirrors the Week tab's dayCell .cv; color:inherit + opacity so it reads on both the .on dark fill and the default card. opacity .7→.85: 10px text at .7 measured 3.5:1, below WCAG (audit batch 0) */ :where(#setMount,.modalBack,.pinPad) .dayBtn .cvNs{display:block;font-size:var(--fs-2xs);font-weight:700;margin-top:1px;color:var(--red);white-space:nowrap} /* mirrors dayCell .cvNs; only rendered when a day has no-shows */ :where(#setMount,.modalBack,.pinPad) .dayBtn.on .cvNs{color:#f2b3a3} /* --red #a8402f is illegible on the .on dark-plum fill — same hue family, lifted for contrast */ :where(#setMount,.modalBack,.pinPad) .dayCell .cvCx{font-size:var(--fs-2xs);font-weight:500;color:var(--ink2);margin-top:1px;white-space:nowrap} /* same, floor strip. Quieter than covers via WEIGHT not opacity — .55 measured 2.7:1, below WCAG (audit batch 0) */ :where(#setMount,.modalBack,.pinPad) .dayBtn.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .dayBtn.isToday:not(.on){border-color:var(--accent2);color:var(--accent2)} :where(#setMount,.modalBack,.pinPad) .tlBlock b .tlSig.warn{color:var(--red)} :where(#setMount,.modalBack,.pinPad) .paneHead .paneTitle{margin-bottom:0} :where(#setMount,.modalBack,.pinPad) .modalForm .fRow2{display:grid;grid-template-columns:1fr 1fr;gap:10px} :where(#setMount,.modalBack,.pinPad) .paneTitle, :where(#setMount,.modalBack,.pinPad) .modal h3, :where(#setMount,.modalBack,.pinPad) .authCard h2{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:.01em} :where(#setMount,.modalBack,.pinPad) .paneTitle{font-size:24px} :where(#setMount,.modalBack,.pinPad) .aBtn.go{background:var(--accent2);border-color:var(--accent2);color:#fff} :where(#setMount,.modalBack,.pinPad) .aBtn.go:hover{background:var(--accent2-hover);border-color:var(--accent2-hover);color:#fff} :where(#setMount,.modalBack,.pinPad) .resvSegBtn.on{background:#fff;color:var(--dark);box-shadow:0 1px 3px rgba(67,41,64,.12)} :where(#setMount,.modalBack,.pinPad) .resvSegBtn:hover:not(.on){color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .evForm .resvField.one{margin-bottom:11px} :where(#setMount,.modalBack,.pinPad) .evSeatBtn.on{border-color:var(--accent);background:#fdf1ee;color:var(--dark);box-shadow:inset 0 0 0 1px var(--accent)} /* Cover-photo control (Settings › Your booking page) */ :where(#setMount,.modalBack,.pinPad) .cvPhotoRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap} :where(#setMount,.modalBack,.pinPad) .cvPhotoPrev{width:132px;height:78px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--cream2,#f7f0e2);overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0} :where(#setMount,.modalBack,.pinPad) .cvPhotoPrev img{width:100%;height:100%;object-fit:cover;display:block} :where(#setMount,.modalBack,.pinPad) .cvUpBtn{white-space:nowrap;cursor:pointer} /* Menu-PDF control (Settings › Your booking page) */ :where(#setMount,.modalBack,.pinPad) .menuPdfRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px} :where(#setMount,.modalBack,.pinPad) .menuPdfState{font-size:var(--fs-sm);color:var(--ink2);min-width:96px} :where(#setMount,.modalBack,.pinPad) .menuPdfState a{color:var(--accent2);text-decoration:underline} :where(#setMount,.modalBack,.pinPad) .menuUpBtn{white-space:nowrap;cursor:pointer} :where(#setMount,.modalBack,.pinPad) .roomCanvas{position:relative;height:440px;background:#faf6ee;background-image:radial-gradient(#e6dccb 1px,transparent 1px);background-size:26px 26px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} :where(#setMount,.modalBack,.pinPad) .roomCanvas.designer{height:360px;background-color:#fff} /* room (area) tabs — Settings designer + Floor room view; hidden for single-room venues */ :where(#setMount,.modalBack,.pinPad) .roomTabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px} :where(#setMount,.modalBack,.pinPad) .roomTab.on{background:var(--espresso2,var(--dark));color:#fff;border-color:var(--espresso2,var(--dark))} :where(#setMount,.modalBack,.pinPad) .tpRoomTab.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .tpPlot.hidden{display:none} /* brief highlight when the setup checklist scrolls you to a Settings card */ :where(#setMount,.modalBack,.pinPad) .setCard.setHl{animation:setHlFlash 1.6s ease-out} @media (prefers-reduced-motion:reduce){ :where(#setMount,.modalBack,.pinPad) .setCard.setHl{animation:none} } :where(#setMount,.modalBack,.pinPad) .rmPop .seg button.on{border-color:var(--accent2);color:var(--accent2);background:#fdf3ee} :where(#setMount,.modalBack,.pinPad) .genSizes button.on{border-color:var(--accent2);color:var(--accent2);background:#fdf3ee} :where(#setMount,.modalBack,.pinPad) .genRow .primaryBtn{min-height:38px} @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .roomCanvas{height:340px} } /* :not(.sel) mirrors .dayBtn.isToday:not(.on) — terracotta on the selected dark fill would be unreadable */ /* printable run sheet */ :where(#setMount,.modalBack,.pinPad) #runSheet{display:none} @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .sideNav button.on{box-shadow:none;background:var(--cream);color:var(--accent2)} :where(#setMount,.modalBack,.pinPad) .tabPane{padding:18px 14px 96px} :where(#setMount,.modalBack,.pinPad) .aBtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-md)} /* html ONLY — overflow on BOTH html+body stops body's value propagating to the viewport, so BODY becomes the clip box and every sticky child dies (topbar, saveBar). Reproduced in Chromium at 810 during the 17 Jul tablet fixes — this was the true root cause, not Safari. */ /* was clip — root clip killed sticky on iPadOS (17 Jul); hidden propagates to the viewport instead */ /* Settings: stack the two-column detail/rules rows on a phone, + let the Opening-hours + Tables grids shrink to fit */ :where(#setMount,.modalBack,.pinPad) .tabPane .fRow{grid-template-columns:1fr} :where(#setMount,.modalBack,.pinPad) .gHubTab, :where(#setMount,.modalBack,.pinPad) .setHubTab{min-height:44px} :where(#setMount,.modalBack,.pinPad) .modal .fRow{grid-template-columns:1fr} } @media(min-width:761px) and (max-width:1024px) and (min-height:700px) and (orientation:portrait){ :where(#setMount,.modalBack,.pinPad) .ownerApp .sideNav button.on{box-shadow:none;background:var(--cream);color:var(--accent2)} :where(#setMount,.modalBack,.pinPad) .ownerApp .tabPane{padding:22px 26px 104px;max-width:none} :where(#setMount,.modalBack,.pinPad) .ownerApp .saveBar{bottom:calc(76px + env(safe-area-inset-bottom));z-index:61} } @media(max-width:560px){ :where(#setMount,.modalBack,.pinPad) .adminPage .tabPane{padding:16px 12px 40px} :where(#setMount,.modalBack,.pinPad) .adminPage .setCard{padding:14px} :where(#setMount,.modalBack,.pinPad) .adminPage .fRow{grid-template-columns:1fr} :where(#setMount,.modalBack,.pinPad) .adminPage table.adminTable.stack .adminActs .aBtn{flex:1 1 calc(50% - 4px);min-height:40px;justify-content:center} } @media(max-width:480px){ :where(#setMount,.modalBack,.pinPad) .modalForm .fRow2{grid-template-columns:1fr} } @media(hover:none) and (pointer:coarse){ :where(#setMount,.modalBack,.pinPad) .aBtn{min-height:44px;display:inline-flex;align-items:center;justify-content:center} } @media(max-width:760px){ /* the tablet block lifts the toast over its tab bar; the PHONE bar was missed — toasts sat on top of it */ :where(#setMount,.modalBack,.pinPad) .roomScroll{overflow-x:auto;-webkit-overflow-scrolling:touch} } /* the 5 bare "Loading…" strings now share the spinner */ :where(#setMount,.modalBack,.pinPad) .dayBtn:hover:not(.on){border-color:#cbbfae;background:#fdfaf3} @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .setHub{display:grid;grid-template-columns:repeat(3,1fr);gap:4px} /* 5 categories: 3+2 on phones */ :where(#setMount,.modalBack,.pinPad) .gHubTab, :where(#setMount,.modalBack,.pinPad) .setHubTab{white-space:normal;text-align:center;min-height:44px;padding:6px 4px;line-height:1.2} } /* ---------- IA & copy (audit batch 3, 17 Jul 2026) ---------- */ :where(#setMount,.modalBack,.pinPad) .resActs .aBtn.warn{color:var(--red);border-color:#e6cfc8;background:transparent;opacity:.85} /* ---------- Fit-the-day Floor timeline (Graham, 17 Jul 2026) ---------- */ /* Wide-but-tidy tabs (Graham, 18 Jul — two verdicts same day): first "expand all tabs like Floor", then, on seeing it, "things look too spread out making it look silly". The settled scheme: - Floor + Guests stay FULL-BLEED — width IS data there (the day timeline; the guest CRM table). - Today / Week / Insights / Settings get 1320px — roomier than the old universal 1080, but booking rows, day cells and form cards stop stretching into absurdity (at max-width:none the Settings time inputs measured 802px EACH). Scoped to .ownerApp: /admin keeps its 1080px cap. Field-level sanity (fixed .hourRow tracks, .fRow column caps, the date-input cap below) does the rest — fields stay tidy at ANY card width, so widening a pane again can't re-break them. */ :where(#setMount,.modalBack,.pinPad) .ownerApp .tabPane{max-width:1320px} :where(#setMount,.modalBack,.pinPad) #tab-floor.tabPane, :where(#setMount,.modalBack,.pinPad) #tab-guests.tabPane{max-width:none} /* a date picker doesn't need half a metre of card (Holidays & closures). Desktop/tablet only: phones stack .fRow single-column and keep their uniform full-width fields */ /* .paneSub/.hint reading-measure caps REMOVED same day (Graham: hints "cut off half way across" — looked broken, not typographic). Short UI copy flows with its card; only true multi-line PROSE keeps a measure: */ :where(#setMount,.modalBack,.pinPad) .ownerApp .aiCard p{max-width:78ch} /* ---------- Fit-the-room view (17 Jul 2026) ---------- */ :where(#setMount,.modalBack,.pinPad) .rvSizer{overflow:hidden;margin:0 auto} @media (pointer:coarse) and (min-width:761px){ :where(#setMount,.modalBack,.pinPad) .ownerApp .saveBar{transform:translateZ(0)} } :where(#setMount,.modalBack,.pinPad) .ownerApp .sideNav button:hover:not(.on){background:rgba(255,255,255,.08)} :where(#setMount,.modalBack,.pinPad) .ownerApp .sideNav button.on{background:var(--cream,#f7f0e2);color:#3a2337;box-shadow:none} @media(min-width:761px) and (max-width:1024px) and (min-height:700px) and (orientation:portrait){ :where(#setMount,.modalBack,.pinPad) .ownerApp .sideNav button.on{background:var(--cream,#f7f0e2);color:#3a2337} } :where(#setMount,.modalBack,.pinPad) .ownerApp .roomScroll{background:#3a2337;border-radius:var(--r-md);padding:10px} :where(#setMount,.modalBack,.pinPad) .ownerApp .roomScroll .roomCanvas.designer{background:var(--paper,#faf6ee)} :where(#setMount,.modalBack,.pinPad) .ownerApp .sideNav button:hover:not(.on){background:rgba(255,255,255,.12);color:#fff} /* "Close these dates" arms when dates are picked (18 Jul, Graham) — dormant ghost until then, then THE terracotta action with one attention pulse. Its old .addRow text-link look next to the page-wide Save button caused the whole unapplied-closures saga. */ :where(#setMount,.modalBack,.pinPad) .closeRangeBtn{font-size:var(--fs-md);font-weight:700;padding:10px 18px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;color:var(--ink3);margin-top:4px;transition:background .2s,color .2s,border-color .2s} :where(#setMount,.modalBack,.pinPad) .closeRangeBtn:disabled{cursor:not-allowed;opacity:.7} :where(#setMount,.modalBack,.pinPad) .closeRangeBtn.armed{background:var(--accent2);border-color:var(--accent2);color:#fff;animation:crPulse .9s ease 1} :where(#setMount,.modalBack,.pinPad) .closeRangeBtn.armed:hover{background:var(--accent2-hover)} /* ================================================================================================== PART 2 — the rest of the port (21 Jul 2026) ================================================================================================== Part 1 above covered the 352 lines of STATIC markup. It does not cover the DOM the 23 settings functions BUILD: the table rows, the hours grid, the combo rows, the staff list, the PIN pad, the modal, the room-priority list. Those classes live in assets/style.css too, and they are lifted here the same way — unchanged, so the before/after comparison stays exact. Four defects in Part 1 are fixed here rather than by editing it, so the lifted rules stay lifted: 1. MISSING TOKENS. Part 1's compatibility block defines --fs-2xs/sm/md and --r-xs/sm/md, but the rules it lifted also use --fs-body, --fs-h4, --fs-xs and --ink3. Those resolved to nothing, so every declaration using them was dropped at computed-value time. The full legacy scale is declared below; colour tokens map to the slice's theme-aware equivalents wherever one exists, and stay literal only where none does (--gold has no slice counterpart). 2. .ownerApp NEVER MATCHES HERE. Part 1 ended with six `.ownerApp …` rules copied verbatim from the dashboard, whose root element is `.ownerApp`. This page's root is `#sliceApp`, so not one of them fired — including the plum mat behind the room canvas. The ones that matter to Settings are re-anchored to #setMount below. (They are left in place above; a dead selector is harmless and deleting it would edit the lifted set.) 3. NO @keyframes. Part 1 lifted `animation:crPulse`, `animation:pinShake` and `animation:ttSpin` without the keyframes they name, so the armed-button pulse, the wrong-PIN shake and the loading spinner were all static. The four keyframes are lifted below. 4. ONLY CLASS RULES CAME ACROSS. The dashboard's ELEMENT rules — the button reset, the input box, the focus ring — live at the top of style.css, outside the settings block, so every ported button kept the browser's grey chrome and every input its default border. Lifted and scoped to #setMount below. ================================================================================================== */ #setMount{ /* the rest of the legacy scale (style.css :root) — see defect 1 above */ --fs-xs:11px; --fs-body:15px; --fs-h4:17px; --fs-h3:19px; --r-lg:16px; --r-pill:999px; --sh-lg:var(--shadow); /* colour tokens: mapped to the slice's theme-aware names where one exists, literal where not */ --ink3:var(--ink-2); --terra2:var(--terra); --green:var(--ok); --amber:var(--warn); --gold:#cda350; /* no slice equivalent — the "quick set-up" card's dashed accent */ --greenbg:#e9f2ea; --amberbg:#f7eed9; --redbg:var(--safety-bg); } /* ---------- base element rules (defect 4) ---------- The lifted rules are all CLASS rules. They sit on top of the dashboard's ELEMENT rules — the button reset, the input/select/textarea box, the focus ring — which live at the top of style.css and were not part of the settings block, so they did not come across. Without them every ported button keeps the browser's grey chrome and every input its default border. Lifted verbatim and scoped to #setMount, so nothing here can reach Today, Floor, Week or Guests. :where() IS LOAD-BEARING HERE, not a flourish. On the dashboard these are bare element selectors, so every class rule above outranks them — that is the whole cascade the lifted rules were written against. Writing them as `#setMount button` adds an id and inverts it: the first attempt did, and `border:none;background:none` promptly stripped the border and background off every .copyBtn, .aBtn, .primaryBtn and .roomTab on the page. `:where()` contributes ZERO specificity, so these behave exactly like the originals while still being scoped to this surface. */ :where(#setMount) button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} :where(#setMount) button:active{transform:scale(.97)} :where(#setMount) input, :where(#setMount) select, :where(#setMount) textarea{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;background:var(--card);width:100%;transition:border-color .15s,box-shadow .15s} :where(#setMount) input::placeholder, :where(#setMount) textarea::placeholder{color:var(--ink3)} :where(#setMount) input:focus, :where(#setMount) select:focus, :where(#setMount) textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(182,73,47,.16)} :where(#setMount) input[type=checkbox], :where(#setMount) input[type=radio]{width:auto} :where(#setMount) input[type=range]{padding:0} :where(#setMount) .hint{font-size:var(--fs-sm);color:var(--ink2);line-height:1.5} :where(#setMount) a{color:var(--accent2)} :where(#setMount) .aBtn.warn:hover{color:var(--red);border-color:#dcc7c0} /* The focus ring is the exception: it MUST win, because losing it is an accessibility regression rather than a cosmetic one. Scoped by id deliberately. */ #setMount .aBtn:focus-visible, #setMount .primaryBtn:focus-visible, #setMount .copyBtn:focus-visible, #setMount .findSetBtn:focus-visible, #setMount .setHubTab:focus-visible, #setMount .roomTab:focus-visible, #setMount .dsDayBtn:focus-visible, #setMount .delX:focus-visible, #setMount .fTile:focus-visible, #setMount .addRow:focus-visible, #setMount .hoursOk:focus-visible, #setMount .closeRangeBtn:focus-visible, #setMount .rpMove:focus-visible{outline:2px solid var(--accent2);outline-offset:2px} :where(#setMount,.modalBack,.pinPad) .dsDayBtn{border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:var(--r-xs);padding:6px 9px;font-size:var(--fs-sm);font-weight:700;cursor:pointer;min-width:40px;text-align:center} :where(#setMount,.modalBack,.pinPad) .dsDayBtn.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .dsDayBtn{min-height:44px} } /* ---------- the room-layout designer's tiles ---------- The designer reuses the Floor tab's .fTile geometry (same aspect, same shape classes, same minimum size) but shows CONFIGURATION, not service state — so it carries none of the st-* status colouring. A table that is out of service is hatched, because "not bookable" is the one piece of configuration that has to be visible on the plan. */ #setMount .dzTile{cursor:grab;touch-action:none;background:var(--card);border-color:var(--plum);box-shadow:var(--shadow)} #setMount .dzTile:hover{border-color:var(--terra)} #setMount .dzTile.is-off{background:repeating-linear-gradient(45deg,var(--card),var(--card) 5px,var(--bg) 5px,var(--bg) 10px);opacity:.75} #setMount .dzTile.rmLift{transform:scale(1.1);box-shadow:0 0 0 3px var(--gold),0 14px 30px rgba(34,49,42,.4);z-index:8} @media (prefers-reduced-motion:reduce){ #setMount .dzTile.rmLift{transform:none} } /* ---------- keyframes the lifted rules name (defect 3) ---------- */ @keyframes crPulse{0%{box-shadow:0 0 0 0 rgba(182,73,47,.45)}100%{box-shadow:0 0 0 12px rgba(182,73,47,0)}} @keyframes ttSpin{to{transform:rotate(360deg)}} @keyframes pinShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}} @keyframes setHlFlash{0%{box-shadow:0 0 0 3px var(--accent)}60%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}} /* ---------- .ownerApp rules re-anchored (defect 2) ---------- */ #setMount .tabPane{max-width:1320px} #setMount .saveBar{transform:translateZ(0)} #setMount .roomScroll{background:#3a2337;border-radius:var(--r-md);padding:10px} #setMount .roomScroll .roomCanvas.designer{background:var(--paper)} #setMount .wlRow{max-width:900px} #setMount .aiCard p{max-width:78ch} /* ---------- card highlight (goSetting / the unapplied-closure nudge) ---------- */ :where(#setMount,.modalBack,.pinPad) .setCard.setHl{animation:setHlFlash 1.6s ease-out} /* ---------- generated DOM: hours grid ---------- */ :where(#setMount,.modalBack,.pinPad) .hourRow{display:grid;grid-template-columns:90px 140px 140px 80px;gap:10px;align-items:center;margin-bottom:8px;font-size:var(--fs-md)} :where(#setMount,.modalBack,.pinPad) .hourDay{margin-bottom:11px} :where(#setMount,.modalBack,.pinPad) .hourDay .hourRow{margin-bottom:4px} :where(#setMount,.modalBack,.pinPad) .hr2lbl{font-size:var(--fs-sm);color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .hr2Chk{display:flex;align-items:center;justify-content:flex-end;font-size:var(--fs-sm);color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) #hoursEditor.noSvc2 .hr2{display:none} /* ---------- generated DOM: table rows ---------- */ :where(#setMount,.modalBack,.pinPad) .tblRow{display:grid;grid-template-columns:minmax(0,300px) 76px 76px 104px 78px 36px;gap:10px;align-items:center;margin-bottom:8px} :where(#setMount,.modalBack,.pinPad) .tblF{display:block;min-width:0} :where(#setMount,.modalBack,.pinPad) .tblFCap{display:none} :where(#setMount,.modalBack,.pinPad) .tblF.tblFSvc{display:flex;justify-content:center;align-items:center} :where(#setMount,.modalBack,.pinPad) .tblRow.hasRoom{grid-template-columns:minmax(0,280px) 62px 62px 86px 92px 62px 30px;gap:8px} :where(#setMount,.modalBack,.pinPad) .delX{color:var(--ink2);font-size:var(--fs-h4);text-align:center;border-radius:var(--r-xs);padding:5px} :where(#setMount,.modalBack,.pinPad) .delX:hover{color:var(--red);background:var(--redbg)} :where(#setMount,.modalBack,.pinPad) .genCard{border:1.5px dashed var(--gold);background:#fdf9ef;border-radius:var(--r-md);padding:12px 14px;margin:0 0 12px} :where(#setMount,.modalBack,.pinPad) .genCard>b{font-size:var(--fs-md)} :where(#setMount,.modalBack,.pinPad) .genRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap} :where(#setMount,.modalBack,.pinPad) .genRow label{font-size:var(--fs-sm);font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:6px} :where(#setMount,.modalBack,.pinPad) .genRow input[type=number]{width:64px;min-height:36px;border:1px solid var(--line);border-radius:var(--r-xs);padding:4px 8px;font-size:var(--fs-md)} :where(#setMount,.modalBack,.pinPad) .genSizes{display:flex;gap:6px;align-items:center;font-size:var(--fs-sm);font-weight:600;color:var(--ink2);flex-wrap:wrap} :where(#setMount,.modalBack,.pinPad) .genSizes button{min-height:34px;padding:4px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--ink)} :where(#setMount,.modalBack,.pinPad) .genSizes button.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .miniChip{min-height:32px;padding:5px 12px;border:1px solid var(--gold);border-radius:var(--r-pill);background:#fdf9ef;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:#8a6d1e} :where(#setMount,.modalBack,.pinPad) .miniChip:hover{background:#f8efd8} /* ---------- generated DOM: combos + events ---------- */ :where(#setMount,.modalBack,.pinPad) .comboRow{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap} :where(#setMount,.modalBack,.pinPad) .comboRow b{min-width:110px} :where(#setMount,.modalBack,.pinPad) .comboRow .cHint{font-size:var(--fs-sm);color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .comboRow label{display:flex;align-items:center;gap:6px;font-size:var(--fs-md);color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .comboRow input{width:74px} /* ---------- generated DOM: guest "Pick your table" ---------- */ :where(#setMount,.modalBack,.pinPad) .tablePickBox{border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px;background:var(--paper)} :where(#setMount,.modalBack,.pinPad) .tablePickBox .rpToggle{font-size:var(--fs-body)} :where(#setMount,.modalBack,.pinPad) .tpPickList{display:flex;flex-direction:column;gap:2px;margin-top:4px} :where(#setMount,.modalBack,.pinPad) .tpPickRow{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 2px;font-size:var(--fs-md)} :where(#setMount,.modalBack,.pinPad) .tpPickRow input{width:auto;flex:0 0 auto} :where(#setMount,.modalBack,.pinPad) .tpPickRow small{color:var(--ink2);font-weight:500} :where(#setMount,.modalBack,.pinPad) .tpPickState{margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--green);white-space:nowrap} :where(#setMount,.modalBack,.pinPad) .tpPickState.held{color:var(--accent2)} :where(#setMount,.modalBack,.pinPad) .tpFitRow{display:flex;flex-direction:column;gap:4px;margin:4px 0 10px} :where(#setMount,.modalBack,.pinPad) .tpFitRow label{font-size:var(--fs-md);color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .tpFitRow select{width:100%;min-height:40px} :where(#setMount,.modalBack,.pinPad) .tablePickBox .tpWarn{color:var(--accent2);font-weight:600} /* ---------- generated DOM: rooms + fill order ---------- */ :where(#setMount,.modalBack,.pinPad) .roomTabs{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 10px} :where(#setMount,.modalBack,.pinPad) .roomTab{padding:6px 13px;border-radius:var(--r-pill);font-size:var(--fs-md);font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink2);cursor:pointer;white-space:nowrap} :where(#setMount,.modalBack,.pinPad) .roomTab:hover{background:var(--cream2)} :where(#setMount,.modalBack,.pinPad) .roomTab.on{background:var(--dark);color:var(--cream);border-color:var(--dark)} :where(#setMount,.modalBack,.pinPad) .roomTab.add{border-style:dashed;color:var(--terra2);background:var(--card)} :where(#setMount,.modalBack,.pinPad) .roomTab.ghost{border-color:transparent;background:transparent;font-weight:500;color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .roomTab.ghost.danger{color:var(--red)} :where(#setMount,.modalBack,.pinPad) .roomTab.ghost:hover{background:var(--cream2)} :where(#setMount,.modalBack,.pinPad) .rpToggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--fs-md)} :where(#setMount,.modalBack,.pinPad) .rpToggle input{width:auto} :where(#setMount,.modalBack,.pinPad) .rpList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:340px} :where(#setMount,.modalBack,.pinPad) .rpItem{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm)} :where(#setMount,.modalBack,.pinPad) .rpNum{width:20px;height:20px;flex:none;border-radius:var(--r-pill);background:var(--espresso2);color:var(--cream);font-size:var(--fs-sm);font-weight:700;display:flex;align-items:center;justify-content:center} :where(#setMount,.modalBack,.pinPad) .rpName{flex:1;font-weight:600;font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} :where(#setMount,.modalBack,.pinPad) .rpArrows{display:flex;gap:4px} :where(#setMount,.modalBack,.pinPad) .rpMove{width:26px;height:26px;flex:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-xs);cursor:pointer;font-size:var(--fs-xs);color:var(--ink2);line-height:1;display:inline-flex;align-items:center;justify-content:center} :where(#setMount,.modalBack,.pinPad) .rpMove:hover{background:var(--cream2)} :where(#setMount,.modalBack,.pinPad) .rpMove.ghost{border-color:transparent;background:transparent;pointer-events:none} /* ---------- generated DOM: staff list / money activity / loading ---------- */ :where(#setMount,.modalBack,.pinPad) .wlRows{display:flex;flex-direction:column} :where(#setMount,.modalBack,.pinPad) .wlRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line)} :where(#setMount,.modalBack,.pinPad) .wlRow:last-child{border-bottom:none} :where(#setMount,.modalBack,.pinPad) .wlMain{min-width:0} :where(#setMount,.modalBack,.pinPad) .wlNm{font-weight:600;font-size:var(--fs-body)} :where(#setMount,.modalBack,.pinPad) .wlSub{font-size:var(--fs-sm);color:var(--ink2);margin-top:2px} :where(#setMount,.modalBack,.pinPad) .wlActs{display:flex;gap:8px;flex-shrink:0} :where(#setMount,.modalBack,.pinPad) .wlBadge{display:inline-block;font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-pill);padding:2px 9px;margin-left:4px;background:var(--cream2);color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .wlBadge.bad{background:var(--redbg);color:var(--red)} :where(#setMount,.modalBack,.pinPad) .empty{padding:34px 24px;text-align:center;color:var(--ink2);background:var(--paper);border:1.5px dashed var(--line);border-radius:var(--r-md);font-size:var(--fs-body);line-height:1.7} :where(#setMount,.modalBack,.pinPad) .spinner{width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--accent2);border-radius:50%;animation:ttSpin .8s linear infinite;margin-right:10px;flex-shrink:0} :where(#setMount,.modalBack,.pinPad) .ttLoad{display:flex;align-items:center;color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .ttLoad .spinner{width:14px;height:14px;border-width:2px} /* ---------- generated DOM: the PIN pad ---------- */ .pinPad{position:fixed;inset:0;z-index:300;background:rgba(36,31,25,.62);backdrop-filter:blur(3px);display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:max(18px,env(safe-area-inset-top,18px)) 18px max(18px,env(safe-area-inset-bottom,18px))} .pinCard{background:var(--card);border-radius:var(--r-lg);box-shadow:0 30px 80px rgba(0,0,0,.4);padding:26px 24px 22px;width:330px;max-width:100%;text-align:center;position:relative;margin:auto;color:var(--ink)} .pinCard.shake{animation:pinShake .4s} :where(#setMount,.modalBack,.pinPad) .pinX{position:absolute;top:12px;right:14px;font-size:24px;line-height:1;color:var(--ink2);background:none;border:0;padding:4px;cursor:pointer} :where(#setMount,.modalBack,.pinPad) .pinTitle{font-size:var(--fs-h3);font-weight:700;margin-bottom:4px} :where(#setMount,.modalBack,.pinPad) .pinSub{font-size:var(--fs-md);color:var(--ink2);line-height:1.4;margin-bottom:18px} :where(#setMount,.modalBack,.pinPad) .pinDots{display:flex;justify-content:center;gap:16px;margin-bottom:8px} :where(#setMount,.modalBack,.pinPad) .pinDots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);transition:all .12s} :where(#setMount,.modalBack,.pinPad) .pinErr{min-height:18px;font-size:var(--fs-md);font-weight:600;color:var(--accent2);margin-bottom:8px} :where(#setMount,.modalBack,.pinPad) .pinKeys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px auto 16px;max-width:264px} :where(#setMount,.modalBack,.pinPad) .pinKeys button{height:62px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);font-size:24px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none} :where(#setMount,.modalBack,.pinPad) .pinKeys button:active{background:var(--cream);transform:scale(.97)} :where(#setMount,.modalBack,.pinPad) .pinKeys .pinDel{font-size:22px;color:var(--ink2)} :where(#setMount,.modalBack,.pinPad) .pinForgot{font-size:var(--fs-md);font-weight:600;color:var(--accent2);text-decoration:underline;background:none;border:0;padding:4px;cursor:pointer} /* ---------- generated DOM: the confirm modal ---------- */ .modalBack{position:fixed;inset:0;z-index:290;background:rgba(36,31,25,.55);display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:18px} .modal{background:var(--card);color:var(--ink);border-radius:var(--r-lg);max-width:480px;width:100%;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:calc(100svh - 36px);overflow-y:auto;position:relative;margin:auto} :where(#setMount,.modalBack,.pinPad) .modal h3{margin:0 0 10px;font-size:var(--fs-h4)} :where(#setMount,.modalBack,.pinPad) .modal .body{font-size:var(--fs-body);color:var(--ink2);line-height:1.6} :where(#setMount,.modalBack,.pinPad) .modal .body ul{margin:10px 0 10px 18px} :where(#setMount,.modalBack,.pinPad) .modal .body li{margin-bottom:6px} :where(#setMount,.modalBack,.pinPad) .modalActs{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap} :where(#setMount,.modalBack,.pinPad) .modalForm label{display:block;margin-bottom:10px} /* ---------- the emergency-close danger zone (founder-requested placement, Codex 0210 §1) ---------- Set apart from the ordinary hours fields by a red edge and its own heading colour, so it reads as the last thing on the tab rather than another setting. When the day IS closed the same card flips to the reopen state and stops shouting — a state you are already in is not a warning. */ :where(#setMount) .setCard.dangerZone{border:1.5px solid var(--safety);border-left-width:5px;margin-top:26px} :where(#setMount) .setCard.dangerZone h4{color:var(--safety)} :where(#setMount) .setCard.dangerZone.is-closed{border-color:var(--line);border-left-color:var(--warn)} :where(#setMount) .setCard.dangerZone.is-closed h4{color:var(--ink)} :where(#setMount) .setCard.dangerZone .closeRangeBtn.armed{background:var(--safety);border-color:var(--safety)} /* An inline correction appended to a claim the sandbox holds (see sbCopy in settings.js). It has to read as part of the sentence it is correcting, not as decoration beside it. */ :where(#setMount,.modalBack,.pinPad) .sbInline{color:var(--amber);font-weight:700} /* ---------- the migration sandbox notice (see PORT_SANDBOX in settings.js) ---------- */ :where(#setMount,.modalBack,.pinPad) .sbNote{margin-top:10px;background:var(--amberbg);border:1px solid #ecd3a3;border-radius:var(--r-sm);padding:10px 13px;font-size:var(--fs-md);color:var(--amber);line-height:1.5} :where(#setMount,.modalBack,.pinPad) .sbNote b{color:var(--amber)} /* ---------- defect 5: the overflow the dashboard hides rather than fixes ---------- Measured on a 375px viewport: Payments & events pushed the document 322px wider than the screen. The cause is a CSS grid default — a grid ITEM is `min-width:auto`, so however small you make the TRACK (and `.tabPane .fRow{1fr}` does stack them on phones), the item still refuses to go narrower than its widest content. In Payments that is the long "When it applies…" label and the seven-day button row, which together held a 634px item inside a 281px track. The dashboard does not fix this. It CLIPS it, with `html{overflow-x:hidden}` in the same phone media block — which is why the defect has never been visible there, and also why the last two day buttons are simply unreachable on a dashboard phone. Clipping is not available to a stylesheet scoped to one surface, and it is the wrong answer anyway: the fix is to let the content reflow. One declaration, and the label wraps and the day buttons wrap instead of being cut off. Applied at every width, because the item can overflow a narrow card on a tablet too. */ :where(#setMount) .fRow > *{min-width:0} :where(#setMount) .fRow > * > div{min-width:0;flex-wrap:wrap} :where(#setMount) #dsDays, :where(#setMount) #ppDays{flex-wrap:wrap;min-width:0} /* ---------- defect 6: phone tap targets the lifted rules never covered ---------- The dashboard's phone block bumps .aBtn, .dsDayBtn, .delX and the table/hours fields to 40–44px, but not the buttons the booking-link card, the add-rows and the room tabs are made of — those measured 31–32px here. [[device-matrix-rule]] is a hard rule on this project, so they are brought up to the same 44px rather than left as the one row of controls a thumb misses. */ @media(max-width:760px),(hover:none) and (pointer:coarse){ :where(#setMount) .copyBtn, :where(#setMount) .addRow, :where(#setMount) .hoursOk, :where(#setMount) .roomTab, :where(#setMount) .miniChip, :where(#setMount) .findSetBtn, :where(#setMount) .closeRangeBtn, :where(#setMount) .rpMove{min-height:44px;display:inline-flex;align-items:center;justify-content:center} :where(#setMount) .findSetBtn{justify-content:flex-start} /* A 17px checkbox is the legacy size and the LABEL is the real target — but only if the label is tall enough to be one. */ :where(#setMount) .pinCheck, :where(#setMount) .tpPickRow, :where(#setMount) .rpToggle, :where(#setMount) .svc2Toggle{min-height:44px} /* The money panels' agree/enable ticks and the add-on Active tick are inline-styled label rows in the frozen markup, so they measured 20–21px. Named by container rather than with :has(), which is not something a settings screen should depend on. */ :where(#setMount) #dsEnableRow label, :where(#setMount) #ppEnableRow label, :where(#setMount) #axEnableRow label, :where(#setMount) .axRow label, :where(#setMount) .comboRow label, :where(#setMount) .tblF.tblFSvc{min-height:44px;align-items:center} /* The guest PREVIEWS are illustrations, not controls — their checkboxes are disabled on purpose and must stay small, or the preview stops looking like the thing it is previewing. */ :where(#setMount) #axPreview label, :where(#setMount) #dsPreview label, :where(#setMount) #ppPreview label{min-height:0} /* Ordinary form fields measured 39–40px from the base padding alone. The dense .tblRow and .hourRow grids keep their lifted 40px — their tracks are fixed and 44 would burst them — but a field in a normal .fRow or in a modal has the room, so it gets a full target. */ :where(#setMount,.modalBack) .fRow input, :where(#setMount,.modalBack) .fRow select, :where(#setMount,.modalBack) .fRow textarea, :where(#setMount,.modalBack) .modalForm input, :where(#setMount,.modalBack) .modalForm select, :where(#setMount,.modalBack) .modalForm textarea, :where(#setMount) .axRow input:not([type=checkbox]){min-height:44px} :where(#setMount,.modalBack) .fRow input[type=checkbox], :where(#setMount,.modalBack) .modalForm input[type=checkbox]{min-height:0} :where(#setMount) #dsEnableRow label:first-child, :where(#setMount) #ppEnableRow label:first-child, :where(#setMount) #axEnableRow label:first-child{align-items:flex-start;padding-top:6px} } /* ---------- responsive: lifted verbatim from style.css ---------- */ @media(max-width:760px){ :where(#setMount,.modalBack,.pinPad) .hourRow{grid-template-columns:auto 1fr 1fr auto;gap:6px;font-size:var(--fs-md)} :where(#setMount,.modalBack,.pinPad) .hourRow input{min-width:0;width:100%} :where(#setMount,.modalBack,.pinPad) .tblRow.tblHead{display:none} :where(#setMount,.modalBack,.pinPad) .tblRow, :where(#setMount,.modalBack,.pinPad) .tblRow.hasRoom{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px;align-items:end; position:relative;padding:12px 48px 12px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);margin-bottom:10px} :where(#setMount,.modalBack,.pinPad) .tblRow>.tblF:first-child{grid-column:1 / -1} :where(#setMount,.modalBack,.pinPad) .tblFCap{display:block;margin-bottom:4px;font-size:var(--fs-xs);font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em} :where(#setMount,.modalBack,.pinPad) .tblRow .tblF.tblFSvc{display:block;justify-content:flex-start} :where(#setMount,.modalBack,.pinPad) .tblRow .delX{position:absolute;top:8px;right:8px} :where(#setMount,.modalBack,.pinPad) .tblRow input, :where(#setMount,.modalBack,.pinPad) .tblRow select{min-width:0;width:100%;min-height:40px} :where(#setMount,.modalBack,.pinPad) .hourRow input{min-height:40px} :where(#setMount,.modalBack,.pinPad) .genSizes button, :where(#setMount,.modalBack,.pinPad) .roomTab{min-height:44px} :where(#setMount,.modalBack,.pinPad) .delX{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center} :where(#setMount,.modalBack,.pinPad) .modal .fRow{grid-template-columns:1fr} :where(#setMount,.modalBack,.pinPad) .modalActs{gap:8px} :where(#setMount,.modalBack,.pinPad) .modalActs .aBtn{flex:1 1 calc(50% - 4px);min-height:44px} :where(#setMount,.modalBack,.pinPad) .modalActs .primaryBtn{flex:1 1 100%;order:9;min-height:48px} } @media(hover:none) and (pointer:coarse){ :where(#setMount,.modalBack,.pinPad) .genSizes button, :where(#setMount,.modalBack,.pinPad) .roomTab{min-height:44px} } @media(max-width:480px){ :where(#setMount,.modalBack,.pinPad) .modalActs .aBtn, :where(#setMount,.modalBack,.pinPad) .modalActs .primaryBtn{flex:1 1 auto;min-height:44px} } @media (prefers-reduced-motion:reduce){ :where(#setMount,.modalBack,.pinPad) .setCard.setHl, :where(#setMount,.modalBack,.pinPad) .closeRangeBtn.armed, .pinCard.shake{animation:none} :where(#setMount,.modalBack,.pinPad) .spinner{animation-duration:2.4s} } /* ================================================================================================== DARK MODE — part A: the LIFTED RULES' hard-coded light literals ================================================================================================== The dashboard has no dark mode, so its stylesheet hard-codes `background:#fff` on every small button and `#faf6ee` on the room canvas. Lifted unchanged into a page that DOES have dark mode, those become white buttons carrying pale-grey text — measured, not hypothesised: .copyBtn came back rgb(255,255,255) on rgb(183,166,180). The fix belongs here rather than in the lifted rules themselves. Editing them would destroy the before/after comparison this stage exists to make, and would spread the problem across 150 lines instead of collecting it in one block. Light mode is untouched: every selector below is inside a dark-mode condition, so in light mode not one of these declarations exists. Written as `:where(#setMount) .x` so it keeps the same specificity as the rule it answers and simply wins on source order. When the restyle re-points the variables, this block goes with it. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) :where(#setMount) .aBtn, :root:not([data-theme="light"]) :where(#setMount) .copyBtn, :root:not([data-theme="light"]) :where(#setMount) .findSetBtn, :root:not([data-theme="light"]) :where(#setMount) .hoursOk, :root:not([data-theme="light"]) :where(#setMount) .closeRangeBtn:not(.armed){background:var(--card);color:var(--ink-2)} :root:not([data-theme="light"]) :where(#setMount) .setHubTab:hover{background:var(--line-2)} :root:not([data-theme="light"]) :where(#setMount) .roomCanvas{background:var(--paper);background-image:radial-gradient(var(--line) 1px,transparent 1px)} :root:not([data-theme="light"]) :where(#setMount) .roomCanvas.designer{background-color:var(--card)} :root:not([data-theme="light"]) :where(#setMount) .genCard, :root:not([data-theme="light"]) :where(#setMount) .miniChip{background:var(--card);color:var(--gold)} :root:not([data-theme="light"]) :where(#setMount) .genSizes button.on{background:var(--card)} } :root[data-theme="dark"] :where(#setMount) .aBtn, :root[data-theme="dark"] :where(#setMount) .copyBtn, :root[data-theme="dark"] :where(#setMount) .findSetBtn, :root[data-theme="dark"] :where(#setMount) .hoursOk, :root[data-theme="dark"] :where(#setMount) .closeRangeBtn:not(.armed){background:var(--card);color:var(--ink-2)} :root[data-theme="dark"] :where(#setMount) .setHubTab:hover{background:var(--line-2)} :root[data-theme="dark"] :where(#setMount) .roomCanvas{background:var(--paper);background-image:radial-gradient(var(--line) 1px,transparent 1px)} :root[data-theme="dark"] :where(#setMount) .roomCanvas.designer{background-color:var(--card)} :root[data-theme="dark"] :where(#setMount) .genCard, :root[data-theme="dark"] :where(#setMount) .miniChip{background:var(--card);color:var(--gold)} :root[data-theme="dark"] :where(#setMount) .genSizes button.on{background:var(--card)} /* ================================================================================================== DARK MODE — part B: the frozen markup's inline light literals ================================================================================================== The 352 lines of ported markup carry inline `background:#fff` / `#fbf3e7` / `#eef7ef` styles, because the dashboard has no dark mode. Copied verbatim (which is what keeps the light-mode comparison exact) they give white panels holding near-white text the moment this page is viewed dark — the slice HAS a dark theme and a theme toggle, so that is a real, reachable, unreadable state, not a hypothetical. Inline styles beat stylesheet rules, so each one is overridden by id with !important. This block is the ONLY use of !important in the port, it changes nothing in light mode, and it is written by id so it is obvious which frozen element each line answers for. When the restyle stage replaces those inline styles with tokens, delete this block — do not extend it. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #setMount #dsGate, :root:not([data-theme="light"]) #setMount #ppGate, :root:not([data-theme="light"]) #setMount #axGate, :root:not([data-theme="light"]) #setMount #dsAccessGate .hint[style], :root:not([data-theme="light"]) #setMount #dsConnected, :root:not([data-theme="light"]) #setMount #ppConnected, :root:not([data-theme="light"]) #setMount #axConnected, :root:not([data-theme="light"]) #setMount #dsEnableRow, :root:not([data-theme="light"]) #setMount #ppEnableRow, :root:not([data-theme="light"]) #setMount #axEnableRow, :root:not([data-theme="light"]) #setMount #dsPreview, :root:not([data-theme="light"]) #setMount #ppPreview, :root:not([data-theme="light"]) #setMount #axPreview, :root:not([data-theme="light"]) #setMount #dsOverlapWarn, :root:not([data-theme="light"]) #setMount #ppOverlapWarn{ background:var(--paper)!important;border-color:var(--line)!important;color:var(--ink-2)!important} } :root[data-theme="dark"] #setMount #dsGate, :root[data-theme="dark"] #setMount #ppGate, :root[data-theme="dark"] #setMount #axGate, :root[data-theme="dark"] #setMount #dsAccessGate .hint[style], :root[data-theme="dark"] #setMount #dsConnected, :root[data-theme="dark"] #setMount #ppConnected, :root[data-theme="dark"] #setMount #axConnected, :root[data-theme="dark"] #setMount #dsEnableRow, :root[data-theme="dark"] #setMount #ppEnableRow, :root[data-theme="dark"] #setMount #axEnableRow, :root[data-theme="dark"] #setMount #dsPreview, :root[data-theme="dark"] #setMount #ppPreview, :root[data-theme="dark"] #setMount #axPreview, :root[data-theme="dark"] #setMount #dsOverlapWarn, :root[data-theme="dark"] #setMount #ppOverlapWarn{ background:var(--paper)!important;border-color:var(--line)!important;color:var(--ink-2)!important}