/* Scalpia POS — app chrome (SHELL+KIT unit): top app bar, sync status, offline strip, navigation drawer, navigation bar,
   snackbar positions, operator menu, login (launch screen), device lock and PIN pad, first-run wizard, sync status page.
   Builds on web/ui/native.css (read its guide). Tokens: :root of style.css only.
   ONE phone breakpoint: max-width 699px. style.css still holds the legacy shell at max-width 650px (and the 651–900px
   icon rail); the phone block below restates it up to 699px so the drawer, app bar and navigation bar switch together
   with the forms and lists of the kit. ≥ 700px keeps the permanent dark sidebar (labelled rail up to 900px). */

/* ── 1. Top app bar: sync status only speaks up on exception ─────────────────────────────────────────────────────── */
.sync-status.is-ok{color:var(--text-muted)}
.sync-status.is-warn svg{color:var(--primary)}
.sync-status.is-error,.sync-status.is-error svg{color:var(--danger-fg)}
.sync-status.offline-pill svg{color:var(--warning-fg)}
.sync-status{position:relative}
.sync-count{position:absolute;top:var(--space-1);right:2px;min-width:18px;height:18px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--accent);color:var(--on-accent);font-size:var(--text-xs);line-height:18px;font-weight:var(--weight-bold);text-align:center}
.sync-status:has(.sync-count) .dot{display:none}
.sync-button{color:var(--text-muted)}
/* Page title: full name ≥ 700px, short name (nav.short.*) on a phone; the full one stays in aria-label/title (shell()). */
.topbar h1 .title-short{display:none}

