/* Koharu — shared styles for the staff app and the accounts page. One file, so both look the same. */
  :root{
    /* Wakakusa × Kaki — warm washi paper, sage status, persimmon actions. Values only; names unchanged so the whole app re-skins. */
    --paper:#F3EFE6;--surface:#FCFAF4;--surface-2:#EEE9DB;
    --ink:#2A2820;--ink-soft:#79766A;--ink-faint:#A8A491;
    --line:#E7E2D3;--line-strong:#DDD6C4;
    /* --amber = PRIMARY/actions = persimmon (carries pale text on fills). --matcha = status/healthy = sage. */
    --amber:#BC6A42;--amber-dark:#A5572F;--amber-soft:#F1E3D6;
    --brown:#BC6A42;
    --vermilion:#AE5344;--vermilion-soft:#F1E6E0;
    --matcha:#7C8A5C;--matcha-soft:#E8ECDC;
    --sage-text:#4F5E34;
    --warn:#B4841F;--warn-soft:#F3EBD6;--warn-text:#8A6413;
    --info:#4A6785;
    --shadow:0 3px 16px rgba(66,48,28,.06);
    /* ice on a recipe card's finished cup. One alpha cannot serve both themes: the pale wash that
       reads on the light drink vanishes on the near-black dark one, so each theme carries its own. */
    --rc-ice-rgb:252,250,244;--rc-ice-fo:.33;--rc-iceln-rgb:110,106,92;--rc-iceln-o:.26;
    /* the beaker: what it holds, and the glass and bamboo it is drawn in */
    --rc-water:#DCE6EE;--rc-water-line:#4A6785;--rc-milk:#F2EADA;--rc-milk-line:#9C8452;
    --rc-glass:#79766A;--rc-bamboo:#E4D5B8;--rc-syrup:#E2C79A;--rc-syrup-line:#9C7A3E;--rc-steel:#9A968C;--rc-powder:#8FA062;
    /* a fish left on the iron. Dark enough to read as ruined at 40px, and a token rather than a
       hex so the dark theme can lift it off its own near-black surface. */
    --rc-burnt:#6B4A22;--rc-burnt-line:#3E2A11;
    --rc-bean:#6E3B3A;--rc-bean-line:#47201F;--rc-cheese:#E8C46A;--rc-cheese-line:#A8842A;
    --radius:18px;--radius-sm:13px;
  }
  html[data-theme="dark"]{
    --paper:#1B1915;--surface:#252118;--surface-2:#2F2A20;
    --ink:#ECE6D8;--ink-soft:#ABA491;--ink-faint:#78715F;
    --line:#39332A;--line-strong:#4A4432;
    --amber:#CE7B50;--amber-dark:#D89065;--amber-soft:#372A20;--brown:#CE7B50;
    --vermilion:#CB6E5C;--vermilion-soft:#38251F;
    --matcha:#9AAB74;--matcha-soft:#26301E;
    --warn:#D2A23F;--warn-soft:#332913;--warn-text:#D2A23F;
    --info:#7DA0C2;
    --sage-text:#9AAB74;
    --rc-ice-rgb:236,230,216;--rc-ice-fo:.11;--rc-iceln-rgb:236,230,216;--rc-iceln-o:.30;
    --rc-water:#22303B;--rc-water-line:#7DA0C2;--rc-milk:#332C1F;--rc-milk-line:#C0A87A;
    --rc-glass:#ABA491;--rc-bamboo:#4A4030;--rc-syrup:#3A2E1B;--rc-syrup-line:#C9A868;--rc-steel:#8A867C;--rc-powder:#7E8E55;
    --rc-burnt:#5C4021;--rc-burnt-line:#9C7645;
    --rc-bean:#462524;--rc-bean-line:#B87F72;--rc-cheese:#4A3A16;--rc-cheese-line:#D8B65C;
    --shadow:0 3px 16px rgba(0,0,0,.45);
  }
  /* dark: raw-hex status pills/tags that can't ride the tokens */
  html[data-theme="dark"] .ph-count,
  html[data-theme="dark"] .clk-pill.out,
  html[data-theme="dark"] .inv-pill.low,
  html[data-theme="dark"] .inv-chg.down,
  html[data-theme="dark"] .rcell.rc-mc{background:#3A2620;color:#E6A08F;}
  html[data-theme="dark"] .clk-pill.in,
  html[data-theme="dark"] .inv-pill.ok,
  html[data-theme="dark"] .inv-chg.up,
  html[data-theme="dark"] .sup-pill.int{background:#26301E;color:#9AAB74;}
  html[data-theme="dark"] .inv-pill.warn,
  html[data-theme="dark"] .staff-pill.tr,
  html[data-theme="dark"] .pr-pill.tr,
  html[data-theme="dark"] .tr-tag,
  html[data-theme="dark"] .rcell.rc-al{background:#332913;color:#DAB35B;}
  html[data-theme="dark"] .rcell.rc-rl{background:#1F2A38;color:#8FB2D6;}
  html[data-theme="dark"] .rcell.rc-bl{background:#242F1B;color:#A9BE7E;}
  html[data-theme="dark"] .ord-tf-foot{background:#211E17;}
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45;}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{font-family:inherit;font-size:16px;}
  /* every <select> in the app shares ONE arrow: custom chevron, vertically centered, with clearance so text never collides. New selects inherit this automatically. */
  select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--surface-2);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F685D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;}
  [data-lucide]{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;vertical-align:middle;}
  [data-lucide] svg{width:100%;height:100%;display:block;}
  /* taps act as clicks immediately — no iOS double-tap-to-zoom on controls (pinch-zoom still works) */
  button, .brand, .nav-item, .acct-btn, .loc-btn, .loc-item, .login-seal, .seg-btn, [onclick]{touch-action:manipulation;}

  .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;padding-top:calc(12px + env(safe-area-inset-top));background:rgba(247,244,238,.86);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);}
  .brand{display:flex;align-items:center;gap:11px;min-width:0;}
  .seal{width:34px;height:34px;border-radius:9px;flex:none;background:var(--brown);color:var(--amber-soft);display:grid;place-items:center;font-weight:700;font-size:17px;letter-spacing:.02em;}
  .brand-text{min-width:0;}
  .brand-name{font-weight:700;letter-spacing:-.01em;font-size:17px;line-height:1.1;white-space:nowrap;}
  .brand-caret{display:none;width:16px;height:16px;color:var(--ink-faint);margin-left:1px;transition:transform .2s ease;}

  .loc-switch{position:relative;}
  .loc-btn{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:8px 12px;color:var(--ink);font-weight:600;font-size:13px;line-height:1.5;box-shadow:var(--shadow);max-width:60vw;}
  .topbar-right{display:flex;align-items:center;gap:10px;min-width:0;}
  .acct-btn{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:8px 12px;color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;box-shadow:var(--shadow);}
  .acct-btn:hover{border-color:var(--amber);}
  .acct-btn [data-lucide]{width:16px;height:16px;color:var(--ink-faint);}
  .acct-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  @media(max-width:560px){ .acct-name{display:none;} }
  body.staff .owner-only{display:none!important;}
  body.can-roster .nav-item[data-tab="roster"], body.can-clock .nav-item[data-tab="clock"], body.can-bakehouse .nav-item[data-tab="bakehouse"]{display:flex!important;}
  body.staff .nav-item[data-tab="training"]{display:none!important;}
  body.staff.can-train .nav-item[data-tab="training"]{display:flex!important;}
  .staff-only{display:none!important;}
  .acc-top{display:none!important;}
  body.can-accounts .acc-top{display:inline-flex!important;}
  @media (max-width:520px){ .acc-top .acc-top-l{display:none;} .acc-top{padding:8px 10px;} }
  body.staff .staff-only{display:flex!important;}
  #login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:24px;z-index:60;}
  .login-card{width:100%;max-width:362px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:32px 26px;text-align:center;}
  .login-seal{width:54px;height:54px;border-radius:15px;background:var(--brown);color:#fff;font-weight:800;font-size:23px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;}
  .seal,.login-seal{color:#F3EFE6;overflow:hidden;}
  .seal .mark,.login-seal .mark{width:100%;height:100%;display:block;}
  .login-title{font-size:22px;font-weight:800;margin:0;letter-spacing:-.01em;}
  .login-sub{font-size:13.5px;color:var(--ink-soft);margin:5px 0 22px;}
  .login-field{text-align:left;margin-bottom:14px;}
  .login-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
  .login-field input{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:12px;background:var(--surface-2);color:var(--ink);outline:none;font-size:15px;}
  .login-field input:focus{border-color:var(--amber);background:var(--surface);}
  #li_pin{text-align:center;font-size:19px;letter-spacing:.55em;text-indent:.55em;font-weight:500;color:var(--ink-soft);caret-color:var(--amber);}
  #li_pin::placeholder{color:var(--ink-faint);letter-spacing:.55em;}
  #li_pin:focus{color:var(--ink-soft);}
  .login-err{color:var(--vermilion);font-size:12.5px;min-height:17px;text-align:left;margin-bottom:8px;}
  .login-btn{width:100%;justify-content:center;height:46px;font-size:15px;}
  .loc-btn .loc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .loc-btn [data-lucide]{width:16px;height:16px;color:var(--ink-soft);position:relative;top:1px;}
  .loc-btn [data-lucide="chevron-down"]{width:16px;height:16px;color:var(--ink-soft);}
  .loc-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;min-width:210px;display:none;}
  .loc-menu.open{display:block;}
  .loc-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;text-align:left;padding:10px 11px;border-radius:9px;color:var(--ink);font-size:14px;font-weight:500;}
  .loc-item:hover{background:var(--surface-2);}
  .loc-zone{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-faint);padding:10px 11px 4px;border-top:1px solid var(--line);margin-top:4px;}
  .item-zone{margin:-4px 0 12px;}
  .lt-prev{opacity:.6;}
  .pv-fold{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit;}
  .pv-zone{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-faint);padding:12px 18px 6px;border-top:1px solid var(--line);background:var(--surface-2);}
  .loc-item.active{background:var(--amber-soft);color:var(--amber-dark);font-weight:600;}
  .loc-item .tag{margin-left:auto;font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;}

  .demo-bar{display:none;}
  body.demo .demo-bar{display:flex;align-items:center;justify-content:center;gap:8px;line-height:1;padding:8px 14px;background:var(--amber-soft);color:var(--amber-dark);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);}
  body.demo .demo-bar [data-lucide]{width:16px;height:16px;}

  .body{display:flex;min-height:calc(100vh - 60px);}
  .nav{flex:none;width:210px;padding:18px 14px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px;}
  .nav-item{display:flex;align-items:center;gap:12px;background:none;border:none;width:100%;text-align:left;padding:11px 12px;border-radius:10px;color:var(--ink-soft);font-weight:600;font-size:14px;}
  .nav-item [data-lucide]{color:var(--ink-faint);}
  .nav-item:hover{background:var(--surface-2);color:var(--ink);}
  .nav-item.active{background:var(--brown);color:#fff;}
  .nav-item.active [data-lucide]{color:var(--amber-soft);}
  .nav-label{flex:1;}
  .nav-sep{height:1px;background:var(--line);margin:8px 10px;flex:none;}
  body.staff .nav-sep.staff-only{display:block!important;}
  .nav-foot{margin-top:auto;padding:12px 12px 2px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:11.5px;font-weight:600;}
  .content{flex:1;min-width:0;padding:26px 30px 60px;max-width:1100px;}

  .nav-backdrop{display:none;}

  @media (max-width:820px){
    .content{padding:18px 16px 60px;}
    .body{display:block;min-height:auto;}
    /* nav becomes an off-canvas left drawer, opened by tapping the topbar logo */
    .nav{position:fixed;top:0;left:0;bottom:0;z-index:60;width:min(80vw,290px);flex-direction:column;gap:4px;
         border-right:1px solid var(--line);border-top:none;background:var(--surface);box-shadow:0 0 44px rgba(20,16,12,.22);
         padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
         overflow-y:auto;transform:translateX(-100%);transition:transform .24s ease;}
    .nav.open{transform:translateX(0);}
    .nav-item{font-size:14px;}
    .nav-backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(20,16,12,.42);
         opacity:0;visibility:hidden;transition:opacity .24s ease;}
    .nav-backdrop.open{opacity:1;visibility:visible;}
    .brand{cursor:pointer;}
    .brand-caret{display:inline-flex;}
    .loc-btn{max-width:42vw;}
  }

  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap;}
  .page-title{font-size:23px;font-weight:700;letter-spacing:-.01em;margin:0;}
  .page-sub{color:var(--ink-soft);font-size:13.5px;margin-top:3px;}
  .page-actions{display:flex;gap:9px;flex-wrap:wrap;}

  .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:9px 14px;border-radius:10px;font-weight:600;font-size:13.5px;line-height:1;box-shadow:var(--shadow);}
  .btn:hover{border-color:var(--ink-faint);}
  .btn [data-lucide]{width:16px;height:16px;}
  .btn-primary{background:var(--amber);border-color:var(--amber);color:#fff;}
  .btn-primary:hover{background:var(--amber-dark);border-color:var(--amber-dark);}
  .btn-ghost{background:none;border-color:transparent;box-shadow:none;color:var(--ink-soft);}
  .btn-soft{background:var(--paper);border-color:var(--line-strong);color:var(--ink);box-shadow:none;}
  .ac-run{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);}
  .btn-ghost:hover{background:var(--surface-2);color:var(--ink);}
  .btn-soft{background:var(--amber-soft);color:var(--amber-dark);border-color:var(--amber-soft);}
  .btn-soft:hover{background:#EAD9C9;border-color:#EAD9C9;}
  .confirm-text{font-size:14px;line-height:1.55;color:var(--ink);margin:0;}
  .confirm-text b{font-weight:700;}
  .btn-ok{background:var(--matcha);color:#fff;border-color:var(--matcha);}
  .btn-ok:hover{background:#6B784E;border-color:#6B784E;}
  .btn-ok:disabled{opacity:.45;cursor:not-allowed;}
  html[data-theme="dark"] .btn-ok{color:#1B1915;}
  html[data-theme="dark"] .inv-same.on{color:#1B1915;}
  .btn-danger-solid{background:var(--vermilion);color:#fff;border-color:var(--vermilion);}
  .btn-danger-solid:hover{background:#9d322e;border-color:#9d322e;}
  .btn-danger-solid:disabled{opacity:.45;cursor:not-allowed;}
  .btn-danger{color:var(--vermilion);border-color:var(--vermilion-soft);background:var(--surface);}
  .btn-danger:hover{background:var(--vermilion-soft);}
  .btn-sm{padding:6px 10px;font-size:12.5px;}
  .bake-add{min-width:118px;justify-content:center;white-space:nowrap;}
  /* clock in/out buttons: fixed width so the box doesn't resize when the label toggles */
  .clock-toggle{min-width:126px;justify-content:center;}
  .clock-toggle-lg{min-width:158px;justify-content:center;}
  .login-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .login-actions .btn{padding:7px 11px;line-height:1;}
  .login-actions .btn [data-lucide]{width:14px;height:14px;position:relative;top:-1px;}
  .icon-btn{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);}
  .icon-btn:hover{color:var(--ink);border-color:var(--ink-faint);}
  .icon-btn [data-lucide]{width:18px;height:18px;}

  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:26px;}
  .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow);}
  .stat-top{display:flex;align-items:center;justify-content:space-between;color:var(--ink-faint);}
  .stat-top [data-lucide]{width:18px;height:18px;}
  .stat-label{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;}
  .stat-ic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-soft);flex:none;}
  .stat-ic [data-lucide]{width:16px;height:16px;}
  .stat-alert .stat-ic{background:#F3E0DA;color:var(--vermilion);}
  .ph-count{margin-left:2px;background:#F3E0DA;color:#8F3A2C;font-size:12px;font-weight:700;letter-spacing:0;border-radius:999px;padding:2px 9px;text-transform:none;}
  .hrs-stat{display:flex;flex-direction:column;padding:16px 12px 14px;}
  .hrs-stat .stat-label{white-space:nowrap;font-size:11px;}
  .hrs-stat .stat-val{margin-top:auto;font-size:19px;line-height:1;white-space:nowrap;}
  .hrs-stat .hm{font-size:.7em;font-weight:700;color:var(--ink-faint);margin-left:1px;}
  .stat-val{font-size:28px;font-weight:700;margin-top:8px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* Mincho serif on headings, brand mark & big numbers (Wakakusa × Kaki). Presentation only. */
  .page-title,.login-title,.modal-head h2,.stat-val,.splash-name,.brand-name,.seal,.login-seal,.lg-box h3{font-family:'Zen Old Mincho',serif;}
  .stat-val.warn{color:var(--vermilion);}
  .stat-foot{font-size:12.5px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  @media (max-width:820px){
    .stat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;}
    .stat{padding:14px 13px 12px;}
    .stat-val{font-size:18px;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip;line-height:1.2;}
    .stat-foot{font-size:11.5px;}
  }

  .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
  .search{display:flex;align-items:center;gap:9px;flex:1;min-width:200px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;box-shadow:var(--shadow);}
  .search [data-lucide]{width:18px;height:18px;color:var(--ink-faint);flex:none;}
  .search input{border:none;outline:none;background:none;padding:11px 0;width:100%;color:var(--ink);}
  .sortsel{appearance:none;-webkit-appearance:none;height:44px;border:1px solid var(--line-strong);border-radius:10px;padding:0 36px 0 12px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236F685D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center;color:var(--ink);font-weight:600;font-size:13px;box-shadow:var(--shadow);flex:none;cursor:pointer;}
  .sortsel:focus{outline:none;border-color:var(--amber);}
  .lowtgl{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink-soft);font-weight:600;font-size:13px;box-shadow:var(--shadow);flex:none;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;}
  .lowtgl [data-lucide]{width:15px;height:15px;}
  .lowtgl.on{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
  .panel-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
  .row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--line);}
  .row:last-child{border-bottom:none;}
  .row:hover{background:var(--surface-2);}
  .row.static:hover{background:none;}
  /* clock shift-history: expanded sessions sit in a tinted, rail-marked well so groups read clearly */
  .clk-sessions{background:var(--surface);box-shadow:inset 3px 0 0 var(--amber);border-bottom:1px solid var(--line-strong);}
  .clk-srow{display:flex;align-items:center;gap:14px;padding:10px 18px 10px 28px;border-bottom:1px solid var(--line);}
  .clk-srow:last-child{border-bottom:none;}
  .clk-srow:hover{background:rgba(184,116,26,.05);}
  .clk-head{cursor:pointer;}
  .clk-head:hover{background:var(--surface-2);}
  .clk-head.open{background:var(--surface-2);}
  .clk-block:last-child .clk-head{border-bottom:none;}
  .clk-block:last-child .clk-sessions{border-bottom:none;}
  /* --- clock revamp (Option C): duty hero + avatar rows + status pills --- */
  .duty-hero{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px;}
  .duty-n{font-family:'Zen Old Mincho',serif;font-size:34px;font-weight:700;line-height:1;color:var(--matcha);}
  .duty-n .of{font-size:17px;color:var(--ink-faint);font-weight:700;}
  .duty-foot{font-size:12px;color:var(--ink-soft);margin-top:4px;}
  .duty-stack{display:flex;margin-left:auto;padding-left:10px;}
  .duty-stack .clk-av{margin-left:-10px;border:2px solid var(--surface);}
  .duty-stack .clk-av:first-child{margin-left:0;}
  .duty-none{margin-left:auto;font-size:12.5px;color:var(--ink-faint);text-align:right;}
  .clk-av{width:38px;height:38px;border-radius:11px;background:var(--matcha-soft);color:var(--matcha);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;}
  .clk-av.more{background:var(--surface-2);color:var(--ink-soft);}
  .clk-row{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);}
  .clk-row:last-child{border-bottom:none;}
  .clk-row .info{flex:1;min-width:0;}
  .clk-time{font-size:13px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none;min-width:64px;text-align:right;}
  .clk-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none;min-width:54px;}
  .clk-pill .dot{width:6px;height:6px;border-radius:50%;flex:none;}
  .clk-pill.hrs{background:var(--surface-2);color:var(--ink);}
  .clk-pill.in{background:#E7ECDB;color:#566A3B;} .clk-pill.in .dot{background:var(--matcha);}
  .clk-pill.out{background:#F3E0DA;color:#8F3A2C;} .clk-pill.out .dot{background:var(--vermilion);}
  .row-main{flex:1;min-width:0;}
  .row-name{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .row-name.rn-tr{flex-wrap:nowrap;}
  .row-name.rn-tr .rn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .tr-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1.3;padding:3px 8px;border-radius:6px;flex:none;background:#F3E9D2;color:#7C5A12;}
  .loc-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.01em;line-height:1.3;padding:3px 8px 3px 6px;border-radius:6px;flex:none;background:var(--matcha-soft);color:#4F5E34;max-width:140px;}
  .loc-tag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .chip.sup-chip{background:var(--amber-soft);color:var(--amber-dark);border-color:#E7C9B4;}
  .chip.kit-chip{background:var(--matcha-soft);color:#4F5E34;border-color:#CBD6B4;}
  .row-meta{color:var(--ink-soft);font-size:12.5px;margin-top:2px;}
  .chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;line-height:1;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);display:inline-block;flex:none;}
  .dot.ok{background:var(--matcha);}
  @keyframes ondutyblink{0%,100%{opacity:1}50%{opacity:.3}}
  .live-dot{width:11px;height:11px;border-radius:50%;background:var(--matcha);display:inline-block;flex:none;box-shadow:0 0 0 3px rgba(124,138,92,.20);animation:ondutyblink 1.2s ease-in-out infinite;}
  .live-dot.ot{background:#E0A52A;box-shadow:0 0 0 3px rgba(224,165,42,.20);}
  .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;}
  .seg-btn{border:none;background:none;padding:7px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--ink-soft);}
  .seg-btn.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);}
  .login-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:10px;padding:11px 12px;color:var(--ink-soft);font-size:12.5px;font-weight:600;text-align:left;}
  .login-toggle .opt{font-weight:500;color:var(--ink-faint);}
  .login-toggle [data-lucide]{width:16px;height:16px;color:var(--ink-faint);transition:transform .2s ease;flex:none;}
  .login-toggle.open [data-lucide]{transform:rotate(180deg);}
  .chip.low{background:var(--vermilion-soft);color:var(--vermilion);border-color:transparent;}
  .chip.ok{background:var(--matcha-soft);color:var(--matcha);border-color:transparent;}
  .chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent;}

  .row-upd{font-size:11px;color:var(--ink-faint);margin-top:3px;display:flex;align-items:center;gap:5px;}
  .row-upd [data-lucide]{width:11px;height:11px;flex:none;}
  .ord-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer;color:var(--ink);font:inherit;}
  .ord-pick:last-child{border-bottom:none;}
  .ord-pick:hover{background:var(--surface-2);}
  .ord-pick [data-lucide]{width:16px;height:16px;color:var(--amber);flex:none;}
  .ord-pick-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .unit-row{display:flex;align-items:center;gap:6px;}
  .unit-row select{flex:1;}
  .unit-cog{flex:none;color:var(--ink-soft);}
  .unit-mgr{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);}
  .unit-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .unit-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;font-size:12px;font-weight:600;color:var(--ink);}
  .unit-chip button{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;border-radius:999px;cursor:pointer;color:var(--ink-faint);}
  .unit-chip button:hover{background:var(--vermilion-soft);color:var(--vermilion);}
  .unit-chip button [data-lucide]{width:12px;height:12px;}
  .unit-add{display:flex;gap:6px;margin-top:9px;}
  .unit-add input{flex:1;}
  .unit-note{font-size:11px;color:var(--ink-faint);margin-top:7px;}
  .sc-submit{position:sticky;bottom:0;display:none;justify-content:flex-end;gap:10px;padding:12px 0 8px;margin-top:6px;background:linear-gradient(to top, var(--paper) 62%, rgba(247,244,238,0));}
  .sc-submit.show{display:flex;}
  .sc-submit .btn{min-width:180px;justify-content:center;box-shadow:0 8px 22px rgba(40,28,18,.18);}
  .chk-line{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;}
  .chk-line input{width:16px;height:16px;flex:none;}
  .sup-perms{margin:2px 0;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px;}
  .sup-perms .chk-line{font-weight:500;}
  .pt-ctl{display:flex;align-items:center;gap:9px;flex:none;}
  .pt-n{min-width:20px;text-align:center;font-weight:800;font-size:15px;color:var(--ink);}
  .qty-box{position:relative;width:54px;height:44px;flex:none;border:1px solid transparent;border-radius:13px;background:var(--surface-2);display:grid;place-items:center;transition:box-shadow .15s,border-color .15s,background .15s;}
  .qty-input{width:100%;border:none;background:transparent;font-size:17px;font-weight:800;line-height:1;text-align:center;color:var(--ink);outline:none;padding:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em;-moz-appearance:textfield;}
  .qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .qty-box.st-red .qty-input{color:var(--vermilion);}
  .qty-box:focus-within{border-color:var(--amber);background:var(--surface);box-shadow:0 0 0 3px var(--amber-soft);}
  .qty-box.dirty{border-color:var(--amber);background:var(--amber-soft);}
  .qty-box.dirty:focus-within{border-color:var(--amber);background:var(--surface);box-shadow:0 0 0 3px var(--amber-soft);}
  /* --- inventory panel + collapsible category header (.inv-panel / .cat-*), scoped so shared .row lists elsewhere stay untouched. --- */
  .inv-panel{border-radius:16px;}
  .inv-panel .panel-head{background:var(--surface-2);}
  .cat-head{display:flex;align-items:center;background:var(--surface-2);border-bottom:1px solid var(--line);}
  .cat-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:13px 8px 13px 18px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:var(--ink-faint);text-align:left;}
  .cat-chev{margin-left:auto;width:16px;height:16px;color:var(--ink-faint);transition:transform .2s ease;flex:none;}
  .cat-share{flex:none;width:34px;height:34px;margin-right:7px;border:none;background:none;border-radius:9px;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;}
  .cat-share:hover{background:var(--surface);color:var(--amber);}
  .cat-share [data-lucide]{width:16px;height:16px;}
  .inv-panel.collapsed .cat-chev{transform:rotate(-90deg);}
  .inv-panel.collapsed .cat-body{display:none;}
  .inv-panel.collapsed .cat-head{border-bottom:none;}

  /* --- handbook: policy sections read in full, product guides collapsed to a title --- */
  .sop-text{padding:14px 18px;font-size:14px;line-height:1.65;white-space:pre-wrap;}
  .sop-todo{flex:none;font-size:10px;background:var(--warn-soft);color:var(--warn);border-color:var(--warn-soft);}
  @media (max-width:520px){ .row-actions{gap:4px!important;} }
  /* count of sections still waiting on this person, on the tab itself */
  /* --- handbook cards: the recipe-card treatment, for procedures and for rules ---
     Deliberately the same vocabulary as the Recipes tab. A drawn step is a drawn step whether it
     is a drink or a till, and nobody should have to learn two card languages to work here. The
     panels are the app's own .panel, so a card sits inside a list row or stands on the page
     without a second layout existing anywhere. */
  .hb-p{margin-top:12px;}
  .hb-stack{margin-bottom:16px;}
  .hb-body > .hb-p:first-of-type{margin-top:9px;}
  .hb-inset{padding:2px 12px 13px;}
  .hb-inset > .hb-p:first-of-type{margin-top:11px;}
  .hb-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
           font-family:'Zen Old Mincho',Georgia,serif;font-size:24px;font-weight:700;line-height:1.15;}
  .hb-need{display:flex;align-items:center;gap:13px;padding:12px 16px;border-bottom:1px solid var(--line);}
  .hb-need:last-child{border-bottom:none;}
  .hb-need [data-lucide]{width:22px;height:22px;flex:none;color:var(--matcha);}
  .hb-need .nm{flex:1;min-width:0;font-weight:600;}
  .hb-need .nm span{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:500;margin-top:1px;}
  /* The rule itself, set large. A rule that has to be found inside a paragraph is a rule nobody
     follows — so it gets the size the drink name gets on a recipe card. */
  .hb-rule{padding:17px 16px 15px;}
  .hb-rule .rl{font-family:'Zen Old Mincho',Georgia,serif;font-size:22px;font-weight:700;line-height:1.24;}
  .hb-rule .wy{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-top:10px;}
  .hb-pts{padding:2px 16px 4px;}
  .hb-pt{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);
         font-size:13.5px;line-height:1.55;}
  .hb-pt:last-child{border-bottom:none;}
  .hb-pt .tk{flex:none;width:16px;height:16px;color:var(--matcha);margin-top:2px;display:inline-flex;}
  .hb-pt .tk svg{width:16px;height:16px;}
  /* Done right beside what wrong looks like. The same pair as the Finished cup and the Watered
     cup, because it is the same idea: one picture of right is worth a paragraph, and one picture
     of wrong is worth three. */
  .hb-verdict{display:flex;gap:10px;padding:14px 16px;}
  .hb-vd{flex:1;min-width:0;border-radius:13px;padding:11px 9px 12px;text-align:center;background:var(--surface-2);}
  .hb-vd svg{width:58px;height:70px;}
  .hb-vd .vn{font-size:12.5px;font-weight:700;margin-top:4px;line-height:1.25;}
  .hb-vd .vs{font-size:11px;color:var(--ink-faint);line-height:1.4;margin-top:3px;}
  .hb-vd.ok .vn{color:var(--matcha);}
  .hb-vd.no .vn{color:var(--vermilion);}
  .hb-vd .vn .tk{width:15px;height:15px;display:inline-flex;vertical-align:-2.5px;margin-right:4px;}
  .hb-vd .vn .tk svg{width:15px;height:15px;}
  .hb-verdict.one .hb-vd{max-width:56%;}
  /* --- the editor --- */
  .hb-shape{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px;}
  .hb-sh{font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;background:none;
         border:1px solid var(--line-strong);color:var(--ink-soft);cursor:pointer;font-family:inherit;}
  .hb-sh.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  .hb-er{display:flex;gap:9px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);}
  .hb-er:last-of-type{border-bottom:none;}
  .hb-er .gr{flex:1;min-width:0;display:grid;gap:7px;}
  /* Direct children only. A blanket `.hb-er input` also caught the checkbox inside .chk-line and
     stretched it to a full-width padded box with the label spilling off the side — the same class
     of collision as `art chip` picking up the global pill, and the same lesson: in one file with
     one stylesheet, a selector is a global selector. */
  .hb-er .gr > input, .hb-er .gr > textarea,
  .hb-vrow .gr > input, .hb-vrow .gr > textarea{width:100%;border:1px solid var(--line-strong);
         border-radius:9px;padding:8px 10px;font:inherit;font-size:13px;
         background:var(--surface);color:var(--ink);}
  .hb-er .gr > textarea{resize:vertical;line-height:1.5;}
  .hb-er .chk-line{font-size:12.5px;font-weight:600;line-height:1.35;}
  .hb-er .mv{display:flex;flex-direction:column;gap:4px;flex:none;}
  .hb-er .ab{width:46px;height:55px;flex:none;border:1px solid var(--line-strong);border-radius:10px;
             background:var(--surface-2);cursor:pointer;display:grid;place-items:center;padding:0;}
  .hb-er .ab svg{width:32px;height:39px;}
  .hb-er .ab.on{border-color:var(--amber);background:var(--amber-soft);}
  .hb-er .ab .nn{font-size:9.5px;font-weight:800;color:var(--ink-faint);letter-spacing:.04em;}
  .hb-er .ib{width:42px;height:42px;flex:none;border:1px solid var(--line-strong);border-radius:10px;
             background:var(--surface-2);cursor:pointer;display:grid;place-items:center;padding:0;
             color:var(--matcha);}
  .hb-er .ib [data-lucide]{width:20px;height:20px;}
  .hb-er .ib.on{border-color:var(--amber);background:var(--amber-soft);color:var(--amber-dark);}
  /* Bigger cells than the icon picker: these are drawings, and a drawing you cannot make out is
     not a choice. Grouped, because seventeen unlabelled boxes is a search, not a menu. */
  .hb-pick{background:var(--surface-2);border-radius:12px;padding:11px 12px 12px;margin:0 0 11px;}
  /* A letter under the person it belongs to: indented, quieter, still tappable. */
  .lt-sub{padding-left:26px;background:var(--surface-2);}
  .lt-sub .row-name{font-size:13.5px;font-weight:700;}
  .bk-step{border:1px solid var(--line);border-radius:12px;padding:8px 9px;margin:0 0 8px;background:var(--surface);}
  .bk-step-top{display:flex;align-items:center;gap:8px;}
  .bk-no{flex:none;width:22px;height:22px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);
         font-size:11px;font-weight:800;display:grid;place-items:center;}
  .bk-art-btn{flex:none;width:46px;height:54px;border:1px dashed var(--line-strong);border-radius:10px;
              background:var(--surface);display:grid;place-items:center;padding:2px;cursor:pointer;}
  .bk-art-btn.on{border-color:var(--amber);border-style:solid;background:var(--amber-soft);}
  .bk-art-btn svg{width:38px;height:46px;}
  .bk-art-none{font-size:9.5px;font-weight:700;color:var(--ink-faint);}
  .bk-step-t{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:10px;padding:10px 11px;
             background:var(--surface-2);color:var(--ink);outline:none;}
  .bk-step-t:focus{border-color:var(--amber);background:var(--surface);}
  .bk-step-act{display:flex;gap:2px;flex:none;}
  .bk-step-act .icon-btn{width:30px;height:30px;}
  .bk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px 30px;}
  .bk-chip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:999px;
           padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;}
  .bk-chip.on{background:var(--amber-soft);border-color:var(--amber);color:var(--amber-dark);}
  .bk-step .rc-pcol{margin:8px 0 2px 30px;}
  .bk-strip{display:flex;gap:2px;margin:8px 0 2px;}
  .bk-strip svg{width:30px;height:36px;flex:none;}
  .hb-pgrp{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
           color:var(--ink-faint);margin:9px 0 6px;}
  .hb-pgrp:first-child{margin-top:0;}
  .hb-prow{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;}
  .hb-pi{border:1px solid var(--line-strong);background:var(--surface);border-radius:11px;
         padding:6px 3px 5px;cursor:pointer;display:grid;justify-items:center;gap:1px;font-family:inherit;}
  .hb-pi svg{width:36px;height:44px;}
  .hb-pi span{font-size:9.5px;font-weight:700;color:var(--ink-faint);line-height:1.2;text-align:center;}
  .hb-pi.on{border-color:var(--amber);background:var(--amber-soft);}
  .hb-pi.on span{color:var(--amber-dark);}
  .hb-pi.none{align-content:center;min-height:56px;}
  /* More lines under a step. Same pair as the step's own line and remark, in the step's own type —
     they are not a different kind of text, so they are not styled as one. Spacing alone separates
     them, and the single number up the left is what keeps them one step. */
  .rc-st.tall{align-items:flex-start;}
  .rc-st.tall .no,.rc-st.tall .art{margin-top:1px;}
  .rc-st .hb-ln{margin-top:12px;}
  .rc-st .s{white-space:pre-wrap;}
  /* ...and in the editor: the line and its bin on one row, the remark full width below. */
  .hb-mbe{display:grid;grid-template-columns:1fr auto;gap:7px;padding:10px 0 2px;
          border-top:1px dashed var(--line-strong);}
  .hb-mbe > textarea{grid-column:1 / -1;}
  .hb-er .gr > .hb-mbe > input, .hb-er .gr > .hb-mbe > textarea{width:100%;
          border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;font:inherit;
          font-size:13px;background:var(--surface);color:var(--ink);}
  .hb-er .gr > .hb-mbe > textarea{resize:vertical;line-height:1.5;}
  .hb-vrow{display:flex;gap:11px;align-items:flex-start;padding:11px 0;}
  .hb-vrow .gr{flex:1;min-width:0;display:grid;gap:7px;}
  .hb-lbl{font-size:11.5px;font-weight:700;color:var(--ink-faint);letter-spacing:.04em;
          text-transform:uppercase;margin:14px 0 2px;}
  .hb-add{margin-top:11px;}
  @media (max-width:520px){
    .hb-verdict{gap:8px;padding:12px 12px;}
    .hb-vd svg{width:50px;height:60px;}
    .hb-head{font-size:21px;}
    .hb-rule .rl{font-size:20px;}
  }
  /* the handbook index: one box per type, tapped to go in */
  /* persimmon carries identity and navigation; sage is kept for the settled state — the same
     split the rest of the app uses (--amber for actions, --matcha for healthy). */
  /* training path */
  .tp-bar{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
  .tp-bar i{display:block;height:100%;background:var(--matcha);border-radius:999px;transition:width .25s;}
  .tp-row{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:9px;display:flex;gap:12px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;}
  .tp-row:hover{border-color:var(--line-strong);}
  .tp-row .gr{flex:1;min-width:0;}
  .tp-num{width:26px;height:26px;border-radius:8px;background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;}
  .tp-row.done .tp-num{background:var(--matcha);color:#fff;}
  .tp-row.now .tp-num{background:var(--amber);color:#fff;}
  .tp-row.shut{background:transparent;border-style:dashed;cursor:default;}
  .tp-row.shut .tp-t{color:var(--ink-faint);}
  .tp-t{font-weight:700;font-size:14.5px;}
  .tp-s{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .tp-now{background:var(--surface);border:1px solid var(--amber);border-radius:16px;padding:15px 16px 16px;margin-bottom:18px;box-shadow:var(--shadow);}
  .tp-lbl{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);}
  .tp-nm{font-family:'Zen Old Mincho',Georgia,serif;font-size:19px;font-weight:700;margin:5px 0 2px;}
  .sop-badge{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--vermilion);color:#fff;
    font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;line-height:1.5;}
  /* Handbook › Roles — the eyebrow is the crumb. Neutral: at 10px, persimmon would sit well
     under the contrast floor, and the coloured name belongs on the index box. */
  .sop-eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px;}
  /* draft / visible, and the fold-away for the settings that have sensible defaults */
  .sp-live .seg-btn{flex:1;}
  .sp-live .seg-btn.active{background:var(--surface);color:var(--ink);}
  .sp-live .seg-btn#sp_live1.active{background:var(--matcha);color:#fff;}
  .sop-more{display:flex;align-items:center;gap:7px;width:100%;padding:11px 0;margin-bottom:4px;background:none;
    border:none;border-top:1px solid var(--line);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);}
  .sop-more-chev{width:15px;height:15px;transition:transform .2s ease;}
  .sop-more.open .sop-more-chev{transform:rotate(180deg);}
  /* the "keep your changes?" layer, above the modal it is protecting */
  .lg{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(33,30,26,.5);}
  .lg.open{display:flex;}
  .lg-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.26);padding:22px;max-width:360px;width:100%;}
  .lg-box h3{margin:0 0 6px;font-size:18px;font-weight:700;}
  .lg-box p{margin:0 0 16px;color:var(--ink-soft);font-size:13.5px;line-height:1.5;}
  .lg-acts{display:flex;flex-direction:column;gap:8px;}
  .lg-acts .btn{width:100%;justify-content:center;}
  .lg-discard{color:var(--vermilion);}
  /* daily takings panel */
  .sal-foot{padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-2);}
  .sal-line{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:3px 0;color:var(--ink-soft);}
  .sal-line.minus span:last-child{color:var(--vermilion);}
  .sal-line.total{margin-top:6px;padding-top:9px;border-top:1px solid var(--line-strong);font-weight:800;font-size:15px;color:var(--ink);}
  /* tally: the day's figures */
  .tal-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;flex-wrap:wrap;}
  .tal-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);}
  .tal-val{font-family:'Zen Old Mincho',serif;font-size:27px;font-weight:700;margin-top:4px;color:var(--ink);}
  .tal-val.faint{color:var(--ink-faint);}
  .tal-locked{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:13.5px;color:var(--ink-soft);}
  .tal-locked [data-lucide]{width:15px;height:15px;flex:none;color:var(--ink-faint);}
  .tal-acts{display:flex;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);}
  /* the live check while they type, and the settled figure on the owner's page */
  .tal-bal{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;border-radius:11px;padding:0;margin:2px 0 14px;color:var(--ink-soft);}
  .tal-bal:empty{display:none;}
  .tal-bal [data-lucide]{width:16px;height:16px;flex:none;margin-top:1px;}
  .tal-bal.ok{background:var(--matcha-soft);color:var(--matcha);padding:11px 13px;}
  .tal-bal.short{background:var(--vermilion-soft);color:var(--vermilion);padding:11px 13px;}
  .tal-bal.over{background:var(--warn-soft);color:var(--warn-text);padding:11px 13px;}
  /* ---- recipe cards ---- */
  .rc-cats{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
  .rc-cat{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:15px 14px 13px;
          text-align:left;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);}
  .rc-cat:hover{border-color:var(--amber);}
  .rc-cat [data-lucide]{width:26px;height:26px;color:var(--matcha);}
  .rc-cat .n{font-family:'Zen Old Mincho',Georgia,serif;font-size:17px;font-weight:700;line-height:1.15;color:var(--ink);}
  .rc-cat .c{font-size:11.5px;color:var(--ink-faint);}
  .rc-drink{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 14px;
            display:flex;align-items:center;gap:12px;text-align:left;width:100%;margin-bottom:9px;box-shadow:var(--shadow);}
  .rc-drink:hover{border-color:var(--amber);}
  /* While sorting, the row is not a way in to the drink — it is the thing being moved. */
  .rc-drink.sorting{cursor:default;}
  .rc-drink.sorting:hover{border-color:var(--line);}
  .rc-drink .mv{display:flex;gap:6px;flex:none;}
  .rc-drink [data-lucide]{width:21px;height:21px;flex:none;color:var(--matcha);}
  .rc-drink .nm{flex:1;min-width:0;font-weight:700;font-size:15px;color:var(--ink);}
  .rc-drink .nm span{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:500;margin-top:1px;}
  .rc-drink .go{width:15px;height:15px;flex:none;color:var(--ink-faint);}
  /* the handbook borrows the Recipes tile and row whole; these two are all it needed */
  .rc-cat .sop-badge{align-self:flex-start;}
  .rc-drink .chip{flex:none;}
  .rc-head{font-family:'Zen Old Mincho',Georgia,serif;font-size:27px;font-weight:700;line-height:1.1;}
  .rc-head b{color:var(--ink-faint);font-weight:700;}
  .rc-meta{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0;}
  .rc-ing{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line);}
  .rc-ing:last-child{border-bottom:none;}
  .rc-ing [data-lucide]{width:23px;height:23px;flex:none;color:var(--matcha);}
  .rc-ing .nm{flex:1;min-width:0;font-weight:600;}
  .rc-ing .nm span{display:block;font-size:11.5px;color:var(--ink-faint);font-weight:500;}
  .rc-amt{text-align:right;flex:none;max-width:47%;}
  /* A scoop row says the same measure twice, so the two halves share a line and a size. It needs
     more of the row than a plain figure does — the name beside it is short by nature. */
  .rc-amt.both{max-width:64%;}
  /* On a narrow phone the two halves drop onto two lines rather than squeezing the name — both
     still at full size, which is the part that mattered. */
  .rc-amt.both b{white-space:normal;}
  .rc-amt.both i{display:inline;font-size:inherit;font-family:inherit;font-weight:inherit;
                 line-height:inherit;color:var(--ink-soft);margin:0 0 0 8px;}
  .rc-amt b{display:block;font-family:'Zen Old Mincho',Georgia,serif;font-size:21px;font-weight:700;
            line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .rc-amt i{display:block;font-style:normal;font-size:11.5px;line-height:1.4;color:var(--ink-faint);margin-top:3px;}
  .rc-ice{display:flex;align-items:center;gap:16px;padding:15px 16px;}
  .rc-ice svg{width:76px;height:92px;flex:none;}
  .rc-ice .t{font-family:'Zen Old Mincho',Georgia,serif;font-size:20px;font-weight:700;line-height:1.15;}
  .rc-ice .s{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.5;}
  .rc-pad{padding:14px 16px;}
  .rc-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
  .rc-stab{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:none;
           border:1px solid var(--line-strong);color:var(--ink-soft);}
  .rc-stab.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}
  /* Hot is not a third volume, it is a different drink in a different cup. The switch carries the
     app's action colour there so the difference is seen before a figure is read. */
  .rc-stab.on.hot{background:var(--amber);border-color:var(--amber);color:#fff;}
  .rc-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px;}
  .rc-key{height:38px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line-strong);
          display:grid;place-items:center;font-family:'Zen Old Mincho',Georgia,serif;font-size:15px;
          font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
  .rc-key.on{background:var(--amber);border-color:var(--amber);color:#fff;}
  .rc-key.pick:hover{border-color:var(--amber);}
  /* A barista reaches for the machine out of habit, because every other card has a keypad. Green
     text did not interrupt that. Vermilion is the colour the app already uses for "must not
     happen" — the same red as the Pour ceiling and the Remake pill. One red, one meaning. */
  .rc-nosugar{padding:15px 16px;}
  .rc-nsb{display:inline-flex;align-items:center;gap:6px;background:var(--vermilion);color:#fff;
          border-radius:999px;padding:5px 12px 5px 10px;font-size:11.5px;font-weight:800;
          letter-spacing:.08em;text-transform:uppercase;line-height:1;}
  .rc-nsb [data-lucide]{width:14px;height:14px;flex:none;}
  .rc-nosugar .tx{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-top:9px;}
  .rc-steps{counter-reset:rcs;}
  .rc-watch{background:var(--warn-soft);border-radius:13px;padding:12px 15px;display:flex;gap:11px;margin-top:14px;}
  .rc-watch [data-lucide]{width:18px;height:18px;flex:none;color:var(--warn-text);margin-top:2px;}
  .rc-watch span{font-size:13px;line-height:1.55;color:var(--warn-text);}
  .rc-picker{display:flex;flex-wrap:wrap;gap:6px;}
  .rc-pi{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-2);
         display:grid;place-items:center;color:var(--ink-soft);}
  .rc-pi [data-lucide]{width:19px;height:19px;}
  .rc-pi.on{background:var(--amber);border-color:var(--amber);color:#fff;}
  .rc-er{display:flex;gap:8px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);}
  .rc-er:last-of-type{border-bottom:none;}
  .rc-er .gr{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:7px;}
  .rc-er input{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;
               background:var(--surface-2);color:var(--ink);font-size:13px;}
  .rc-er .ib{width:38px;height:38px;flex:none;border:1px solid var(--line-strong);border-radius:10px;
             background:var(--surface-2);display:grid;place-items:center;color:var(--matcha);}
  .rc-er .ib [data-lucide]{width:18px;height:18px;}
  /* .panel-head belongs inside a .panel, where its border-bottom separates head from body.
     Dropped into a form it just draws a rule under the word. This is the form equivalent:
     same eyebrow treatment, no rule, on the form's own spacing rhythm. */
  .form-sec{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
            color:var(--ink-faint);margin:22px 0 9px;line-height:1.3;}
  .form-sec:first-child{margin-top:0;}
  /* The draft marker was a .chip inside .nm — and `.rc-drink .nm span{display:block}`, the rule
     that drops a second name onto its own line, caught it too. The pill stopped being a pill,
     stretched into a full-width bar and made that row taller than the ones around it. It is a
     quiet inline word now, and the rows are even again. */
  .rc-drink .nm span.rc-dr{display:inline;font-size:12.5px;font-weight:500;color:var(--ink-faint);margin:0 0 0 6px;}
  /* --- the finished cup, under Method --- */
  .rc-fin .t{display:flex;align-items:center;gap:8px;}
  /* .rc-ice svg is 76x92; the tick lives inside .t and must not inherit that. */
  .rc-fin .t .tick{width:19px;height:19px;flex:none;color:var(--matcha);display:inline-flex;}
  .rc-fin .t .tick svg{width:19px;height:19px;}
  .rc-wrong{display:flex;gap:10px;padding:0 16px 15px;}
  .rc-wr{flex:1;max-width:50%;background:var(--surface-2);border-radius:12px;padding:10px 8px;text-align:center;}
  .rc-wr svg{width:52px;height:63px;}
  .rc-wr .wn{font-size:11.5px;font-weight:700;margin-top:3px;}
  .rc-wr .ws{font-size:10.5px;color:var(--ink-faint);line-height:1.35;margin-top:1px;}
  .rc-remake{display:inline-flex;align-items:center;gap:5px;background:var(--vermilion);color:#fff;
             border-radius:999px;padding:3px 10px 3px 8px;font-size:10px;font-weight:800;
             letter-spacing:.06em;text-transform:uppercase;margin-top:6px;line-height:1;}
  .rc-remake b{font-size:13px;font-weight:900;line-height:1;}
  /* --- and its controls on an ingredient row in the editor --- */
  .rc-erw{border-bottom:1px solid var(--line);}
  .rc-erw:last-of-type{border-bottom:none;}
  .rc-erw .rc-er{border-bottom:none;}
  .rc-erd{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:0 0 11px 46px;}
  .rc-dtog{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
           background:var(--surface-2);color:var(--ink-faint);border-radius:999px;padding:5px 11px;
           font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;line-height:1;}
  .rc-dtog [data-lucide]{width:14px;height:14px;}
  .rc-dtog.on{background:var(--amber);border-color:var(--amber);color:#fff;}
  .rc-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;}
  .rc-seg button{border:none;background:var(--surface-2);color:var(--ink-soft);font:inherit;
                 font-size:11.5px;font-weight:700;padding:5px 11px;cursor:pointer;line-height:1;}
  .rc-seg button + button{border-left:1px solid var(--line-strong);}
  .rc-seg button.on{background:var(--ink);color:var(--paper);}
  /* --- How it's built: one ordered list, one step per row --- */
  .rc-st{display:flex;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line);align-items:center;}
  .rc-st:last-child{border-bottom:none;}
  .rc-st .no{flex:none;width:23px;height:23px;border-radius:50%;background:var(--surface-2);
             color:var(--ink-soft);font-size:11.5px;font-weight:800;display:grid;place-items:center;}
  .rc-st .art{flex:none;width:52px;height:63px;display:grid;place-items:center;}
  .rc-st .art svg{width:52px;height:63px;}
  .rc-st .bd{flex:1;min-width:0;}
  .rc-st .t{font-family:'Zen Old Mincho',Georgia,serif;font-size:18px;font-weight:700;line-height:1.15;}
  .rc-st .s{font-size:11.5px;color:var(--ink-soft);line-height:1.45;margin-top:2px;}
  .rc-st .ladder{display:flex;flex-wrap:wrap;gap:5px 11px;margin-top:6px;}
  .rc-st .ladder .lv{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-soft);}
  .rc-st .ladder .lv.now{color:var(--ink);font-weight:700;}
  .rc-st .ladder .lv b{color:var(--ink);font-weight:700;}
  .rc-key.sm{min-width:34px;height:22px;padding:0 7px;font-size:11px;border-radius:7px;}
  .rc-st.plain .art{display:none;}
  /* Two measures in one step: each keeps its own drawing, joined rather than merged. The cell has
     to grow — a fixed 52px would leave the second drawing sitting on top of the title. */
  .rc-st .art.pair{width:auto;display:flex;align-items:center;gap:1px;}
  .rc-st .art.pair svg{width:48px;height:58px;}
  /* Three is still the ceiling, but 44px is where it sits: the row is 90px tall whatever the art
     does, and the title and sub-line keep their line count at this width. A fourth drawing would
     take the scoop's x N and the beaker's level line under legible, and a drawing you cannot read
     is worse than no drawing. */
  .rc-st .art.trio{width:auto;display:flex;align-items:center;gap:0;}
  .rc-st .art.trio svg{width:44px;height:53px;}
  .rc-st .art .plus{font-family:'Zen Old Mincho',Georgia,serif;font-size:14px;font-weight:700;
                    color:var(--ink-faint);}
  /* An arrow, not a plus: the two beakers are one measure done twice over, in that order. */
  .rc-st .art .arw{font-family:ui-sans-serif,system-ui,sans-serif;font-size:15px;font-weight:700;
                   color:var(--amber);padding:0 1px;}
  /* The sugar step's "drawing" is the machine button itself, so the cell sizes to it. Named
     `sug` rather than `chip` because `chip` is already a pill elsewhere in this stylesheet. */
  .rc-st .art.sug{width:auto;min-width:52px;}
  .rc-st .art.sug .rc-key{min-width:46px;height:36px;padding:0 10px;font-size:16px;}
  /* --- the step editor --- */
  .rc-sew{border-bottom:1px solid var(--line);padding:11px 0;}
  .rc-sew:last-of-type{border-bottom:none;}
  .rc-sehead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .rc-sekind{flex:1;min-width:0;font-size:11px;font-weight:800;letter-spacing:.12em;
             text-transform:uppercase;color:var(--amber);}
  .rc-sebtn{flex:none;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:9px;
            background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;}
  .rc-sebtn [data-lucide]{width:15px;height:15px;}
  .rc-sebtn:disabled{opacity:.35;cursor:default;}
  .rc-sef{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
  .rc-sef .wide{grid-column:1 / -1;}
  .rc-sef .rc-seg{justify-self:start;}
  .rc-sef .rc-dtog{justify-self:start;}
  .rc-sef input,.rc-sef select{width:100%;border:1px solid var(--line-strong);border-radius:9px;
    padding:8px 10px;background:var(--surface-2);color:var(--ink);font-size:13px;}
  .rc-addst{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 6px;}
  .rc-addst button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);
    background:var(--surface-2);color:var(--ink-soft);border-radius:999px;padding:6px 12px;
    font:inherit;font-size:12px;font-weight:700;cursor:pointer;line-height:1;}
  .rc-addst button:hover{border-color:var(--amber);color:var(--amber-dark);}
  .rc-addst button [data-lucide]{width:14px;height:14px;}
  .rc-pcol{display:flex;gap:6px;flex-wrap:wrap;}
  .rc-pcol button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;
                  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
  .rc-pcol button.on{border-color:var(--ink);}
  .tal-float{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.4;color:var(--ink-soft);background:var(--surface-2);border-radius:10px;padding:9px 12px;margin:0 0 14px;}
  .tal-float strong{color:var(--ink);font-weight:800;}
  .tal-float [data-lucide]{width:15px;height:15px;flex:none;color:var(--ink-faint);}
  .panel > .tal-float{margin:0 18px 14px;}
  .pm-float{display:flex;align-items:center;gap:9px;margin-top:9px;}
  .pm-float label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);flex:none;}
  .pm-float input{width:120px;border:1px solid var(--line-strong);border-radius:9px;padding:8px 10px;background:var(--surface-2);color:var(--ink);}
  .tal-var{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;}
  .tal-var.ok{background:var(--matcha-soft);color:var(--matcha);}
  .tal-var.short{background:var(--vermilion-soft);color:var(--vermilion);}
  .tal-var.over{background:var(--warn-soft);color:var(--warn-text);}
  .tal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:14px;box-shadow:var(--shadow);}
  .tal-nav .icon-btn[disabled]{opacity:.35;pointer-events:none;}
  .tal-nav-d{text-align:center;font-family:'Zen Old Mincho',serif;font-size:17px;font-weight:700;color:var(--ink);line-height:1.2;}
  .tal-nav-d span{display:block;font-family:'Noto Sans JP',system-ui,-apple-system,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-faint);margin-top:2px;}
  .pm-x{background:none;border:none;cursor:pointer;color:var(--ink-faint);font-size:15px;line-height:1;padding:0 0 0 6px;}
  .pm-float input:disabled,.pm-new:disabled{opacity:.55;cursor:progress;}
  .pm-x:hover{color:var(--vermilion);}
  .sop-title-row{display:flex;align-items:center;gap:7px;min-width:0;}
  .sop-rename{flex:none;color:var(--ink-faint);}
  .sop-rename:hover{color:var(--amber-dark);}
  .sop-head-l{display:flex;align-items:center;gap:11px;min-width:0;}
  .sop-back{flex:none;color:var(--amber);}
  /* --- inventory item rows — Option A (name on top, status pills, entry on the right). Used by the inventory list AND the dashboard reorder list. --- */
  .inv-item{position:relative;padding:15px 16px 14px 20px;border-bottom:1px solid var(--line);transition:background .12s;}
  .inv-item:last-child{border-bottom:none;}
  .inv-item:hover{background:var(--surface-2);}
  .inv-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;}
  .inv-item.stk-red::before{background:var(--vermilion);}
  .inv-item.stk-yellow::before{background:var(--warn);}
  .inv-item.stk-green::before{background:var(--matcha);}
  .inv-nrow{display:flex;align-items:flex-start;gap:8px;}
  .inv-name{flex:1;min-width:0;font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ink);word-break:break-word;}
  .inuse-tag{font-size:11px;font-weight:600;color:var(--ink-faint);margin-left:6px;vertical-align:1px;white-space:nowrap;}
  .inv-edit{flex:none;width:30px;height:30px;margin:-3px -6px 0 0;border:none;background:none;border-radius:8px;color:var(--ink-faint);cursor:pointer;display:grid;place-items:center;}
  .inv-edit:hover{background:var(--surface);color:var(--amber);}
  .inv-edit [data-lucide]{width:16px;height:16px;}
  .inv-band{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;}
  .inv-pills{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0;}
  .inv-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .inv-pill .inv-dot{width:7px;height:7px;border-radius:50%;flex:none;}
  .inv-pill.low{background:#F3E0DA;color:#8F3A2C;} .inv-pill.low .inv-dot{background:var(--vermilion);}
  .inv-pill.warn{background:#F3E9D2;color:#7C5A12;} .inv-pill.warn .inv-dot{background:var(--warn);}
  .inv-pill.ok{background:#E7ECDB;color:#566A3B;} .inv-pill.ok .inv-dot{background:var(--matcha);}
  .inv-chg{display:inline-flex;align-items:center;gap:3px;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .inv-chg .tri{font-size:8px;line-height:1;}
  .inv-chg.up{background:#E7ECDB;color:#566A3B;}
  .inv-chg.down{background:#F3E0DA;color:#8F3A2C;}
  .inv-chg.same{background:var(--surface-2);color:var(--ink-faint);}
  .inv-min{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;}
  .inv-ctl{display:flex;align-items:center;gap:8px;flex:none;}
  .inv-ctl .qty-box{width:60px;height:42px;border-radius:12px;}
  .inv-ctl .qty-input{font-size:18px;}
  .inv-unit{font-size:12px;color:var(--ink-faint);font-weight:700;white-space:nowrap;min-width:2.6em;}
  .inv-same{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-faint);display:grid;place-items:center;cursor:pointer;}
  .inv-same [data-lucide],.inv-same svg{width:17px;height:17px;stroke-width:2.6;}
  .inv-same:hover{border-color:var(--matcha);color:var(--sage-text);}
  .inv-same.on{background:var(--matcha);border-color:var(--matcha);color:#fff;}
  .inv-meta{font-size:12px;color:var(--ink-soft);margin-top:9px;}
  .ro-title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:2px 2px 12px;}
  .ro-panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:10px;}
  .ro-grouphead{display:flex;align-items:center;border-bottom:1px solid var(--line);}
  .ro-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:12px 8px 12px 14px;font:inherit;color:inherit;text-align:left;}
  .ro-toggle:hover{background:var(--surface-2);}
  .ro-chev{width:16px;height:16px;color:var(--ink-faint);transition:transform .2s ease;flex:none;}
  .ro-locic{width:14px;height:14px;color:var(--amber);flex:none;}
  .ro-supname{font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .ro-count{background:var(--surface-2);color:var(--ink-soft);font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;flex:none;}
  .ro-orderbtn{min-width:132px;justify-content:center;}
  .ro-panel.collapsed .ro-chev{transform:rotate(-90deg);}
  .ro-panel.collapsed .ro-body{display:none;}
  .ro-catgroup{position:relative;border-top:1px solid var(--line);}
  .ro-catgroup:first-child{border-top:none;}
  .ro-catgroup::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--vermilion);z-index:1;}
  .ro-catgroup .inv-item::before{display:none;}
  .ro-cathead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:var(--paper);}
  .ro-catname{font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--amber-dark);display:flex;align-items:center;min-width:0;}
  .ro-suplow{flex:none;margin-left:auto;font-size:11px;color:var(--ink-faint);}
  .ro-supfoot{display:flex;justify-content:flex-end;gap:8px;padding:9px 14px 11px;}
  .ro-orderall{flex:none;min-width:132px;justify-content:center;background:var(--vermilion);color:#fff;border:none;}
  .ro-orderall:hover{filter:brightness(.95);}
  .ro-reqbtn{min-width:132px;justify-content:center;background:var(--matcha-soft);color:var(--sage-text);border:1px solid #cdd8ba;}
  .ro-reqbtn:hover{border-color:var(--matcha);}
  .ro-reqall{flex:none;min-width:132px;justify-content:center;background:var(--matcha);color:#fff;border:none;}
  .ro-reqall:hover{filter:brightness(.95);}
  .ro-inttag{flex:none;background:var(--matcha-soft);color:var(--sage-text);border-radius:7px;padding:2px 8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-left:8px;}
  .ro-catgroup.ro-int::before{background:var(--matcha);}
  .topup-list{display:flex;flex-direction:column;gap:6px;}
  .topup-row{background:var(--matcha-soft);border:1px solid #d3ddc2;border-radius:9px;padding:9px 11px;}
  .topup-loc{font-size:13px;font-weight:600;color:var(--sage-text);margin-bottom:7px;}
  .topup-pair{display:flex;gap:8px;}
  .topup-cell{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
  .topup-cell label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#6b7550;}
  #topupSec .topup-cell .f-topup{width:100%;text-align:center;padding:8px 10px;border-radius:8px;}
  .ord-tf-foot{display:flex;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line);background:#FBF9F2;}
  .ord-recvall{background:var(--matcha);color:#fff;border:none;}
  .ord-recvall:hover{filter:brightness(.96);}
  .ord-btn{min-width:118px;justify-content:center;}
  .ord-recv-soft{background:var(--matcha-soft);color:var(--sage-text);border:1px solid #cdd8ba;}
  .ord-recv-soft:hover{border-color:var(--matcha);}
  .ro-undoall{flex:none;background:var(--surface);color:var(--ink-soft);border:1px solid var(--line-strong);}
  .ro-undoall:hover{border-color:var(--vermilion);color:var(--vermilion);}
  .ro-onorder{display:inline-flex;align-items:center;gap:6px;}
  .ro-undo{flex:none;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink-soft);cursor:pointer;padding:0;}
  .ro-undo:hover{border-color:var(--vermilion);color:var(--vermilion);}
  .ro-undo [data-lucide]{width:15px;height:15px;}
  /* activity log — collapsible yesterday */
  .act-yday{margin-top:18px;}
  .act-yday-head{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 15px;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);}
  .act-yday-head:hover{border-color:var(--line-strong);}
  .act-yday-chev{width:16px;height:16px;color:var(--ink-faint);transition:transform .2s;transform:rotate(-90deg);}
  .act-yday.open .act-yday-chev{transform:rotate(0deg);}
  .act-yday-count{margin-left:auto;background:var(--surface-2);color:var(--ink-soft);border-radius:20px;padding:1px 9px;font-size:11px;font-weight:700;}
  .act-yday-body{display:none;}
  .act-yday.open .act-yday-body{display:block;}
  .ro-panel.collapsed .ro-grouphead{border-bottom:none;}
  .del-hint{margin-top:8px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.45;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
  .del-hint [data-lucide]{color:var(--ink-faint);flex:none;margin-top:1px;}
  .rm-list{display:flex;flex-wrap:wrap;gap:8px;}
  .rm-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--vermilion);background:var(--surface);border:1px solid var(--vermilion-soft);border-radius:8px;padding:7px 11px;cursor:pointer;line-height:1;}
  .rm-btn:hover{background:var(--vermilion-soft);}
  .rm-btn [data-lucide]{width:14px;height:14px;}
  .rm-note{font-size:11.5px;color:var(--ink-faint);margin-top:6px;line-height:1.4;}
  .row-actions{display:flex;gap:6px;flex:none;align-items:center;}
  /* Letters list only: preview + PDF + withdraw + Reissue is one control too many for a narrow
     phone, so the actions drop to their own line rather than crushing the name beside them. */
  @media (max-width:430px){
    .row.lt-row{flex-wrap:wrap;gap:0;}
    .row.lt-row .row-main{flex:1 1 100%;}
    .row.lt-row .row-actions{flex:1 1 100%;justify-content:flex-end;margin-top:10px;}
  }
  .sup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px;}
  .sup-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;}
  .sup-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
  .sup-avatar{width:46px;height:46px;border-radius:12px;background:var(--amber-soft);color:var(--amber-dark);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none;}
  .sup-avatar.int{background:var(--matcha-soft);color:var(--matcha);}
  .sup-name{font-weight:700;font-size:15.5px;line-height:1.25;}
  .sup-role{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
  .sup-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;}
  .sup-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;}
  .sup-pill .sup-dot{width:6px;height:6px;border-radius:50%;flex:none;}
  .sup-pill.ext{background:var(--surface-2);color:var(--ink-soft);}
  .sup-pill.ext .sup-dot{background:var(--ink-faint);}
  .sup-pill.int{background:#E7ECDB;color:#566A3B;}
  .sup-pill.int .sup-dot{background:var(--matcha);}
  .sup-items{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
  .sup-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink);background:var(--surface-2);border-radius:999px;padding:4px 10px;line-height:1.2;}
  .sup-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:none;}
  .sup-items-none{margin-top:10px;font-size:12px;color:var(--ink-faint);font-style:italic;}
  .sup-lines{display:flex;flex-direction:column;gap:1px;margin-top:13px;border-top:1px solid var(--line);padding-top:9px;}
  .sup-line{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);text-decoration:none;padding:5px 0;}
  .sup-line .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sup-line [data-lucide]{width:15px;height:15px;color:var(--ink-faint);flex:none;}
  .sup-line .lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-left:auto;background:var(--surface-2);padding:2px 7px;border-radius:6px;flex:none;}
  a.sup-line:hover{color:var(--amber-dark);}
  a.sup-line:hover [data-lucide]{color:var(--amber-dark);}

  .staff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
  .staff-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:15px;display:flex;flex-direction:column;}
  .staff-card.inactive{opacity:.7;}
  .staff-card-top{display:flex;align-items:center;gap:11px;}
  .staff-avatar{width:44px;height:44px;border-radius:12px;background:var(--matcha-soft);color:var(--matcha);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;}
  .staff-avatar.sup{background:var(--amber-soft);color:var(--amber-dark);}
  .staff-id-info{flex:1;min-width:0;}
  .staff-name{font-weight:700;font-size:15.5px;line-height:1.25;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .staff-role{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
  .staff-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
  .staff-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;}
  .staff-pill .pd{width:6px;height:6px;border-radius:50%;flex:none;}
  .staff-pill [data-lucide]{width:12px;height:12px;flex:none;}
  .staff-pill.sup{background:var(--amber-soft);color:var(--amber-dark);} .staff-pill.sup .pd{background:var(--amber);}
  .staff-pill.tr{background:#F3E9D2;color:#7C5A12;}
  .staff-pill.pay{background:var(--surface-2);color:var(--ink);}
  .staff-pill.mgmt{background:var(--ink);color:var(--paper);}
  .staff-pill.cat{background:var(--surface-2);color:var(--ink);} .staff-pill.cat .pd{background:var(--amber);}
  .staff-pill.kit{background:var(--matcha-soft);color:var(--sage-text);} .staff-pill.kit [data-lucide]{color:var(--matcha);}
  .staff-lv{display:flex;gap:6px;flex-wrap:wrap;cursor:pointer;margin-top:10px;}
  .staff-lvpill{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .12s;}
  .staff-lv:hover .staff-lvpill{background:var(--paper);}
  .staff-lvpill .k{font-size:9px;font-weight:700;color:var(--ink-faint);letter-spacing:.04em;}
  .staff-lvpill .n.neg{color:var(--vermilion);}
  .staff-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);}
  .staff-fbit{display:inline-flex;align-items:center;gap:6px;min-width:0;}
  .staff-fbit [data-lucide]{width:13px;height:13px;color:var(--ink-faint);flex:none;}
  .staff-fbit.faint{color:var(--ink-faint);}
  .staff-fbit .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* identity (name / IC / EPF) — long values, so one per row instead of inline */
  .staff-idrows{flex:0 0 100%;width:100%;display:flex;flex-direction:column;gap:6px;min-width:0;}
  .fbit-lock{background:none;border:none;padding:0 0 0 2px;margin:0;cursor:pointer;display:inline-flex;align-items:center;color:var(--amber-dark);flex:none;}
  .fbit-lock [data-lucide]{width:12px;height:12px;color:var(--amber-dark);}
  /* --- payroll (Option C: mini-payslip ledger) --- */
  .pr-nav{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:14px;}
  .pr-nav .mid{flex:1;text-align:center;min-width:0;}
  .pr-nav .mo{font-size:13px;font-weight:600;color:var(--ink-soft);}
  .pr-nav .tot{font-family:'Zen Old Mincho',serif;font-weight:700;font-size:29px;color:var(--ink);line-height:1;margin-top:3px;font-variant-numeric:tabular-nums;}
  .pr-nav .tl{font-size:11px;color:var(--ink-faint);margin-top:3px;}
  .pr-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:15px;margin-bottom:12px;}
  .pr-top{display:flex;align-items:center;gap:11px;}
  .pr-av{width:40px;height:40px;border-radius:11px;background:var(--matcha-soft);color:var(--matcha);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;}
  .pr-av.full{background:var(--amber-soft);color:var(--amber-dark);}
  .pr-name{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .pr-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
  .pr-topright{margin-left:auto;flex:none;align-self:flex-start;}
  .pr-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap;}
  .pr-pill.tr{background:#F3E9D2;color:#7C5A12;}
  .pr-pill.late{background:var(--warn-soft);color:var(--warn);}
  .pr-pill.ot{background:var(--warn-soft);color:var(--warn);}
  .pr-pill.paid{background:#E8ECDC;color:#4C6B36;}
  .btn-paid{background:var(--matcha);color:#fff;border-color:var(--matcha);}
  .pr-tgl.on{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);}
  .pr-sec{margin-top:26px;}
  .pr-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:0 2px 10px;border-bottom:1px solid var(--line);margin-bottom:12px;}
  .pr-sec-h .v{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums;}
  .pr-idle{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;margin-top:4px;font-size:12.5px;font-weight:600;color:var(--ink-faint);cursor:pointer;}
  .pr-idle [data-lucide]{width:14px;height:14px;}
  .btn-paid:hover{filter:brightness(.95);}
  .pr-banner{display:flex;align-items:center;gap:9px;background:var(--warn-soft);color:#8A6512;border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:13px;font-weight:600;}
  .pr-banner [data-lucide]{width:17px;height:17px;flex:none;}
  .pr-banner.done{background:#E8ECDC;color:#4C6B36;}
  .pr-pill.lv{background:var(--surface-2);color:var(--ink-soft);}
  .pr-pill.lv.rl{background:#E4ECDD;color:#566040;}
  .pr-pill.lv.al{background:#DFEAF0;color:#3D6076;}
  .pr-pill.lv.mc{background:#F1E3D6;color:#A5572F;}
  .pr-ctx{font-size:12px;color:var(--ink-faint);margin-top:10px;line-height:1.4;}
  .pr-led{border-top:1px solid var(--line);margin-top:10px;padding-top:8px;}
  .pr-lrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:3px 0;color:var(--ink-soft);}
  .pr-lrow .v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .pr-lrow.minus .v{color:var(--vermilion);}
  .pr-lrow.plus .v{color:var(--matcha);}
  .pr-lrow.tap{cursor:pointer;}
  .pr-lrow.tap .lbl{display:inline-flex;align-items:center;gap:5px;}
  .pr-lrow.tap .lbl [data-lucide]{width:11px;height:11px;color:var(--ink-faint);}
  .pr-note.tap{cursor:pointer;}
  .pr-net{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--line);margin-top:7px;padding-top:9px;}
  .pr-net .nl{font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
  .pr-net .nv{font-family:'Zen Old Mincho',serif;font-weight:700;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .pr-note{font-size:12px;margin-top:8px;line-height:1.4;}
  .pr-acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
  /* payroll statutory remittance block (KWSP / PERKESO to remit) */
  .prs-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px;margin-bottom:14px;}
  .prs-head{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:10px;}
  .prs-head [data-lucide]{width:16px;height:16px;color:var(--amber);}
  .prs-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;}
  .prs-row .lbl{font-size:13.5px;font-weight:600;color:var(--ink);}
  .prs-row .sub{font-size:11px;color:var(--ink-faint);margin-top:2px;}
  .prs-row .v{font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
  .prs-more{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:8px;font-size:12px;font-weight:700;color:var(--ink-faint);cursor:pointer;}
  .prs-more [data-lucide]{width:13px;height:13px;}
  .prs-who{padding-top:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;}
  .prs-wrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
  .prs-wrow .lbl{font-size:12.5px;font-weight:700;color:var(--ink);}
  .prs-wrow .sub{font-size:11px;color:var(--ink-faint);margin-top:1px;}
  .prs-wrow .v{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
  .prs-tot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-top:1px solid var(--line);margin-top:8px;padding-top:10px;}
  .prs-tot .nl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
  .prs-tot .nv{font-family:'Zen Old Mincho',serif;font-weight:700;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}

  .empty{text-align:center;padding:54px 20px;color:var(--ink-soft);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);}
  .empty > [data-lucide]{width:30px;height:30px;color:var(--ink-faint);margin-bottom:10px;}
  .empty h3{margin:0 0 5px;color:var(--ink);font-size:16px;}
  .empty p{margin:0 0 16px;font-size:13.5px;}

  .scrim{position:fixed;inset:0;z-index:70;background:rgba(33,30,26,.42);display:none;align-items:flex-end;justify-content:center;padding:0;overscroll-behavior:contain;}
  .scrim.open{display:flex;}
  @media (min-width:560px){.scrim{align-items:center;padding:24px;}}
  .modal{background:var(--surface);width:100%;max-width:480px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;box-shadow:0 -8px 40px rgba(33,30,26,.2);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  @media (min-width:560px){.modal{border-radius:18px;}}
  .scrim.scrim-center{align-items:center;padding:20px;}
  .scrim.scrim-center .modal{border-radius:18px;max-width:400px;max-height:88vh;}
  .modal-head{position:sticky;top:0;background:var(--surface);display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--line);}
  .modal-head h2{margin:0;font-size:17px;font-weight:700;}
  .modal-body{padding:18px 20px 22px;}
  .modal-foot{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);display:flex;gap:10px;padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  .modal-foot .btn{flex:1;justify-content:center;}
  /* farewell (Abbie · last day) — safe to delete this block after */
  .fw-banner{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--amber-soft);border:1px solid #E7C9B4;border-radius:14px;padding:12px 14px;margin-bottom:14px;cursor:pointer;font:inherit;}
  .fw-b-fish{font-size:20px;flex:none;}
  .fw-b-text{flex:1;min-width:0;font-size:13.5px;color:var(--amber-dark);font-weight:600;line-height:1.4;}
  .fw-wrap{padding:28px 22px calc(24px + env(safe-area-inset-bottom));text-align:center;}
  .fw-fish{font-size:42px;line-height:1;margin-bottom:8px;}
  .fw-title{font-family:'Zen Old Mincho',serif;font-size:20px;font-weight:700;color:var(--ink);margin:0 0 14px;}
  .fw-msg{font-size:14.5px;line-height:1.62;color:var(--ink);text-align:center;}
  .fw-sign{margin-top:16px;font-size:13.5px;color:var(--ink-soft);font-style:italic;}
  .fw-btn{width:100%;justify-content:center;margin-top:24px;}
  .occ-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
  .occ-row.occ-past{opacity:.55;}
  .occ-emoji{font-size:24px;line-height:1;flex:none;width:30px;text-align:center;}
  .occ-main{flex:1;min-width:0;}
  .occ-name{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:6px;}
  .occ-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .occ-empty{padding:22px 6px;text-align:center;color:var(--ink-faint);font-size:13.5px;line-height:1.6;}
  .card-warn{background:var(--vermilion-soft);border:1px solid #E9CFC7;border-radius:12px;padding:13px 15px;margin-bottom:14px;}
  html[data-theme="dark"] .card-warn{border-color:#4A2E27;}
  .cw-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vermilion);margin-bottom:7px;}
  .cw-list{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--ink);}
  .occ-head-l{display:flex;align-items:center;gap:8px;min-width:0;}
  .occ-hist-btn{color:var(--amber);}
  .occ-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;padding:10px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-family:inherit;
    font-size:13px;font-weight:600;color:var(--ink-soft);}
  .occ-more:hover{border-color:var(--amber);color:var(--amber-dark);}
  .occ-more [data-lucide]{width:15px;height:15px;}
  .occ-year{margin:16px 0 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-dark);}
  .occ-year:first-child{margin-top:2px;}
  .occ-count{padding:14px 0 2px;text-align:center;font-size:12px;color:var(--ink-faint);}
  .occ-picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
  .occ-pick{font-size:20px;line-height:1;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;}
  .occ-pick:active{background:var(--surface-2);}
  .occ-preview-btn{width:100%;justify-content:center;margin-top:4px;}
  .occ-prev-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-dark);background:var(--amber-soft);border-radius:999px;padding:3px 10px;margin-bottom:14px;}
  .occ-back{width:100%;justify-content:center;margin-top:10px;background:none;border:none;color:var(--ink-soft);font-weight:600;font-size:13.5px;cursor:pointer;}

  .field{margin-bottom:15px;}
  .field > label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
  .field > label .opt{font-weight:500;color:var(--ink-faint);text-transform:none;letter-spacing:0;}
  .field input:not([type=checkbox]),.field select,.field textarea{width:100%;border:1px solid var(--line-strong);border-radius:10px;padding:11px 12px;background-color:var(--surface-2);color:var(--ink);outline:none;}
  .field select{padding-right:34px;}
  .field input:not([type=checkbox]):focus,.field select:focus,.field textarea:focus{border-color:var(--amber);background-color:var(--surface);}
  .field input:disabled{color:var(--ink-faint);border-style:dashed;cursor:not-allowed;}
  .field input.lt-var,.field input.lt-var::-webkit-datetime-edit{font-weight:700;}
  /* the placeholder is the absence of a value, so it must not be bold too */
  .field input.lt-var::placeholder{font-weight:500;}
  .fld-unlock{background:none;border:none;padding:0 0 0 4px;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:3px;color:var(--amber-dark);font-size:11px;font-weight:700;}
  .fld-unlock [data-lucide]{width:11px;height:11px;}
  /* iOS gives date inputs a native intrinsic width that ignores width:100% (so they spill out of
     the panel) and centres the value while every other field is left-aligned. Normalise both. */
  .field input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;height:44px;display:flex;align-items:center;padding-top:0;padding-bottom:0;line-height:1;}
  .field input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;padding:0;}
  .field input[type=date]::-webkit-datetime-edit{padding:0;line-height:1;}
  .field input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto;margin-right:0;opacity:.5;cursor:pointer;}
  /* opt-in: centre the value in its box (used by the Bakehouse production batch date, which is a
     single standalone field rather than one of a stacked form). */
  .field-row{display:flex;gap:12px;}
  .field-row .field{flex:1;}

  .loc-pick{display:flex;flex-direction:column;gap:8px;}
  .loc-pick-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);cursor:pointer;}
  .loc-pick-item.checked{border-color:var(--amber);background:var(--amber-soft);}
  .loc-pick-item input{appearance:none;-webkit-appearance:none;flex:none;margin:0;padding:0;width:20px;height:20px;border:2px solid var(--line-strong);border-radius:6px;background:var(--surface);cursor:pointer;}
  .loc-pick-item input:checked{border-color:var(--amber);background:var(--amber) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") no-repeat center center;}
  .loc-pick-item .lp-name{font-weight:700;font-size:14px;flex:1;min-width:0;line-height:20px;}
  .loc-pick-item .lp-tag{margin-left:12px;flex:none;white-space:nowrap;font-size:10.5px;line-height:20px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;}

  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:88px;z-index:80;background:var(--brown);color:#fff;padding:11px 18px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);display:flex;align-items:center;gap:9px;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
  .toast [data-lucide]{width:18px;height:18px;color:var(--amber-soft);}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  @media (min-width:820px){.toast{bottom:28px;}}

  .hidden{display:none !important;}
  .spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite;}
  .dots3{display:inline-flex;align-items:center;gap:4px;height:18px;}
  .dots3 i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;animation:dots3 1s infinite ease-in-out;}
  .dots3 i:nth-child(2){animation-delay:.16s;}
  .dots3 i:nth-child(3){animation-delay:.32s;}
  @keyframes dots3{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
  #splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--paper);transition:opacity .4s ease;}
  #splash.hide{opacity:0;pointer-events:none;}
  .splash-name{font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--ink);}
  .splash-dots{display:flex;gap:8px;}
  .splash-dots i{width:9px;height:9px;border-radius:50%;background:var(--amber);opacity:.3;animation:splashdot 1s ease-in-out infinite;}
  .splash-dots i:nth-child(2){animation-delay:.15s;}
  .splash-dots i:nth-child(3){animation-delay:.3s;}
  @keyframes splashdot{0%,100%{opacity:.25}50%{opacity:1}}
  @keyframes spin{to{transform:rotate(360deg);}}
  .soon{text-align:center;padding:70px 24px;color:var(--ink-soft);}
  .soon .seal{width:52px;height:52px;font-size:26px;margin:0 auto 16px;border-radius:14px;}
  .soon h2{margin:0 0 6px;color:var(--ink);font-size:20px;}
  .soon p{margin:0;font-size:14px;max-width:340px;margin-inline:auto;}
  .config-warn{margin:20px;padding:16px 18px;border-radius:var(--radius);background:var(--vermilion-soft);border:1px solid #E9C4C1;color:#7d2b27;font-size:14px;line-height:1.5;}
  .config-warn code{background:#fff;padding:2px 6px;border-radius:6px;font-size:12.5px;}
  /* Shift-history period tabs: selected one uses our usual brown */
  .seg-period .seg-btn.active{background:var(--brown);color:#fff;box-shadow:none;}
  .seg-period{display:flex;width:100%;}
  .seg-period .seg-btn{flex:1;min-width:0;text-align:center;white-space:nowrap;padding:7px 6px;}
  @media (max-width:820px){ .seg-period .seg-btn{font-size:12px;padding:7px 3px;} }
  /* Roster */
  .roster-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
  .roster-week{font-weight:700;font-size:15px;}
  .roster-nav{display:flex;gap:8px;flex-wrap:wrap;}
  .roster-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);}
  table.roster{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;}
  table.roster th,table.roster td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;}
  table.roster td:not(.rname){border:none;padding:3px;}
  table.roster thead th{background:var(--surface-2);padding:8px 6px;font-size:11px;font-weight:700;color:var(--ink-soft);letter-spacing:.03em;text-transform:uppercase;}
  table.roster thead th.today{color:var(--amber-dark);background:var(--amber-soft);}
  table.roster th.rname,table.roster td.rname{position:sticky;left:0;background:var(--surface);text-align:left;padding:9px 12px;font-weight:600;font-size:13.5px;min-width:142px;border-right:1px solid var(--line-strong);z-index:1;}
  .rwho{display:flex;align-items:center;gap:9px;min-width:0;}
  .rn-line{display:flex;align-items:center;gap:6px;min-width:0;flex:1;}
  .rav{width:29px;height:29px;border-radius:9px;background:var(--matcha-soft);color:var(--matcha);display:grid;place-items:center;font-weight:700;font-size:11px;flex:none;}
  .rwho .rn{font-weight:700;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  table.roster thead th.rname{background:var(--surface-2);z-index:3;}
  table.roster tbody tr:last-child td{border-bottom:none;}
  .rcell{width:100%;min-height:46px;border:none;border-radius:10px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 5px;cursor:pointer;color:var(--ink);}
  /* staff Schedule — day view (scoped .sched-*) */
  .sched-chips{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:12px 12px 6px;}
  .sched-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 11px;border:1px solid var(--line);background:var(--surface);border-radius:12px;color:var(--ink-soft);line-height:1;}
  .sched-chip .d{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}
  .sched-chip .n{font-size:16px;font-weight:700;color:var(--ink);}
  .sched-chip .wd{position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--matcha);}
  .sched-chip.today{border-color:var(--line-strong);}
  .sched-chip.sel{background:var(--amber);border-color:var(--amber);}
  .sched-chip.sel .d,.sched-chip.sel .n{color:#fff;}
  .sched-chip.sel .wd{background:#fff;}
  .sched-daytitle{font-family:'Zen Old Mincho',serif;font-size:16px;font-weight:700;padding:12px 18px 4px;display:flex;align-items:center;gap:9px;}
  .sched-you{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 14px 4px;padding:11px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:13px;font-weight:600;color:var(--ink-soft);}
  .sched-shift .sched-av{width:38px;height:38px;border-radius:11px;background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;}
  .sched-shift.you .sched-av{background:var(--amber-soft);color:var(--amber-dark);}
  .sched-shift.you{background:var(--surface-2);}
  .sched-time{font-weight:800;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;flex:none;}
  .sched-shift.you .sched-time{color:var(--amber-dark);}
  /* second leg of a split day — same row, same time size; only the outlet name is smaller/sage */
  .sched-leg2{font-weight:800;color:var(--ink);}
  .sched-leg2 .sep{color:var(--ink-faint);font-weight:700;padding:0 5px;}
  .sched-leg2 .loc{font-size:11.5px;font-weight:700;color:var(--matcha);padding-left:4px;}
  .sched-leg2 .loc-sm{display:none;}
  .lt-doc{font-size:13.5px;line-height:1.7;}
  .lt-doc h3{font-family:'Zen Old Mincho',serif;font-size:14.5px;font-weight:700;margin:20px 0 5px;}
  .lt-doc p{margin:0 0 8px;}
  .lt-doc ul{margin:4px 0 10px;padding-left:20px;}
  .lt-doc li{margin-bottom:3px;}
  .lt-gap{background:var(--warn-soft);color:var(--warn);font-weight:700;font-size:12px;padding:1px 6px;border-radius:5px;}
  /* a merged value inside a clause — the part that differs from one person to the next */
  .lt-val{font-weight:700;}
  /* A signature should look like one. Own face, not the document face — and its own var so the
     whole app changes in one place if the face is ever swapped. */
  :root{--sig-font:'Caveat','Segoe Script','Bradley Hand',cursive;}
  .lt-sign{font-family:var(--sig-font);font-weight:600;line-height:1.15;letter-spacing:.2px;}
  .lt-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;}
  .lt-meta .k{color:var(--ink-soft);font-weight:600;white-space:nowrap;}
  .lt-meta .v{font-weight:700;}
  /* narrow screens: legs stack, and the outlet name shortens to "(cover)" so the name keeps its room */
  @media (max-width:820px){
    .sched-time{text-align:right;flex:0 1 auto;min-width:0;}
    .sched-leg2{display:block;margin-top:2px;}
    .sched-leg2 .sep{display:none;}
    .sched-leg2 .loc-full{display:none;}
    .sched-leg2 .loc-sm{display:inline;}
    /* shift list: name always shows; "You" and a tiny outlet tag fit beside it */
    .sched-shift .row-name.rn-tr .rn-name{flex:none;}
    .sched-shift .row-name{gap:5px;}
    .sched-shift .row-name .loc-tag{font-size:8.5px;padding:2px 5px 2px 4px;gap:2px;border-radius:5px;}
    .sched-shift .row-name .loc-tag svg{width:9px!important;height:9px!important;}
  }
  /* Letters: EN / BM, notices in My Details, owner BM boxes */
  .lt-lang{flex:none;}
  .lt-lang .seg-btn{padding:4px 11px;font-size:12px;letter-spacing:.03em;text-transform:none;}
  .page-actions .lt-lang{align-self:center;}
  .lt-notice-head{gap:10px;}
  .lt-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);}
  .lt-status-acts{margin-left:auto;display:flex;gap:8px;align-items:center;}
  .lt-when{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
  .lt-notice-doc{padding:16px 18px 8px;}
  .lt-ack{display:flex;flex-direction:column;gap:12px;padding:14px 18px 16px;border-top:1px solid var(--line);background:var(--surface-2);}
  .lt-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.45;cursor:pointer;}
  .lt-check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--amber);}
  .lt-ack .btn{align-self:flex-start;}
  .lt-ack .btn:disabled{opacity:.45;cursor:not-allowed;}
  .lt-prevail{margin-top:16px!important;font-size:12px;font-style:italic;color:var(--ink-soft);}
  .lt-bm{border-left:3px solid var(--matcha-soft);padding-left:10px;margin-left:2px;}
  .lt-bm-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--matcha);margin-bottom:6px;}
  .lt-bmrow{cursor:pointer;}
  .lt-bmrow input{width:20px;height:20px;flex:none;accent-color:var(--amber);}
  .lt-allrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:13px;font-weight:600;color:var(--ink-soft);}
  .sched-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 16px;font-size:11.5px;color:var(--ink-faint);border-top:1px solid var(--line);}
  .sched-foot button{background:none;border:none;color:var(--ink-soft);font-size:11.5px;font-weight:700;cursor:pointer;padding:0;}
  .rcell:hover{filter:brightness(.96);}
  .rcell.empty{color:var(--ink-faint);font-size:18px;font-weight:400;}
  .rcell.off{color:var(--ink-faint);font-size:12.5px;font-weight:600;}
  /* colour-coded cell states — Koharu warm palette */
  .rcell.rc-none{background:transparent;border:1px dashed var(--line-strong);color:var(--ink-faint);font-size:18px;font-weight:400;}
  .rcell.rc-work{background:#DCE6C9;color:#47592E;}
  .rcell.rc-off{background:#7A7364;color:#fff;font-size:12.5px;font-weight:700;}
  .rcell.rc-mc{background:#F3E0DA;color:#8F3A2C;font-size:13px;font-weight:800;letter-spacing:.02em;}
  .rcell.rc-al{background:#F3E9D2;color:#7C5A12;font-size:13px;font-weight:800;letter-spacing:.02em;}
  .rcell.rc-rl{background:#DCE4EC;color:#3C5B7E;font-size:13px;font-weight:800;letter-spacing:.02em;}
  .rcell.rc-bl{background:#E4EBD6;color:#46592B;font-size:13px;font-weight:800;letter-spacing:.02em;}
  .rcell.rc-bl [data-lucide]{width:19px;height:19px;}
  .rcell.rc-unavail{background:#C4BEB1;}
  .rcell.rc-na{background:#C4BEB1;}
  .rleg{display:flex;flex-wrap:wrap;gap:7px;padding:2px 2px 12px;line-height:1;}
  .rleg span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 10px;}
  .rleg i{width:10px;height:10px;min-width:10px;border-radius:3px;display:inline-block;flex:none;}
  .rst-btn{border:1.5px solid var(--line-strong);background:var(--surface);border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
  .rst-btn.active{color:#fff;}
  .rst-btn[data-st="work"].active{background:#4E6B48;border-color:#4E6B48;}
  .rst-btn[data-st="off"].active{background:#7A7364;border-color:#7A7364;}
  .rst-btn[data-st="mc"].active{background:#9A3B2C;border-color:#9A3B2C;}
  .rst-btn[data-st="al"].active{background:#8A6413;border-color:#8A6413;}
  .rst-btn[data-st="rl"].active{background:#3C5B7E;border-color:#3C5B7E;}
  .rst-btn[data-st="na"].active{background:#8A8175;border-color:#8A8175;}
  .rst-btn[data-st="bl"].active{background:#46592B;border-color:#46592B;}
  .pchip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:8px;padding:8px 11px;cursor:pointer;line-height:1;}
  .pchip:hover{border-color:var(--matcha);}
  .pchip.active{background:var(--matcha-soft);border-color:var(--matcha);color:#3f5a3a;font-weight:700;box-shadow:0 0 0 1px var(--matcha) inset;}
  .pchip:hover{border-color:var(--amber);background:var(--surface);}
  /* Holidays calendar */
  .ph-nav{display:flex;align-items:center;gap:12px;justify-content:center;padding:6px 0 16px;}
  .ph-nav .mo{font-family:'Zen Old Mincho',serif;font-size:22px;font-weight:600;color:var(--ink);min-width:190px;text-align:center;letter-spacing:.01em;}
  .ph-nav button{width:38px;height:38px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .ph-nav button:hover{border-color:var(--amber);color:var(--amber);}
  .ph-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
  .ph-wk span{text-align:center;font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
  .ph-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
  .ph-day{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;display:flex;align-items:flex-start;justify-content:flex-start;padding:7px 9px;transition:border-color .12s,background .12s;}
  .ph-day:hover{border-color:var(--amber);}
  .ph-day .dn{font-size:14px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
  .ph-day.wknd{background:var(--surface-2);}
  .ph-day.today{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset;}
  .ph-day.on{background:var(--amber);border-color:var(--amber);}
  .ph-day.on .dn{color:#fff;}
  .ph-day .occ{position:absolute;left:8px;right:8px;bottom:6px;font-size:9.5px;font-weight:700;color:#fff;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ph-bd{position:absolute;top:2px;right:3px;font-size:9px;line-height:1;}
  .ph-blank{aspect-ratio:1/1;}
  .ph-pklist{display:flex;flex-direction:column;gap:6px;}
  .ph-pk{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;}
  .ph-pk.done{opacity:.6;background:var(--surface-2);cursor:default;}
  .ph-pk input[type=checkbox]{width:19px;height:19px;accent-color:var(--amber);flex:none;}
  .ph-pk-add{font-size:11px;font-weight:700;color:var(--matcha);background:var(--matcha-soft);border-radius:6px;padding:3px 8px;flex:none;}
  .ph-pk-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
  .ph-pk-occ{font-size:14px;font-weight:700;color:var(--ink);}
  .ph-pk-date{font-size:12px;color:var(--ink-soft);}
  .ph-pk-ed{flex:none;}
  .ph-ed-date,.ph-ed-occ{width:100%;padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--ink);}
  /* Staff holidays (month-grouped, practical) */
  .shol-note{display:flex;gap:11px;align-items:flex-start;background:var(--amber-soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:18px;}
  .shol-note i{color:var(--amber-dark);flex:none;margin-top:1px;}
  .shol-note .t{font-size:13px;color:var(--ink);line-height:1.5;}
  .shol-mhead{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-dark);margin:0 0 8px 2px;}
  .shol-mhead.sep{border-top:1px solid var(--line);padding-top:14px;}
  .shol-item{display:flex;align-items:center;gap:12px;padding:6px 2px 14px;}
  .shol-badge{flex:none;width:34px;height:34px;border-radius:9px;background:var(--amber-soft);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--amber-dark);}
  .shol-item .o{font-size:15px;font-weight:700;color:var(--ink);}
  .shol-item .w{font-size:12px;color:var(--ink-soft);margin-top:1px;}
  #previewBar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:9px;background:var(--ink);color:#fff;padding:11px 12px;border-radius:16px;box-shadow:0 6px 22px rgba(66,48,28,.3);font-size:13px;font-weight:600;width:calc(100% - 28px);max-width:344px;}
  #previewBar .pvtop{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  #previewBar .pvtop button{background:rgba(255,255,255,.16);color:#fff;border:none;padding:6px 13px;border-radius:14px;font-weight:700;cursor:pointer;font-size:12.5px;font-family:inherit;}
  #previewBar .pvtop button:hover{background:rgba(255,255,255,.3);}
  #previewBar .pvctrl{display:flex;gap:8px;}
  #previewBar .pvseg{display:flex;background:rgba(255,255,255,.1);border-radius:12px;padding:3px;flex:1;}
  #previewBar .pvseg button{flex:1;background:transparent;color:rgba(255,255,255,.72);border:none;padding:7px 6px;border-radius:9px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;}
  #previewBar .pvseg button.on{background:var(--amber);color:#fff;}
  #previewBar .pvsup{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.72);border:none;padding:7px 12px;border-radius:11px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;}
  #previewBar .pvsup.on{background:var(--matcha);color:#fff;}
  #previewBar .pvsup i{width:14px;height:14px;}
  /* ---- public-holiday reward offer (staff Home) ---- */
  .phr-card{margin-top:16px;border:1.5px solid var(--amber);background:linear-gradient(180deg,var(--amber-soft),var(--surface));overflow:hidden;}
  .phr-body{padding:16px 18px;}
  .phr-top{display:flex;align-items:flex-start;gap:11px;}
  .phr-badge{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--surface);}
  .phr-badge i{width:18px;height:18px;}
  .phr-title{font-weight:800;color:var(--amber-dark);}
  .phr-sub{font-size:13px;color:var(--ink-soft);margin-top:2px;}
  .phr-note{font-size:13px;color:var(--ink-soft);margin:12px 0;}
  .phr-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .phr-btn{flex:1 1 0;min-width:132px;justify-content:center;}
  .phr-btn-alt{background:var(--surface);border:1.5px solid var(--amber);color:var(--amber-dark);}
  /* ---- bakehouse (recipes + test kitchen) ---- */
  .bake-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
  /* A <button> centres its content vertically when the grid stretches it, so a card with one line
     less sat lower than its row. Column flex pins everything to the top. */
  .bake-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px;cursor:pointer;font-family:inherit;}
  .bake-card:hover{border-color:var(--line-strong);}
  .bake-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
  .bake-title{font-weight:800;color:var(--ink);font-size:15px;}
  .bake-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px;font-size:12px;color:var(--ink-soft);}
  .bake-caret{width:16px;height:16px;color:var(--ink-faint);flex:none;}
  .bake-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);font-size:11px;font-weight:700;}
  .bake-chip.final{background:var(--amber-soft);color:var(--amber-dark);}
  .bake-ings{margin-top:10px;font-size:13px;color:var(--ink-soft);line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
  .bake-ings.faint{color:var(--ink-faint);}
  .bake-vtag{margin-top:8px;font-size:11px;font-weight:700;color:var(--matcha);}
  .bake-detail-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
  .bake-sec-h{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);margin:16px 0 7px;}
  .bake-ing-row{display:flex;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);}
  .bake-ing-row:last-child{border-bottom:none;}
  .bake-ing-row .q{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);min-width:74px;flex:none;}
  .bake-ing-row .n{color:var(--ink-soft);}
  .bake-method{white-space:pre-wrap;font-size:14px;color:var(--ink);line-height:1.5;}
  .bake-vnote{display:flex;gap:7px;align-items:flex-start;background:var(--matcha-soft);color:var(--sage-text);border-radius:10px;padding:9px 11px;font-size:13px;margin:10px 0 4px;}
  .bake-vnote i{width:13px;height:13px;margin-top:2px;flex:none;}
  .bake-ed-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px 30px 30px;gap:6px;align-items:center;margin:0 0 8px;
               border:1px solid var(--line);border-radius:12px;padding:8px 9px;background:var(--surface);}
  .bake-ed-row select{min-width:0;}
  .bake-ed-row input{width:100%;min-width:0;border:1px solid var(--line-strong);border-radius:10px;padding:10px 11px;
               background:var(--surface-2);color:var(--ink);outline:none;font-size:15px;}
  .bake-ed-row input:focus{border-color:var(--amber);background:var(--surface);}
  .bake-ed-row .icon-btn{width:30px;height:30px;}
  .bake-ed-row .icon-btn:disabled{opacity:.35;cursor:default;}
  .bake-ed-row .bake-ed-name{grid-column:1 / -1;}
  .bake-ed-save{display:flex;gap:6px;margin:16px 0 4px;}
  .bake-ed-save .seg-btn{flex:1;}
  .bake-sec{margin-bottom:26px;}
  .bake-sec:last-child{margin-bottom:0;}
  .bake-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
  .bake-sec-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:var(--ink);margin:0;}
  /* Top-up board — Bakehouse, tracked items only */
  .tb-loc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;}
  .tb-loc:last-child{margin-bottom:0;}
  .tb-loc-head{display:flex;align-items:center;gap:7px;width:100%;padding:11px 14px;border:0;background:var(--surface-2);font:inherit;font-weight:800;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;}
  .tb-loc-head .tb-chev{width:17px;height:17px;margin-left:4px;color:var(--ink-soft);transition:transform .18s;}
  .tb-loc.open .tb-chev{transform:rotate(180deg);}
  .tb-loc .tb-detail{display:none;}
  .tb-loc.open .tb-detail{display:block;}
  .tb-loc.open .tb-quick{display:none;}
  .tb-quick{display:flex;gap:7px;padding:10px 14px 11px;overflow-x:auto;scrollbar-width:none;cursor:pointer;}
  .tb-quick::-webkit-scrollbar{display:none;}
  .tb-tile{position:relative;flex:none;min-width:52px;padding:6px 8px 5px;border-radius:10px;text-align:center;line-height:1.1;background:var(--amber-soft);color:var(--amber-dark);border:1.5px solid transparent;}
  .tb-tile b{display:block;font-size:13px;font-weight:800;letter-spacing:.03em;}
  .tb-tile span{display:block;font-size:11.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;opacity:.9;}
  .tb-tile.mid{background:var(--warn-soft);color:var(--warn-text);}
  .tb-tile.full{background:var(--matcha-soft);color:var(--sage-text);}
  .tb-tile.req{border-color:var(--matcha);}
  .tb-tile .tb-req{position:absolute;top:-6px;right:-6px;width:17px;height:17px;border-radius:50%;background:var(--matcha);color:var(--surface);display:flex;align-items:center;justify-content:center;}
  .tb-tile .tb-req svg{width:10px;height:10px;}
  .tb-loc-head svg{width:15px;height:15px;color:var(--ink-soft);flex:none;}
  .tb-loc-head .tb-short{margin-left:auto;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;background:var(--amber-soft);color:var(--amber-dark);}
  .tb-loc-head .tb-short.ok{background:var(--matcha-soft);color:var(--sage-text);}
  .tb-row{padding:11px 14px 12px;border-top:1px solid var(--line);}
  .tb-top{display:flex;align-items:baseline;gap:10px;}
  .tb-name{flex:1;min-width:0;font-weight:700;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tb-nums{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;}
  .tb-nums b{font-size:18px;font-weight:800;color:var(--ink);}
  .tb-nums .tb-of{font-size:13px;font-weight:700;color:var(--ink-soft);}
  .tb-bot{display:flex;align-items:center;gap:12px;margin-top:8px;min-height:34px;}
  .tb-meter{flex:1;height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;}
  .tb-meter i{display:block;height:100%;border-radius:99px;background:var(--amber);}
  .tb-meter i.mid{background:var(--warn);}
  .tb-meter i.full{background:var(--matcha);}
  .tb-act{flex:none;display:flex;align-items:center;justify-content:flex-end;}
  .tb-act .btn{white-space:nowrap;}
  .tb-done{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--sage-text);}
  .tb-done svg{width:15px;height:15px;}
  .tb-row.full .tb-name{color:var(--ink-soft);}
  .tb-row.full .tb-nums b{color:var(--ink-soft);}
  .tb-foot{padding:10px 14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;}
  .field > label.tb-track{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:13px;font-weight:700;line-height:18px;cursor:pointer;color:var(--ink);}
  .tb-track input{width:17px;height:17px;margin:0;flex:none;accent-color:var(--matcha);}
  .tb-track svg{width:16px;height:16px;flex:none;display:block;}
  .tb-track i{display:flex;flex:none;}
  .tb-loc-head .tb-chev{display:flex;}
  .bake-sec-title i{width:18px;height:18px;color:var(--amber);}
  .bake-empty{display:flex;align-items:center;gap:10px;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);color:var(--ink-faint);font-size:13px;background:var(--surface);}
  .bake-empty i{width:18px;height:18px;flex:none;}
  .bake-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;min-height:16px;}
  .bake-cpc{font-size:11px;font-weight:800;color:var(--amber-dark);background:var(--amber-soft);padding:2px 7px;border-radius:999px;}
  .bake-cpc.good{background:var(--matcha-soft);color:var(--sage-text);} .bake-cpc.mod{background:var(--warn-soft);color:var(--warn);} .bake-cpc.bad{background:var(--vermilion-soft);color:var(--vermilion);}

  .bake-ing-row .c{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-soft);}