/* Visual walk rows 9–12, 32–39. The signed shell cascade stays byte-for-byte frozen. */
#kioskFrame .kiosk-needs .kiosk-needs-tile[data-kind] {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  overflow-wrap: normal;
  word-break: normal;
}
#kioskFrame .kiosk-needs .kiosk-needs-tile[data-kind] > * { min-width: 0; }
/* With a shift card under it, My Lounge gives up height so the person's check-out stays on the first screen. */
#kioskFrame .kiosk-storefront:has(~ [data-k1-active-roster]) .kiosk-storefront-preview { height: calc(var(--space-8) * 3); }
#kioskFrame .kiosk-section-card .salon-card-head {
  flex-wrap: wrap;
  height: auto;
}
#kioskFrame .kiosk-section-card .kiosk-freshness {
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 767px) {
  /* The fixed footer keeps its signed styling; the workspace scrolls above it, right up to its edge.
     The shell keeps its 4 px border, so the frame is the window minus 8 px. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame:has(> .ops-phone-rail) {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--space-2)) !important;
    max-height: calc(100dvh - var(--space-2)) !important;
    overflow: hidden !important;
    padding-bottom: calc(var(--space-8) * 2);
  }
  #kioskFrame:has(> .ops-phone-rail) > .kiosk-app-header { flex: none; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame:has(> .ops-phone-rail) > .shell-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden !important;
    padding-bottom: 0;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame:has(> .ops-phone-rail) .shell-workspace.l21-main-stage {
    height: 100% !important;
    overflow-y: auto !important;
    padding-bottom: var(--space-4);
  }
  #kioskFrame .kiosk-needs-grid { grid-template-columns: minmax(0, 1fr); }
  /* The icon sits beside the tile's title, so the four tiles leave the phone's room to the card below them. */
  #kioskFrame .kiosk-top-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
  }
  #kioskFrame .kiosk-top-tile > div { display: contents; }
  #kioskFrame .kiosk-top-tile .kiosk-value-chip { grid-column: 1 / -1; }
  #kioskFrame .kiosk-top-tile .kiosk-value-chip { justify-self: start; }
}

/* The Handover group sits inside the Manager card: a plain list under the Needs you row, no bullets. */
.ops-manager-card [data-manager-handover] { flex-direction: column; align-items: stretch; }
.ops-manager-card [data-manager-handover] h3 { margin: 0; font: 700 var(--text-h3)/1.3 var(--font-sans); color: var(--teal-dark); }
.ops-manager-card [data-manager-handover] ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ops-manager-card [data-manager-handover] li { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.ops-manager-card [data-manager-handover] li span { color: var(--ink-muted); }
.ops-manager-card [data-manager-handover] .btn-64 { align-self: flex-start; text-decoration: none; }

/* Fixed tablet view on the tablet binding page (/kiosk/unlock, its own pre-sign-in frame; linked by app/auth/kiosk_views.tablet_page):
   from 800 px wide the page never scrolls. The frame is the window, capped at 1024 px;
   the header stays on top and the workspace beneath it scrolls on a short window. */
@media (min-width: 800px) {
  body.operations-entry[data-ops-bound] .oneops-shell #kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) {
    display: flex !important;
    flex-direction: column !important;
    height: min(100vh, 1024px) !important;
    height: min(100dvh, 1024px) !important;
    min-height: 0 !important;
    max-height: 1024px !important;
    overflow: clip !important;
  }
  body.operations-entry[data-ops-bound] #kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) > .shell-header { flex: 0 0 auto !important; }
  body.operations-entry[data-ops-bound] #kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) > .shell-layout {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: clip !important;
  }
  /* The workspace under the header is the one scroller; the binding card and its columns fill it and grow with their content. */
  body.operations-entry[data-ops-bound] #kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) .shell-workspace {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.operations-entry[data-ops-bound] #kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) :is(#tablet-binding, #tablet-binding > .kiosk-l2-split) {
    flex: 1 0 auto !important;
  }
}
/* Owner's 05:15 kiosk walk. Kiosk frame from 768 px only: Corporate frames and the phone view keep their styling.
   Scrolling stays with kiosk-frame.css and frames.py; nothing below sets overflow, height or position. */
