/* JP kit, handoff 38. Phone only for now: every rule sits under html[data-ui-mode="phone"].
   Tokens are --jp-* custom properties so tablet and desktop can adopt them later by adding their own selector to
   the token block; nothing else needs to change. Motion uses transform and opacity only (agreed exception: the
   37 ring stroke). Reduce Motion turns every animation off and keeps instant states. App file: app/static/css/jp_kit.css
   is NOT added; this content replaces the matching rules in app/static/css/mobile_home.css (see spec section 6). */

/* 1. Tokens */
html[data-ui-mode="phone"]{
 --jp-navy:#1B2A4A;--jp-navy-2:#22345A;--jp-navy-3:#2C4170;--jp-gold:#F8C722;--jp-gold-d:#D9A514;
 --jp-cream:#F5EFE1;--jp-cream-2:#FBF7EE;--jp-sand:#F1EBDD;--jp-sand-2:#E7DECB;--jp-card:#FFFFFF;
 --jp-ink:#1B2A4A;--jp-ink-2:#4B5568;--jp-muted:#7D879C;--jp-on-navy:#C9D2E4;
 --jp-red:#B8322A;--jp-red-bg:#F4C7C3;--jp-amber:#7A4E00;--jp-amber-bg:#FBE3B0;--jp-green:#1E6B3A;--jp-green-bg:#CFEBD6;
 --jp-blue:#024F97;--jp-blue-2:#3A7BD5;--jp-kettle:#D9534F;--jp-herbort:#4F7CC0;--jp-other:#F0B90B;
 --jp-r-card:20px;--jp-r-row:14px;--jp-r-btn:14px;--jp-r-pill:999px;
 --jp-s1:4px;--jp-s2:8px;--jp-s3:12px;--jp-s4:16px;--jp-s5:20px;--jp-s6:24px;
 --jp-shadow:0 10px 26px -12px rgba(27,42,74,.30),0 1px 2px rgba(27,42,74,.06);
 --jp-shadow-low:0 3px 8px -5px rgba(27,42,74,.35),0 1px 1px rgba(27,42,74,.06);
 --jp-serif:ui-serif,"New York",Georgia,serif;
 --jp-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
 --jp-t-hero:600 30px/1.08 var(--jp-serif);--jp-t-title:600 26px/1.1 var(--jp-serif);
 --jp-t-h2:800 14px/1.25 var(--jp-sans);--jp-t-body:500 13.5px/1.35 var(--jp-sans);--jp-t-small:600 11.5px/1.3 var(--jp-sans);
 --jp-t-caps:800 11px/1.2 var(--jp-sans);
 --jp-ease:cubic-bezier(.2,.8,.2,1);--jp-spring:cubic-bezier(.3,1.45,.5,1);
 --jp-d-in:60ms;--jp-d-out:240ms;--jp-d-enter:220ms;--jp-d-sheet:340ms;
 --jp-tabh:calc(56px + var(--jp-sab,env(safe-area-inset-bottom)));
 touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
html[data-ui-mode="phone"] body.jp-page{margin:0;background:var(--jp-cream);color:var(--jp-ink);font:var(--jp-t-body);-webkit-font-smoothing:antialiased}

/* 2. Press feel: every tappable gets .jp-press (kit JS adds it to a, button, [role=button], label.jp-switch,
   .jp-row, .jp-card[href]). Pressed = scaled down by size, its shadow layer fades to the low shadow, a navy shade
   fades in. Release springs back. Only transform and opacity move. */
html[data-ui-mode="phone"] .jp-press{transform:var(--jp-rest-transform,translateZ(0));transition:transform var(--jp-d-out) var(--jp-spring);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[data-ui-mode="phone"] .jp-press.jp-static{position:relative}
html[data-ui-mode="phone"] .jp-press:not(.password-toggle)::after,html[data-ui-mode="phone"] .password-toggle.jp-press::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--jp-navy);opacity:0;pointer-events:none;transition:opacity var(--jp-d-out) ease-out}
/* No press transitions until the first touch. The kit marks tappables after first paint; WebKit then fades every
   new ::after shade (and the rest transform) in from its initial value, which showed as a dark flash on each page. */
html[data-ui-mode="phone"] .jp-press:not(.jp-armed),html[data-ui-mode="phone"] .jp-press:not(.jp-armed)::after,html[data-ui-mode="phone"] .jp-press:not(.jp-armed)::before{transition:none}
html[data-ui-mode="phone"] .jp-press.is-pressed{transform:var(--jp-rest-transform,translateZ(0)) scale(var(--jp-press,.97));transition-duration:var(--jp-d-in);transition-timing-function:ease-out}
html[data-ui-mode="phone"] .jp-press:not(.password-toggle).is-pressed::after,html[data-ui-mode="phone"] .password-toggle.jp-press.is-pressed::before{opacity:var(--jp-shade,.07);transition-duration:var(--jp-d-in)}
html[data-ui-mode="phone"] .jp-on-navy.jp-press::after,html[data-ui-mode="phone"] .jp-tabs .jp-press::after{background:#000;--jp-shade:.16}
/* Raised things carry two shadow layers: the low one is always there, the high one fades out while pressed. */
html[data-ui-mode="phone"] .jp-lift{box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] .jp-lift::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--jp-shadow);opacity:1;pointer-events:none;transition:opacity var(--jp-d-out) ease-out}
html[data-ui-mode="phone"] .jp-lift.is-pressed::before{opacity:0;transition-duration:var(--jp-d-in)}

