/* A1 landing symmetry (the Owner, 30 Oct, MSG-276): one horizontal container for the landing rail and panels.
   Kept outside the byte-exact c89472e cascade (css/01-11.css) so that check stays exact; linked only on pre-auth-doors. */
.oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar,
.oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing.centered-two-col {
 width:calc(100% - var(--space-5) * 2);max-width:1200px;margin-left:auto;margin-right:auto;
}
.oneops-shell[data-shell-frame=pre-auth-doors] .shell-workspace:has(#screen-landing) {padding-left:0;padding-right:0}
.oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) {background:none}
@media(max-width:719px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar,
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing.centered-two-col {width:calc(100% - var(--space-4) * 2)}
}
/* SCREEN-MAP v1.9 / ASK-158 (OA-835/837): Operations frame cap (1366x1024 kiosk or 390px phone), centred tablet frame and pinned top strip. */
:root {--ops-kiosk-max-w:1366px;--ops-kiosk-max-h:1024px;--ops-phone-max-w:390px}
html:has(body.operations-entry[data-ops-bound]),body.operations-entry[data-ops-bound] {height:auto!important;min-height:0!important;max-height:none!important;overflow-x:clip!important;overflow-y:visible!important}
body.operations-entry[data-ops-bound] .oneops-shell,body.operations-entry[data-ops-bound] :is(.shell-header.ops-entry-header,.shell-layout,.shell-workspace,.operations-auth,#screen-ops,#screen-bind) {width:100%;max-width:var(--ops-kiosk-max-w);min-height:0!important;height:auto!important;max-height:none!important;margin-left:auto;margin-right:auto;overflow:visible!important;box-sizing:border-box}
@media(min-width:768px) {
 body.operations-entry[data-ops-bound] .oneops-shell {width:100%;max-width:var(--ops-kiosk-max-w);margin-left:auto;margin-right:auto;box-sizing:border-box}
 body.operations-entry[data-ops-bound] .shell-header.ops-entry-header {position:sticky!important;top:0!important;z-index:20!important}
}
@media(max-width:767px) {
 body.operations-entry[data-ops-bound] .oneops-shell,body.operations-entry[data-ops-bound] :is(.shell-header.ops-entry-header,.shell-layout,.shell-workspace,.operations-auth,#screen-ops,#screen-bind) {max-width:var(--ops-phone-max-w)!important;margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:767px) {
 /* One screen when it fits; a notice or a short phone makes the page longer and it scrolls, so no door is cut off. */
 .oneops-shell[data-shell-frame=pre-auth-doors]:has(#screen-landing) {min-height:100dvh;height:auto;max-height:none;overflow:visible}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing :is(.hero-showcase-panel,.showcase-card,#slide-badge) {display:none!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar {margin-top:var(--space-2);padding:var(--space-2) var(--space-3);gap:var(--space-2)}
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-workspace:has(#screen-landing) {padding-top:var(--space-2);padding-bottom:var(--space-2)}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) {gap:var(--space-2);min-height:0!important;padding:0!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) .shell-notice {width:calc(100% - var(--space-4) * 2);margin:0 auto;padding:var(--space-2) var(--space-3)}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) .shell-local-link {margin:var(--space-1) var(--space-4);min-height:0!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing.centered-two-col {grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .workspace-selector-panel {padding:var(--space-4);gap:var(--space-3)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-card {padding:var(--space-3);gap:var(--space-2)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-cta {min-height:52px!important;height:52px}
}
/* 720 to 999 px: the 44 px tap floor 10.css gives phones (up to 719 px) reaches the Operations sign-in and tablet binding controls too. From 1000 px they stay as signed. */
@media(min-width:720px) and (max-width:999px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.hud-btn,.back-pill,.voice-btn,#ops-mobile) {min-height:44px!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.voice-btn,.shell-segmented button) {min-width:44px!important}
}
/* Visual finish (rows 53-55): the door buttons are links under the hood, never underlined. */
.oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-cta {text-decoration:none}
/* The local test sign-in is the page's quiet secondary button (as .salon-btn.secondary), not an underlined link. */
.oneops-shell[data-shell-frame=pre-auth-doors] .shell-local-link {display:inline-flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;padding:var(--space-2) var(--space-4);border:1.5px solid var(--os-brass);border-radius:var(--radius-pill);background:var(--ivory);color:var(--teal-dark);font:800 var(--text-label) var(--font-sans);text-decoration:none;box-sizing:border-box}
.oneops-shell[data-shell-frame=pre-auth-doors] .shell-local-link:hover {background:var(--card-white)}
.oneops-shell[data-shell-frame=pre-auth-doors] .shell-local-link:focus-visible {outline:var(--space-1) solid var(--teal);outline-offset:var(--space-1)}
/* OA-1947 (the Owner, 2 Nov): the rest and setup screens carry the kiosk's one aqua header (kiosk-frame.css has the same values): full width, 60 px at rest and while the page
   scrolls, 4 px gold edge below and none elsewhere, logo 48 px at 16 px from the left, the name in the middle in the logo's serif and a deep brass that reads on it, the controls right.
   header-shrink.js sets data-header="compact": the name goes and the logo and the options stay. The bar keeps its height, so nothing below it moves.
   Without the script the bar stays at rest. From 768 px; the phone landing is a fixed one-screen page and is not touched. The Corporate entry has no data-ops-frame and keeps its header. */
@media(min-width:768px) {
 html:has(.shell-header.landing-bar),html:has(.shell-header.landing-bar) body {overflow:visible!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar,#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header) {
  position:sticky;top:0;z-index:40;box-sizing:border-box;width:100%;max-width:var(--ops-kiosk-max-w);height:60px!important;min-height:0;
  margin:0 auto;padding:0 var(--space-4);border:0;border-bottom:var(--space-1) solid var(--gold);border-radius:0;box-shadow:none;
  background:linear-gradient(180deg,var(--tok-a8e4e5),var(--aqua));
 }
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar .landing-logo,
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] > .shell-header.ops-entry-header .ops-brand img {
  box-sizing:border-box;width:48px;height:48px;flex:0 0 48px;border:1px solid var(--gold);border-radius:50%;background:var(--ivory);
 }
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar .landing-logo img {width:100%;height:100%;object-fit:contain}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar,.shell-header.ops-entry-header) .shell-controls button {min-height:44px}
 /* The same name in the same size on every screen. */
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar .landing-brand,#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header .shell-wordmark) strong.hw-mark {font:700 var(--text-body)/1 var(--font-serif);letter-spacing:.04em;transition:opacity .15s ease,visibility 0s}
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar[data-header=compact] strong.hw-mark,
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.ops-entry-header[data-header=compact] strong.hw-mark {opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s .15s}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar,.shell-header.ops-entry-header) strong.hw-mark {color:var(--tok-6b4e1f)}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar,.shell-header.ops-entry-header) strong.hw-mark .hw-name {font-size:inherit;background:none;color:var(--tok-6b4e1f);-webkit-text-fill-color:var(--tok-6b4e1f)}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar,.shell-header.ops-entry-header) strong.hw-mark .hw-ops {font-size:inherit;color:var(--tok-6b4e1f);border-left-color:var(--tok-6b4e1f)}
}
/* One header, one set of controls (OA-1947 and the integrator's sweep): every entry screen draws the kiosk's pills, 56 px with 44 px buttons at 14 px, narrow padding, no speaker icon from 800 px.
   /operations/login and its siblings do not load lounge-finish.css, so the values are here too. Three ids: 11.css shrinks these controls inside #kioskFrame. */