@media (min-width: 768px) {
  /* 4. One body font everywhere; the serif only for page and card headings. No monospaced text on a crew screen. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame { --font-mono: var(--font-sans); }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame :not(h1, h2, h3, h1 *, h2 *, h3 *, .brand-arched-title) { font-family: var(--font-sans); }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame :is(h1, h2),
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklist-card .checklist-title { font-family: var(--font-serif); letter-spacing: 0; }
  /* One size scale: page 26, card 20, half-width card 18, sub-heading 18. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .shell-workspace h1 { font-size: var(--text-h2); line-height: 1.2; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .shell-workspace h2,
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .shell-workspace h2.heading-600,
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklist-card .checklist-title { font-size: var(--text-lg); line-height: 1.25; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .shell-workspace h3 { font-size: var(--text-body); line-height: 1.3; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-briefing-row h2 { font-size: var(--text-body); line-height: 1.25; }
  /* Pills and small labels share one size and weight. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame :is(.kiosk-menu-badge, .kiosk-value-chip, .camera-ready-pill, .dept-count-badge, [data-roster-active]) {
    font-size: var(--text-kicker); font-weight: 700; letter-spacing: 0;
  }

  /* 3. Slim header: one line from 1000 px, every control at least 44 px tall. Under 1000 px the header keeps its two rows: on one line the brand runs under the stats. */
  @media (min-width: 800px) {
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-app-header {
    display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2);
    min-height: 0; padding: var(--space-1) var(--space-3);
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-header-brand { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: var(--space-2); min-width: 0; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-brand { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .header-logo-crest { flex: 0 0 var(--space-7); width: var(--space-7); height: var(--space-7); }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .brand-arched-title { font-size: var(--text-body); line-height: 1.1; white-space: nowrap; overflow-wrap: normal; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-outlet-pill { flex: 0 1 auto; min-width: 0; padding: var(--space-1) var(--space-2); font-size: var(--text-kicker); white-space: nowrap; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-header-stats { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: var(--space-1); margin: 0; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .header-stat-box { flex-direction: row; align-items: baseline; gap: var(--space-1); padding: var(--space-1) var(--space-2); white-space: nowrap; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .header-stat-box :is(.val, .lbl) { font-size: var(--text-kicker); line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-header-right { flex: 0 0 auto; margin-left: 0; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame :is(.a11y-switch-bar, .shell-controls, .shell-controls .shell-segmented) { flex-wrap: nowrap; gap: var(--space-1); margin: 0; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .shell-controls .shell-logout {
    min-height: 44px !important; min-width: 44px; padding: 0 var(--space-2);
    font-size: var(--text-kicker); line-height: 1; white-space: nowrap; overflow-wrap: normal;
  }
  }

  /* 5. Manager recovery form: label over field, the button level with the fields in the primary style. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
    gap: var(--space-3); margin: var(--space-3) 0 0;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] label {
    display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
    font-size: var(--text-label); font-weight: 700; line-height: 1.3; color: var(--teal-dark);
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] :is(select, input:not([type=hidden])) {
    box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--os-brass); border-radius: var(--radius-sm); background: var(--ivory);
    font-size: var(--text-body); font-weight: 400; color: var(--ink);
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] [data-issue-recovery-code] {
    grid-column: 1 / -1; justify-self: start; min-height: 48px; margin: 0; padding: var(--space-2) var(--space-5);
    border: 2px solid var(--gold); border-radius: var(--radius-md); background: var(--teal); color: var(--ivory);
    font-size: var(--text-label); font-weight: 800; line-height: 1.2;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] :is(output, [data-recovery-code-error]) { grid-column: 1 / -1; margin: 0; }

  /* 7. Lists: round monograms, one shape for the toolbar, status pills in one column. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .avatar {
    display: inline-grid; place-items: center; flex: 0 0 auto; box-sizing: border-box;
    width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    border: 2px solid var(--gold); background: var(--teal); color: var(--ivory);
    font-size: var(--text-label); font-weight: 700; line-height: 1; letter-spacing: .02em;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .checklist-toolbar > :is(a, button) {
    min-width: 0; min-height: 48px; padding: var(--space-2) var(--space-4);
    border: 2px solid var(--os-brass); border-radius: var(--radius-pill); background: var(--ivory); color: var(--teal);
    font-size: var(--text-label); font-weight: 700; line-height: 1.2; box-shadow: none;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .checklist-toolbar > .active { background: var(--teal); color: var(--ivory); border-color: var(--gold); }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .pill-badge {
    min-height: 32px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    font-size: var(--text-label); font-weight: 700; line-height: 1.2; white-space: nowrap;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .checklist-summary .salon-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .checklist-summary [data-list-state] { flex: 0 0 auto; margin-left: auto; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .checklist-task-meta { align-items: center; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .checklists-page .checklist-task-meta > .pill-badge:last-child { margin-left: auto; }

  /* 8. Roster cards: role and station read as one line where they fit, never broken inside a word. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame :is([data-k1-row] .person-sub, [data-k1-row] strong, #screen-l2 .crew-card strong) {
    overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance;
  }
  /* The Live Audit Photo panel. The keypad and the start button are the shared kiosk keypad and primary button at the end of this file. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame #screen-l2 :is(.dock-camera-box, .dock-camera-empty) {
    border: 1px solid var(--os-brass); border-radius: var(--radius-md); background: var(--ivory); color: var(--teal-dark);
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame #screen-l2 :is(.dock-camera-box, .dock-camera-empty).pin-camera-failed { border-color: var(--danger); }
}
@media (min-width: 1024px) {
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame form[data-recovery-code-form] [data-issue-recovery-code] { grid-column: auto; justify-self: stretch; }
}
/* Checklists on the bound counter tablet: signed design E3 (OPTION-1-ASK-151). Each task is a card with
   its status chip and two big buttons; the reason area opens under that card alone (script: .is-reasoning,
   script off: the Cannot link's #target). Unscoped so Corporate /checklists gets the same clean card. */
.checklists-page .checklist-task-hint {
  margin: var(--space-4) 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--aqua-soft);
  color: var(--teal-dark);
  font: 700 var(--text-body)/1.5 var(--font-sans);
}
.checklists-page .checklist-tasks.checklist-task-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
@media (min-width: 1100px) {
  .checklists-page .checklist-tasks.checklist-task-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.checklists-page .checklist-task.checklist-task-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  background: var(--card-white);
  color: var(--ink);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.checklists-page .checklist-task-card::before { content: none; }
.checklists-page .checklist-task-card.is-done { border-color: var(--border-teal); }
.checklists-page .checklist-task-card.is-cannot { border-color: var(--amber-border); }
.checklists-page .checklist-task-card .checklist-task-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.checklists-page .checklist-task-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.checklists-page .checklist-task-card .checklist-task-text { font-weight: 700; }
.checklists-page .checklist-task-card .checklist-task-meta { margin: 0; }
.checklists-page .checklist-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--space-6) + var(--space-2));
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--border-subtle);
  font: 700 var(--text-body)/1.3 var(--font-sans);
  white-space: nowrap;
}
.checklists-page .checklist-status.is-done {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--border-teal);
}
.checklists-page .checklist-status.is-cannot {
  background: var(--amber-bg);
  color: var(--amber-ink);
  border-color: var(--amber-border);
}
.checklists-page .checklist-task-pair { margin: 0; color: var(--ink-muted); overflow-wrap: break-word; }
.checklists-page .checklist-reason-chosen {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--amber-bg);
  color: var(--amber-ink);
  border: 1px solid var(--amber-border);
  overflow-wrap: break-word;
}
.checklists-page .checklist-task-card .checklist-task-actions,
.checklists-page .checklist-task-card .checklist-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.checklists-page .checklist-task-card .checklist-task-actions .checklist-form,
.checklists-page .checklist-task-card .checklist-card-actions .checklist-form { display: block; }
/* Done, Cannot, Save, Back and the list's Submit, Verify, Return, Hand over: one big-button style, 64px tap targets. */
.checklists-page .checklist-big-btn {
  width: 100%;
  min-height: calc(var(--space-7) * 2);
  border-radius: var(--radius-md);
  font: 700 var(--text-lg)/1.3 var(--font-sans);
}
.checklists-page .checklist-actions .checklist-big-btn { width: auto; }
.checklists-page .checklist-reason-panel { display: none; }
.checklists-page .checklist-task-card.is-reasoning .checklist-reason-panel,
.checklists-page .checklist-reason-panel:target {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
}
.checklists-page .checklist-reason-panel .checklist-field { color: var(--ink); font-weight: 700; }
.checklists-page .checklist-reason-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* ASK-147 refinement (the Owner, 2 Nov 05:4x): the kiosk frame and /kiosk/unlock only (this sheet loads on no other page).
   Three ids: 11.css is byte-locked and shrinks these controls inside #kioskFrame with single- and double-id !important rules;
   these rules win over every one of them without touching the locked sheets. */

/* 1. Language and Read Aloud are the landing's pills: the same markup (labels.segmented_switch inside .shell-controls) and the
   landing's values from 07.css ("Shared language and Read Aloud segmented pill") and 10.css (.shell-controls button font).
   test_kiosk_controls_refinement.py checks these values still match 07.css. */
/* Phones (under 768 px) keep their own compact header: the landing pills apply from the tablet widths up. */
@media (min-width: 768px) {
.oneops-shell #kioskFrame#kioskFrame#kioskFrame .shell-controls .shell-segmented {
  display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; gap: var(--space-1); padding: var(--space-1); margin: 0;
  border: 2px solid var(--gold); border-radius: var(--radius-pill); background: var(--cream-pill);
}
.oneops-shell #kioskFrame#kioskFrame#kioskFrame .shell-controls .shell-segmented button {
  min-height: 44px !important; min-width: 44px; height: auto; padding: var(--space-2) var(--space-3);
  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 #kioskFrame#kioskFrame#kioskFrame .shell-controls .shell-segmented button[aria-pressed=true] { background: var(--teal); color: var(--ivory); }
.oneops-shell #kioskFrame#kioskFrame#kioskFrame .shell-controls .shell-control-speaker { display: inline-block; }
.oneops-shell #kioskFrame#kioskFrame#kioskFrame .shell-controls .shell-logout {
  min-height: 44px !important; padding: 0 var(--space-3); border: 1px solid var(--gold); border-radius: var(--radius-pill);
  background: var(--ivory); color: var(--teal); font: 700 var(--text-label) var(--font-sans); white-space: nowrap;
}
/* One set of controls on every kiosk screen: 14 px words always, the same narrow padding as landing.css's, no speaker icon from 800 px (the frame is never wider than 1366 px, and the outlet needs the room). */
@media (min-width: 800px) {
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame .kiosk-app-header .shell-controls :is(.shell-segmented button, .shell-logout) { height: 44px; padding: 0 var(--space-2); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame .kiosk-app-header .shell-controls .shell-segmented { box-sizing: border-box; height: 56px; }
}
/* Up to 1199 px the Read Aloud button is its speaker alone: the words stay as its spoken name, and the outlet's short name gets the room. */
@media (min-width: 800px) and (max-width: 1199px) {
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame .kiosk-app-header .shell-controls :is(.shell-segmented button, .shell-logout) { padding: 0 var(--space-1); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame .kiosk-app-header .shell-controls [data-shell-voice=on] { font-size: 0; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame .kiosk-app-header .shell-controls [data-shell-voice=on] .shell-control-speaker { display: inline-block; font-size: var(--text-lg); }
}
@media (min-width: 800px) {
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame .kiosk-app-header .shell-controls .shell-control-speaker { display: none; }
}
} /* end min-width 768: phones keep their header as it was */

/* 2. One keypad: the roster's PIN dock (.dock-keypad-grid / .keypad-btn) on the roster and on /kiosk/unlock. Rows are 64 px and the
   three columns share the dock's width, so every key is wider than it is tall. */
.oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#screen-l2, #tablet-binding) .dock-keypad-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 64px; gap: var(--space-2);
  flex: 0 0 auto; width: 100%; max-width: none; height: auto; min-height: 0; margin: 0; align-content: start;
}
.oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#screen-l2, #tablet-binding) .dock-keypad-grid .keypad-btn {
  box-sizing: border-box; display: grid; place-items: center; width: 100%; min-width: 0; height: 64px; min-height: 64px; padding: 0;
  border: 1px solid var(--gold); border-radius: var(--radius-md); background: var(--ivory); color: var(--teal-dark); box-shadow: none;
  font: 700 var(--text-h3)/1 var(--font-sans); cursor: pointer;
}
.oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#screen-l2, #tablet-binding) .dock-keypad-grid .keypad-btn.clear-btn { background: var(--ivory-canvas); color: var(--ink-muted); }
.oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#screen-l2, #tablet-binding) .dock-keypad-grid .keypad-btn.enter-btn { background: var(--teal); color: var(--ivory); }

/* 3. One primary and one secondary button. Both: 1 px brass border, the medium radius, the sans face; no double borders or heavy shadows.
   Primary (the one main action of a panel): 56 px. Secondary (Retry Audio, Hear these steps, Retry, Cancel, Switch Staff): 44 px. */
.oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#tablet-binding .primary-cta, #screen-l2 .dock-cta-btn, form[data-recovery-code-form] [data-issue-recovery-code]) {
  box-sizing: border-box; min-height: 56px; height: auto; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--gold); border-radius: var(--radius-md); background: var(--teal); color: var(--ivory); box-shadow: none;
  font: 800 var(--text-body)/1.2 var(--font-sans);
}
.oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(.btn-secondary:not(.btn-64), [data-checklist-speak], #pin-retry-audio-btn, #tablet-binding .dock-footer-links button) {
  box-sizing: border-box; min-height: 44px; min-width: 0; height: auto; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--gold); border-radius: var(--radius-md); background: var(--ivory); color: var(--teal); box-shadow: none;
  font: 700 var(--text-label)/1.2 var(--font-sans);
}