/* Offline: a thin strip under the app bar, on every page (role=status, data-offline-bar). */
.offline-bar{display:flex;align-items:center;gap:var(--space-2);min-height:32px;padding:var(--space-1) var(--space-8);background:var(--warning-bg);color:var(--warning-fg);border-bottom:1px solid var(--border);font-size:var(--text-sm);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden}
.offline-bar svg{width:18px;height:18px;flex:none}
.offline-bar span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Operator: avatar pill (name on wide screens) and its Material menu (header, then rows with a leading icon). */
.operator-caret{display:inline-grid;place-items:center;color:var(--text-muted)}
.operator-caret svg{width:18px;height:18px}
.operator-menu{min-width:240px;padding:var(--space-2) 0;border:0;border-radius:var(--radius-sm);box-shadow:var(--shadow-2)}
.operator-menu-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4) var(--space-3);margin-bottom:var(--space-1);border-bottom:1px solid var(--border)}
.operator-menu-head .avatar{flex:none;width:var(--avatar);height:var(--avatar);font-size:var(--text-md)}
.operator-menu-head strong{display:block;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold);color:var(--text)}
.operator-menu-head small{display:block;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.operator-menu button{display:flex;align-items:center;gap:var(--space-4);min-height:var(--touch);padding:0 var(--space-4);border-radius:0;font-size:var(--text-lg);font-weight:var(--weight-regular)}
.operator-menu button svg{color:var(--text-muted)}
.operator-lock{color:var(--text-muted)}

/* Drawer header pieces (shown in the phone drawer; the wide sidebar keeps status, operator and lock at its bottom). */
.drawer-store{display:none}
.sidebar .online-offline.status-line{display:flex;font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--nav-text-muted)}
.sidebar .online-offline.is-ok .status-dot{background:var(--status-ok-on-dark)}
.sidebar .staff-avatar{width:100%;text-align:left;border-radius:0}
.sidebar-lock{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.sidebar-lock svg{width:20px;height:20px;flex:none}
@media(min-width:700px) and (max-width:900px){.sidebar-lock span{display:none}.sidebar .online-offline.status-line{display:none}}

/* ── 2. Phone shell (≤ 699px): modal drawer, 56px app bar, navigation bar, snackbar above it ────────────────────────── */
@media(max-width:699px){
 .layout{display:block}
 .layout .toggle-label,.layout.till-focus .toggle-label{display:none}
 .mobile-nav-shade{display:none}
 .layout.nav-open .mobile-nav-shade,.layout.till-focus.nav-open .mobile-nav-shade{display:block;position:fixed;inset:0;z-index:var(--z-shade);background:var(--scrim)}
 /* App bar */
 .topbar,html[data-view=pos] .topbar{position:sticky;top:0;z-index:16;height:var(--app-bar-h);padding:0 var(--space-1);gap:var(--space-1);background:var(--surface);border-bottom:1px solid var(--border)}
 .topbar-title{min-width:0;flex:1 1 auto;gap:var(--space-1)}
 .topbar-title>div{min-width:0}
 .topbar h1{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold);letter-spacing:0}
 .topbar .eyebrow{font-size:var(--text-xs)}
 .mobile-toggle,.layout.till-focus .mobile-toggle{display:grid;place-items:center;width:var(--touch);height:var(--touch);min-width:var(--touch);padding:0;border:0;border-radius:50%;background:transparent;color:var(--text)}
 .top-actions{flex-shrink:0;gap:0}
 .top-actions .store-pill,.top-actions .clock,.demo-badge{display:none}
 .top-actions>button.sync-status,.top-actions>button.sync-button{width:var(--touch);padding:0;font-size:var(--text-sm)}
 .top-actions>button:after,.top-actions>button.pill:after{content:none}
 /* Room for the title: refresh is merged into the sync icon (a tap syncs, app.mjs 'sync-status'); short page names. */
 .top-actions>button.sync-button{display:none}
 .topbar h1 .title-full{display:none}
 .topbar h1 .title-short{display:inline}
 .operator-name,.operator-caret{display:none}
 .operator-pill{min-width:var(--touch);min-height:var(--touch);padding:var(--space-1);border:0;border-radius:50%;background:transparent}
 .operator-lock{display:inline-grid;border:0;border-radius:50%;background:transparent}
 .offline-bar{position:sticky;top:var(--app-bar-h);z-index:15;padding:var(--space-1) var(--space-4)}
 html[data-view=pos] .offline-bar{position:static}
 /* Navigation drawer: light surface, header with the operator, pill-shaped items. */
 .sidebar{position:fixed;inset:0 auto 0 0;z-index:var(--z-sidebar);display:flex;flex-direction:column;width:min(320px,86vw);padding:0 var(--space-3) calc(var(--space-4) + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:var(--surface);color:var(--text);box-shadow:none;border-top-right-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);transform:translateX(-100%);transition:transform var(--dur) var(--ease)}
 .layout.nav-open .sidebar,.layout.till-focus.nav-open .sidebar{transform:none;box-shadow:var(--shadow-3)}
 .sidebar .brand{display:none}
 .sidebar .nav-label{display:block;height:auto;margin:0;overflow:visible;padding:var(--space-4) var(--space-4) var(--space-2);background:none;color:var(--text-muted);font-size:var(--text-sm);line-height:var(--leading-sm);letter-spacing:.5px}
 .sidebar .nav-button{position:static;flex-direction:row;justify-content:flex-start;min-height:var(--row-h);margin:0;padding:0 var(--space-4);gap:var(--space-3);border-radius:var(--radius-full);color:var(--text);font-size:var(--text-md);font-weight:var(--weight-semibold)}
 .sidebar .nav-button span{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;font-size:var(--text-md);line-height:var(--leading-md)}
 .sidebar .nav-button svg{width:var(--icon);height:var(--icon);opacity:1;color:var(--text-muted)}
 .sidebar .nav-button.active{background:var(--nav-indicator);color:var(--tonal-fg)}
 .sidebar .nav-button.active svg{color:var(--tonal-fg)}
 .sidebar .nav-button.active:after{display:none}
 .sidebar .nav-button:hover{background:transparent}
 .sidebar .nav-button.active:hover{background:var(--nav-indicator)}
 .sidebar .nav-button .badge-count{position:static;margin:0 0 0 auto;color:var(--text-inverse)}
 /* Drawer header = the sidebar bottom block moved first: operator (tap = switch), lock, store, sync status. */
 .sidebar-bottom.drawer-head{order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1) var(--space-2);margin:0 calc(-1 * var(--space-3)) var(--space-2);padding:calc(var(--space-5) + env(safe-area-inset-top)) var(--space-3) var(--space-4) var(--space-4);background:var(--drawer-head-bg);border-top-right-radius:var(--radius-lg)}
 .drawer-head .staff-avatar{grid-row:1;grid-column:1;display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);min-height:var(--row-h);margin:0;padding:0;border:0;background:transparent;color:var(--text);font-size:var(--text-md)}
 .drawer-head .staff-avatar .avatar{flex:none;width:48px;height:48px;font-size:var(--text-lg)}
 .drawer-head .staff-info{display:block;min-width:0}
 .drawer-head .staff-info strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
 .drawer-head .staff-role{margin-top:2px;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
 .drawer-head .sidebar-lock{grid-row:1;grid-column:2;width:var(--touch);min-width:var(--touch);height:var(--touch);min-height:var(--touch);margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text)}
 .drawer-head .sidebar-lock svg{width:var(--icon);height:var(--icon)}
 .drawer-head .sidebar-lock span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .drawer-store{grid-row:2;grid-column:1/-1;display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);min-width:0;font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--text)}
 .drawer-store svg{width:20px;height:20px;flex:none;color:var(--tonal-fg)}
 .drawer-store>span:first-of-type{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .drawer-demo{flex:none;padding:0 var(--space-2);border-radius:var(--radius-full);background:var(--accent);color:var(--on-accent);font-size:var(--text-xs);line-height:var(--leading-xs)}
 .sidebar .online-offline.status-line{grid-row:3;grid-column:1/-1;display:flex;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
 .sidebar .online-offline.is-ok .status-dot{background:var(--status-ok)}
 /* Navigation bar: icon inside a pill indicator, label under it; hidden while the till is on screen (tabBar()). */
 .tab-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-shade) - 1);min-height:var(--nav-bar-h);padding:0 0 env(safe-area-inset-bottom);border-top:0;background:var(--surface);box-shadow:0 -1px 0 var(--border)}
 .tab-button{position:relative;flex:1 1 0;min-width:0;min-height:var(--nav-bar-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2) 2px;border:0;border-radius:0;background:transparent;color:var(--text-muted);font-size:var(--text-xs);line-height:var(--leading-xs);font-weight:var(--weight-medium)}
 .tab-button span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .tab-button svg{width:var(--icon);height:var(--icon);padding:var(--space-1) var(--space-5);box-sizing:content-box;border-radius:var(--radius-full);transition:background var(--dur-fast)}
 .tab-button.active{color:var(--text);font-weight:var(--weight-bold)}
 .tab-button.active svg{background:var(--nav-indicator);color:var(--tonal-fg)}
 .tab-button.active:before{display:none}
 .tab-button:active svg{background:var(--state-press)}
 .tab-button .badge-count{position:absolute;top:var(--space-1);left:calc(50% + var(--space-2));margin:0;min-width:18px;padding:0 var(--space-1);border-radius:var(--radius-full);background:var(--danger);color:var(--text-inverse);font-size:var(--text-xs);line-height:18px;font-weight:var(--weight-bold);text-align:center}
 html:not([data-view=pos]) .workspace{padding-bottom:calc(var(--nav-bar-h) + env(safe-area-inset-bottom))}
 /* Snackbar: full width with 16px gutters, above the charge bar (till) or the navigation bar. */
 #toasts{left:var(--space-4);right:var(--space-4);bottom:calc(88px + env(safe-area-inset-bottom));max-width:none;gap:var(--space-2)}
 html:not([data-view=pos]) #toasts{bottom:calc(var(--nav-bar-h) + var(--space-3) + env(safe-area-inset-bottom))}
 /* Page actions: the primary stays, the others fold behind ⋮ (pageHeading()). */
 .page-heading{margin-bottom:var(--space-4)}
 .page-heading .actions{justify-content:flex-end}
 .with-more .actions>:not(.primary){display:none}
 .with-more.more-open .actions>:not(.primary){display:inline-flex}
 .page-heading.only-more:not(.more-open){float:right;margin:0 0 0 var(--space-2)}
 /* A page whose only page action is ⋮: it becomes the app bar's overflow button (right slot, the status/sync/avatar
    buttons shift one slot left) and opens a menu under the bar, so tabs and search keep the full width.
    The report page keeps its own placement (office.css). */
 .main:not(.is-report)>.page-heading.only-more{position:fixed;top:var(--space-1);right:var(--space-1);z-index:17;float:none;margin:0}
 .layout:has(.main:not(.is-report)>.page-heading.only-more) .top-actions{margin-right:var(--touch)}
 .main:not(.is-report)>.page-heading.only-more .page-more{color:var(--text)}
 .main:not(.is-report)>.page-heading.only-more.more-open .actions{position:fixed;top:calc(var(--app-bar-h) - var(--space-1));right:var(--space-2);display:flex;flex-direction:column;align-items:stretch;min-width:200px;max-width:calc(100vw - var(--space-8));padding:var(--space-2) 0;border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-3)}
 .main:not(.is-report)>.page-heading.only-more.more-open .actions>:not(.primary){align-items:center;justify-content:flex-start;min-height:var(--touch);padding:0 var(--space-4);border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text);font-size:var(--text-lg);font-weight:var(--weight-regular);text-align:left}
 /* Tabs as the first row of a page sit right under the app bar (no dead band above them). */
 .main:has(>.tabs:first-child),.main:not(.is-report):has(>.page-heading.only-more:first-child+.tabs){padding-top:0}
 .page-more{display:inline-grid;place-items:center;width:var(--touch);min-width:var(--touch);min-height:var(--touch);padding:0;border-radius:50%;color:var(--text-muted)}
 /* 651–699px only: content gutters and the till height under the 56px app bar (style.css says 72px there). */
 .main{padding-left:var(--space-4);padding-right:var(--space-4)}
}
@media(min-width:651px) and (max-width:699px){.workspace{grid-column:auto}html[data-view=pos] .pos-main{height:calc(100vh - var(--app-bar-h))}.subnav{padding:12px 16px 0}}
/* Full-screen till (till-focus, the tablet APK default): the menu button is a 48 px icon at every width, its label stays in
   aria-label (UXT c4 N2: a visible "Menu" spilled out of the round button over the page title). */