@media(min-width:768px) {
 .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:var(--space-3);flex-wrap:nowrap}
 .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header > .ops-brand {grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:0;margin:0;padding:0;line-height:0}
 .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header > .shell-wordmark {grid-column:2;grid-row:1;justify-self:center;margin:0}
 .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header > .shell-controls {grid-column:3;grid-row:1;justify-self:end;display:flex;flex-wrap:nowrap;width:auto;margin:0;gap:var(--space-2)}
}
.oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-segmented {box-sizing:border-box;display:inline-flex;flex:0 0 auto;flex-wrap:nowrap;gap:var(--space-1);height:56px;margin:0;padding:var(--space-1);border:2px solid var(--gold);border-radius:var(--radius-pill);background:var(--cream-pill)}
.oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-segmented button {box-sizing:border-box;height:44px;min-height:44px!important;min-width:44px;padding:0 var(--space-2);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--teal);box-shadow:none;font:700 var(--text-label) var(--font-sans);white-space:nowrap}
.oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-segmented button[aria-pressed=true] {background:var(--teal);color:var(--ivory)}
@media(min-width:800px) and (max-width:1199px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-segmented button {padding:0 var(--space-1)}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-segmented button[data-shell-voice=on] {font-size:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-segmented button[data-shell-voice=on] .shell-control-speaker {display:inline-block;font-size:var(--text-lg)}
}
@media(min-width:800px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-control-speaker {display:none}
}
@media(min-width:768px) and (max-width:1199px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.shell-header.landing-bar .landing-brand,#kioskFrame[data-ops-frame] > .shell-header.ops-entry-header .shell-wordmark) strong.hw-mark {font-size:var(--text-label)}
}
@media(min-width:800px) {
 /* The name in the same place as on every kiosk screen: the exact middle from 1000 px, sliding left on a narrower window. */
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar .landing-brand strong {position:absolute;left:min(50%,calc(100% - 500px));top:50%;transform:translate(-50%,-50%)}
}
@media(prefers-reduced-motion:reduce) {
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-header.landing-bar strong {transition:none}
}
/* "Harley's OneOps" as a wordmark in the logo's own look: the brand serif in brass (the logo's gold to brass), the name in spaced capitals,
   OneOps in italic after a thin rule. Tokens only, no new font.
   One line, never wraps. Used by the kiosk header, the Operations entry pages and the landing bar. */
.oneops-shell strong.hw-mark {
 display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap;overflow-wrap:normal;word-break:normal;
 font-family:var(--font-serif);font-size:var(--text-h3);font-weight:700;line-height:1;letter-spacing:.04em;color:var(--os-brass);
}
@media(min-width:1200px) {
.oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,.ops-entry-header) strong.hw-mark::before,
.oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,.ops-entry-header) strong.hw-mark::after {content:"";flex:0 0 auto;width:var(--space-4);height:1px;background:linear-gradient(90deg,transparent,var(--tok-6b4e1f));}
.oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,.ops-entry-header) strong.hw-mark::after {transform:scaleX(-1)}
}
.oneops-shell strong.hw-mark .hw-name {
 font-weight:700;letter-spacing:.16em;
 background:linear-gradient(180deg,var(--gold) 0%,var(--os-brass) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.oneops-shell strong.hw-mark .hw-ops {
 font-style:italic;font-weight:600;letter-spacing:.02em;color:var(--os-brass);
 padding-left:var(--space-2);border-left:1px solid var(--gold);
}
/* Operations entry pages already name the brand beside the logo: the centred wordmark is the visible name. */
.oneops-shell .ops-entry-header .ops-brand strong {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.oneops-shell .hw-sr {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* OA-1976: the rest screen fits the window from 800 px: the two panels take the height under the band and scale with it, so the page does not scroll. */
@media(min-width:800px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-layout:has(#screen-landing) {display:flex;flex-direction:column;height:calc(100dvh - 60px);min-height:0;overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] .shell-workspace:has(#screen-landing) {box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding-top:clamp(6px,1.75vh,20px);padding-bottom:clamp(6px,1.75vh,20px);overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) {display:flex;flex-direction:column;flex:1 1 0;gap:clamp(4px,1vh,16px);min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing.centered-two-col {flex:1 1 0;grid-template-rows:minmax(0,1fr);gap:clamp(10px,1.6vw,22px);min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing :is(.hero-showcase-panel,.workspace-selector-panel) {box-sizing:border-box;min-height:0;height:100%;padding:clamp(8px,2vh,24px) clamp(10px,2vw,26px);overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .workspace-selector-panel {gap:clamp(5px,1.4vh,14px);justify-content:center}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .workspace-selector-panel h1 {margin:0;font-size:clamp(18px,3.4vh,27px);line-height:1.2}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-card {gap:clamp(4px,1.1vh,12px);padding:clamp(6px,1.5vh,18px) clamp(8px,1.4vw,18px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-cta {box-sizing:border-box;min-height:clamp(44px,6.5vh,52px);height:auto;padding:0 var(--space-4)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .hero-showcase-panel > div {display:flex;flex-direction:column;height:100%;min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .showcase-card {display:flex;flex-direction:column;flex:1 1 0;min-height:0;margin:clamp(4px,1vh,12px) 0 0;overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .showcase-art {flex:1 1 0;min-height:0;height:auto}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .showcase-body {flex:none;padding:clamp(6px,1.5vh,16px) clamp(10px,1.4vw,20px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .showcase-headline {margin:0 0 clamp(2px,.5vh,6px);font-size:clamp(15px,3vh,24px);line-height:1.15}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) .shell-local-link {flex:none;margin:0 auto;min-height:clamp(30px,5vh,35px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) > .shell-notice {flex:none;margin-top:0;margin-bottom:0}
}
/* OA-1988 (the Owner's Retina window, about 1000 x 543, and browser zoom): very short windows keep every door on screen. */
@media(min-width:800px) and (max-height:520px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .workspace-selector-panel > div:first-child :not(h1) {display:none}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-card small {display:none}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-card :is(img,svg) {max-height:28px}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-card {gap:3px;padding:4px 8px}
 .oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-cta {min-height:44px}
 .oneops-shell[data-shell-frame=pre-auth-doors] .inner-canvas:has(> #screen-landing) .shell-local-link {min-height:26px;padding:2px 12px}
}
/* OA-1976, OA-1988: /operations/login fits the window from 800 px with no page scroll: the two panes take the height under the band, the keys and slots scale, the long notes step aside on a short window. */
@media(min-width:800px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame]:has(#screen-ops) {display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden;border:0!important;border-radius:0!important;box-shadow:none!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame]:has(#screen-ops) > .shell-layout {display:flex;flex-direction:column;flex:1 1 0;min-height:0;overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame]:has(#screen-ops) .shell-workspace {box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding:clamp(4px,1vh,8px);overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops.operations-auth {box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 0;min-height:0;padding:clamp(4px,1.2vh,12px) clamp(8px,1.4vw,16px);overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-0 {flex:none;margin:0 0 clamp(3px,.8vh,8px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops h1 {font-size:clamp(18px,3.4vh,27px);line-height:1.15}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops #operations-signin {display:flex;flex-direction:column;flex:1 1 0;min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-two-col {flex:1 1 0;grid-template-rows:minmax(0,1fr);gap:clamp(6px,1vw,12px);min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pane-card {box-sizing:border-box;min-height:0;padding:clamp(5px,1.2vh,12px) clamp(8px,1vw,12px);overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-1 {height:100%}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-16 {gap:clamp(4px,.9vh,8px);min-height:0;height:100%;overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-17 {flex:1 1 auto}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops #ops-step1-title {margin:0 0 clamp(2px,.6vh,8px);font-size:clamp(15px,2.75vh,22px);line-height:1.15}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops #ops-phone-row {margin:0 0 clamp(2px,.6vh,8px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pin-control {height:clamp(44px,7.5vh,66px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pin-control .pin-slots {margin:0;height:100%}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .pin-slots > * {height:clamp(40px,7vh,58px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .tactile-keypad {flex:1 1 0;gap:clamp(3px,.8vh,8px);margin:clamp(2px,.5vh,4px) 0 0;min-height:0;grid-auto-rows:minmax(44px,1fr)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .tactile-key {box-sizing:border-box;height:auto;min-height:44px;font-size:clamp(18px,3vh,24px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .selfie-box {flex:1 1 60px;min-height:clamp(56px,14vh,177px);max-height:clamp(90px,26vh,220px);overflow:hidden}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-18 {margin:0 0 clamp(2px,.6vh,8px);font-size:clamp(13px,2vh,16px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-18 * {font-size:inherit;line-height:1.25;padding-top:clamp(1px,.5vh,6px);padding-bottom:clamp(1px,.5vh,6px)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-27 {margin:clamp(3px,.8vh,8px) 0 0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-27 :is(button,a) {min-height:clamp(48px,8vh,64px);height:auto;padding-top:2px;padding-bottom:2px}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-30 {flex:none;padding:clamp(3px,.8vh,8px) clamp(8px,1vw,12px)}
}
@media(min-width:800px) and (max-height:820px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-30 > :not(:first-child):not(:has(a,button)):not(a):not(button) {display:none}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .selfie-box .ops-ref-24 {display:none}
}
/* Browser zoom on a short window: the fields, keys and Sign In stay; the step words give way. */
@media(min-width:800px) and (max-height:520px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops :is(.ops-ref-2,#ops-step1-title,.ops-ref-8,.ops-ref-13,.ops-ref-18) {display:none}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .selfie-box {min-height:44px}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pin-control {height:40px}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .pin-slots > * {height:36px}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .tactile-keypad {grid-auto-rows:minmax(44px,1fr)}
}

/* Controls finish (Owner look, 2 Nov). The door buttons take the shared button radius; their height stays 52 px (44 px on a short window) so both doors fit one screen,
   which sits inside the kiosk primary's 48 to 64 px. */
.oneops-shell[data-shell-frame=pre-auth-doors] #screen-landing .door-cta {border-radius:var(--radius-md)}
/* Operations sign-in: the PIN dock's keypad and PIN dots. Same keys (3 columns, the dock's fluid 48 to 72 px rows, 1 px brass edge, medium radius, ivory), and the four PIN digit boxes. From 768 px; the phone keeps its own. */
@media(min-width:768px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .tactile-keypad {flex:0 0 auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(48px,calc(11.7vh - 18px),72px);gap:clamp(4px,1vh,8px);width:100%;max-width:380px;min-height:0;margin:0 auto;align-content:start}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .tactile-key {height:100%;min-height:0;padding:0;border:1px solid var(--gold);border-radius:var(--radius-md);background:var(--ivory);box-shadow:none;color:var(--teal-dark);font:700 clamp(18px,3vh,24px)/1 var(--font-sans)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .tactile-key:is([data-pin-key=C],[data-pin-key="\u232b"]) {background:var(--ivory-canvas);color:var(--ink-muted)}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pin-control {width:100%;height:auto;margin:4px auto 0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pin-control .pin-slots {align-items:center;gap:clamp(8px,1.75vh,14px);height:auto;margin:var(--space-2) 0}
}
/* From 1280 the speaker icons are back on the Read Aloud pill and the switch, on the landing and the entry screens as on the kiosk (11.css hides them from 800 for room that is only short below 1280). */
@media(min-width:1280px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] :is(.landing-bar,#kioskFrame#kioskFrame#kioskFrame[data-ops-frame] > .ops-entry-header) .shell-controls .shell-control-speaker {display:inline-block;font-size:var(--text-label)}
}

/* Scrolling returns only on real overflow (a larger text size, a zoomed window, an added row): the centre scrolls, the band stays. At 1024x768, 1280x800 and 1366x1024 nothing overflows, so nothing scrolls. */
@media(min-width:800px) {
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame]:has(#screen-ops) .shell-workspace {overflow-y:auto!important;overflow-x:hidden!important}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops.operations-auth {flex:1 0 auto;min-height:0;overflow:visible}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops #operations-signin {flex:1 0 auto;min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-two-col {flex:1 0 auto;min-height:0}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-pane-card {overflow:visible}
 .oneops-shell[data-shell-frame=pre-auth-doors] #kioskFrame[data-ops-frame] #screen-ops .ops-ref-16 {overflow:visible;height:auto;min-height:100%}
}