/* 3. Page shell: compact navy header, cream body, the tab bar on every page */
html[data-ui-mode="phone"] .jp-scroll{position:absolute;inset:0 0 var(--jp-tabh) 0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
/* The rubber band above the page shows navy (continues the header), below it shows cream. .jp-main carries the cream. */
html[data-ui-mode="phone"] .jp-scroll{background:linear-gradient(var(--jp-navy) 50%,var(--jp-cream) 50%)}
html[data-ui-mode="phone"] .jp-main{position:relative;min-height:100%;background:var(--jp-cream)}
html[data-ui-mode="phone"] .jp-head{position:relative;padding:max(12px,calc(var(--jp-sat,env(safe-area-inset-top)) + 6px)) 16px 44px;color:var(--jp-cream-2);overflow:hidden;
 background:radial-gradient(120% 90% at 88% 100%,#3A4F82 0%,#22345A 45%,#1B2A4A 80%)}
html[data-ui-mode="phone"] .jp-head::before{content:"";position:absolute;inset:0;background:url(/static/phone36/kurbits.svg?v=44) 0 0/150px;opacity:.08;pointer-events:none}
html[data-ui-mode="phone"] .jp-head-bar{position:relative;display:flex;align-items:center;gap:8px;height:44px}
html[data-ui-mode="phone"] .jp-icon-btn{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.09);color:inherit;flex:none}
html[data-ui-mode="phone"] .jp-icon-btn svg{width:20px;height:20px}
html[data-ui-mode="phone"] .jp-head-bar .jp-spacer{flex:1}
html[data-ui-mode="phone"] .jp-back{margin-left:-4px}
html[data-ui-mode="phone"] .jp-back svg{width:22px;height:22px}
html[data-ui-mode="phone"] .jp-head h1{position:relative;margin:4px 0 0;font:var(--jp-t-title);letter-spacing:.2px;color:var(--jp-cream-2)}
html[data-ui-mode="phone"] .jp-head p{position:relative;margin:5px 0 0;font:var(--jp-t-small);font-size:12.5px;color:var(--jp-on-navy)}
html[data-ui-mode="phone"] .jp-head p b{color:var(--jp-gold);font-weight:800}
html[data-ui-mode="phone"] .jp-body{position:relative;margin-top:-30px;padding:0 14px 18px}
html[data-ui-mode="phone"] .jp-tabs{box-sizing:border-box;position:fixed;z-index:40;left:0;right:0;bottom:0;height:var(--jp-tabh);padding:6px 4px var(--jp-sab,env(safe-area-inset-bottom));background:var(--jp-navy);border-top:1px solid #2C3D63;display:flex;box-shadow:0 -4px 14px rgba(27,42,74,.10)}
html[data-ui-mode="phone"] .jp-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font:600 10.5px/1 var(--jp-sans);color:#AEB8CC;min-height:44px;text-decoration:none;border-radius:14px;background:none;padding:0;box-shadow:none;letter-spacing:normal;text-transform:none}
html[data-ui-mode="phone"] .jp-tab .jp-tab-ico{position:relative;display:grid;place-items:center;width:46px;height:32px;border-radius:16px}
html[data-ui-mode="phone"] .jp-tab .jp-tab-ico svg{width:22px;height:22px}
html[data-ui-mode="phone"] .jp-tab[aria-current]{color:var(--jp-gold)}
html[data-ui-mode="phone"] .jp-tab[aria-current] .jp-tab-ico{background:var(--jp-gold);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-tab .jp-badge{position:absolute;top:-3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--jp-blue-2);color:#fff;font:800 10px/14px var(--jp-sans);text-align:center;border:2px solid var(--jp-navy)}
html[data-ui-mode="phone"] .jp-tab .jp-badge.is-alert{background:var(--jp-red)}

/* 4. Components */
html[data-ui-mode="phone"] :is(.jp-btn,.jp-icon-btn,.jp-tab,.jp-seg button,.jp-stepper button,button.jp-row){border:0;-webkit-appearance:none;appearance:none;cursor:pointer}
html[data-ui-mode="phone"] button.jp-row{width:calc(100% + 12px);background:none;text-align:left;font:inherit;color:inherit}
html[data-ui-mode="phone"] .jp-card{display:block;position:relative;background:var(--jp-card);border-radius:var(--jp-r-card);padding:14px;margin:0 0 10px;color:inherit;text-decoration:none}
html[data-ui-mode="phone"] .jp-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;font:var(--jp-t-caps);letter-spacing:.8px;color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-card-h span{font:var(--jp-t-small);letter-spacing:.2px;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-list{margin:0;padding:0;list-style:none}
html[data-ui-mode="phone"] .jp-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 11px;min-height:54px;padding:8px 10px;margin:0 -6px;border-radius:var(--jp-r-row);color:inherit;text-decoration:none}
html[data-ui-mode="phone"] .jp-row + .jp-row{box-shadow:0 -1px 0 var(--jp-sand)}
html[data-ui-mode="phone"] .jp-row.is-pressed + .jp-row,html[data-ui-mode="phone"] .jp-row.is-pressed{box-shadow:none}
html[data-ui-mode="phone"] .jp-row b{display:block;font-size:14px;font-weight:700}
html[data-ui-mode="phone"] .jp-row small{display:block;font:var(--jp-t-small);color:var(--jp-muted);margin-top:2px}
html[data-ui-mode="phone"] .jp-row .jp-end{text-align:right;font-weight:800;font-size:13.5px;font-variant-numeric:tabular-nums}
html[data-ui-mode="phone"] .jp-row .jp-end small{font-weight:600}
html[data-ui-mode="phone"] .jp-row .jp-chev{width:16px;height:16px;color:#B5BCCB;margin-left:4px;vertical-align:-3px}
html[data-ui-mode="phone"] .jp-code{min-width:52px;padding:5px 7px;border-radius:8px;background:var(--jp-navy);color:#fff;font:800 11px/1.1 var(--jp-sans);text-align:center}
html[data-ui-mode="phone"] .jp-code.is-kettle{box-shadow:inset 3px 0 0 var(--jp-kettle)}html[data-ui-mode="phone"] .jp-code.is-herbort{box-shadow:inset 3px 0 0 var(--jp-herbort)}
html[data-ui-mode="phone"] .jp-dot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--jp-sand);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-dot svg{width:19px;height:19px}
html[data-ui-mode="phone"] .jp-pill{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--jp-r-pill);font:700 11.5px/1 var(--jp-sans);white-space:nowrap;text-decoration:none;background:var(--jp-sand);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-pill.is-hold,html[data-ui-mode="phone"] .jp-pill.is-bad{background:var(--jp-red-bg);color:#8A1C14}
html[data-ui-mode="phone"] .jp-pill.is-warn{background:var(--jp-amber-bg);color:var(--jp-amber)}
html[data-ui-mode="phone"] .jp-pill.is-ok{background:var(--jp-green-bg);color:var(--jp-green)}
html[data-ui-mode="phone"] .jp-pill.is-info{background:#DCE7F7;color:var(--jp-blue)}
html[data-ui-mode="phone"] .jp-seg{display:flex;gap:4px;padding:4px;margin:0 0 10px;border-radius:16px;background:var(--jp-sand);overflow-x:auto;scrollbar-width:none}
html[data-ui-mode="phone"] .jp-seg::-webkit-scrollbar{display:none}
html[data-ui-mode="phone"] .jp-seg a,html[data-ui-mode="phone"] .jp-seg button{flex:1 0 auto;min-height:36px;padding:0 13px;border-radius:12px;display:grid;place-items:center;font:700 12.5px/1 var(--jp-sans);color:var(--jp-ink-2);text-decoration:none;white-space:nowrap}
html[data-ui-mode="phone"] .jp-seg [aria-current],html[data-ui-mode="phone"] .jp-seg [aria-pressed="true"]{background:var(--jp-card);color:var(--jp-navy);box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] .jp-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 18px;border-radius:var(--jp-r-btn);font:800 14.5px/1 var(--jp-sans);text-decoration:none;background:var(--jp-gold);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-btn.is-block{display:flex;width:100%}
html[data-ui-mode="phone"] .jp-btn svg{width:20px;height:20px;flex:none}
html[data-ui-mode="phone"] .jp-btn.is-quiet{background:var(--jp-sand);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-btn.is-navy{background:var(--jp-navy);color:#fff}
html[data-ui-mode="phone"] .jp-field{display:block;margin:0 0 10px}
html[data-ui-mode="phone"] .jp-field span{display:block;font:var(--jp-t-caps);letter-spacing:.6px;color:var(--jp-muted);margin:0 0 5px 2px}
html[data-ui-mode="phone"] .jp-field input,html[data-ui-mode="phone"] .jp-field textarea,html[data-ui-mode="phone"] .jp-search input{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:14px;background:var(--jp-cream-2);box-shadow:inset 0 0 0 1.5px var(--jp-sand-2);font:600 16px/1.2 var(--jp-sans);color:var(--jp-navy);-webkit-appearance:none;appearance:none}
html[data-ui-mode="phone"] .jp-field input:focus,html[data-ui-mode="phone"] .jp-search input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--jp-gold)}
html[data-ui-mode="phone"] .jp-search{position:relative;display:block;margin:0 0 10px}
html[data-ui-mode="phone"] .jp-search input{padding-left:40px;background:var(--jp-card);box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] .jp-search svg{position:absolute;left:13px;top:14px;width:20px;height:20px;color:var(--jp-muted)}
/* Switch: a real checkbox, as the 37 Remember me chip */
html[data-ui-mode="phone"] .jp-switch{position:relative;display:inline-block;flex:none;width:44px;height:26px;border-radius:13px;background:#DCD2BD}
html[data-ui-mode="phone"] .jp-switch input{position:absolute;inset:-9px;width:auto;height:auto;margin:0;opacity:0;z-index:1;cursor:pointer}
html[data-ui-mode="phone"] .jp-switch::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--jp-navy);opacity:0;transition:opacity .16s ease-out}
html[data-ui-mode="phone"] .jp-switch i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#FFFDF8;box-shadow:0 1px 2px rgba(27,42,74,.3);transition:transform .24s var(--jp-spring)}
html[data-ui-mode="phone"] .jp-switch i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--jp-gold);opacity:0;transition:opacity .16s ease-out}
html[data-ui-mode="phone"] .jp-switch:has(input:checked)::before,html[data-ui-mode="phone"] .jp-switch:has(input:checked) i::after{opacity:1}
html[data-ui-mode="phone"] .jp-switch:has(input:checked) i{transform:translateX(18px)}
html[data-ui-mode="phone"] .jp-switch:has(input:focus-visible){outline:3px solid var(--jp-gold);outline-offset:2px}
/* Stepper */
html[data-ui-mode="phone"] .jp-stepper{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:16px;background:var(--jp-sand)}
html[data-ui-mode="phone"] .jp-stepper button{width:44px;height:44px;border-radius:12px;background:var(--jp-card);font:800 20px/1 var(--jp-sans);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-stepper output{min-width:64px;text-align:center;font:800 18px/1 var(--jp-sans);font-variant-numeric:tabular-nums}
/* Check: drawn with two strokes that grow (scaleX), not a stroke animation */
html[data-ui-mode="phone"] .jp-check{position:relative;flex:none;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 2px #CBBFA6;background:var(--jp-card)}
html[data-ui-mode="phone"] .jp-check::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--jp-green);opacity:0;transform:scale(.6);transition:opacity .14s ease-out,transform .3s var(--jp-spring)}
html[data-ui-mode="phone"] .jp-check i,html[data-ui-mode="phone"] .jp-check i::after{position:absolute;height:3px;border-radius:2px;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
html[data-ui-mode="phone"] .jp-check i{left:8px;top:15px;width:7px;rotate:45deg;transition:transform .09s ease-in .08s}
html[data-ui-mode="phone"] .jp-check i::after{content:"";left:5px;top:-6px;width:13px;rotate:-90deg;transition:transform .14s ease-out}
html[data-ui-mode="phone"] .is-done .jp-check::before{opacity:1;transform:none}
html[data-ui-mode="phone"] .is-done .jp-check i{transform:scaleX(1);transition-delay:.06s}
html[data-ui-mode="phone"] .is-done .jp-check i::after{transform:scaleX(1);transition-delay:.15s}
html[data-ui-mode="phone"] .is-done > div b{opacity:.55}
/* Bottom sheet (dialog) */
html[data-ui-mode="phone"] dialog.jp-sheet{position:fixed;inset:auto 0 0 0;width:auto;max-width:none;max-height:86dvh;margin:0;padding:8px 16px calc(16px + var(--jp-sab,env(safe-area-inset-bottom)));border:0;border-radius:24px 24px 0 0;background:var(--jp-cream-2);color:var(--jp-ink);overflow:auto;transform:translateY(105%);transition:transform var(--jp-d-sheet) var(--jp-spring),display var(--jp-d-sheet) allow-discrete,overlay var(--jp-d-sheet) allow-discrete}
html[data-ui-mode="phone"] dialog.jp-sheet[open]{transform:none}
@starting-style{html[data-ui-mode="phone"] dialog.jp-sheet[open]{transform:translateY(105%)}}
html[data-ui-mode="phone"] dialog.jp-sheet::backdrop{background:rgba(16,24,42,.42);opacity:0;transition:opacity .24s ease-out,display .24s allow-discrete,overlay .24s allow-discrete}
html[data-ui-mode="phone"] dialog.jp-sheet[open]::backdrop{opacity:1}
@starting-style{html[data-ui-mode="phone"] dialog.jp-sheet[open]::backdrop{opacity:0}}
html[data-ui-mode="phone"] .jp-grab{position:relative;display:block;width:40px;height:5px;margin:2px auto 10px;border-radius:3px;background:#D3C8B2;touch-action:none}
html[data-ui-mode="phone"] .jp-grab::before{content:"";position:absolute;inset:-12px -70px}
html[data-ui-mode="phone"] .jp-sheet h2{outline:0;touch-action:none;margin:0 0 10px;font:var(--jp-t-title);font-size:22px}
/* Toast */
html[data-ui-mode="phone"] .jp-toast{position:fixed;z-index:60;left:16px;right:16px;bottom:calc(var(--jp-tabh) + 12px);display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--jp-navy);color:#fff;font:700 13.5px/1.3 var(--jp-sans);box-shadow:var(--jp-shadow);opacity:0;transform:translateY(14px);transition:opacity .2s ease-out,transform .32s var(--jp-spring);pointer-events:none}
html[data-ui-mode="phone"] .jp-toast.is-on{opacity:1;transform:none}
html[data-ui-mode="phone"] .jp-toast img{width:22px;height:22px}
/* Skeleton */
html[data-ui-mode="phone"] .jp-skel{position:relative;overflow:hidden;border-radius:10px;background:var(--jp-sand);color:transparent}
html[data-ui-mode="phone"] .jp-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:jp-shimmer 1.2s ease-in-out infinite}
/* Empty state */
html[data-ui-mode="phone"] .jp-empty{text-align:center;padding:22px 12px 16px;color:var(--jp-ink-2);font-weight:600}
html[data-ui-mode="phone"] .jp-empty img{width:64px;height:auto;opacity:.9;margin-bottom:6px}
html[data-ui-mode="phone"] .jp-empty b{display:block;color:var(--jp-navy);font:var(--jp-t-h2);margin-bottom:3px}
/* Progress bar (the 37 fill approach) */
html[data-ui-mode="phone"] .jp-bar{height:6px;border-radius:3px;background:#EEE7D7;overflow:hidden}
html[data-ui-mode="phone"] .jp-bar i{display:block;width:100%;height:100%;border-radius:3px;background:linear-gradient(90deg,#F8C722,#E0A50E);transform-origin:left}
/* Pull to refresh: the JP coin drops in over the header centre as the page is pulled, spins while it reloads */
html[data-ui-mode="phone"] .jp-ptr{position:fixed;z-index:45;left:50%;top:calc(var(--jp-sat,env(safe-area-inset-top)) + 2px);width:34px;height:34px;margin-left:-17px;opacity:0;pointer-events:none}
html[data-ui-mode="phone"] .jp-ptr img{width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
html[data-ui-mode="phone"] .jp-ptr.is-spinning img{animation:jp-coin .7s linear infinite}

/* 5. Motion (only with no-preference; Reduce Motion gets the end states) */
@media (prefers-reduced-motion:no-preference){
html[data-ui-mode="phone"] .jp-enter{animation:jp-rise var(--jp-d-enter) var(--jp-ease) backwards}
html[data-ui-mode="phone"] .jp-stagger > *{animation:jp-rise .32s var(--jp-ease) backwards;animation-delay:calc(min(var(--i,0),8) * 32ms + 60ms)}
html[data-ui-mode="phone"] [data-fill] .jp-bar i{animation:jp-bar .8s var(--jp-ease) calc(.2s + var(--i,0) * .07s) both}
html[data-ui-mode="phone"] .jp-tab.is-bounce .jp-tab-ico{animation:jp-bounce .34s var(--jp-spring)}
}
@keyframes jp-rise{from{opacity:0;translate:0 10px}}
@keyframes jp-bar{from{transform:scaleX(0)}}
@keyframes jp-bounce{0%{transform:scale(.9)}55%{transform:scale(1.14)}100%{transform:none}}
@keyframes jp-shimmer{to{transform:translateX(100%)}}
@keyframes jp-coin{to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){
html[data-ui-mode="phone"] :is(.jp-press,.jp-lift,.jp-switch,.jp-switch i,.jp-check,.jp-check i,dialog.jp-sheet,.jp-toast,.jp-ptr),html[data-ui-mode="phone"] :is(.jp-press,.jp-lift,.jp-switch,.jp-switch i,.jp-check)::before,html[data-ui-mode="phone"] :is(.jp-press,.jp-switch i,.jp-check i)::after,html[data-ui-mode="phone"] dialog.jp-sheet::backdrop{animation:none;transition:none}
html[data-ui-mode="phone"] .jp-press,html[data-ui-mode="phone"] .jp-press.is-pressed{transform:var(--jp-rest-transform,none);transition:none}
html[data-ui-mode="phone"] .jp-press.is-pressed::after,html[data-ui-mode="phone"] .jp-press.is-pressed::before{transition:none}
html[data-ui-mode="phone"] .jp-skel::after,html[data-ui-mode="phone"] .jp-ptr.is-spinning img{animation:none}
}

html[data-ui-mode="phone"].jp-nav-pending .shell-progress{display:block;position:fixed;top:max(11px,var(--jp-sat,env(safe-area-inset-top,0px)));left:0;right:0;margin:0;z-index:9000;opacity:1;background:var(--jp-gold);transform-origin:left;animation:jp-bar 1.2s ease-in-out infinite}
/* Shared shell integration. Legacy content remains exclusive to its existing profiles. */
html:not([data-ui-mode="phone"]) .jp-phone-only {display:none}
html[data-ui-mode="phone"] {background:var(--jp-navy);overscroll-behavior:none}
/* A real fixed edge survives zero iOS insets. WebKit treats <=10px as a thin border. */
html[data-ui-mode="phone"] .jp-phone-status-edge {position:fixed;inset:0 0 auto;height:max(11px,var(--jp-sat,env(safe-area-inset-top,0px)));background:var(--jp-navy);z-index:9001;pointer-events:none}
html[data-ui-mode="phone"] body.jpf-app:not(.phone-home-page) {box-sizing:border-box;min-height:100dvh;background:var(--jp-cream);padding-bottom:var(--jp-tabh);color:var(--jp-ink);font:var(--jp-t-body);margin:0}
html[data-ui-mode="phone"] :is(.app-topbar,.sidebar,.command-bar-fab,.tablet-header) {display:none}
html[data-ui-mode="phone"] .layout {display:block;min-width:0;min-height:0;margin:0;padding:0;gap:0}
html[data-ui-mode="phone"] :is(#shellContent,#shellPageContent) {padding:0;margin:0;width:100%;min-width:0;max-width:none}
html[data-ui-mode="phone"] #shellPageContent[data-phone-tuned] > :not(.jp-phone-only,.module-tabs,.flashes,.offline-mode-banner,.shadow-mode-banner,.system-warning-banner,script,link,style) {display:none}
html[data-ui-mode="phone"] #shellPageContent > .module-tabs {margin:-25px 14px 10px;position:relative;flex-wrap:nowrap;border:0;padding:4px;background:var(--jp-sand);border-radius:15px;overflow-x:auto;max-width:calc(100% - 28px)}
html[data-ui-mode="phone"] #shellPageContent > .module-tabs a {min-height:36px;padding:0 13px;border:0;border-radius:12px;background:none;font:700 12.5px/1 var(--jp-sans);color:var(--jp-ink-2);white-space:nowrap;display:grid;place-items:center}
html[data-ui-mode="phone"] #shellPageContent > .module-tabs a[aria-current] {background:var(--jp-card);color:var(--jp-navy);box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] #shellPageContent > .module-tabs ~ .jp-body {margin-top:0}
html[data-ui-mode="phone"] .jp-phone-view *,html[data-ui-mode="phone"] .jp-sheet *,html[data-ui-mode="phone"] .jp-tabs * {box-sizing:border-box}
html[data-ui-mode="phone"] .jp-sheet-heading {display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:10px}
html[data-ui-mode="phone"] .jp-floor-hero {padding-bottom:64px;min-height:200px;box-sizing:border-box}
html[data-ui-mode="phone"] .jp-floor-hero h1 {font:var(--jp-t-hero);margin-top:8px}
html[data-ui-mode="phone"] .jp-floor-hero p {max-width:55%}
html[data-ui-mode="phone"] .jp-floor-horse {position:absolute;right:6px;bottom:44px;height:132px;transform-origin:40% 100%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));pointer-events:none}
html[data-ui-mode="phone"] .jp-brand {display:flex;align-items:center;gap:9px}
html[data-ui-mode="phone"] .jp-brand img {width:32px;height:32px}
html[data-ui-mode="phone"] .jp-brand b {font-size:19px;letter-spacing:.6px}
html[data-ui-mode="phone"] .jp-sheet-heading h2 {margin:0;min-width:0}
html[data-ui-mode="phone"] .jp-sheet-heading .jp-icon-btn {background:var(--jp-sand);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-sheet form {margin:0}
html[data-ui-mode="phone"] .jp-row > div {min-width:0;overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp-row .jp-end {max-width:110px;overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp-row[hidden] {display:none}
html[data-ui-mode="phone"] .jp-muted {font:var(--jp-t-small);color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-day-h {display:flex;align-items:center;gap:8px;min-height:40px;margin:-6px -6px 2px;padding:0 6px;border-radius:12px;color:inherit;text-decoration:none}
html[data-ui-mode="phone"] .jp-day-h b {font:var(--jp-t-h2)}
html[data-ui-mode="phone"] .jp-day-h span {font:var(--jp-t-small)}
html[data-ui-mode="phone"] .jp-day-h .jp-pill {margin-left:auto}
html[data-ui-mode="phone"] .jp-today-tag {background:var(--jp-gold);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
html[data-ui-mode="phone"] .jp-tile {position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:16px;background:var(--jp-card);color:inherit;text-decoration:none;font:700 12.5px/1.2 var(--jp-sans);min-height:84px;overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp-tile .jp-dot {width:32px;height:32px}
html[data-ui-mode="phone"] .jp-big {font-size:40px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
html[data-ui-mode="phone"] .jp-big small {font-size:16px;margin-left:3px}
html[data-ui-mode="phone"] .jp-actions {display:flex;gap:8px;margin-top:12px}
html[data-ui-mode="phone"] .jp-actions > * {flex:1}
html[data-ui-mode="phone"] .jp-field textarea {padding:12px 14px;min-height:96px;resize:none;line-height:1.4}
html[data-ui-mode="phone"] .jp-stepper .jp-field {margin:0;min-width:0;max-width:180px}
html[data-ui-mode="phone"] .jp-stepper .jp-field input {text-align:center}
html[data-ui-mode="phone"] .jp-stepper input::-webkit-inner-spin-button,html[data-ui-mode="phone"] .jp-stepper input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0}
html[data-ui-mode="phone"] .jp-count-sheet .jp-stepper {margin:10px 0 14px}
html[data-ui-mode="phone"] .jp-temps {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html[data-ui-mode="phone"] .jp-temp {padding:12px;min-width:0}
html[data-ui-mode="phone"] .jp-temp .jp-card-h {flex-wrap:wrap;font-size:11px}
html[data-ui-mode="phone"] .jp-temp-value {font-size:28px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
html[data-ui-mode="phone"] .jp-temp-value small {font-size:14px}
html[data-ui-mode="phone"] .jp-spark {width:100%;height:26px;margin-top:8px;color:var(--jp-blue-2);display:block}
html[data-ui-mode="phone"] .jp-mail-row b {font-size:13.5px}
html[data-ui-mode="phone"] .jp-mail-row .jp-end {font-weight:600;color:var(--jp-muted);font-size:11.5px;max-width:125px;white-space:normal;text-align:right}
html[data-ui-mode="phone"] .phone-home-page .jp-tabs {height:auto;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;line-height:normal}
html[data-ui-mode="phone"] .phone-home-page .jp-tabs button {font-family:inherit;box-shadow:none;letter-spacing:normal;text-transform:none}
html[data-ui-mode="phone"] .jp-password-page {box-sizing:border-box;display:block;min-height:100dvh;padding:0 0 var(--jp-tabh);background:var(--jp-cream);color:var(--jp-navy);font:var(--jp-t-body)}
html[data-ui-mode="phone"] .jp-password-page::before {display:none}
html[data-ui-mode="phone"] .jp-password-page .login-form {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;text-align:left}
html[data-ui-mode="phone"] .jp-password-page .login-form .password-toggle {position:absolute;top:50%;right:2px;width:44px;height:44px;border:0;background:transparent;color:var(--jp-navy);box-shadow:none;padding:10px}
html[data-ui-mode="phone"] .jp-password-page .login-shell {position:relative;display:block;margin:-30px 14px 18px;padding:0;width:auto;max-width:none;min-height:0}
html[data-ui-mode="phone"] .jp-password-page .login-card {padding:14px;border:0;border-radius:20px;background:white;box-shadow:var(--jp-shadow);width:auto}
html[data-ui-mode="phone"] .jp-password-page :is(.login-brand,.login-form > a,.login-card > .muted) {display:none}
html[data-ui-mode="phone"] .jp-password-page .password-field label {display:block;margin:0 0 5px 2px;font:var(--jp-t-caps);color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-password-page .password-field input {box-sizing:border-box;width:100%;height:48px;border:0;border-radius:14px;background:var(--jp-cream-2);box-shadow:inset 0 0 0 1.5px var(--jp-sand-2);padding:0 48px 0 14px;font:600 16px/1.2 var(--jp-sans);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-password-page .login-form button[type="submit"] {width:100%;height:48px;border:0;border-radius:14px;background:var(--jp-gold);color:var(--jp-navy);font:800 14.5px/1 var(--jp-sans)}
html[data-ui-mode="phone"][data-phone-paused] .jp-skel::after,html[data-ui-mode="phone"][data-phone-paused] :is(.jp-ptr img,.jp-stagger > *,[data-fill] .jp-bar i) {animation-play-state:paused}
/* Handoff 36 phone presentation. Replaces the former phone home styles. */
html[data-ui-mode="phone"] {--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
html[data-ui-mode="phone"] body.phone-home-page {background:#F5EFE1;overflow:hidden}
html[data-ui-mode="phone"] .phone-home-page :is(.app-topbar,.sidebar,.command-bar-fab,.module-tabs,.ops-home,.d-overview-a) {display:none}
html[data-ui-mode="phone"] .phone-home-page .layout {display:block}
html[data-ui-mode="phone"] .phone-home-page :is(#shellContent,#shellPageContent) {padding:0;margin:0;width:100%;min-width:0}
html[data-ui-mode="phone"] #mobileHome {display:block;color:var(--jp-navy);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;line-height:normal;position:fixed;inset:0;height:100vh;height:100dvh;background:var(--jp-cream)}
html[data-ui-mode="phone"] #mobileHome *,html[data-ui-mode="phone"] #mobileHome *::before,html[data-ui-mode="phone"] #mobileHome *::after {box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html[data-ui-mode="phone"] #mobileHome a {color:inherit;text-decoration:none}
html[data-ui-mode="phone"] #mobileHome button {font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;box-shadow:none;letter-spacing:normal;text-transform:none}
html[data-ui-mode="phone"] #mobileHome :is(a,button):focus-visible {outline:3px solid #F8C722;outline-offset:2px}
html[data-ui-mode="phone"] #mobileHome .mh-scroll {position:absolute;inset:0 0 calc(70px + var(--sab)) 0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
html[data-ui-mode="phone"] #mobileHome .brand{display:flex;align-items:center;gap:9px}
html[data-ui-mode="phone"] #mobileHome .brand img{width:32px;height:32px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
html[data-ui-mode="phone"] #mobileHome .brand b{font-size:19px;letter-spacing:.6px}
html[data-ui-mode="phone"] #mobileHome .chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;border-radius:5px;background:#fff;color:var(--jp-navy);padding:2px 3px 2px 4px}
html[data-ui-mode="phone"] #mobileHome .chip i{font-style:normal;font-size:9px;background:var(--jp-navy);color:#fff;border-radius:3px;padding:0 3px}
html[data-ui-mode="phone"] #mobileHome .chip.k{box-shadow:inset 3px 0 0 var(--jp-kettle)}
html[data-ui-mode="phone"] #mobileHome .chip.h{box-shadow:inset 3px 0 0 var(--jp-herbort)}

html[data-ui-mode="phone"] #mobileHome .hero{position:relative;height:calc(max(12px,calc(var(--sat) + 4px)) + 228px);padding:max(12px,calc(var(--sat) + 4px)) 16px 0;color:#FBF7EE;overflow:hidden;
  background:radial-gradient(120% 90% at 88% 92%,#3A4F82 0%,#22345A 45%,#1B2A4A 80%)}
html[data-ui-mode="phone"] #mobileHome .hero::before{content:"";position:absolute;inset:0;background:url(../phone36/kurbits.svg) 0 0/150px;opacity:.09}
html[data-ui-mode="phone"] #mobileHome .sun{position:absolute;right:-60px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(248,199,34,.55),rgba(248,199,34,.12) 45%,transparent 70%);animation:mh36-sun 6s ease-in-out infinite alternate}
@keyframes mh36-sun{to{transform:scale(1.08);opacity:.85}}
html[data-ui-mode="phone"] #mobileHome .ground{position:absolute;left:0;right:0;bottom:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(248,199,34,.45) 60%,transparent)}
html[data-ui-mode="phone"] #mobileHome .horse{position:absolute;right:6px;bottom:44px;height:136px;width:auto;transform-origin:40% 100%;animation:mh36-rock 4.2s ease-in-out infinite;filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
@keyframes mh36-rock{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
html[data-ui-mode="phone"] #mobileHome .tw{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#FFF6C9,rgba(248,199,34,0) 70%);border-radius:50%;animation:mh36-tw 2.6s ease-in-out infinite}
html[data-ui-mode="phone"] #mobileHome .tw::before,html[data-ui-mode="phone"] #mobileHome .tw::after{content:"";position:absolute;left:50%;top:-6px;width:1.5px;height:22px;margin-left:-.75px;background:linear-gradient(transparent,#FFF6C9,transparent)}
html[data-ui-mode="phone"] #mobileHome .tw::after{transform:rotate(90deg)}
@keyframes mh36-tw{0%,100%{transform:scale(.2);opacity:0}45%{transform:scale(1);opacity:1}}
html[data-ui-mode="phone"] #mobileHome .top{position:relative;display:flex;align-items:center;justify-content:space-between;height:44px}
html[data-ui-mode="phone"] #mobileHome .top .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08)}
html[data-ui-mode="phone"] #mobileHome .top .ic svg{width:19px;height:19px}
html[data-ui-mode="phone"] #mobileHome .hi{position:relative;margin-top:6px;animation:mh36-in .6s .05s cubic-bezier(.2,.8,.2,1) both}
html[data-ui-mode="phone"] #mobileHome .hi h1{color:#FBF7EE;max-width:245px;overflow-wrap:anywhere;margin:0;font:600 30px/1.08 ui-serif,"New York",Fraunces,Georgia,serif;letter-spacing:.2px}
html[data-ui-mode="phone"] #mobileHome .hi p{line-height:normal;margin:6px 0 0;font-size:13px;font-weight:600;color:#C9D2E4}
html[data-ui-mode="phone"] #mobileHome .hi p b{color:var(--jp-gold);font-weight:800}
html[data-ui-mode="phone"] #mobileHome .colon{animation:mh36-blink 2s steps(1) infinite}
@keyframes mh36-blink{50%{opacity:.25}}
html[data-ui-mode="phone"] #mobileHome .alerts{position:relative;display:flex;gap:5px;margin-top:7px;animation:mh36-in .6s .15s cubic-bezier(.2,.8,.2,1) both;max-width:calc(100% - 110px);flex-wrap:wrap}
@keyframes mh36-in{from{opacity:0;transform:translateY(10px)}}
html[data-ui-mode="phone"] #mobileHome .wrap{position:relative;padding:0 14px 16px;margin-top:-34px}
html[data-ui-mode="phone"] #mobileHome .card{background:#fff;border:1px solid var(--jp-sand);border-radius:20px;box-shadow:0 10px 26px -12px rgba(27,42,74,.30),0 1px 2px rgba(27,42,74,.06);margin-bottom:10px;animation:mh36-in .6s cubic-bezier(.2,.8,.2,1) both}
html[data-ui-mode="phone"] #mobileHome .rings{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;animation-delay:.2s}
html[data-ui-mode="phone"] #mobileHome .rg{position:relative;width:132px;height:132px;flex:none}
html[data-ui-mode="phone"] #mobileHome .rg svg{width:132px;height:132px;transform:rotate(-90deg)}
html[data-ui-mode="phone"] #mobileHome .rg circle{fill:none;stroke-linecap:round}
html[data-ui-mode="phone"] #mobileHome .rg .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
html[data-ui-mode="phone"] #mobileHome .rg .c b{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1}
html[data-ui-mode="phone"] #mobileHome .rg .c b small{font-size:12px;margin-left:1px}
html[data-ui-mode="phone"] #mobileHome .lg{flex:1;min-width:0}
html[data-ui-mode="phone"] #mobileHome .lg h2{margin:0 0 6px;font-size:14px;font-weight:800;display:flex;justify-content:space-between;align-items:baseline}
html[data-ui-mode="phone"] #mobileHome .lg h2 a{min-height:44px;display:flex;align-items:center;margin-block:-14px;font-size:12px;color:var(--jp-blue);font-weight:700}
html[data-ui-mode="phone"] #mobileHome .lg .sub{font-size:11px;font-weight:700;color:#7D879C;margin:-4px 0 4px}
html[data-ui-mode="phone"] #mobileHome .lr{display:grid;grid-template-columns:10px 1fr auto;gap:2px 7px;align-items:center;padding:5px 0;border-top:1px solid var(--jp-sand);font-size:12.5px;animation:mh36-in .5s both}
html[data-ui-mode="phone"] #mobileHome .lr:first-of-type{border-top:0}
html[data-ui-mode="phone"] #mobileHome .lr i{width:10px;height:10px;border-radius:50%}
html[data-ui-mode="phone"] #mobileHome .lr b{font-size:13px}
html[data-ui-mode="phone"] #mobileHome .lr small{grid-column:2;font-size:10.5px;color:#7D879C;font-weight:600;margin-top:-3px}
html[data-ui-mode="phone"] #mobileHome .wk{padding:11px 10px 10px;animation-delay:.3s}
html[data-ui-mode="phone"] #mobileHome .wk h3,html[data-ui-mode="phone"] #mobileHome .fl h3{margin:0 4px 8px;font-size:11px;font-weight:800;letter-spacing:.8px;display:flex;justify-content:space-between;color:var(--jp-navy)}
html[data-ui-mode="phone"] #mobileHome .wk h3 span,html[data-ui-mode="phone"] #mobileHome .fl h3 span{color:#7D879C;letter-spacing:.2px}
html[data-ui-mode="phone"] #mobileHome .days{display:grid;grid-template-columns:repeat(var(--mh-days,5),minmax(44px,1fr));gap:5px;overflow-x:auto}
html[data-ui-mode="phone"] #mobileHome .d{min-width:0;display:block;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:12px;background:#F4EFE3;padding:6px 3px 5px;text-align:center;min-height:84px}
html[data-ui-mode="phone"] #mobileHome .d .w{font-size:9.5px;font-weight:700;color:#7D879C}
html[data-ui-mode="phone"] #mobileHome .d .n{font-size:16px;font-weight:800;margin:0 0 3px}
html[data-ui-mode="phone"] #mobileHome .d .chip{min-width:0;overflow:hidden;display:flex;justify-content:space-between;margin:2px 1px;font-size:9px;padding:2px 2px 2px 5px;animation:mh36-pop .4s both}
html[data-ui-mode="phone"] #mobileHome .d.today{background:var(--jp-gold);box-shadow:0 6px 14px -6px rgba(201,146,26,.8)}
html[data-ui-mode="phone"] #mobileHome .d.today .w{color:var(--jp-navy)}
html[data-ui-mode="phone"] #mobileHome .d.today .chip i{background:var(--jp-blue)}
@keyframes mh36-pop{from{opacity:0;transform:scale(.6)}}
html[data-ui-mode="phone"] #mobileHome .fl{padding:11px 12px 6px;animation-delay:.4s}
html[data-ui-mode="phone"] #mobileHome .br{display:grid;grid-template-columns:auto 1fr auto;gap:0 10px;align-items:center;min-height:46px;border-top:1px solid var(--jp-sand)}
html[data-ui-mode="phone"] #mobileHome .br:first-of-type{border-top:0}
html[data-ui-mode="phone"] #mobileHome .br .code{max-width:100px;overflow-wrap:anywhere;font-size:11px;font-weight:800;background:var(--jp-navy);color:#fff;border-radius:7px;padding:4px 6px;min-width:58px;text-align:center}
html[data-ui-mode="phone"] #mobileHome .br .code.k{box-shadow:inset 3px 0 0 var(--jp-kettle)}
html[data-ui-mode="phone"] #mobileHome .br .code.h{box-shadow:inset 3px 0 0 var(--jp-herbort)}
html[data-ui-mode="phone"] #mobileHome .br .s{font-size:12.5px;font-weight:600;min-width:0}
html[data-ui-mode="phone"] #mobileHome .br .s small{display:block;font-size:10.5px;color:#7D879C;font-weight:600}
html[data-ui-mode="phone"] #mobileHome .bar{height:6px;border-radius:3px;background:#EEE7D7;margin-top:4px;overflow:hidden}
html[data-ui-mode="phone"] #mobileHome .bar i{width:100%;transform-origin:left;display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#F8C722,#E0A50E)}
html[data-ui-mode="phone"] #mobileHome .br .pc{font-size:13px;font-weight:800}
html[data-ui-mode="phone"] #mobileHome .rdy{font-size:10px;font-weight:800;color:#1E6B3A;background:#CFEBD6;border-radius:999px;padding:2px 7px;margin-left:4px}
@media (max-width:380px){html[data-ui-mode="phone"] #mobileHome .horse{height:120px;right:4px}
html[data-ui-mode="phone"] #mobileHome .hi h1{font-size:27px}
}

html[data-ui-mode="phone"] #mobileHome .mh-dialog{ color: #1b2a4a; background: #fffdf8; width: calc(100% - 24px); max-width: 540px; max-height: 80dvh; border: 0; border-radius: 18px; padding: 14px; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog::backdrop{ background: #1b2a4a99; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog header{ display: flex; align-items: center; justify-content: space-between; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog h2{ font-size: 20px; margin: 0; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog :is(a,button){ display: flex; align-items: center; gap: 8px; padding: 8px; border: 0; background: none; color: #024f97; border-radius: 6px; width: 100%; min-height:44px; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog header button{ width: 44px; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog svg{ width: 22px; height: 22px; }
html[data-ui-mode="phone"] #mobileHome .mh-dialog section + section{ border-top: 1px solid #f1ebdd; }

html[data-ui-mode="phone"] #mobileHome .mh-pill {display:flex;align-items:center;border-radius:999px;min-height:44px;padding:0 7px;font-size:11px;font-weight:700;white-space:nowrap;background-clip:padding-box;border-block:9px solid transparent}
html[data-ui-mode="phone"] #mobileHome .mh-hold {background-color:#F4C7C3;color:#8A1C14}
html[data-ui-mode="phone"] #mobileHome .mh-short,html[data-ui-mode="phone"] #mobileHome .mh-late {background-color:#FBE3B0;color:#7A4E00}
html[data-ui-mode="phone"] #mobileHome .mh-pill.mh-track {background-color:#CFEBD6;color:#1E6B3A}
html[data-ui-mode="phone"] #mobileHome .mh-view {font-size:11px;min-width:44px;min-height:44px;color:#C9D2E4}
html[data-ui-mode="phone"] #mobileHome .mh-track[data-phone-track] {display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
html[data-ui-mode="phone"] #mobileHome .mh-week {flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
html[data-ui-mode="phone"] #mobileHome .mh-week-heading {display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px;font-size:11px;font-weight:800;letter-spacing:.2px;margin:0 4px 8px}
html[data-ui-mode="phone"] #mobileHome .mh-week-heading[hidden] {display:none}
html[data-ui-mode="phone"] #mobileHome .mh-week-heading span {color:#7D879C}
html[data-ui-mode="phone"] #mobileHome .mh-dots {display:flex;justify-content:center}
html[data-ui-mode="phone"] #mobileHome .mh-dots button {width:44px;height:44px;display:grid;place-items:center}
html[data-ui-mode="phone"] #mobileHome .mh-dots i {height:6px;width:6px;background:#AEB8CC;border-radius:4px}
html[data-ui-mode="phone"] #mobileHome .mh-dots .is-active {width:18px;background:#F8C722}
html[data-ui-mode="phone"] #mobileHome .mh-status {margin:0;font-size:12px}
html[data-ui-mode="phone"] #mobileHome .mh-empty {font-size:12px;padding:8px 0;margin:0}
html[data-ui-mode="phone"] #mobileHome .num {font-variant-numeric:tabular-nums}
html[data-ui-mode="phone"][data-phone-paused] #mobileHome *,html[data-ui-mode="phone"][data-phone-paused] #mobileHome *::before {animation-play-state:paused}
@media (prefers-reduced-motion:reduce) {
html[data-ui-mode="phone"] #mobileHome *,html[data-ui-mode="phone"] #mobileHome *::before,html[data-ui-mode="phone"] #mobileHome *::after {animation:none;transition:none}
}
/* Login A2 uses the existing authenticated form and its password control. */
html[data-ui-mode="phone"] body.login-page:not(.jp-password-page) {margin:0;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:#E9E3D8 url(../phone36/login_bg_a2.jpg) 50% 30%/cover no-repeat;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;color:#1B2A4A}
html[data-ui-mode="phone"] body.login-page:not(.jp-password-page)::before {backdrop-filter:none;background:linear-gradient(180deg,rgba(251,247,238,.75),rgba(251,247,238,0) 26%),radial-gradient(120% 60% at 60% 34%,transparent 45%,rgba(27,42,74,.16));pointer-events:none}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-heading {display:block;position:absolute;left:22px;top:calc(var(--sat) + 14px)}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-heading b {display:block;font:600 30px/1.05 var(--jp-serif)}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-heading span {display:block;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#9A7408}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-shell {display:flex;flex-direction:column;justify-content:flex-end;position:absolute;inset:0 0 var(--phone-keyboard-offset,0px);min-height:0;padding:0;overflow:auto;overscroll-behavior:none}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-card {box-sizing:border-box;flex:none;width:100%;max-width:none;margin:0;padding:16px 18px max(20px,var(--sab));border:0;border-radius:28px 28px 0 0;background:rgba(251,247,238,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -12px 34px rgba(27,42,74,.20)}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-card::before {content:"";display:block;width:38px;height:5px;border-radius:3px;background:#D9CFBA;margin:-6px auto 12px}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-card .login-brand {display:none}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-brand {display:flex;align-items:center;gap:11px;margin-bottom:12px;text-align:left}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-brand img {width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 2.5px #F8C722}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-brand h1 {margin:0;font-size:17px;font-weight:800}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .phone-login-brand p {margin:1px 0 0;font-size:12px;color:#6B7487;font-weight:600}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 8px;padding-bottom:44px;position:relative}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form > label,html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-field {box-sizing:border-box;min-width:0;height:50px;border-radius:14px;background:white;box-shadow:inset 0 0 0 1.5px #E4DCC9;padding:8px 12px;display:block;margin:0;font-size:10.5px;font-weight:700;color:#7D879C;text-align:left}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-field label {display:block;margin:0;font-size:10.5px;font-weight:700;color:#7D879C}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-input-wrap {position:static}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form input:not([type=hidden]) {display:block;box-sizing:border-box;background:none;border:0;box-shadow:none;margin:0;padding:0;width:100%;height:23px;min-height:0;font:600 16px/23px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#1B2A4A;outline:none}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form > label:focus-within,html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-field:focus-within {box-shadow:inset 0 0 0 2px #F8C722,0 0 0 4px rgba(248,199,34,.15)}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form button[type=submit] {grid-column:1/-1;height:50px;min-height:50px;border:0;margin:0;border-radius:14px;background:#1B2A4A;color:#F8C722;font-size:16.5px;font-weight:800;box-shadow:none}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-toggle {position:absolute;top:auto;bottom:0;left:0;right:auto;transform:none;display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:140px;height:44px;min-height:44px;border:0;border-radius:999px;background:#F1EBDD;color:#1B2A4A;padding:0 12px;font-size:12px;font-weight:700;box-shadow:none}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-toggle::after {content:"Show password";white-space:nowrap}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-toggle[aria-pressed=true]::after {content:"Hide password"}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form .password-toggle svg {height:15px;width:15px}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-form button:focus-visible {outline:3px solid #F8C722;outline-offset:2px}
html[data-ui-mode="phone"] :where(body:not(.jp-password-page)) .login-system-alert {margin:8px;flex:none;font-size:12px}
/* JPF handoff 37: rules to merge into app/static/css/mobile_home.css (not a new file in the app).
   Phone only: every selector starts with html[data-ui-mode="phone"]. */

/* 1. Dashboard fills. The live template already draws each ring at its value (pathLength 100, stroke-dasharray "p 100"; select on
   stroke-dasharray, a [pathLength] selector does not match the camelCase SVG attribute in Chrome)
   and each bar at scaleX(p). They only animate once #mobileHome has data-fill, which mobile_home.js sets when the
   coin overlay starts its crossfade out (jpf:intro-reveal), or straight away when there is no intro.
   Until then they show their final value, so without JS nothing is ever empty. The live rule at line 126 pauses them
   while the page is hidden. Reduce Motion: they are inside no-preference, so the final value shows at once (the live
   reduce rule at 127 to 128 would lose on specificity against these selectors, so do not rely on it). */
@media (prefers-reduced-motion:no-preference) {
html[data-ui-mode="phone"] #mobileHome[data-fill] .rg circle[stroke-dasharray]{animation:mh37-ring 1.2s cubic-bezier(.22,.8,.24,1) calc(.14s + var(--i,0) * .12s) both}
@keyframes mh37-ring{from{stroke-dashoffset:var(--p,0)}}
html[data-ui-mode="phone"] #mobileHome[data-fill] .bar i{animation:mh37-bar .9s cubic-bezier(.22,.8,.24,1) calc(.42s + var(--i,0) * .09s) both}
html[data-ui-mode="phone"][data-phone-paused] #mobileHome[data-fill] .rg circle[stroke-dasharray],
html[data-ui-mode="phone"][data-phone-paused] #mobileHome[data-fill] .bar i{animation-play-state:paused}
@keyframes mh37-bar{from{transform:scaleX(0)}}
}

/* 2. Remember me, bottom row of the sign in sheet: Show password moves to the left, the switch sits on the right.
   A real checkbox (role switch) covers the whole chip, so the tap target is the full 44 px chip and VoiceOver reads
   "Remember me, for 7 days, switch, off". Hidden by the attribute everywhere else, so tablet and desktop are unchanged. */
html[data-ui-mode="phone"] .phone-remember-only[hidden]{display:contents}
html[data-ui-mode="phone"] .login-form .login-remember,html[data-ui-mode="phone"] .login-form .login-remember[hidden] {position:absolute;right:0;bottom:0;display:flex;flex-direction:row;flex-wrap:nowrap;white-space:nowrap;align-items:center;gap:8px;box-sizing:border-box;height:44px;margin:0;padding:0 14px 0 9px;border-radius:999px;background:#F1EBDD;color:#1B2A4A;font-size:12px;font-weight:700;line-height:1.15;text-align:left;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html[data-ui-mode="phone"] .login-form .login-remember input[type=checkbox] {position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:999px;opacity:0;-webkit-appearance:none;appearance:none;cursor:pointer}
html[data-ui-mode="phone"] .login-form .login-remember small {display:block;font-size:10.5px;font-weight:600;color:#7D879C}
html[data-ui-mode="phone"] .login-remember .sw {position:relative;flex:none;width:36px;height:22px;border-radius:11px;background:#DCD2BD;overflow:hidden}
html[data-ui-mode="phone"] .login-remember .sw::before {content:"";position:absolute;inset:0;border-radius:inherit;background:#1B2A4A;opacity:0;transition:opacity .16s ease-out}
html[data-ui-mode="phone"] .login-remember .sw i {position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#FFFDF8;box-shadow:0 1px 2px rgba(27,42,74,.25);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
html[data-ui-mode="phone"] .login-remember .sw i::after {content:"";position:absolute;inset:0;border-radius:50%;background:#F8C722;opacity:0;transition:opacity .16s ease-out}
html[data-ui-mode="phone"] .login-remember input:checked + .sw::before,html[data-ui-mode="phone"] .login-remember input:checked + .sw i::after {opacity:1}
html[data-ui-mode="phone"] .login-remember input:checked + .sw i {transform:translateX(14px)}
html[data-ui-mode="phone"] .login-form .login-remember:focus-within {box-shadow:none} /* not the yellow text field focus ring (line 149) */
html[data-ui-mode="phone"] .login-form .login-remember:has(input:checked) {box-shadow:inset 0 0 0 1.5px rgba(27,42,74,.16)}
html[data-ui-mode="phone"] .login-remember:has(input:focus-visible) {outline:3px solid #F8C722;outline-offset:2px}
@media (prefers-reduced-motion:reduce) {html[data-ui-mode="phone"] .login-remember .sw::before,html[data-ui-mode="phone"] .login-remember .sw i,html[data-ui-mode="phone"] .login-remember .sw i::after {transition:none}}

/* 3. Rolling production days strip (today first, then the next 4 production days).
   mobile_week.html adds class gap to a column when the day before it is not shown (a skipped weekend), and class idle
   to today when today is a weekend day with nothing scheduled. The divider is a hairline centred in the 5 px grid gap:
   visual only, no text, so VoiceOver keeps reading the day labels. Nothing here animates. */
html[data-ui-mode="phone"] #mobileHome .days > .gap{position:relative}
html[data-ui-mode="phone"] #mobileHome .days > .gap::before{content:"";position:absolute;left:-3px;top:14px;bottom:14px;width:1px;border-radius:1px;background:#1B2A4A;opacity:.16;pointer-events:none}
html[data-ui-mode="phone"] #mobileHome .d.today.idle{background:#F4EFE3;box-shadow:inset 0 0 0 2px #F8C722}
html[data-ui-mode="phone"] #mobileHome .d.idle .w,html[data-ui-mode="phone"] #mobileHome .d.idle .n{opacity:.55}
html[data-ui-mode="phone"] #mobileHome .d.idle small{display:block;margin-top:6px;font-size:9px;font-weight:700;color:#7D879C}

/* 6. 38b adapters (phone only). One pattern per page family; templates opt in with attributes, desktop and tablet
   never match. Tables to rows: table[data-jp-rows] is rebuilt as .jp-row cards by jp_kit.js part 8 and the table is
   hidden. Forms: form.jp-form gets kit fields; selects and date inputs become .jp-pick buttons that open a sheet
   (part 9); the real control stays in the form, so posting is unchanged. */
html[data-ui-mode="phone"] table.jp-adapted{display:none}
html[data-ui-mode="phone"] .jp-group-h{position:sticky;top:max(11px,var(--jp-sat,env(safe-area-inset-top,0px)));z-index:2;margin:6px -14px 4px;padding:7px 18px 5px;background:var(--jp-cream);font:var(--jp-t-caps);letter-spacing:.8px;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-note{margin:4px 4px 12px;font:var(--jp-t-small);font-weight:500;line-height:1.45;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-note b{color:var(--jp-ink-2)}
html[data-ui-mode="phone"] .jp-chips{display:flex;gap:6px;margin:0 -14px 10px;padding:0 14px;overflow-x:auto;scrollbar-width:none}
html[data-ui-mode="phone"] .jp-chips::-webkit-scrollbar{display:none}
html[data-ui-mode="phone"] .jp-chips > *{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--jp-r-pill);background:var(--jp-card);box-shadow:var(--jp-shadow-low);font:700 12.5px/1 var(--jp-sans);color:var(--jp-navy);text-decoration:none;white-space:nowrap}
html[data-ui-mode="phone"] .jp-chips svg{width:17px;height:17px}
/* Stat tiles: 2 or 3 across, count up on view */
html[data-ui-mode="phone"] .jp-stats{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:8px;margin:0 0 10px}
html[data-ui-mode="phone"] .jp-stat{padding:11px 12px;border-radius:16px;background:var(--jp-card)}
html[data-ui-mode="phone"] .jp-stat :is(b,strong){display:block;font:800 22px/1.05 var(--jp-sans);letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-stat span{display:block;margin-top:3px;font:var(--jp-t-small);color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-stat.is-bad b{color:var(--jp-red)}html[data-ui-mode="phone"] .jp-stat.is-warn b{color:var(--jp-amber)}
/* Key and value list (detail sheets and record cards) */
html[data-ui-mode="phone"] .jp-dl{display:grid;grid-template-columns:minmax(96px,40%) 1fr;gap:0;margin:0}
html[data-ui-mode="phone"] .jp-dl dt,html[data-ui-mode="phone"] .jp-dl dd{margin:0;padding:9px 0;border-top:1px solid var(--jp-sand);font-size:13px;line-height:1.35}
html[data-ui-mode="phone"] .jp-dl dt{color:var(--jp-muted);font-weight:700;padding-right:10px}
html[data-ui-mode="phone"] .jp-dl dd{font-weight:700;color:var(--jp-navy);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
html[data-ui-mode="phone"] .jp-dl > :nth-child(-n+2){border-top:0}
/* Week strip (day boards): 5 or 7 day chips, today gold, scrolls sideways, never wraps */
html[data-ui-mode="phone"] .jp-week{display:flex;gap:6px;margin:0 0 10px;overflow-x:auto;scrollbar-width:none}
html[data-ui-mode="phone"] .jp-week::-webkit-scrollbar{display:none}
html[data-ui-mode="phone"] .jp-week a{flex:1 0 50px;display:grid;justify-items:center;gap:2px;min-height:58px;padding:8px 0 6px;border-radius:14px;background:var(--jp-card);color:var(--jp-ink-2);font:700 11px/1 var(--jp-sans);text-decoration:none;box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] .jp-week a b{font:800 18px/1 var(--jp-sans);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-week a i{width:6px;height:6px;border-radius:50%;background:transparent}
html[data-ui-mode="phone"] .jp-week a i.on{background:var(--jp-blue-2)}html[data-ui-mode="phone"] .jp-week a i.warn{background:var(--jp-kettle)}
html[data-ui-mode="phone"] .jp-week a[aria-current]{background:var(--jp-navy);color:var(--jp-on-navy)}
html[data-ui-mode="phone"] .jp-week a[aria-current] b{color:var(--jp-gold)}
html[data-ui-mode="phone"] .jp-week a.is-today:not([aria-current]){box-shadow:inset 0 0 0 2px var(--jp-gold),var(--jp-shadow-low)}
/* Desktop first card: the heavy spreadsheet pages keep their headline numbers on phone, the full page is one tap away */
html[data-ui-mode="phone"] .jp-desk{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center}
html[data-ui-mode="phone"] .jp-desk .jp-dot{width:44px;height:44px;background:#DCE7F7;color:var(--jp-blue)}
html[data-ui-mode="phone"] .jp-desk p{margin:0;font-size:13px;color:var(--jp-ink-2);line-height:1.4}
html[data-ui-mode="phone"] .jp-desk p b{display:block;color:var(--jp-navy);font:var(--jp-t-h2);margin-bottom:2px}
/* Picker: replaces a browser default select or date control. The real control stays in the form, visually hidden. */
html[data-ui-mode="phone"] :is(#shellPageContent,#jpSheet) .jp-pick-src{position:absolute;top:0;left:0;width:1px;min-width:0;height:1px;min-height:0;max-height:1px;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%);padding:0;margin:0;border:0}
html[data-ui-mode="phone"] .jp-pick{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:0 12px 0 14px;border:0;border-radius:14px;background:var(--jp-cream-2);box-shadow:inset 0 0 0 1.5px var(--jp-sand-2);font:600 16px/1.2 var(--jp-sans);color:var(--jp-navy);text-align:left;-webkit-appearance:none;appearance:none;cursor:pointer}
html[data-ui-mode="phone"] .jp-pick span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-ui-mode="phone"] .jp-pick span.is-empty{color:var(--jp-muted);font-weight:500}
html[data-ui-mode="phone"] .jp-pick svg{width:18px;height:18px;flex:none;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-pick.is-chip{width:auto;min-height:44px;border-radius:var(--jp-r-pill);background:var(--jp-card);box-shadow:var(--jp-shadow-low);font-size:13px;font-weight:700}
html[data-ui-mode="phone"] .jp-opt[aria-selected="true"] b{color:var(--jp-blue)}
html[data-ui-mode="phone"] .jp-opt .jp-tick{width:22px;height:22px;color:var(--jp-blue);opacity:0}
html[data-ui-mode="phone"] .jp-opt[aria-selected="true"] .jp-tick{opacity:1}
html[data-ui-mode="phone"] .jp-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
html[data-ui-mode="phone"] .jp-cal small{font:var(--jp-t-caps);color:var(--jp-muted);padding:4px 0}
html[data-ui-mode="phone"] .jp-cal button{min-height:44px;border:0;border-radius:12px;background:none;font:700 15px/1 var(--jp-sans);color:var(--jp-navy);font-variant-numeric:tabular-nums;cursor:pointer}
html[data-ui-mode="phone"] .jp-cal button.is-out{color:#C3BBA8}
html[data-ui-mode="phone"] .jp-cal button.is-today{box-shadow:inset 0 0 0 2px var(--jp-gold)}
html[data-ui-mode="phone"] .jp-cal button[aria-selected="true"]{background:var(--jp-navy);color:#fff}
html[data-ui-mode="phone"] .jp-cal-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
html[data-ui-mode="phone"] .jp-cal-h b{font:var(--jp-t-h2);font-size:16px}
/* Kit form: labels become caps field labels, inputs 48 px with 16 px text, checkboxes become switches */
html[data-ui-mode="phone"] .jp-form label{display:block;margin:0 0 10px;font:var(--jp-t-caps);letter-spacing:.6px;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-form input:where(:not([type=checkbox],[type=radio],[type=hidden],[type=file])),html[data-ui-mode="phone"] .jp-form textarea{box-sizing:border-box;display:block;width:100%;min-height:48px;margin-top:5px;padding:0 14px;border:0;border-radius:14px;background:var(--jp-cream-2);box-shadow:inset 0 0 0 1.5px var(--jp-sand-2);font:600 16px/1.2 var(--jp-sans);color:var(--jp-navy);letter-spacing:0;-webkit-appearance:none;appearance:none}
html[data-ui-mode="phone"] .jp-form input::-webkit-inner-spin-button,html[data-ui-mode="phone"] .jp-form input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
html[data-ui-mode="phone"] .jp-form textarea{padding:12px 14px;min-height:110px;line-height:1.4;resize:vertical}
html[data-ui-mode="phone"] .jp-form :is(input,textarea):focus{outline:0;box-shadow:inset 0 0 0 2px var(--jp-gold)}
html[data-ui-mode="phone"] .jp-form .jp-pick{margin-top:5px;letter-spacing:0}
html[data-ui-mode="phone"] .jp-form label.jp-sw{display:flex;align-items:center;gap:12px;min-height:48px;margin:0 0 6px;font:600 13.5px/1.35 var(--jp-sans);letter-spacing:0;color:var(--jp-ink)}
html[data-ui-mode="phone"] .jp-form input[type=checkbox]{flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:13px;background:#DCD2BD;-webkit-appearance:none;appearance:none;cursor:pointer}
html[data-ui-mode="phone"] .jp-form input[type=checkbox]::before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#FFFDF8;box-shadow:0 1px 2px rgba(27,42,74,.3);transition:transform .24s var(--jp-spring)}
html[data-ui-mode="phone"] .jp-form input[type=checkbox]:checked{background:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-form input[type=checkbox]:checked::before{transform:translateX(18px);background:var(--jp-gold)}
html[data-ui-mode="phone"] .jp-form input[type=radio]{appearance:none;-webkit-appearance:none;width:44px;height:44px;min-width:44px;margin:0;border:0;border-radius:50%;background:radial-gradient(circle,var(--jp-card) 8px,var(--jp-muted) 9px,var(--jp-muted) 10px,transparent 11px);cursor:pointer}
html[data-ui-mode="phone"] .jp-form input[type=radio]:checked{background:radial-gradient(circle,var(--jp-navy) 6px,var(--jp-card) 7px,var(--jp-card) 8px,var(--jp-navy) 9px,var(--jp-navy) 10px,transparent 11px)}
html[data-ui-mode="phone"] .jp-form input[type=file]{display:block;width:100%;margin-top:5px;font:600 13px var(--jp-sans);color:var(--jp-ink-2)}
html[data-ui-mode="phone"] .jp-form input[type=file]::-webkit-file-upload-button{min-height:44px;margin-right:10px;padding:0 14px;border:0;border-radius:12px;background:var(--jp-sand);font:800 13px var(--jp-sans);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-form input[type=file]::file-selector-button{min-height:44px;margin-right:10px;padding:0 14px;border:0;border-radius:12px;background:var(--jp-sand);font:800 13px var(--jp-sans);color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-two{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
/* Disclosure (details) as a card row */
html[data-ui-mode="phone"] details.jp-more > summary{display:flex;align-items:center;gap:8px;min-height:48px;list-style:none;font:var(--jp-t-h2);color:var(--jp-navy);cursor:pointer}
html[data-ui-mode="phone"] details.jp-more > summary::-webkit-details-marker{display:none}
html[data-ui-mode="phone"] details.jp-more > summary::after{content:"";margin-left:auto;width:9px;height:9px;border:solid var(--jp-muted);border-width:0 2.4px 2.4px 0;transform:rotate(45deg);transition:transform var(--jp-d-out) var(--jp-spring)}
html[data-ui-mode="phone"] details.jp-more[open] > summary::after{transform:rotate(225deg)}
/* Small W / IN toggles on ingredient rows (batch checklist): 44 px targets, tick pops in */
/* Timeline bars (production timing): bar positions are inline left and width percentages, the fill grows by scaleX */
html[data-ui-mode="phone"] .jp-tl{position:relative;height:10px;margin-top:7px;border-radius:5px;background:#EEE7D7}
html[data-ui-mode="phone"] .jp-tl i{position:absolute;top:0;bottom:0;border-radius:5px;background:var(--jp-herbort);transform-origin:left}
html[data-ui-mode="phone"] .jp-tl i.is-kettle{background:var(--jp-kettle)}
@media (prefers-reduced-motion:no-preference){
html[data-ui-mode="phone"] [data-fill] .jp-tl i{animation:jp-bar .7s var(--jp-ease) calc(.15s + var(--i,0) * .06s) both}
html[data-ui-mode="phone"] .jp-opt[aria-selected="true"] .jp-tick{animation:jp-pop .3s var(--jp-spring)}
}
@keyframes jp-pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:none}}

/* Radio chips (QA status, feedback type, role in a sheet): aria-checked carries the state */
html[data-ui-mode="phone"] .jp-chips > [role=radio]{border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
html[data-ui-mode="phone"] .jp-chips > [role=radio][aria-checked="true"],html[data-ui-mode="phone"] .jp-chips > [aria-current]{background:var(--jp-navy);color:#fff}
/* A picker or date chip inside a chip row: the label is only a wrapper */
html[data-ui-mode="phone"] .jp-chips > label{padding:0;background:none;box-shadow:none;margin:0}
/* Mood faces (feedback, the tablet design) */
html[data-ui-mode="phone"] .moods{display:flex;justify-content:space-between;gap:4px;margin:0 0 12px}
html[data-ui-mode="phone"] .moods button{flex:1;display:grid;justify-items:center;gap:3px;min-height:64px;padding:6px 0;border:0;border-radius:14px;background:none;cursor:pointer;font:700 11px/1 var(--jp-sans);color:var(--jp-muted)}
html[data-ui-mode="phone"] .moods svg{width:36px;height:36px}
html[data-ui-mode="phone"] .moods [aria-checked="true"]{background:var(--jp-cream-2);color:var(--jp-navy);box-shadow:inset 0 0 0 2px var(--jp-gold)}
/* The full desktop table inside .jp-wide keeps its columns and scrolls sideways */

/* Segment items are 36 px to keep the 38a look; the hit area runs over the 4 px track padding to a full 44 px */
html[data-ui-mode="phone"] .jp-seg a,html[data-ui-mode="phone"] .jp-seg button{position:relative}
html[data-ui-mode="phone"] .jp-seg a::before,html[data-ui-mode="phone"] .jp-seg button::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
/* Phone only blocks inside a page template (stats, desk card, notes, hand tuned partials) and desktop only bits */
.jp-only{display:none}
html[data-ui-mode="phone"] .jp-only{display:revert}
html[data-ui-mode="phone"] #shellPageContent .jp-desk-only{display:none}
html[data-ui-mode="phone"] #shellPageContent :is(.jp-row,.jp-group-h,.co-order-list,[data-jp-panel-label])[hidden]{display:none}
html[data-ui-mode="phone"] .skip-link {min-height:44px;box-sizing:border-box}
html[data-ui-mode="phone"] .jp38-page {overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp38-page *,html[data-ui-mode="phone"] .jp38-page *::before,html[data-ui-mode="phone"] .jp38-page *::after {box-sizing:border-box}
html[data-ui-mode="phone"] .jp38-page > :is(.panel,.card,form,.dashboard-grid,.purchasing-desk,.recipes-layout,.page-head,.toolbar-actions,.table-wrap,.feedback-workspace,.jp-note) {margin-left:14px;margin-right:14px;max-width:calc(100% - 28px)}
html[data-ui-mode="phone"] .jp38-page :is(.page-head h1,.page-head .eyebrow) {display:none}
html[data-ui-mode="phone"] .jp38-page :is(.dashboard-grid,.form-grid,.receiving-grid,.recipes-layout) {display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:12px}
html[data-ui-mode="phone"] .jp38-page .jp-card {padding:14px;border:0;border-radius:var(--jp-r-card);background:var(--jp-card);box-shadow:var(--jp-shadow-low);min-width:0}
html[data-ui-mode="phone"] .jp38-page .feedback-form .jp-btn[type=submit],html[data-ui-mode="phone"] .jp38-page:has(template[data-jp-page="supcode"]) .jp-btn[type=submit] {display:flex;width:100%;margin-top:10px}
html[data-ui-mode="phone"] .jp38-page :is(.span-2,.span-3) {grid-column:1/-1}
html[data-ui-mode="phone"] .jp38-page :is(.table-wrap,.table-scroll,.table-responsive) {min-width:0;max-width:100%;overflow:visible}
html[data-ui-mode="phone"] .jp38-page .jp-rows {padding:0}
html[data-ui-mode="phone"] .jp38-page .jp-pill {max-width:100%;white-space:normal;text-align:right}
html[data-ui-mode="phone"] .jp38-page :is(.button-link,button:not(.jp-icon-btn,.jp-cal button),summary) {min-height:44px;max-width:100%}
html[data-ui-mode="phone"] .jp38-page .jp-form :is(input,textarea,.jp-pick) {max-width:100%;min-width:0}
html[data-ui-mode="phone"] .jp38-page :is(.of-root,.of-lanes) {display:block;width:auto;min-width:0;height:auto;min-height:0;overflow:visible}
html[data-ui-mode="phone"] .jp38-page .of-root {margin:0 14px}
html[data-ui-mode="phone"] .jp38-page :is(.of-toolbar,.of-lane,.of-caption,.of-focus-empty) {display:none}
html[data-ui-mode="phone"] .jp38-page .of-focus {position:static;width:auto;height:auto;max-height:none;overflow:visible;padding:14px;border-radius:20px;background:var(--jp-card)}
html[data-ui-mode="phone"] .jp38-page .of-focus:has(.of-focus-empty) {display:none}
html[data-ui-mode="phone"] .jp38-page .of-drawer {position:relative;inset:auto;width:auto;max-width:100%;height:auto;max-height:none;margin-top:12px;border-radius:20px;padding:14px}
html[data-ui-mode="phone"] .jp38-page .of-scrim {display:none}
html[data-ui-mode="phone"] #shellPageContent [data-jp-heavy-editor] {display:none}
html[data-ui-mode="phone"] .jp38-page :is(.toolbar-actions,.receiving-save).jp-chips {margin-left:0;margin-right:0;padding-left:0;padding-right:0;max-width:100%;min-width:0}
html[data-ui-mode="phone"] #shellPageContent .admin-user-row form[hidden] {display:none}
html[data-ui-mode="phone"] .jp38-page .page-head.split {display:block}
html[data-ui-mode="phone"] #shellPageContent.jp38-page > h1,html[data-ui-mode="phone"] #shellPageContent.jp38-page :is(.admin-users-page > h1,.page-header h1) {display:none}
html[data-ui-mode="phone"] #shellPageContent.jp38-page .jp-stack {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-left:14px;margin-right:14px}
html[data-ui-mode="phone"] #shellPageContent.jp38-page .jp-panel-seg {margin:0 14px 12px}
html[data-ui-mode="phone"] #shellPageContent.jp38-page .jp-stats {grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
html[data-ui-mode="phone"] #shellPageContent.jp38-page .jp-stat {padding:11px 12px;border:0;border-radius:16px;background:var(--jp-card)}
html[data-ui-mode="phone"] .jp38-page .panel :is(p,li) > a {display:inline-flex;align-items:center;min-height:44px}
html[data-ui-mode="phone"] .jp38-page .page-head > a {display:inline-flex;align-items:center;min-height:44px}
html[data-ui-mode="phone"] .jp38-page a.ops-card {display:block;min-height:44px;padding:12px;border-radius:14px;background:var(--jp-cream-2)}
html[data-ui-mode="phone"] .jp38-page :is(.purchasing-wide,.purchasing-week) {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
html[data-ui-mode="phone"] .jp38-page .purchasing-week .ops-col {display:grid;grid-template-columns:52px minmax(0,1fr);min-width:0;border:0;border-radius:14px;background:var(--jp-cream-2)}
html[data-ui-mode="phone"] .jp38-page .purchasing-week .ops-head {padding:12px 4px;border:0;background:none}
html[data-ui-mode="phone"] .jp38-page .purchasing-week .ops-cell {min-height:48px;padding:4px;min-width:0}
html[data-ui-mode="phone"] .jp-sheet-actions {display:flex;gap:8px;margin:12px 0}
html[data-ui-mode="phone"] .jp-sheet-actions > button {flex:1}
html[data-ui-mode="phone"] .jp-sheet .admin-account-fields,html[data-ui-mode="phone"] .jp-sheet .admin-access-row {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
html[data-ui-mode="phone"] .jp-sheet .form-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
html[data-ui-mode="phone"] .jp-sheet .form-grid > * {grid-column:1;min-width:0}
html[data-ui-mode="phone"] .jp-sheet .admin-access {display:grid;grid-template-columns:1fr;border:0;padding:0;margin:0}
html[data-ui-mode="phone"] .jp38-page .qa-card,html[data-ui-mode="phone"] .jp38-page .qa-card-body {display:block;min-width:0}
html[data-ui-mode="phone"] .jp38-page .qa-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html[data-ui-mode="phone"] .jp38-page .qa-decision {display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0}
html[data-ui-mode="phone"] .jp38-page .qa-dec {display:flex;align-items:center;min-height:44px;padding:10px 14px;margin:0;border:0;border-radius:999px;background:var(--jp-cream-2);font:700 13px var(--jp-sans);letter-spacing:0;color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp38-page .qa-dec:has(input:checked) {background:var(--jp-navy);color:#fff}
html[data-ui-mode="phone"] .jp38-page .qa-dec input {position:absolute;opacity:0;width:1px;height:1px}
html[data-ui-mode="phone"] .jp38-page .qa-dec:focus-within {outline:2px solid var(--jp-gold)}
html[data-ui-mode="phone"] .jp38-page .jp-month-bars {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;align-items:end;height:70px;margin:12px 0}
html[data-ui-mode="phone"] .jp38-page .jp-month-bars > div {position:relative;height:100%;padding-bottom:18px;display:flex;align-items:flex-end}
html[data-ui-mode="phone"] .jp38-page .jp-month-bars i {display:block;width:100%;height:var(--jp-month-height);max-height:100%;border-radius:3px 3px 0 0;background:var(--jp-blue)}
html[data-ui-mode="phone"] .jp38-page .jp-month-bars small {position:absolute;bottom:0;left:0;font:9px var(--jp-sans);color:var(--jp-muted)}
html[data-ui-mode="phone"] #shellPageContent [data-jp-year-panel][hidden] {display:none}
html[data-ui-mode="phone"] .jp38-page :is(.receiving-grid,.grid-2) {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
html[data-ui-mode="phone"] .jp38-page :is(.receiving-grid,.grid-2) > * {min-width:0}
html[data-ui-mode="phone"] .jp38-page :is(.shadow-workspace,.shadow-workspace-main,.shadow-workspace-side) {display:block;min-width:0;width:auto}
html[data-ui-mode="phone"] #shellPageContent .order-email-panel > :not(.jp-only),html[data-ui-mode="phone"] #shellPageContent .order-email-panel #order-email-body {display:none}
html[data-ui-mode="phone"] .jp38-page .jp-order-email-counts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}
html[data-ui-mode="phone"] .jp38-page .jp-order-email-counts > div {padding:8px 4px;border-radius:12px;background:var(--jp-cream-2);font-size:10px;text-align:center}
html[data-ui-mode="phone"] .jp38-page .jp-order-email-counts b {display:block;font-size:20px;color:var(--jp-navy)}
html[data-ui-mode="phone"] #shellPageContent :is(.orders-metrics,.orders-page-head,.co-order-list h2) {display:none}
html[data-ui-mode="phone"] #shellPageContent #order-emails {padding:14px;border:0;border-radius:var(--jp-r-card);background:var(--jp-card);box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] #order-emails .jp-btn {display:flex;width:100%}
html[data-ui-mode="phone"] .jp38-page .co-workbench {display:block;margin:0 14px 12px;min-width:0}
html[data-ui-mode="phone"] .jp38-page .jp-order-seg {margin:0 14px 12px}
html[data-ui-mode="phone"] .jp38-page .jp-workspace-orders {display:block;margin:0 14px}
html[data-ui-mode="phone"] .jp38-page .jp-workspace-orders > .jp-order-seg {margin-left:0;margin-right:0}
html[data-ui-mode="phone"] .jp38-page .shadow-workspace {display:block}
html[data-ui-mode="phone"] .jp38-page .co-order-list {padding:0}
html[data-ui-mode="phone"] .jp38-page .directory-search-controls {display:flex;flex-wrap:wrap;gap:8px}
html[data-ui-mode="phone"] .jp38-page .directory-search-controls > input {flex:1 1 190px}
html[data-ui-mode="phone"] .jp38-page .directory-search-controls > label {flex-basis:100%}
html[data-ui-mode="phone"] .jp38-page > .jp-desk {margin:0 14px 12px}
html[data-ui-mode="phone"] .jp38-page > .jp-wide {margin:0;padding:0 14px 12px;max-width:100%;overflow-x:auto}
html[data-ui-mode="phone"] .jp38-page > .jp-wide > * {min-width:640px}
html[data-ui-mode="phone"] .jp38-page .jp-desk > button {grid-column:1/-1}
/* Phone recipe: compact saved progress, with read-only detail sheets. */
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > .jp-head{padding:calc(var(--jp-sat,env(safe-area-inset-top)) + 12px) 16px 14px;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;align-items:center}
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > .jp-head .jp-head-bar{display:contents}
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > .jp-head .jp-back{grid-column:1;grid-row:1/3;width:36px;background:none}
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > .jp-head :is(.jp-spacer,[data-sheet="jpAccount"]){display:none}
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > .jp-head h1{grid-column:2;margin:0;font-size:23px;line-height:1.15}
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > .jp-head p{grid-column:2;margin:5px 0 0;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp38-page:has(.jp-recipe-monitor) > :is(.module-tabs,.floor-quick-strip,.floor-mode-strip,#batchCommentForm,#packaging-history,.jp-batch-comment-form){display:none}
html[data-ui-mode="phone"] .jp38-page .floor-sheet-form{background:none;padding:0;border:0;border-radius:0}
html[data-ui-mode="phone"] #shellPageContent .jp-phone-batch > :not([data-jp-batch-view],script,template,input){display:none}
html[data-ui-mode="phone"] .jp-recipe-monitor{padding:10px 12px 12px}
html[data-ui-mode="phone"] .jp-recipe-monitor .jp-card{margin:0 0 10px;padding:12px;border-radius:18px}
html[data-ui-mode="phone"] .jp-recipe-batches{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 10px;scrollbar-width:none}
html[data-ui-mode="phone"] .jp-recipe-batches a{flex:1 0 44px;min-height:44px;display:grid;place-items:center;background:var(--jp-card);color:var(--jp-navy);border-radius:22px;font:700 12px/1 var(--jp-sans);text-decoration:none;scroll-snap-align:center;box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] .jp-recipe-batches a[aria-current="page"]{background:var(--jp-navy);color:#fff}
html[data-ui-mode="phone"] .jp-recipe-progress > div:first-child{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:10px;font-size:13px}
html[data-ui-mode="phone"] .jp-recipe-progress small{font-size:10px;color:var(--jp-muted);white-space:nowrap}
html[data-ui-mode="phone"] .jp-saved-yield-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--jp-sand);font:500 11px/1.3 var(--jp-sans);color:var(--jp-ink-2)}
html[data-ui-mode="phone"] .jp-saved-yield-summary span{display:grid;gap:3px}
html[data-ui-mode="phone"] .jp-saved-yield-summary b{font:700 16px/1.2 var(--jp-mono);color:var(--jp-navy);overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp-recipe-yield-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin:4px 0 -6px;padding:0;border:0;background:none;box-shadow:none;color:var(--jp-navy);font:700 12px/1 var(--jp-sans)}
html[data-ui-mode="phone"] .jp-saved-yield-row{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 0;border-top:1px solid var(--jp-sand)}
html[data-ui-mode="phone"] .jp-saved-yield-row small{flex-basis:100%}
html[data-ui-mode="phone"] .jp-recipe-track{display:grid;grid-template-columns:51px minmax(0,1fr) 30px;gap:8px;align-items:center;font-size:11px;color:var(--jp-muted);margin-top:7px}
html[data-ui-mode="phone"] .jp-recipe-track progress{appearance:none;width:100%;height:8px;border:0;border-radius:8px;overflow:hidden;background:#E1E5EC;color:var(--jp-green)}
html[data-ui-mode="phone"] .jp-recipe-track progress::-webkit-progress-bar{background:#E1E5EC;border-radius:8px}
html[data-ui-mode="phone"] .jp-recipe-track progress::-webkit-progress-value{background:var(--jp-green);border-radius:8px}
html[data-ui-mode="phone"] .jp-recipe-track progress::-moz-progress-bar{background:var(--jp-green);border-radius:8px}
html[data-ui-mode="phone"] .jp-recipe-row{display:grid;grid-template-columns:minmax(0,1fr) 28px 28px 44px;gap:5px;align-items:center;min-height:49px;padding:4px 0;border-bottom:1px solid var(--jp-sand)}
html[data-ui-mode="phone"] .jp-recipe-name{min-width:0}
html[data-ui-mode="phone"] .jp-recipe-name b{display:block;font:700 12px/1.3 var(--jp-sans);overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp-recipe-name small{display:block;color:var(--jp-muted);font-size:10px;line-height:1.4}
html[data-ui-mode="phone"] .jp-recipe-monitor .jp-recipe-warning{color:var(--jp-red);font-size:11px}
html[data-ui-mode="phone"] .jp-recipe-status{display:grid;place-items:center;height:30px;border-radius:9px;background:var(--jp-sand);font:800 10px/1 var(--jp-sans);color:var(--jp-ink-2)}
html[data-ui-mode="phone"] .jp-recipe-status.is-done{background:var(--jp-green);color:white}
html[data-ui-mode="phone"] .jp-recipe-monitor .jp-recipe-lot{width:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:var(--jp-sand);color:var(--jp-navy);font:700 11px/1 var(--jp-sans)}
html[data-ui-mode="phone"] .jp-recipe-no-lot{text-align:center;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-recipe-columns{min-height:28px;padding:0 0 8px;color:var(--jp-muted);font-size:10px;text-align:center}
html[data-ui-mode="phone"] .jp-recipe-columns h2{margin:0;text-align:left;font:700 18px/1.2 "Noto Serif",Georgia,serif;color:var(--jp-navy)}
html[data-ui-mode="phone"] .jp-recipe-legend{margin:8px 0 0;font-size:10px;line-height:1.4;color:var(--jp-muted)}
html[data-ui-mode="phone"] .jp-recipe-monitor .jp-recipe-links{display:flex;padding:4px 8px}
html[data-ui-mode="phone"] .jp-recipe-links :is(button,a){flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;padding:0 8px;border:0;border-radius:0;background:none;font:700 12px/1 var(--jp-sans);color:var(--jp-navy);text-decoration:none}
html[data-ui-mode="phone"] .jp-recipe-links > :not(:first-child){border-left:1px solid var(--jp-sand)}
html[data-ui-mode="phone"] .jp-recipe-detail-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:10px 0;border-bottom:1px solid var(--jp-sand);font-size:13px;overflow-wrap:anywhere}
html[data-ui-mode="phone"] .jp-recipe-detail-row :is(small,p){grid-column:1/-1;margin:0;white-space:pre-wrap}
html[data-ui-mode="phone"] .jp-recipe-detail-row small{color:var(--jp-muted)}

/* The approved C1 Home tab metrics stay unchanged. */
html[data-ui-mode="phone"] .phone-home-page .jp-tabs{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 230; display: flex; justify-content: space-around; background: #1b2a4a; border-top: 1px solid #2c3d63; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 14px #1b2a4a14; }
html[data-ui-mode="phone"] .phone-home-page .jp-tabs :is(a,button){ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1; padding: 0; border: 0; background: none; border-radius: 0; color: #aeb8cc; font:600 11px/normal -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif; min-height: 54px; }
html[data-ui-mode="phone"] .phone-home-page .jp-tabs [aria-current=page]{ color: var(--jp-gold); }
html[data-ui-mode="phone"] .phone-home-page .jp-tab-ico{ position: relative; display: grid; place-items: center; width: 46px; height: 32px; border-radius: 16px; }
html[data-ui-mode="phone"] .phone-home-page .jp-tabs [aria-current=page] .jp-tab-ico{ background: var(--jp-gold); color: #1b2a4a; }
html[data-ui-mode="phone"] .phone-home-page .jp-tab-ico svg{ width: 22px; height: 22px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-ui-mode="phone"] .phone-home-page .jp-badge{ position: absolute; right: -4px; top: -3px; border: 2px solid #1b2a4a; border-radius: 10px; color: white; font-size: 10px; padding: 0 4px; min-width: 18px; }
html[data-ui-mode="phone"] .phone-home-page .jp-badge.is-alert{ background: #b8322a; }
html[data-ui-mode="phone"] .phone-home-page .jp-badge.is-email{ background: #3a7bd5; }
html[data-ui-mode="phone"] .phone-home-page .jp-badge[hidden]{ display: none; }

/* 6. Tablet (handoff 40): the production floor. Motion and feel only; the tablet design is unchanged at rest.
   Floor rules: nothing waits for an animation, nothing blocks input, interaction motion is 160 ms or less,
   loaders only cover a real wait (shown after 150 ms) and never loop as decoration. Only transform family
   properties (scale, translate, rotate) and opacity move; the press shade is an instant filter, not an animation.
   html[data-jp-motion] is set by jp_kit.js: full | calm (slow device or the Motion setting: fades and shade only)
   | off (Reduce Motion or the setting: instant states, shade only). */
html[data-ui-mode="tablet"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;--jp-ease:cubic-bezier(.2,.8,.2,1)}
/* 6a. Press: jp_kit.js adds .is-pressed on pointerdown (same task) and runs the scale with the Web Animations API on
   the independent `scale` property, so an element's own transform and transitions are never overridden. */
html[data-ui-mode="tablet"] .is-pressed{filter:brightness(var(--jp-shade-b,.92))}
html[data-ui-mode="tablet"] .is-pressed.jp-dark{--jp-shade-b:.78}
html[data-ui-mode="tablet"] .jp-busy{opacity:.7;transition:opacity .12s ease-out}
/* 6b. Wait: one loader for every real wait (shell navigation, native saves, popup fetches). html.jp-wait is set by
   JPKit.wait 150 ms after the wait starts, so fast actions never flicker. The existing #shellProgress becomes a slim
   warm yellow bar under the header and the header JP badge turns like a coin (one calm turn, a rest, repeat, only
   while waiting). The existing #liveLoadingOverlay becomes a small cream chip under the header (no scrim, no blur,
   never takes a tap) that only appears when the wait passes 1.2 s. No second loader element exists. */
html[data-ui-mode="tablet"] body.jpf-app .shell-progress{position:fixed;left:0;right:0;top:var(--jp-tb-top);z-index:2300;height:3px;margin:0;background:rgba(248,199,34,.22);opacity:0;pointer-events:none;transition:opacity .12s ease-out}
html[data-ui-mode="tablet"] body.jpf-app .shell-progress::after{width:28%;background:var(--jp-gold);border-radius:0 2px 2px 0;transform:translateX(-110%);animation:none}
html[data-ui-mode="tablet"].jp-wait body.jpf-app .shell-progress{opacity:1}
html[data-ui-mode="tablet"].jp-wait body.jpf-app .shell-progress::after{animation:jp-tb-slide 1.3s cubic-bezier(.45,0,.55,1) infinite}
html[data-ui-mode="tablet"] body.jpf-app .live-loading-overlay{inset:calc(var(--jp-tb-top) + 12px) 0 auto;width:max-content;max-width:calc(100vw - 32px);margin:0 auto;padding:0;place-items:start center;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .14s ease-out,transform .14s var(--jp-ease)}
html[data-ui-mode="tablet"] body.jpf-app.live-loading-visible .live-loading-overlay{opacity:1;transform:none;pointer-events:none}
html[data-ui-mode="tablet"] body.jpf-app .live-loading-card{display:flex;align-items:center;gap:10px;width:auto;padding:8px 16px 8px 8px;border:0;border-radius:999px;background:var(--jp-cream-2);color:var(--jp-navy);box-shadow:0 6px 18px -8px rgba(27,42,74,.45),0 0 0 1px rgba(27,42,74,.08)}
html[data-ui-mode="tablet"] body.jpf-app .live-loading-logo{width:32px;height:32px;animation:none}
html[data-ui-mode="tablet"] body.jpf-app .live-loading-copy strong{font-size:14px;font-weight:800;line-height:1.2;color:var(--jp-navy)}
html[data-ui-mode="tablet"] body.jpf-app .live-loading-copy span{display:none}
/* 6c. Navigation: the old page stays visible and tappable until the new one is ready (shell.js no longer sets
   .is-loading on tablet). While the new page is styled off screen (.is-swapping, visibility hidden) a calm skeleton
   covers the content area if that lasts over 60 ms (jp_kit.js shows it; display none at rest, so no layer and no
   pixel exists until it is needed); then the new page fades in (opacity only, 140 ms; a transform here would move
   the fixed footers inside the page). */
html[data-ui-mode="tablet"] .jp-tb-skel{position:fixed;left:0;right:0;top:var(--jp-tb-top);bottom:0;z-index:20;padding:10px 8px;display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:min-content;gap:8px;background:var(--jp-cream-2);pointer-events:none}
html[data-ui-mode="tablet"] .jp-tb-skel[hidden]{display:none}
html[data-ui-mode="tablet"] .jp-tb-skel i{height:96px;border-radius:12px;background:var(--jp-sand)}
html[data-ui-mode="tablet"] .jp-tb-skel i:first-child{grid-column:1/-1;height:46px}
/* Popup fetches: JPKit.wait.skeleton(box) adds rows here only when the fetch passes 150 ms. */
html[data-ui-mode="tablet"] .jp-tb-rows{display:grid;gap:8px;padding:4px 0}
html[data-ui-mode="tablet"] .jp-tb-rows i{height:40px;border-radius:10px;background:var(--jp-sand)}
html[data-ui-mode="tablet"] .jp-tb-rows i:nth-child(2){width:86%}html[data-ui-mode="tablet"] .jp-tb-rows i:nth-child(3){width:64%}
/* 6d. Motion levels. Full: popups rise 8 px and fade in 140 ms, the backdrop fades, new pages fade in 140 ms, flash
   messages drop in 160 ms. Calm: fades only. Off: nothing moves. Closing is always instant. */
@media (prefers-reduced-motion:no-preference){
html[data-ui-mode="tablet"]:is([data-jp-motion="full"],[data-jp-motion="calm"]) dialog[open]{animation:jp-tb-fade .12s ease-out both}
html[data-ui-mode="tablet"][data-jp-motion="full"] dialog[open]:not(:has(#jpfKeyboard)){animation:jp-tb-pop .14s var(--jp-ease) both}
html[data-ui-mode="tablet"]:is([data-jp-motion="full"],[data-jp-motion="calm"]) dialog[open]::backdrop{animation:jp-tb-fade .14s ease-out both}
html[data-ui-mode="tablet"]:is([data-jp-motion="full"],[data-jp-motion="calm"]) .shell-page-content.jp-tb-enter{animation:jp-tb-in .14s ease-out both}
html[data-ui-mode="tablet"][data-jp-motion="full"] .flashes .flash{animation:jp-tb-drop .16s var(--jp-ease) both}
html[data-ui-mode="tablet"][data-jp-motion="calm"] .flashes .flash{animation:jp-tb-fade .14s ease-out both}
}
@keyframes jp-tb-slide{to{transform:translateX(380%)}}
@keyframes jp-tb-fade{from{opacity:0}}
@keyframes jp-tb-in{from{opacity:.3}}
@keyframes jp-tb-pop{from{opacity:0;translate:0 8px;scale:.985}}
@keyframes jp-tb-drop{from{opacity:0;translate:0 -8px}}
html[data-ui-mode="tablet"][data-jp-motion="off"] *,html[data-ui-mode="tablet"][data-jp-motion="off"] *::before,html[data-ui-mode="tablet"][data-jp-motion="off"] *::after,html[data-ui-mode="tablet"][data-jp-motion="off"] ::backdrop{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
html[data-ui-mode="tablet"][data-jp-motion="off"].jp-wait body.jpf-app .shell-progress::after{transform:none;width:100%;opacity:.55}
/* 6e. Motion setting chips in the Tools panel (no browser default control). */
html[data-ui-mode="tablet"] .jp-tb-motion{display:flex;align-items:center;gap:6px;padding:8px 4px 2px;font-size:12px;font-weight:700;line-height:1;color:var(--jp-ink-2)}
html[data-ui-mode="tablet"] .jp-tb-motion span{flex:1}
html[data-ui-mode="tablet"] .jp-tb-motion button{min-width:64px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:var(--jp-sand);color:var(--jp-navy);font:inherit;font-size:13px;font-weight:800;line-height:1;cursor:pointer}
html[data-ui-mode="tablet"] .jp-tb-motion button[aria-pressed="true"]{background:var(--jp-navy);color:#fff}


/* 7. Tablet theme tokens. Phone and shared brand tokens remain unchanged. */
html[data-ui-mode="tablet"]{
 --jp-bar:#1B2A4A;--jp-bar-hi:#3A4F82;--jp-bar-mid:#22345A;--jp-band:#121E36;--jp-yellow:#F8C722;--jp-yellow-d:#D9A514;--jp-on-bar:#C9D2E4;
 --jp-navy-2:#22345A;--jp-navy-3:#2C4170;--jp-ink:#1B2A4A;--jp-ink-2:#4B5568;--jp-muted:#6F798E;
 --jp-cream:#F5EFE1;--jp-cream-2:#FBF7EE;--jp-sand:#EFE7D6;--jp-sand-2:#E2D8C3;--jp-card:#FFFFFF;--jp-hair:rgba(255,246,201,.4);
 --jp-red:#B8322A;--jp-red-bg:#F8D9D5;--jp-amber:#7A4E00;--jp-amber-bg:#FBE3B0;--jp-green:#1E6B3A;--jp-green-bg:#E2F1E6;
 --jp-blue:#1F6FD1;--jp-blue-bg:#DCE7F7;--jp-orange:#E8862A;--jp-done:#2E9E4A;--jp-kettle:#D9534F;--jp-herbort:#4F7CC0;--jp-other:#F0B90B;
 --jp-r-card:16px;--jp-r-row:14px;--jp-r-btn:12px;--jp-r-pill:999px;
 --jp-shadow:0 8px 22px -12px rgba(27,42,74,.30),0 1px 2px rgba(27,42,74,.06);
 --jp-shadow-low:0 3px 8px -5px rgba(27,42,74,.35),0 1px 1px rgba(27,42,74,.06);
 --jp-head-font:"Noto Serif",Georgia,serif;--jp-sans:Lexend,system-ui,sans-serif;--jp-mono:"DejaVu Sans Mono",ui-monospace,monospace;
 --jp-tb-top:56px;
}


/* 41 batch switches preserve the sheet's geometry while content loads. */
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel { padding:0;gap:6px;grid-template:62px minmax(0,1fr) 46px/minmax(0,1fr) 236px;background:var(--jp-cream) }
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel i { height:auto;border-radius:0 }
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel i:nth-child(1) { grid-column:1/-1;background:var(--jp-band) }
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel i:nth-child(2) { margin-left:8px;border-radius:14px;background:repeating-linear-gradient(var(--jp-sand) 0 63px,transparent 63px 68px) }
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel i:nth-child(3) { margin-right:8px;border-radius:16px }
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel i:nth-child(4) { grid-column:1/-1;background:var(--jp-cream-2);box-shadow:inset 0 1px 0 var(--jp-sand-2) }
html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel i:nth-child(5) { display:none }
html[data-ui-mode="tablet"] .jp-tb-skel { transition:opacity .14s ease-out,display .14s allow-discrete }
html[data-ui-mode="tablet"] .jp-tb-skel[hidden] { opacity:0 }
@starting-style { html[data-ui-mode="tablet"] .jp-tb-skel:not([hidden]) { opacity:0 } }
@media (min-width:1200px) { html[data-ui-mode="tablet"] body:has(form.floor-sheet-form) .jp-tb-skel { grid-template:68px minmax(0,1fr) 52px/minmax(0,1fr) 292px } }
@media (prefers-reduced-motion:reduce) { html[data-ui-mode="tablet"] .jp-tb-skel { transition:none } }
html[data-ui-mode="tablet"][data-jp-motion="off"] .jp-tb-skel { transition:none }

/* Phone search sheet (handoff 50). The shared command bar markup, restyled as a jp sheet: plain title, Cancel,
   a 16px field so iOS does not zoom, results as jp rows, no keyboard hints and no page showing through. */
html[data-ui-mode="phone"] .command-bar-shell{position:fixed;inset:0;z-index:2400;display:block}
html[data-ui-mode="phone"] .command-bar-shell[hidden]{display:none}
html[data-ui-mode="phone"] .command-bar-scrim{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:rgba(16,24,42,.42)}
html[data-ui-mode="phone"] .command-bar-dialog{position:absolute;inset:calc(var(--jp-sat,env(safe-area-inset-top)) + 10px) 0 0 0;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;border-radius:24px 24px 0 0;background:var(--jp-cream-2);color:var(--jp-ink);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--jp-shadow);transform:none}
html[data-ui-mode="phone"] .command-bar-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:14px 12px 6px 18px;border:0;background:none}
html[data-ui-mode="phone"] .command-bar-title-wrap{display:block;min-width:0}
html[data-ui-mode="phone"] .command-bar-title-wrap strong{display:block;font:var(--jp-t-title);font-size:24px;color:var(--jp-navy)}
html[data-ui-mode="phone"] .command-bar-title-wrap span{display:none}
html[data-ui-mode="phone"] .command-bar-close{min-width:44px;min-height:44px;padding:0 8px;border:0;border-radius:12px;background:none;box-shadow:none;color:var(--jp-blue);font:700 16px/1 var(--jp-sans)}
html[data-ui-mode="phone"] .command-bar-input-wrap{display:flex;flex-direction:row;grid-template-columns:none;align-items:center;gap:8px;margin:4px 16px 8px;padding:0 14px;min-height:50px;border:0;border-radius:var(--jp-r-row);background:var(--jp-card);box-shadow:var(--jp-shadow-low)}
html[data-ui-mode="phone"] .command-bar-input-wrap::before{content:"";flex:none;width:18px;height:18px;background:var(--jp-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-ui-mode="phone"] .command-bar-input-wrap input{flex:1;min-width:0;height:48px;margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;color:var(--jp-ink);font:500 16px/1.2 var(--jp-sans)}
html[data-ui-mode="phone"] .command-bar-input-wrap input::placeholder{color:var(--jp-muted)}
html[data-ui-mode="phone"] :is(.command-bar-input-icon,.command-bar-input-hint){display:none}
html[data-ui-mode="phone"] .command-bar-results{display:block;flex:1;min-height:0;max-height:none;margin:0;padding:0 16px calc(24px + var(--jp-sab,env(safe-area-inset-bottom)));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border:0;background:none}
html[data-ui-mode="phone"] .command-bar-section{display:block;margin:0;padding:0;border:0}
html[data-ui-mode="phone"] .command-bar-section-title{margin:14px 4px 6px;padding:0;font:var(--jp-t-caps);letter-spacing:.06em;text-transform:uppercase;color:var(--jp-muted);background:none}
html[data-ui-mode="phone"] .command-bar-section-list{display:block;margin:0;padding:0;border-radius:var(--jp-r-card);background:var(--jp-card);box-shadow:var(--jp-shadow-low);overflow:hidden}
html[data-ui-mode="phone"] .command-bar-result{display:flex;align-items:center;gap:12px;min-height:58px;margin:0;padding:10px 14px;border:0;border-top:1px solid var(--jp-sand);border-radius:0;background:none;box-shadow:none;color:var(--jp-ink);text-decoration:none}
html[data-ui-mode="phone"] .command-bar-section-list > .command-bar-result:first-child{border-top:0}
html[data-ui-mode="phone"] .command-bar-result:is(:hover,.is-active){background:none;box-shadow:none;outline:0}
html[data-ui-mode="phone"] .command-bar-result-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
html[data-ui-mode="phone"] .command-bar-result-label{font:700 15px/1.25 var(--jp-sans);color:var(--jp-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-ui-mode="phone"] .command-bar-result-subtitle{font:var(--jp-t-small);color:var(--jp-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-ui-mode="phone"] .command-bar-kind{flex:none;padding:4px 9px;border:0;border-radius:var(--jp-r-pill);background:var(--jp-sand);color:var(--jp-ink-2);font:800 10.5px/1 var(--jp-sans);letter-spacing:.04em;text-transform:uppercase}
html[data-ui-mode="phone"] .command-bar-empty{margin:18px 0 0;padding:26px 16px;border:0;border-radius:var(--jp-r-card);background:var(--jp-card);box-shadow:var(--jp-shadow-low);text-align:center;color:var(--jp-ink-2)}
html[data-ui-mode="phone"] .command-bar-empty strong{display:block;margin-bottom:4px;font:var(--jp-t-h2);color:var(--jp-navy)}
html[data-ui-mode="phone"] .command-bar-empty p{margin:0;font:var(--jp-t-small)}
html[data-ui-mode="phone"] .command-bar-skeleton{display:grid;gap:10px;margin-top:16px}
html[data-ui-mode="phone"] .command-bar-skeleton .jp-skel{display:block;height:58px;border-radius:var(--jp-r-row)}
html[data-ui-mode="phone"] body.command-bar-open{overflow:hidden}
@media (prefers-reduced-motion:no-preference){html[data-ui-mode="phone"] .command-bar-shell:not([hidden]) .command-bar-dialog{animation:jp-cb-up var(--jp-d-sheet) var(--jp-ease) both}}
@keyframes jp-cb-up{from{transform:translateY(24px);opacity:0}}
/* The recipe sheet's floor jump strip moves into the hidden view tools after load; never show it on phone. */
html[data-ui-mode="phone"] .jp38-page > .floor-quick-strip{display:none}
html[data-ui-mode="phone"] .jp38-page:has(> form.floor-sheet-form) > .page-head .toolbar-actions{display:none}
/* Floor (PRODUCTION role) users: production_header.css gives the desktop production bar display:grid with higher
   specificity than the phone shell rule, so it showed above the phone header on every page. */
html[data-ui-mode="phone"] body.jpf-app.production-workspace header.app-topbar{display:none}