.layout.till-focus .toggle-label{display:none}

/* ── 3. Login: an app launch screen (logo, connect field, demo), language as a compact chip ──────────────────────── */
.login.launch{display:flex;min-height:100vh;min-height:100dvh;background:var(--surface)}
.launch .login-form{flex:1 1 auto;display:flex;justify-content:center;align-items:stretch;padding:0}
.launch-card{display:flex;flex-direction:column;width:100%;max-width:440px;padding:calc(var(--space-3) + env(safe-area-inset-top)) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom))}
.launch .login-language{display:flex;justify-content:flex-end;margin:0}
.launch-logo{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin:var(--space-10) 0 var(--space-8);text-align:center}
.launch-logo .brand-mark{width:72px;height:72px;padding-right:var(--space-1);border-radius:var(--radius-lg);font-size:var(--text-amount);font-weight:var(--weight-bold);box-shadow:var(--shadow-1)}
.launch-name{font-size:var(--text-2xl);line-height:var(--leading-2xl);font-weight:var(--weight-bold);letter-spacing:-1px;color:var(--text)}
.launch-name small{display:block;margin-top:2px;font-size:var(--text-xs);line-height:var(--leading-xs);font-weight:var(--weight-medium);letter-spacing:2px;text-transform:uppercase;color:var(--text-muted)}
.launch-card h2{margin:0 0 var(--space-1);font-size:var(--text-xl);line-height:var(--leading-xl);font-weight:var(--weight-semibold);letter-spacing:0}
.launch-card>p{margin:0 0 var(--space-6);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.launch-card form{display:flex;flex-direction:column;gap:var(--space-3)}
.launch-card .primary{min-height:var(--touch);margin-top:var(--space-2);padding:0 var(--space-6);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.launch-card .demo-entry{min-height:var(--touch);margin-top:var(--space-3);background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.launch-card .login-fine{margin-top:auto;padding-top:var(--space-8);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-muted);text-align:center}
@media(min-width:700px){
 .login.launch{background:var(--bg)}
 .launch .login-form{align-items:center;padding:var(--space-6)}
 .launch-card{padding:var(--space-6) var(--space-8) var(--space-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
 .launch-logo{margin:var(--space-4) 0 var(--space-6)}
}
/* SIGNUP-APK (spec self-signup): the APK launch screen signs in by account (e-mail, password with its eye, Forgot password?);
   under it the device code, the demo, « Create an account » and « Advanced » (server + owner key, folded). Tablet landscape:
   sign-in on the left, the other ways on the right. */
.launch-signin .app-signin{gap:var(--space-3)}
.launch-signin .language-picker{min-height:var(--touch)}
.launch-signin .language-picker select{min-height:calc(var(--touch) - 2px)}
.tf-box>.tf-reveal{flex:none;align-self:center;display:grid;place-items:center;width:var(--touch);min-height:var(--touch);margin-right:var(--space-1);padding:0;border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-muted)}
.tf-box>.tf-reveal[aria-pressed=true]{color:var(--primary)}
.launch-signin .app-signin-forgot{align-self:flex-end;display:inline-flex;align-items:center;min-height:var(--touch);margin-top:calc(-1 * var(--space-2));padding:0 var(--space-2);color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-semibold);text-decoration:none}
.launch-more{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border)}
.launch-alt{display:flex;flex-direction:column;gap:var(--space-2)}
.launch-alt-title{margin:0;font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);color:var(--text-muted)}
.launch-alt-actions{display:flex;flex-direction:column;gap:var(--space-2)}
.launch-card .launch-alt-button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--touch);font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.launch-links{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.launch-card .launch-link{flex:1 1 140px;display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--primary);font-size:var(--text-md);font-weight:var(--weight-semibold);text-decoration:none;text-align:center}
.launch-advanced{border-top:1px solid var(--border)}
.launch-advanced>summary{display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch);padding:var(--space-1) 0;list-style:none;cursor:pointer;color:var(--text-muted);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold)}
.launch-advanced>summary::-webkit-details-marker{display:none}
.launch-advanced>summary>span{flex:1 1 auto}
.launch-advanced-caret{transition:transform var(--dur-fast) var(--ease)}
.launch-advanced[open] .launch-advanced-caret{transform:rotate(180deg)}
.launch-advanced-help{margin:0 0 var(--space-3);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.launch-signin .login-fine{padding-top:var(--space-6)}
.signin-step{display:flex;flex-direction:column;gap:var(--space-3)}
.signin-intro{margin:0;font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.signin-intro+.signin-intro{margin-top:calc(-1 * var(--space-2))}
.signin-choices{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.login-fine .account-signup{display:inline-flex;align-items:center;min-height:var(--touch);color:var(--primary);font-weight:var(--weight-semibold)}
@media(min-width:1000px){
 .launch-card.launch-signin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"lang lang" "logo logo" "title more" "intro more" "form more" "fine fine";column-gap:var(--space-10);max-width:920px}
 .launch-signin>.login-language{grid-area:lang}
 .launch-signin>.launch-logo{grid-area:logo;margin:0 0 var(--space-6)}
 .launch-signin>h2{grid-area:title}
 .launch-signin>p{grid-area:intro}
 .launch-signin>.app-signin{grid-area:form;align-self:start}
 .launch-signin>.launch-more{grid-area:more;align-self:start;margin-top:0;padding:0 0 0 var(--space-10);border-top:0;border-left:1px solid var(--border)}
 .launch-signin>.login-fine{grid-area:fine}
}

/* Language selector: a compact outlined chip (globe, language, expand icon) on login, lock and Settings. */
.language-picker{position:relative;display:inline-flex;align-items:center;gap:var(--space-1);min-height:40px;padding:0 var(--space-2) 0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface);color:var(--text-muted);font-size:var(--text-md)}
.language-picker>svg{width:18px;height:18px;flex:none}
.language-picker select{min-height:38px;max-width:180px;padding:0 var(--space-6) 0 var(--space-1);border:0;border-radius:0;background:transparent;color:var(--text);font-size:var(--text-md);font-weight:var(--weight-medium);appearance:none;-webkit-appearance:none;cursor:pointer}
.language-picker .language-caret{position:absolute;right:var(--space-2);pointer-events:none}
.language-picker:focus-within{border-color:var(--primary)}

/* ── 4. Device lock: Loyverse-like PIN screen (store band, operators, dots, big keypad in the thumb zone) ─────────── */
.lock-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2)}
.lock-head h2{margin:0;min-width:0}
.lock-screen .lock-head .login-language{margin:0}
.lock-screen .login-art .status-line{display:inline-flex;color:var(--nav-text);font-size:var(--text-sm)}
.lock-screen .login-art .status-line.is-ok .status-dot{background:var(--status-ok-on-dark)}
.lock-screen .lock-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-3)}
.lock-screen .lock-links .demo-entry{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:auto;min-height:var(--touch);margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);background:transparent;color:var(--primary);font-size:var(--text-md);line-height:var(--leading-md);font-weight:var(--weight-semibold);text-align:center}
.lock-screen .lock-links svg{width:20px;height:20px;flex:none}
@media(max-width:699px){
 .lock-screen{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--surface)}
 .lock-screen .login-art{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--app-bar-h);max-height:none;height:auto;padding:env(safe-area-inset-top) var(--space-4) 0;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);overflow:visible}
 .lock-screen .login-art .brand{min-width:0;padding:0;gap:var(--space-2);color:var(--text);font-size:var(--text-xl);letter-spacing:-.5px}
 .lock-screen .login-art .brand>span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .lock-screen .login-art .brand small{margin-top:0;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px;color:var(--text-muted)}
 .lock-screen .lock-hello{display:none}
 .lock-screen .login-art .status-line{flex:0 1 auto;max-width:50%;color:var(--text-muted);font-size:var(--text-sm)}
 .lock-screen .login-art .status-line.is-ok .status-dot{background:var(--status-ok)}
 .lock-screen .login-form{flex:1 1 auto;display:flex;align-items:stretch;padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom))}
 .lock-screen .login-card{display:flex;flex-direction:column;width:100%;max-width:none}
 .lock-screen .lock-head h2{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
 .lock-screen .login-card>p{display:none}
 #staff-login-form{flex:1 1 auto;display:flex;flex-direction:column}
 .lock-screen .pin-pad{flex:1 1 auto}
 .lock-screen .pin-entry{flex:1 1 auto;display:flex;flex-direction:column}
 .lock-screen .pin-label{margin-top:auto}
 .lock-screen .pin-display{margin-bottom:auto}
 .lock-screen .pin-keys{margin-top:var(--space-3)}
 .lock-screen .pin-key{min-height:clamp(64px,8.6dvh,76px)}
}
@media(min-width:700px){.lock-screen .login-art .status-line{align-self:flex-start}}

