/* Kettle Customs phone app shell. Scoped to body.production (the default on kettle),
   so the review build and the UI tests keep their old layout. */
body.production{--bg:#f2f3f1;--card:#fff;--ink:#15201d;--ink-2:#34403b;--muted:#66726c;--line:#e1e4e0;--brand:#14211e;--accent:#1f5c43;--accent-2:#2c7a58;--lime:#d6ed94;--warn:#a6551f;--danger:#a3402c;--radius:14px;--appbar-h:52px;--tabbar-h:60px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:none}
body.production :root{color:var(--ink)}
html:has(body.production){background:var(--bg)}
body.production *{-webkit-tap-highlight-color:transparent}
/* ---------- chrome that only the review build shows ---------- */
body.production .demo-banner,body.production .legal-footer,body.production .mode-tag,body.production .crumb-root,body.production .sidebar-footer,body.production .workspace-label,body.production .tm-demo{display:none!important}
body.production .connection-status.verified,body.production .connection-status:empty{display:none!important}
body.production .shell{display:block;min-height:100dvh}
body.production .main-shell{margin:0;width:100%;min-width:0}
/* ---------- app bar ---------- */
body.production .appbar{position:sticky;top:0;z-index:30;height:calc(var(--appbar-h) + var(--safe-top));padding:var(--safe-top) calc(8px + var(--safe-right)) 0 calc(8px + var(--safe-left));display:grid;grid-template-columns:52px 1fr 52px;align-items:center;background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
body.production .appbar .breadcrumb{grid-column:2;justify-content:center;font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.2px;gap:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.production .appbar .breadcrumb>span:last-child{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
body.production .appbar-back{grid-column:1;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--accent);padding:0}
body.production .appbar-back[hidden]{display:none}
body.production .appbar-back:active{background:#eef1ee}
body.production .topbar-right{grid-column:3;justify-content:flex-end;gap:0}
body.production .avatar-button{width:36px;height:36px;min-width:36px;min-height:36px;font-size:13px;font-weight:700;background:var(--brand);color:var(--lime);position:relative}
body.production .avatar-button:after{content:"";position:absolute;inset:-4px}
body.production .appbar .breadcrumb{position:relative}
/* ---------- content ---------- */
body.production main{max-width:760px;margin:0 auto;padding:16px calc(16px + var(--safe-right)) calc(var(--tabbar-h) + var(--safe-bottom) + 28px) calc(16px + var(--safe-left))}
body.production #content:focus{outline:none}
body.production #content.view-enter>*{animation:kc-enter .22s ease-out both}
@keyframes kc-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.production #content.view-enter>*{animation:none}}
body.production h1{font-size:26px;line-height:1.2;letter-spacing:-.6px;font-weight:700;margin:0 0 6px;color:var(--ink)}
body.production h2{font-size:18px;line-height:1.3;letter-spacing:-.2px;font-weight:650;color:var(--ink)}
body.production h3{font-size:16px;font-weight:650;color:var(--ink)}
body.production p{line-height:1.5}
body.production .eyebrow{font-size:12px;letter-spacing:.6px;font-weight:650;color:var(--muted);margin-bottom:6px}
body.production .subtitle{font-size:15px;color:var(--muted);max-width:none;line-height:1.45}
body.production .page-heading{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:4px 0 18px}
body.production .page-heading>.button,body.production .page-heading>div:last-child>.button{margin-top:0;align-self:flex-start;white-space:nowrap}
body.production .help,body.production .small-copy,body.production .stat-note{font-size:13px;color:var(--muted);line-height:1.45}
body.production .notice{font-size:14px;line-height:1.5;border-radius:12px;padding:12px 14px;background:#f4f3ea;border:1px solid #e7e4d2;color:#5b5739}
body.production .notice.info{background:#edf4ef;border-color:#d8e7dc;color:#2f5243}
body.production .notice.danger{background:#fbeee9;border-color:#f0d6cc;color:#8c3b26}
body.production .empty{border:1px dashed #cfd5cf;border-radius:var(--radius);padding:28px 18px;font-size:15px;color:var(--muted);background:#fafbf9}
body.production .empty strong{color:var(--ink);font-size:16px}
body.production .loading{padding:56px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--muted);font-size:15px}
/* ---------- cards, buttons, chips, forms ---------- */
body.production .panel,body.production .batch-card,body.production .side-card,body.production .stat,body.production .member-card,body.production .request-card,body.production .checkin-tag,body.production .checkin-row,body.production .checkin-here,body.production .map-stop{border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:0 1px 2px rgba(20,33,30,.04)}
body.production .panel{padding:18px}
body.production .panel p{font-size:14px;color:var(--ink-2)}
body.production .batch-card{padding:16px}
body.production .batch-card h3{font-size:16px}
body.production .batch-description,body.production .batch-meta,body.production .batch-bottom{font-size:13px}
body.production .batch-id{font-size:12px;letter-spacing:.4px;color:var(--muted)}
body.production .button{min-height:44px;border-radius:11px;padding:11px 16px;font-size:15px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink);gap:8px;touch-action:manipulation;transition:background .12s,transform .08s}
body.production .button:active{transform:scale(.98)}
body.production .button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
body.production .button.primary:hover{background:#184c37}
body.production .button.light{background:#eef2ee;border-color:#e0e6e0;color:var(--ink)}
body.production .button.danger{background:#fff4f1;border-color:#f1d5cc;color:var(--danger)}
body.production .button.small{min-height:40px;padding:8px 13px;font-size:14px}
body.production .button.block{width:100%}
body.production .button:disabled{opacity:.55}
body.production .chip{min-height:38px;padding:8px 14px;font-size:14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-2)}
body.production .chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
body.production .filter-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:14px}
body.production .filter-row::-webkit-scrollbar{display:none}
body.production .badge{font-size:11px;letter-spacing:.2px;padding:4px 8px;border-radius:999px;font-weight:600}
body.production .form-field label{font-size:14px;font-weight:600;color:var(--ink-2)}
body.production .form-field input,body.production .form-field select,body.production .form-field textarea,body.production input[type=search],body.production input[type=text],body.production input[type=email],body.production input[type=tel],body.production input[type=number],body.production select{font-size:16px;min-height:46px;border-radius:11px;border:1px solid #d5dbd5;background:#fff;color:var(--ink);padding:10px 12px}
body.production .form-field textarea{min-height:96px}
body.production .detail-list{font-size:14px}
body.production .stats{grid-template-columns:1fr 1fr;gap:10px}
body.production .stat{padding:14px;min-height:0}
body.production .stat-value{font-size:26px;font-weight:700}
body.production .section-header h2{font-size:18px}
body.production a.underlined,body.production .notice a{color:var(--accent);font-weight:600}
/* links that read as sentences, never as headings */
body.production .checkin-back{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:0}
body.production .checkin-back a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;background:#eef2ee;color:var(--accent);font-size:14px;font-weight:600}
body.production .checkin-page h1{font-size:26px}
body.production .small-copy a{color:var(--accent);font-weight:600}
/* ---------- bottom tab bar ---------- */
.tabbar{display:none}
body.production .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--tabbar-h) + var(--safe-bottom));padding:0 var(--safe-right) var(--safe-bottom) var(--safe-left);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:1px solid var(--line)}
body.production.signed-out .tabbar,body.production.signed-out .appbar,body.production.signed-out .sidebar{display:none!important}
body.production .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:transparent;color:#7b8580;font-size:11px;font-weight:600;letter-spacing:.1px;min-height:var(--tabbar-h);padding:6px 0 4px;touch-action:manipulation}
body.production .tab svg{width:25px;height:25px}
body.production .tab.active{color:var(--accent)}
body.production .tab.active .tab-icon{background:#e3efd0;color:var(--brand)}
body.production .tab-icon{display:grid;place-items:center;width:52px;height:30px;border-radius:999px;transition:background .15s}
body.production .tab:active .tab-icon{background:#eef1ee}
body.production .tab-badge{position:absolute;top:5px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
/* ---------- side navigation on a tablet or desktop ---------- */
body.production .sidebar{display:none}
@media (min-width:900px){
 body.production .sidebar{display:flex;width:232px;background:var(--brand);padding:28px 14px}
 body.production .main-shell{margin-left:232px;width:calc(100% - 232px)}
 body.production .tabbar{display:none}
 body.production main{padding-bottom:40px;max-width:980px}
 body.production nav button{color:#c4d0ca;font-size:14px;min-height:44px}
 body.production nav button.active{background:#24352f;color:#fff}
 body.production nav .nav-icon svg{width:20px;height:20px}
 body.production .nav-sep{height:1px;background:#2a3b35;margin:10px 8px}
 body.production .appbar{grid-template-columns:52px 1fr 52px}
}
/* ---------- bottom sheets (dialogs) ---------- */
@media (max-width:899px){
 body.production dialog{width:100%;max-width:100%;margin:auto 0 0;border:0;border-radius:20px 20px 0 0;max-height:88dvh;padding-bottom:var(--safe-bottom);box-shadow:0 -10px 40px rgba(20,33,30,.18)}
 body.production dialog[open]{animation:kc-sheet .24s cubic-bezier(.2,.8,.2,1)}
 body.production dialog:before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#d3d8d3;margin:8px auto 0}
}
@keyframes kc-sheet{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
body.production dialog::backdrop{background:rgba(15,24,21,.42)}
body.production .modal-head{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
body.production .modal-head h2{font-size:19px}
body.production .modal-head p{font-size:14px;color:var(--muted)}
body.production .modal-content{padding:16px 18px 22px}
body.production .close-button{width:40px;height:40px;font-size:22px;background:#eef1ee;color:var(--ink-2)}
/* ---------- toast, busy, spinner ---------- */
body.production #toast{top:calc(var(--appbar-h) + var(--safe-top) + 10px);bottom:auto;left:50%;right:auto;width:min(92vw,420px);transform:translateX(-50%) translateY(-12px);opacity:0;transition:transform .2s,opacity .2s;background:#1c2a26;color:#fff;border-radius:14px;padding:13px 16px;font-size:15px;font-weight:500;box-shadow:0 10px 30px rgba(15,24,21,.25);z-index:60}
body.production #toast.visible{transform:translateX(-50%) translateY(0);opacity:1}
body.production #toast.error{background:#8c3b26}
.busy{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;overflow:hidden;pointer-events:none}
.busy[hidden]{display:none}
body.production .busy{top:calc(var(--appbar-h) + var(--safe-top) - 1px)}
.busy span{position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,#2c7a58,transparent);animation:kc-busy 1s ease-in-out infinite}
@keyframes kc-busy{from{left:-40%}to{left:100%}}
body.is-busy,body.is-busy *{cursor:progress}
body.is-busy .button:not(:disabled),body.is-busy .tab,body.is-busy [data-action]{pointer-events:none}
body.is-busy .button[data-action]:focus{opacity:.7}
.spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(0,0,0,.12);border-top-color:currentColor;animation:kc-spin .7s linear infinite;vertical-align:-3px}
.button.primary .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.loading .spinner{width:28px;height:28px;color:#2c7a58}
@keyframes kc-spin{to{transform:rotate(360deg)}}
/* ---------- connection banner ---------- */
body.production .connection-status{position:sticky;top:calc(var(--appbar-h) + var(--safe-top));z-index:25;padding:8px 16px;font-size:14px;border:0;border-bottom:1px solid var(--line);background:#fff7e8;color:#6d4b17;display:flex;align-items:center;justify-content:space-between;gap:10px}
body.production .connection-status.checking{background:#f3f4f1;color:var(--muted)}
body.production .connection-status button{font-size:14px;font-weight:650;text-decoration:none;color:var(--accent);min-height:40px}
/* ---------- Home ---------- */
.home-hero{margin:6px 0 16px}.home-hero h1{margin:0}.home-date{margin:0 0 2px;font-size:14px;color:var(--muted,#66726c);font-weight:600}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.kpi{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;border:1px solid var(--line,#e1e4e0);border-radius:var(--radius,14px);min-height:84px;justify-content:center;touch-action:manipulation}
.kpi:active{background:#f6f8f6}
.kpi-value{font-size:30px;font-weight:700;letter-spacing:-.8px;line-height:1.05;color:var(--ink,#15201d)}
.kpi-label{font-size:14px;color:var(--muted,#66726c);font-weight:550}
.kpi.warn .kpi-value{color:var(--warn,#a6551f)}
.empty-card{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--radius,14px);background:#fff;border:1px solid var(--line,#e1e4e0);margin:0 0 18px}
.empty-card.compact{margin:0}
.empty-card strong{display:block;font-size:16px;color:var(--ink,#15201d)}
.empty-card p{margin:3px 0 0;font-size:14px;color:var(--muted,#66726c)}
.empty-icon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#eef2ee;color:var(--accent,#1f5c43);display:grid;place-items:center}
.group{margin:0 0 20px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 8px}
.group-head h2{font-size:13px!important;text-transform:uppercase;letter-spacing:.7px;color:var(--muted,#66726c)!important;font-weight:700!important;margin:0}
.group-head a{font-size:14px;font-weight:600;color:var(--accent,#1f5c43);min-height:32px;display:inline-flex;align-items:center}
.list{background:#fff;border:1px solid var(--line,#e1e4e0);border-radius:var(--radius,14px);overflow:hidden}
.list-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px 10px 14px;border:0;background:#fff;text-align:left;color:var(--ink,#15201d);font:inherit;touch-action:manipulation}
.list-row+.list-row{border-top:1px solid #edf0ec}
.list-row:active{background:#f4f6f4}
.list-icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:#eef2ee;color:var(--accent,#1f5c43);display:grid;place-items:center}
.list-icon svg{width:21px;height:21px}
.list-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.list-copy strong{font-size:16px;font-weight:600;line-height:1.3}
.list-copy small{font-size:13px;color:var(--muted,#66726c);line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.list-trail{flex:0 0 auto;font-size:13px;color:var(--muted,#66726c);font-weight:600;max-width:34%;text-align:right}
.list-chevron{flex:0 0 auto;color:#b4bcb7;display:grid;place-items:center}
.list-chevron svg{width:18px;height:18px}
.list-row.danger{color:var(--danger,#a3402c)}.list-row.danger .list-icon{background:#fbeee9;color:var(--danger,#a3402c)}
.me-card{display:flex;align-items:center;gap:14px;padding:16px;margin:4px 0 20px;background:var(--brand,#14211e);color:#fff;border-radius:var(--radius,14px)}
.me-card strong{display:block;font-size:18px}.me-card small{color:#c3d1ca;font-size:14px}.me-card div{flex:1;min-width:0}
.me-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--lime,#d6ed94);color:var(--brand,#14211e);display:grid;place-items:center;font-weight:800;font-size:17px}
.me-card .button{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.app-version{text-align:center;font-size:12px;color:var(--muted,#66726c);margin:8px 0 0}
/* ---------- sign in ---------- */
.signin{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;max-width:420px;margin:0 auto;padding:calc(24px + env(safe-area-inset-top,0px)) 20px calc(24px + env(safe-area-inset-bottom,0px))}
body.production.signed-out main{padding:0;max-width:none;background:linear-gradient(180deg,var(--brand,#14211e) 0,var(--brand,#14211e) 300px,var(--bg,#f2f3f1) 300px)}
.signin-brand{text-align:center;color:#fff;margin-bottom:22px}
.signin-brand img{border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.signin-brand h1{color:#fff!important;font-size:26px;margin:14px 0 2px}
.signin-brand p{margin:0;color:#c3d1ca;font-size:15px}
.signin-card{background:#fff;border-radius:18px;padding:22px 18px;box-shadow:0 10px 30px rgba(15,24,21,.12)}
.signin-card h2{margin:0 0 14px;font-size:20px}
.signin-card .form-field{margin-bottom:14px}
.signin-card input{width:100%}
.signin-link{display:block;text-align:center;margin-top:14px;font-size:15px;font-weight:600;color:var(--accent,#1f5c43);min-height:32px}
.signin-foot{text-align:center;font-size:14px;color:var(--muted,#66726c);margin:18px 8px 0;line-height:1.5}
.signin-message{margin:0 0 12px}
.state-screen{text-align:center;padding:48px 12px}.state-screen h1{font-size:22px}.state-screen p{color:var(--muted,#66726c)}
.state-icon{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fbeee9;color:var(--danger,#a3402c);font-size:26px;font-weight:800;margin-bottom:12px}
/* never scroll sideways */
body.production,body.production .shell,body.production .main-shell,body.production main,body.production #content{overflow-x:clip;overflow-y:visible}
body.production img,body.production svg,body.production canvas,body.production video{max-width:100%}
@media print{.tabbar,.appbar,.busy,#toast{display:none!important}}

/* Filter chip rows scroll sideways inside their own row instead of wrapping words. */
body.production .chip { white-space: nowrap; flex: 0 0 auto; }
body.production .stock-chip-row,
body.production .chip-row,
body.production .filter-row {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; max-width: 100%;
}
body.production .stock-chip-row::-webkit-scrollbar,
body.production .chip-row::-webkit-scrollbar,
body.production .filter-row::-webkit-scrollbar { display: none; }