/* 4. /kiosk/unlock on the tablet: the header is one row (logo, HARLEY'S, controls) with no second band under it, and the two columns
   take the rest of the fixed view. 1280 x 800 fits without scrolling; at 1000 x 563 the workspace scrolls to the last control. */
@media (min-width: 768px) {
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) > .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); min-height: 0; margin: 0; padding: 0 var(--space-4);
  }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) > .shell-header.ops-entry-header > .ops-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) > .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]:has(#tablet-binding) > .shell-header.ops-entry-header > .shell-controls {
    grid-column: 3; grid-row: 1; justify-self: end; width: auto; margin: 0; flex-wrap: nowrap; gap: var(--space-2);
  }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) #tablet-binding .l2-right-dock { justify-content: flex-start; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) #tablet-binding #tablet-code-form { display: flex; flex-direction: column; gap: var(--space-2); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) #tablet-binding .dock-footer-links { margin-top: auto; }
}

/* 5. OA-1976 (the Owner, 2 Nov): the kiosk is fluid, not fixed-size. From 800 px, type, keys, slots and paddings scale with the window's width and height (clamp), so a 12 inch tablet
   looks like a tablet and every size from 800 x 560 to 1500 x 1024 fits without the page scrolling. Tap targets never go under 48 px. Keys reach the frozen 72 px and the main button the frozen 64 px at 768 px tall. */