/* PIN pad (lock screen, « Ganti karyawan », time clock): operator avatars, PIN dots, 3×4 keypad of borderless keys ≥ 64px. */
.pin-people{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-1) var(--space-2)}
.pin-person{min-height:88px;gap:var(--space-1);padding:var(--space-2) var(--space-1);border:0;border-radius:var(--radius-md);background:transparent;color:var(--text)}
.pin-person .avatar{width:48px;height:48px;font-size:var(--text-lg);transition:box-shadow var(--dur-fast),background var(--dur-fast)}
.pin-person-name{font-size:var(--text-md);font-weight:var(--weight-semibold)}
.pin-person.selected{background:var(--tonal-bg);color:var(--text)}
.pin-person.selected .avatar{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 2px var(--tonal-bg),0 0 0 4px var(--primary)}
.pin-person.selected small{color:var(--text-muted)}
.pin-person:active{background:var(--state-press)}
.pin-entry{gap:var(--space-1)}
.pin-label{text-align:center;font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.pin-display{position:relative;display:flex;align-items:center;justify-content:center;min-height:var(--touch);margin-bottom:var(--space-2)}
.pin-display .pin-input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:default}
.pin-dots{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full)}
.pin-dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pin-dot);transition:background var(--dur-fast),box-shadow var(--dur-fast)}
.pin-dot.on{background:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.pin-pad:has(>.error:not([hidden])) .pin-dot,.modal-body:has(>#modal-error:not([hidden])) .pin-dot{box-shadow:inset 0 0 0 2px var(--danger)}
.pin-pad:has(>.error:not([hidden])) .pin-dots,.modal-body:has(>#modal-error:not([hidden])) .pin-dots{animation:pin-shake .35s var(--ease)}
@keyframes pin-shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-pad>.error{text-align:center}
.pin-keys{gap:var(--space-2)}
.pin-key{display:flex;align-items:center;justify-content:center;min-height:64px;border:0;border-radius:var(--radius-md);background:var(--field-bg);color:var(--text);font-size:var(--text-2xl);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}
.pin-key:active{background:var(--state-press)}
.pin-key svg{width:28px;height:28px}
.pin-key.pin-erase{background:transparent;color:var(--text-muted)}
.pin-key.pin-ok{background:var(--tonal-bg);border:0;color:var(--tonal-fg)}
.pin-key.pin-ok.ready{background:var(--primary);color:var(--on-primary)}
.pin-demo{text-align:center}

/* ── 5. First-run wizard (onboarding.mjs): progress, radio rows, sticky Skip · Back · Next bar ─────────────────────── */
.wizard-progress{margin-bottom:var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-muted)}
.wizard-progress ol{gap:var(--space-1)}
.wizard-progress li{width:32px;height:4px;border-radius:var(--radius-full);background:var(--border)}
.wizard-progress li.done{background:var(--primary)}
.wizard-intro{font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text)}
.wizard-types{gap:0}
.wizard-types legend{padding:0;margin-bottom:var(--space-2);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--primary)}
.wizard-type{gap:var(--space-4);min-height:var(--row-h-2);padding:var(--space-3) var(--space-3);border:0;border-radius:0;background:transparent}
.wizard-type+.wizard-type{box-shadow:inset 0 1px 0 var(--border)}
.wizard-type:has(input:checked){border-radius:var(--radius-md);background:var(--tonal-bg);box-shadow:none}
.wizard-type:has(input:checked)+.wizard-type{box-shadow:none}
.wizard-type input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--primary)}
.wizard-type strong,.wizard-sample strong,.wizard-printer strong{font-size:var(--text-lg);line-height:var(--leading-lg);font-weight:var(--weight-semibold)}
.wizard-type small,.wizard-sample small,.wizard-printer small{font-size:var(--text-md);line-height:var(--leading-md)}
.wizard-fixed{padding:var(--space-3) var(--space-4);border:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--field-bg);box-shadow:inset 0 -1px 0 var(--field-line);font-size:var(--text-lg)}
.wizard-note{margin-top:var(--space-4)}
.modal-body:has(>.wizard){display:flex;flex-direction:column}
.wizard{flex:1 0 auto;display:flex;flex-direction:column}
.wizard>:nth-last-child(2){margin-bottom:var(--space-6)}
.wizard-actions{position:sticky;bottom:calc(-1 * var(--modal-pad,var(--space-6)));z-index:1;flex-wrap:nowrap;gap:var(--space-2);margin:auto calc(-1 * var(--modal-pad,var(--space-6))) calc(-1 * var(--modal-pad,var(--space-6)));padding:var(--space-3) var(--modal-pad,var(--space-6)) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface)}
.wizard-actions button{min-height:var(--touch);padding:0 var(--space-4)}
.wizard-actions .ghost{padding:0 var(--space-2)}
@media(max-width:699px){
 .wizard .form-grid{grid-template-columns:minmax(0,1fr)}
 .wizard-printer{flex-direction:column;align-items:stretch}
 .wizard-actions{flex-wrap:nowrap}
 .wizard-actions .primary{flex:1 1 auto;order:0;justify-content:center;min-width:96px}
}

/* ── 6. Sync status page (syncStatus()): rows with dividers instead of boxes ─────────────────────────────────────── */
.modal .metric-mini{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);margin:var(--space-4) 0;padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunken);border:1px solid var(--border);font-size:var(--text-md);color:var(--text-muted)}
.modal .metric-mini strong{font-size:var(--text-xl);line-height:var(--leading-xl);font-variant-numeric:tabular-nums;color:var(--text)}
.modal .sync-list{font-size:var(--text-md);line-height:var(--leading-md)}
.modal .sync-list .sync-command{margin:0;padding:var(--space-3) 0;border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--border)}

/* ── 7. Empty state, « show more » ───────────────────────────────────────────────────────────────────────────────── */
.empty{padding:var(--space-10) var(--space-4);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-muted)}
.empty-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto var(--space-4);border-radius:50%;background:var(--tonal-bg);color:var(--tonal-fg);font-size:var(--text-md)}
.empty-icon svg{width:32px;height:32px}
.empty h2,.empty h3{margin-bottom:var(--space-1);font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text)}
.show-more{justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-4);font-size:var(--text-md)}
.show-more .text-button{min-height:var(--touch);padding:0 var(--space-3);font-weight:var(--weight-semibold)}

/* Hover only where a pointer hovers. */
@media(hover:hover){
 .pin-display:has(.pin-input:focus-visible) .pin-dots{outline:3px solid var(--focus);outline-offset:2px}
 .operator-menu button:hover{background:var(--state-hover)}
 .language-picker:hover{background:var(--surface-sunken)}
 .pin-key:hover{background:color-mix(in srgb,var(--field-bg),var(--text) 6%)}
 .pin-key.pin-erase:hover{background:var(--state-hover)}
 .pin-person:hover{background:var(--state-hover)}
 .pin-person.selected:hover{background:var(--tonal-bg)}
 .lock-screen .lock-links .demo-entry:hover{background:var(--state-hover)}
}
@media(max-width:699px) and (hover:hover){.sidebar .nav-button:hover{background:var(--state-hover)}.tab-button:hover{background:transparent}}

/* DB-1: external dashboard card, using the native list and button tokens. */
.surface-dashboard .panel{display:grid;gap:var(--space-4);margin-inline:auto}
.surface-dashboard .list-group{margin:0}
.surface-dashboard .list-title,.surface-dashboard .list-subtitle{white-space:normal;overflow-wrap:anywhere}
.surface-dashboard .primary{min-height:var(--touch);justify-self:start}
.surface-dashboard [role=status]{margin:0;color:var(--text-muted);font-size:var(--text-md)}

/* DB-1b: browser Console — « Caisse ↗ » entry and the empty state of a role without Console page. */
.sidebar a.nav-button{display:flex;align-items:center;text-decoration:none}
.surface-dashboard a.primary{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-5);text-decoration:none}