@media (min-width: 800px) {
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#screen-l2, #tablet-binding) .dock-keypad-grid { grid-auto-rows: clamp(48px, calc(11.7vh - 18px), 72px); gap: clamp(4px, 1vh, 8px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#screen-l2, #tablet-binding) .dock-keypad-grid .keypad-btn { height: clamp(48px, calc(11.7vh - 18px), 72px); min-height: clamp(48px, calc(11.7vh - 18px), 72px); font-size: clamp(18px, 3vh, 24px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame :is(#tablet-binding .primary-cta, #screen-l2 .dock-cta-btn) { min-height: clamp(48px, 8vh, 64px); padding: 2px var(--space-2); font-size: clamp(14px, min(1.45vw, 2.25vh), 18px); line-height: 1.15; }
}

/* 6. OA-1952, OA-1976: /kiosk/unlock takes the same card, type, spacing and control look as the kiosk rail and profile card: no gold box round the page, left-aligned words,
   a one-card step banner, nothing scrolling inside. The code card takes the spare height with the slots sized to use it; the steps and the page's script are unchanged.
   Only one display of the code: the slots on the left; the dock's dots stay for the script and the form field but are out of sight. No monospace on a crew screen. */
@media (min-width: 800px) {
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) { --font-mono: var(--font-sans); background: var(--tok-fbf7ef); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) .shell-workspace { padding: 0; background: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding.operations-auth { border: 0; border-radius: 0; box-shadow: none; background: none; text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding > .kiosk-l2-split { grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 380px); background: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l2-left-wall { gap: clamp(6px, 1.4vh, 12px); padding: clamp(6px, 1.75vh, 14px) clamp(12px, 1.5vw, 16px); border: 0; background: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l2-right-dock { gap: clamp(5px, 1.25vh, 10px); padding: clamp(6px, 1.75vh, 14px) clamp(12px, 1.5vw, 16px); border: 0; border-left: 1px solid var(--gold); background: var(--ivory); }
  /* The step banner. A state that needs attention keeps its colour; a step in hand does not shout. */
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l2-instruction-banner { flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; padding: clamp(5px, 1.25vh, 10px) clamp(10px, 1.2vw, 14px); border: 1px solid var(--gold); border-left-width: 4px; border-radius: 14px; box-shadow: none; font: inherit; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l2-instruction-banner.m-banner-warn { background: var(--ivory) !important; border-color: var(--gold) !important; color: var(--ink) !important; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .tablet-banner-copy { flex: 1 1 auto; gap: 2px; text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .tablet-banner-kicker { font: 700 clamp(11px, 1.5vh, 13px)/1.2 var(--font-sans); letter-spacing: 0.06em; color: var(--brass-shadow); text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-state { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 600 clamp(17px, 2.5vh, 26px)/1.1 var(--font-serif); color: var(--ink); text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step-sub { margin: 0; font: 400 clamp(12.5px, 1.75vh, 18px)/1.3 var(--font-sans); color: var(--ink-muted); text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .m-count { padding: 4px 12px; border: 0; font: 700 12px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; }
  /* Cards: as the profile card. What happens next and Tries left are one row each under the code, as the signed mock draws them. */
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step1-cards { gap: clamp(6px, 1.4vh, 12px); min-height: 0; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .tablet-meta-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(6px, 1.4vh, 12px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l1-card { gap: clamp(2px, .75vh, 8px); padding: clamp(5px, 1.5vh, 14px) clamp(10px, 1.2vw, 14px); border: 1px solid var(--gold); border-radius: 16px; background: var(--ivory); box-shadow: none; text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-code-card { flex: 1 1 auto; min-height: 0; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step2-card { flex: 1 1 auto; display: flex; flex-direction: column; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step2-card[hidden] { display: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step2-card .l1-card { flex: 1 1 auto; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l1-card-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l1-card-title { min-width: 0; margin: 0; padding: 0; font: 600 clamp(16px, 2.5vh, 26px)/1.1 var(--font-serif); color: var(--ink); text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .l1-badge { flex: none; min-height: 0; padding: 3px 10px; border: 0; border-radius: 999px; font: 700 12px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding :is(.tablet-card-body, .tablet-card-note) { margin: 0; font: 400 clamp(12.5px, 1.75vh, 18px)/1.3 var(--font-sans); color: var(--ink-muted); text-align: left; }
  /* The six slots and their hint sit in the middle of the code card and scale to its room. */
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .pin-slots { flex: none; align-items: center; gap: clamp(4px, .7vw, 10px); margin: auto 0 0; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-code-card .tablet-card-note { margin: clamp(4px, 1vh, 8px) 0 auto; text-align: center; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-badge-hint { text-align: center; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .pin-slot { box-sizing: border-box; flex: 0 1 auto; width: min(7.5vw, 14vh); height: min(9vw, 17vh); min-height: 48px; border: 1px solid var(--gold); border-radius: 14px; background: var(--ivory); color: var(--teal-dark); font: 700 clamp(20px, 5vh, 44px)/1 var(--font-sans); box-shadow: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .pin-slot:is(.active, .filled) { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--ivory); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .pin-slot.active { background: var(--aqua-light); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .pin-slot.m-slot-danger { border-color: var(--danger-red); background: var(--danger-bg); color: var(--danger); box-shadow: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .m-big { display: grid; place-items: center; flex: 1 1 auto; padding: 12px; border: 1px dashed var(--gold); border-radius: 14px; font-weight: 700; }
  /* The dock's head: as the roster's PIN dock. On this page the keys may grow past the frozen 72 px on a tall tablet, since no photo shares the column. */
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-person-header { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 0; border: 0; text-align: left; flex: none; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-avatar-large { box-sizing: border-box; flex: none; width: clamp(40px, 7.5vh, 60px); height: clamp(40px, 7.5vh, 60px); margin: 0; box-shadow: none; border: 1px solid var(--gold); border-radius: 50%; background: linear-gradient(160deg, var(--aqua-light), var(--aqua-mid)); color: var(--teal-dark); font: 700 clamp(15px, 2.5vh, 20px) var(--font-serif); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-person-meta { display: flex; flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; margin: 0; text-align: left; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-name-en { font: 600 clamp(18px, 3vh, 25px)/1.1 var(--font-serif); color: var(--ink); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-station-chip { min-height: 0; padding: 3px 10px; border: 0; font: 700 12px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-pin-control { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame[data-ops-frame]:has(#tablet-binding) #tablet-binding #tablet-code-form { flex: 1 1 auto; justify-content: center; gap: clamp(5px, 1.25vh, 10px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-keypad-grid { grid-auto-rows: clamp(48px, 9.4vh, 96px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-keypad-grid .keypad-btn { height: clamp(48px, 9.4vh, 96px); min-height: clamp(48px, 9.4vh, 96px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-footer-links { gap: clamp(5px, .6vw, 8px); margin: 0; flex-wrap: nowrap; }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .dock-footer-links button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 var(--space-1); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step2-actions { display: flex; flex-direction: column; gap: clamp(5px, 1.25vh, 10px); }
  .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding #tablet-step2-actions[hidden] { display: none; }
}

/* My Lounge on the counter tablet: the four summary cards, then the section panel, as the signed frames draw it
   (OPTION-1-ASK-148, SHELL-FINAL-FROZEN section 3). The person's shift and check-out is one slim row held at the foot of the stage;
   Check Out and Active Roster open upward from it as a sheet, so they are reachable on every tablet and the page itself never scrolls. */
@media (min-width: 768px) {
  /* When the Manager card does not fit in the kiosk Lounge, let the work area scroll so nothing is cut off at 1280x800 or 1000x563. */
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame:has(.kiosk-lounge) > .shell-layout {
    min-height: 0;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame:has(.kiosk-lounge) :is(#kiosk-section-body, .shell-workspace.l21-main-stage) {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .oneops-shell[data-shell-frame=kiosk] #kioskFrame .kiosk-lounge {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
@media (min-width:800px) {
  /* A 1000 px stage still holds the four summary cards in one row and the section cards two across. */
  #kioskFrame[data-kiosk-tablet] .kiosk-lounge > .kiosk-top-tiles {grid-template-columns:repeat(4,minmax(0,1fr))}
  #kioskFrame[data-kiosk-tablet] .kiosk-lounge > .ops-manager-card[data-k5-manager-card] {padding:var(--space-3);margin:0;gap:var(--space-2)}
  #kioskFrame[data-kiosk-tablet] .kiosk-lounge > .salon-card:has(.kiosk-section-grid) {padding:var(--space-3);margin:0}
  #kioskFrame[data-kiosk-tablet] .kiosk-lounge > .salon-card:has(.kiosk-section-grid) > .salon-card-head {height:auto;min-height:0;margin:0 0 var(--space-2);padding:0;border:0;align-items:center}
  #kioskFrame[data-kiosk-tablet] .kiosk-lounge > .salon-card:has(.kiosk-section-grid) > .salon-card-head h1 {margin:0;font-size:var(--text-h3);line-height:1.2}
  #kioskFrame[data-kiosk-tablet] .kiosk-lounge > .salon-card:has(.kiosk-section-grid) > .salon-card-head .body-subcopy {display:none}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);margin:0;padding:0;border:0}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-card {display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding:var(--space-3)}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-card .salon-card-head {height:auto;min-height:0;margin:0;padding:0;border:0;align-items:center;gap:var(--space-2)}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-card .salon-card-head h2 {margin:0;font-size:var(--text-lg);line-height:1.2}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-card .kiosk-status {flex:none;min-height:0;height:auto;margin:0;padding:var(--space-1) var(--space-3);font-size:var(--text-label);line-height:1.3}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-card .body-subcopy {margin:0;font-size:var(--text-label);line-height:1.35}
  #kioskFrame[data-kiosk-tablet] .kiosk-section-card .btn-64 {margin-top:auto}

  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row {position:sticky;bottom:0;z-index:9;background:var(--ivory);border-radius:var(--radius-md)}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-active-roster] {
    display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:var(--space-1) var(--space-2);
    padding:var(--space-2) var(--space-3)!important;margin:0;max-height:calc(100dvh - var(--space-8) * 4);overflow-y:auto!important;overscroll-behavior:contain;
  }
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row :is(.attendance-heading,[data-k2-checkout]) {display:contents!important}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row .attendance-heading > div {display:contents}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row .attendance-heading h2 {grid-column:1;grid-row:1;margin:0;font-size:var(--text-lg);line-height:1.2}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row .attendance-heading p {display:none}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-auto-checkin-banner],
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k2-no-open] {grid-column:1;grid-row:2;margin:0!important;padding:0;background:none;border:0;font:600 var(--text-label)/1.3 var(--font-sans)}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-read-aloud] {grid-column:2;grid-row:1 / span 2;min-height:calc(var(--space-6) * 2)!important;padding:0 var(--space-3)!important}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-roster-details] {grid-column:3;grid-row:1 / span 2}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k2-confirm-dialog],
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row button[data-k2-trigger] {grid-column:4;grid-row:1 / span 2}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row summary {min-height:calc(var(--space-7) * 2)!important;white-space:nowrap}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-roster-details] > summary {display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-3);cursor:pointer}
  /* Opened, either fold takes the whole width on its own line and the sheet grows upward. */
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row details[open] {grid-column:1 / -1;grid-row:auto}
  /* Check-ins waiting on this person stay in view, one at a time; the rest scroll inside the row. */
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-waiting] {grid-column:1 / -1;margin:0;padding:0;max-height:calc(var(--space-7) * 2 + var(--space-3));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-waiting]:empty {display:none}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-waiting] .dept-row {padding:var(--space-1) var(--space-2)!important;min-height:0!important;flex-wrap:nowrap}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-waiting] :is([data-checkin-time],[data-shift-duration]) {display:none}
  #kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-waiting] [data-k6-approve-btn] {max-width:calc(var(--space-8) * 6);white-space:normal;line-height:1.2;font-size:var(--text-label)}
}

/* Under 600 px high the bottom row gives up its padding, so the check-in waiting stays on screen (AC-14, final-2). */
@media (max-height:600px) {#kioskFrame[data-kiosk-tablet] .kiosk-shift-row [data-k1-active-roster] {padding-block:var(--space-1)!important;row-gap:0}}

/* Design 9.2: the tablet's Manager card keeps Hand over whole and on screen, with no page scroll. Tablet frame only. */
@media (min-width: 1000px) and (max-height: 820px) {
  #kioskFrame[data-kiosk-tablet] .l21-main-stage:has(> .acc-page) > .kiosk-top-tiles { display: none !important; }
  #kioskFrame[data-kiosk-tablet] .acc-page { gap: var(--space-2); }
  #kioskFrame[data-kiosk-tablet] .acc-page .salon-card { padding: var(--space-2) var(--space-3); }
  #kioskFrame[data-kiosk-tablet] .acc-page .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  #kioskFrame[data-kiosk-tablet] .acc-page .acc-field { flex-basis: calc(var(--space-8) * 3.5); }
}

html:lang(hi) .oneops-shell #kioskFrame#kioskFrame#kioskFrame #tablet-binding .tablet-banner-kicker {letter-spacing:0;text-transform:none}

/* K18, K19: a declined tablet. */
.tablet-declined[hidden] {display:none!important}
.tablet-declined {position:fixed;inset:var(--band-h,60px) 0 0 0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;background:var(--cream);text-align:center}
.tablet-declined h2 {margin:0;font:700 26px/1.3 var(--font-serif);color:var(--danger)}
.tablet-declined p {max-width:640px;margin:0;font:400 var(--text-task)/1.5 var(--font-sans);color:var(--ink)}
.tablet-declined button {min-height:48px;width:auto;padding:0 20px;border:0;border-radius:var(--radius-md);background:var(--teal);color:var(--ivory);font:700 16px var(--font-sans)}
/* The notice styler reads role=alert: this one is a whole page, not a notice. */
#tablet-binding #tablet-declined:not([hidden]) {display:flex!important;flex-direction:column;align-items:center;justify-content:center;margin:0;border:0!important;border-radius:0!important;background:var(--cream)!important;box-shadow:none}