/* Scoped copy of the redesign's stylesheet, generated from
 * _preview/workspace-interior.html. DO NOT hand-edit: re-run
 * scratchpad/build_redesign_css.py instead.
 *
 * Every selector is prefixed with .rd because 142 of the mockup's class
 * names collide with the real app's. Opt a screen in with class="rd".
 * --bar and --glow are deliberately NOT redefined: they mean something
 * different in the app. */
/* The mockup's page font is 14px; the app's body is 16px, and the body
   reset is deliberately not copied, so restate just the type size. */
.rd{font-size:calc(14px * var(--Tk, 1))}
.rd.rd{     --panel:#161b23; --panel2:#1f242e; --line:#252c37; --line2:#343d4a;     --dim:#868e9a; --mid:#b4bcc7; --fg:#f2f4f7;     --accent:#3b82f6; --accent2:#2f6be0; --accent-dim:#233448; --accent-lt:#8fb8ff;     --good:#35c98d; --warn:#f5a623; --bad:#f2564b; --good-dim:#12352a;     --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.32);     --mshadow:0 1px 2px rgba(0,0,0,.35), 0 22px 60px rgba(0,0,0,.55)}
.rd.rd[data-mode="light"]{
    --panel:#ffffff; --panel2:#eef1f7; --line:#e4e8f0; --line2:#cdd4df;
    --dim:#6b727e; --mid:#414954; --fg:#1a1e25;
    --accent:#2563eb; --accent2:#1d4ed8; --accent-dim:#e4edfd; --accent-lt:#2563eb;
    --good:#149a63; --warn:#bf7d13; --bad:#dc3a2f; --good-dim:#d8f2e6;
    --shadow:0 1px 2px rgba(20,30,50,.05), 0 8px 22px rgba(20,30,50,.08);
    --mshadow:0 1px 2px rgba(20,30,50,.06), 0 24px 60px rgba(20,30,50,.2);
  }
.rd.rd *{box-sizing:border-box}
.rd.rd *{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd ::-webkit-scrollbar{width:10px;height:10px}
.rd.rd ::-webkit-scrollbar-track{background:transparent}
.rd.rd ::-webkit-scrollbar-thumb{background:var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));border:2px solid transparent;background-clip:padding-box}
.rd.rd ::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.rd.rd ::-webkit-scrollbar-corner{background:transparent}
.rd.rd svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd.rd input[type=text], .rd.rd input[type=tel], .rd.rd input[type=number], .rd.rd input[type=time], .rd.rd input[type=password], .rd.rd input[type=email]{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:10px 12px;color:var(--fg);font-size:calc(14px * var(--Tk, 1));font-family:inherit;outline:none}
.rd.rd input:focus{border-color:var(--accent)}
.rd.rd input::placeholder{color:var(--dim)}
.rd.rd .switch{position:relative;display:inline-block;width:44px;height:25px;flex:none}
.rd.rd .switch input{opacity:0;width:0;height:0;position:absolute;margin:0}
.rd.rd .switch .track{position:absolute;inset:0;background:var(--line2);border-radius:999px;transition:background .18s,box-shadow .18s;cursor:pointer}
.rd.rd .switch .track::before{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.3,.8,.35,1.25)}
.rd.rd .switch input:checked + .track{background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 10px rgba(59,130,246,.55)}
.rd.rd .switch input:checked + .track::before{transform:translateX(19px)}
.rd.rd .featitem{border-bottom:1px solid var(--line)}
.rd.rd .featitem:last-child{border-bottom:0}
.rd.rd .featitem .featrow2{border-bottom:0}
.rd.rd .featdet{padding:0 0 14px}
.rd.rd .featdet[hidden]{display:none}
.rd.rd .fchev{color:var(--dim);transition:transform .15s}
.rd.rd .fchev svg{width:15px;height:15px}
.rd.rd .featrow2.open .fchev{transform:rotate(90deg)}
.rd.rd .qrbox{width:96px;height:96px;background:#fff;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:9px;flex:none}
.rd.rd .qrbox svg{width:100%;height:100%;display:block}
.rd.rd .qrbox svg rect{fill:#0d1017;stroke:none}
.rd.rd .qrbox svg rect.w{fill:#fff}
.rd.rd .qrlink{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(13px * var(--Tk, 1));color:var(--accent-lt);word-break:break-all}
.rd.rd .qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:4px}
.rd.rd .qrcard{background:var(--panel);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:8px 8px 7px;text-align:center}
.rd.rd .qrcard .qrbox{width:100%;height:auto;aspect-ratio:1;padding:6px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .qrlbl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));margin-top:6px}
.rd.rd .qrpick{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.rd.rd .qrpill{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));padding:7px 12px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel2)}
.rd.rd .qrpill:hover{border-color:var(--accent)}
.rd.rd .qrpill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .qrview{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 16px;border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2)}
.rd.rd .qrview .qrbox{width:150px;height:150px;padding:11px}
.rd.rd .qrvname{font-size:calc(15px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .qrvlink{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(12.5px * var(--Tk, 1));color:var(--accent-lt);word-break:break-all;text-align:center}
.rd.rd .qrvbtns{display:flex;gap:9px}
.rd.rd .prninput{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:7px 10px;color:var(--fg);font-size:calc(13.5px * var(--Tk, 1));font-family:inherit;outline:none}
.rd.rd .prninput:focus{border-color:var(--accent)}
.rd.rd .grp.sectog{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.rd.rd .secchev{color:var(--dim);transition:transform .15s}
.rd.rd .secchev svg{width:14px;height:14px}
.rd.rd .grp.sectog:not(.open) .secchev{transform:rotate(-90deg)}
.rd.rd .scard[hidden]{display:none}
.rd.rd .optrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));margin-top:8px;cursor:pointer;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .optrow:hover{border-color:var(--accent)}
.rd.rd .optrow.on{border-color:var(--accent);background:var(--accent-dim);color:var(--accent-lt)}
.rd.rd .optrow::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:none}
.rd.rd .optrow.on::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--accent-dim)}
.rd.rd .prnrow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .prnrow:last-of-type{border-bottom:0}
.rd.rd .prnstation{font-size:calc(11.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));padding:3px 9px}
.rd.rd .condot{width:8px;height:8px;border-radius:50%;background:var(--line2);display:inline-block;margin-right:7px;vertical-align:middle;flex:none}
.rd.rd .condot.on{background:var(--good)}
.rd.rd .conrow{display:flex;align-items:center;justify-content:space-between;margin:16px 0 2px}
.rd.rd .constat{font-size:calc(13px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid)}
.rd.rd #printerList .prow{margin-top:5px}
.rd.rd #printerList .prow:first-child{margin-top:0}
.rd.rd #printerList .permpanel{margin:6px 2px 6px}
.rd.rd .pairbox{background:var(--page);border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 14px;margin:14px 0 4px}
.rd.rd .pairlead{font-size:calc(12.5px * var(--Tk, 1));color:var(--mid);margin-bottom:10px}
.rd.rd .pairfield{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.rd.rd .pairfield:last-of-type{border-bottom:0}
.rd.rd .pairfield .pk{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.rd.rd .pairfield .pv{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(16px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);letter-spacing:1px}
.rd.rd .pairwait{display:flex;align-items:center;gap:9px;font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin:12px 0}
.rd.rd .spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rd.rd .spin{animation:none}}
.rd.rd .paircancel{width:100%;justify-content:center}
.rd.rd .collcard{padding:0;margin-bottom:14px}
.rd.rd .collrow{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;cursor:pointer}
.rd.rd .collname{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .collchev{color:var(--dim);transition:transform .15s}
.rd.rd .collchev svg{width:15px;height:15px}
.rd.rd .collcard:not(.open) .collchev{transform:rotate(-90deg)}
.rd.rd .collcard:not(.open) .collbody{display:none}
.rd.rd .collbody{padding:2px 16px 16px}
.rd.rd .dngtitle{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--bad);margin-bottom:10px}
.rd.rd #settingsPanel label:not(.switch){display:block;font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid);margin:16px 0 7px}
.rd.rd .topbar{height:56px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:0 14px;background:var(--bar);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.rd.rd .topbar>.tblogo{justify-self:center;text-decoration:none}
.rd.rd .topbar .tbright{justify-self:end}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.rd.rd .shell{animation:pageIn .28s ease both}
@media (prefers-reduced-motion:reduce){.rd.rd .topbar, .rd.rd .shell{animation:none}}
.rd.rd .tbleft, .rd.rd .tbright{display:flex;align-items:center;gap:10px}
.rd.rd .tbdiv{width:1px;height:20px;background:var(--line2);flex:none}
.rd.rd .iconbtn{width:38px;height:38px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer;position:relative}
.rd.rd .iconbtn:hover{background:var(--panel);border-color:var(--line2);color:var(--fg)}
.rd.rd .iconbtn svg{width:20px;height:20px}
.rd.rd .tblogo{display:flex;align-items:center;gap:9px;cursor:default;padding:4px 6px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));font-size:calc(18px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.3px}
.rd.rd .topbar .tbleft{gap:8px;justify-self:start}
.rd.rd .wsdiv{width:1px;height:17px;background:var(--line2);flex:none;margin:0 10px 0 3px}
.rd.rd .wslabel{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--mid);letter-spacing:-.2px;white-space:nowrap}
.rd.rd .homeBtn{text-decoration:none}
.rd.rd .tblogo .a{color:var(--accent)}
.rd.rd .tblogo .bk{color:var(--dim);font-size:calc(12px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));margin-left:2px}
.rd.rd .ndot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--bar)}
.rd.rd .tbshift{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);border:1px solid var(--line2);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid)}
.rd.rd .tbshift .d{width:8px;height:8px;border-radius:50%;background:var(--good)}
.rd.rd .tbshift.full .d{background:var(--bad)}
.rd.rd .tbshift .c{font-family:"SFMono-Regular",Consolas,monospace;font-weight:calc(700 + var(--Wb, 0));color:var(--fg)}
.rd.rd .tbplan{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px));background:var(--accent-dim);border:1px solid transparent;color:var(--accent-lt);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;transition:border-color .14s}
.rd.rd .tbplan:hover{border-color:var(--accent)}
.rd.rd .tbplan svg{width:14px;height:14px}
.rd.rd .blogo{height:19px;width:auto;display:block}
.rd.rd .brandtext{display:none}
.rd.rd .acctrow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;color:var(--fg);background:var(--panel);border:1px solid var(--line2);margin-top:10px;transition:border-color .14s,box-shadow .14s}
.rd.rd .acctrow:hover{border-color:var(--accent);box-shadow:0 3px 12px rgba(0,0,0,.16)}
.rd.rd .acctava{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(14.5px * var(--Tk, 1));flex:none}
.rd.rd .acctinfo{flex:1;min-width:0}
.rd.rd .acctname{font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));overflow:hidden;text-overflow:ellipsis}
.rd.rd .acctsub{font-size:calc(11px * var(--Tk, 1));color:var(--dim);font-weight:calc(500 + var(--Wb, 0));overflow:hidden;text-overflow:ellipsis}
.rd.rd .acctgear{color:var(--dim);flex:none;display:flex;transition:color .14s,transform .2s}
.rd.rd .acctrow:hover .acctgear{color:var(--accent-lt);transform:translateX(2px)}
.rd.rd .acctgear svg{width:16px;height:16px}
.rd.rd .acctchev{color:var(--dim);font-size:calc(16px * var(--Tk, 1))}
.rd.rd .tround{border:1px solid var(--line);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));margin-bottom:9px;overflow:hidden}
.rd.rd .trhead{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;background:var(--panel2)}
.rd.rd .trhead b{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .trstatus{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .trstatus.ready{color:var(--good);background:rgba(53,201,141,.14)}
.rd.rd .trstatus.prep{color:var(--warn);background:rgba(245,166,35,.14)}
.rd.rd .trchev{margin-left:auto;color:var(--dim);transition:transform .15s}
.rd.rd .trchev svg{width:14px;height:14px}
.rd.rd .tround:not(.open) .trchev{transform:rotate(-90deg)}
.rd.rd .trbody{padding:2px 13px 6px}
.rd.rd .tround:not(.open) .trbody{display:none}
.rd.rd .novl{position:fixed;inset:0;background:var(--backdrop);display:none;align-items:center;justify-content:center;z-index:60}
.rd.rd .novl.open{display:flex;animation:ovIn .18s ease both}
.rd.rd .npanel{width:min(360px,92vw);max-height:78vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px));box-shadow:var(--mshadow);padding:10px;z-index:40}
.rd.rd .novl.open .npanel{animation:mIn .24s cubic-bezier(.2,.7,.2,1) both}
.rd.rd .nhead{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px}
.rd.rd .nhead b{font-size:calc(14px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .nhead a{font-size:calc(12px * var(--Tk, 1));color:var(--accent-lt);cursor:pointer;text-decoration:none}
.rd.rd .nitem{display:flex;gap:10px;padding:10px 8px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer}
.rd.rd .nitem:hover{background:var(--panel2)}
.rd.rd .nidot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
.rd.rd .nidot.warn{background:var(--warn)}
.rd.rd .nidot.good{background:var(--good)}
.rd.rd .nitxt{font-size:calc(13px * var(--Tk, 1));line-height:calc(1.4 * var(--Lh, 1))}
.rd.rd .nitime{font-size:calc(11px * var(--Tk, 1));color:var(--dim);margin-top:3px}
.rd.rd .nidet{font-size:calc(11.5px * var(--Tk, 1));color:var(--mid);margin-top:2px;line-height:calc(1.35 * var(--Lh, 1))}
.rd.rd .nfoot{text-align:center;font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);padding:11px;cursor:pointer;border-top:1px solid var(--line);margin-top:4px}
.rd.rd .nfoot:hover{color:var(--accent)}
.rd.rd .shell{flex:1;display:flex;min-height:0}
.rd.rd .side{width:230px;flex:none;background:var(--side);border-right:1px solid var(--line);
    display:flex;flex-direction:column;padding:14px 12px;overflow:hidden;transition:width .22s ease,padding .22s ease}
.rd.rd.sideclosed .side{width:0;padding:14px 0;border-right-color:transparent}
.rd.rd .sidehandle{position:absolute;top:72px;left:230px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--panel);border:1px solid var(--line2);color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:25;transition:left .22s ease,background .14s,color .14s,border-color .14s}
.rd.rd .sidehandle:hover{color:var(--fg);border-color:var(--accent);background:var(--panel2)}
.rd.rd .sidehandle svg{width:14px;height:14px;transition:transform .22s ease}
.rd.rd.sideclosed .sidehandle{left:0;transform:translateX(0)}
.rd.rd.sideclosed .sidehandle svg{transform:rotate(180deg)}
.rd.rd .sidescroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;display:flex;flex-direction:column}
.rd.rd .sidescroll::-webkit-scrollbar{width:0}
.rd.rd .sidescroll .nav{margin-top:0}
.rd.rd .sidesec{display:flex;align-items:center;gap:9px;font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.7px;color:var(--accent-lt);padding:0 11px;margin:16px 0 8px;white-space:nowrap}
.rd.rd .sidesec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent)}
.rd.rd .sidesec:first-child{margin-top:14px}
.rd.rd .onshiftlist{display:flex;flex-direction:column;gap:1px;flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 18px),transparent 100%)}
.rd.rd .onshiftlist::-webkit-scrollbar{display:none}
.rd.rd .osrow{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;white-space:nowrap}
.rd.rd .osrow:hover{background:var(--panel)}
.rd.rd .osav{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(12px * var(--Tk, 1));flex:none}
.rd.rd .osmeta{flex:1;min-width:0}
.rd.rd .osname{font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .osspace{font-size:calc(11px * var(--Tk, 1));color:var(--dim);margin-top:1px}
.rd.rd .osdot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 3px rgba(53,201,141,.15)}
.rd.rd .osrow.off{opacity:.6}
.rd.rd .osrow.off .osdot{background:var(--dim);box-shadow:none}
.rd.rd .osrow.off:hover{opacity:.85}
.rd.rd.offshift #nav .ni:not([data-t="me"]){display:none}
.rd.rd .mehero{display:flex;align-items:center;gap:13px;margin:6px 0 16px}
.rd.rd .meav{width:52px;height:52px;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(21px * var(--Tk, 1));flex:none}
.rd.rd .memeta{flex:1;min-width:0}
.rd.rd .mename{font-size:calc(19px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.3px}
.rd.rd .merole{font-size:calc(13px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0));margin-top:1px}
.rd.rd .mestat{font-size:calc(12px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--good);background:var(--good-dim);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:6px 11px;white-space:nowrap}
.rd.rd .mestat.off{color:var(--dim);background:var(--panel2)}
.rd.rd .meclock{width:100%;padding:14px;border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));border:none;font-size:calc(15px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));cursor:pointer;font-family:inherit;background:var(--accent);color:#fff;transition:background .14s;margin-bottom:8px}
.rd.rd .meclock:hover{background:var(--accent2)}
.rd.rd .meclock.out{background:var(--panel2);color:var(--fg);border:1px solid var(--line2)}
.rd.rd .meclock.out:hover{background:var(--panel);border-color:var(--bad);color:var(--bad)}
.rd.rd .meclock:disabled{opacity:.5;cursor:default;background:var(--panel2);color:var(--dim)}
.rd.rd .mefull{font-size:calc(13px * var(--Tk, 1));color:var(--warn);background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:12px 14px;margin-bottom:14px;line-height:calc(1.45 * var(--Lh, 1))}
.rd.rd .medemo{background:none;border:none;color:var(--dim);font-size:calc(12px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));cursor:pointer;font-family:inherit;padding:2px 0;margin:-2px 0 16px;text-decoration:underline}
.rd.rd .medemo:hover{color:var(--mid)}
.rd.rd .tbplan.full{background:rgba(242,86,75,.14);color:var(--bad)}
.rd.rd .tbplan .pcount{font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .settrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .settrow:last-of-type{border-bottom:0}
.rd.rd .settrow .sv{color:var(--dim);font-weight:calc(600 + var(--Wb, 0));font-size:calc(13.5px * var(--Tk, 1))}
.rd.rd .settrow.tap{cursor:pointer}
.rd.rd .settrow.tap:hover .sk{color:var(--accent-lt)}
.rd.rd .settrow .chev{color:var(--dim);display:flex}
.rd.rd .settrow .chev svg{width:15px;height:15px}
.rd.rd .toggle.sm button{padding:6px 11px;font-size:calc(12px * var(--Tk, 1))}
.rd.rd .uc-avwrap{position:relative;cursor:pointer;flex:none}
.rd.rd .uc-cam{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);display:flex;align-items:center;justify-content:center;color:#fff}
.rd.rd .uc-cam svg{width:11px;height:11px}
.rd.rd .uc-signout{width:100%;margin-top:18px;padding:11px;border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);background:transparent;color:var(--mid);font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .uc-signout:hover{border-color:var(--bad);color:var(--bad)}
.rd.rd .featrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd.rd .plancard{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,var(--accent-dim),transparent 85%);border:1px solid var(--accent);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 14px;cursor:pointer;margin-bottom:2px}
.rd.rd .plancard-name{font-size:calc(15.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .plancard-sub{font-size:calc(12px * var(--Tk, 1));color:var(--dim);font-weight:calc(500 + var(--Wb, 0));margin-top:2px}
.rd.rd .plancard-btn{background:var(--accent);color:#fff;border:none;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 15px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit;white-space:nowrap}
.rd.rd .plan-sub{color:var(--dim);font-size:calc(13px * var(--Tk, 1));font-weight:calc(500 + var(--Wb, 0));margin:4px 0 18px;line-height:calc(1.45 * var(--Lh, 1))}
.rd.rd .tiercard{border:1px solid var(--line2);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:15px 16px;margin-bottom:11px;background:var(--panel2)}
.rd.rd .tiercard.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.rd.rd .tiercard.rec{border-color:var(--good)}
.rd.rd .tierhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rd.rd .tiername{font-size:calc(16px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));display:flex;align-items:center;gap:8px}
.rd.rd .tierprice{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(17px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .tierprice small{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .tierseats{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0));margin:4px 0 13px}
.rd.rd .tierbtn{width:100%;padding:9px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));border:none;background:var(--accent);color:#fff;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .tierbtn.ghost{background:transparent;border:1px solid var(--line2);color:var(--dim);cursor:default}
.rd.rd .curpill{font-size:calc(9.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 7px}
.rd.rd .recpill{font-size:calc(9.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:#04121f;background:var(--good);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 7px}
.rd.rd .grouprow{border:1px dashed var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 15px;font-size:calc(13px * var(--Tk, 1));color:var(--mid);font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .plansoon{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);text-align:center;margin-top:6px;font-weight:calc(500 + var(--Wb, 0))}
.rd.rd .billsum{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));padding:15px;margin-bottom:4px}
.rd.rd .billplan{font-size:calc(16px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .billnext{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0));margin-top:3px}
.rd.rd .medinput{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 13px;color:var(--fg);font-size:calc(14px * var(--Tk, 1));font-family:inherit;margin-bottom:4px}
.rd.rd .medinput:focus{outline:none;border-color:var(--accent)}
.rd.rd .medit{cursor:pointer}
.rd.rd.dyslexia{font-family:Verdana,Tahoma,"Segoe UI",sans-serif;letter-spacing:.015em;word-spacing:.06em}
.rd.rd .side .shiftpill{margin-bottom:9px}
.rd.rd .wsswitch{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid var(--line);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);cursor:pointer;white-space:nowrap;transition:border-color .14s}
.rd.rd .wsswitch:hover{border-color:var(--accent)}
.rd.rd .wsdrop{position:fixed;display:none;background:var(--panel);border:1px solid var(--line2);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));box-shadow:var(--mshadow);padding:7px;z-index:70;min-width:230px}
.rd.rd .wsdrop.open{display:block;animation:mIn .18s ease both}
.rd.rd .wsdrop-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer}
.rd.rd .wsdrop-item:hover{background:var(--panel2)}
.rd.rd .wsdrop-av{width:32px;height:32px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1));flex:none}
.rd.rd .wsdrop-name{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .wsdrop-role{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .wsdrop-check{margin-left:auto;color:var(--accent);display:flex}
.rd.rd .wsdrop-check svg{width:16px;height:16px}
.rd.rd .wsdrop-sep{height:1px;background:var(--line);margin:6px 4px}
.rd.rd .wsdrop-all{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;color:var(--accent-lt);font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-decoration:none}
.rd.rd .wsdrop-all:hover{background:var(--accent-dim)}
.rd.rd .wsdrop-all svg{width:18px;height:18px}
.rd.rd .wsdrop-search{position:relative;display:flex;align-items:center;margin:1px 1px 7px}
.rd.rd .wsdrop-search svg{position:absolute;left:10px;width:15px;height:15px;color:var(--dim);pointer-events:none}
.rd.rd .wsdrop-search input{width:100%;height:36px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);background:var(--page);color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;padding:0 11px 0 31px;outline:none;transition:border-color .14s}
.rd.rd .wsdrop-search input::placeholder{color:var(--dim)}
.rd.rd .wsdrop-search input:focus{border-color:var(--accent)}
.rd.rd .wsdrop-list{max-height:292px;overflow-y:auto;overscroll-behavior:contain}
.rd.rd .wsdrop-list::-webkit-scrollbar{width:8px}
.rd.rd .wsdrop-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .wsdrop-none{display:none;padding:16px 10px;text-align:center;font-size:calc(12.5px * var(--Tk, 1));color:var(--dim)}
.rd.rd .wsdrop-none.on{display:block}
.rd.rd .wsswitch:hover{border-color:var(--accent)}
.rd.rd .wsava{width:38px;height:38px;border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(16px * var(--Tk, 1));flex:none}
.rd.rd .wsmeta{min-width:0;flex:1}
.rd.rd .wsname{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd.rd .wsrole{font-size:calc(11px * var(--Tk, 1));color:var(--dim);text-transform:uppercase;letter-spacing:.5px;font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .wschev{color:var(--dim)}
.rd.rd .wschev svg{width:16px;height:16px}
.rd.rd .nav{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.rd.rd .ni{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));color:var(--mid);cursor:pointer;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));white-space:nowrap}
.rd.rd .ni svg{width:19px;height:19px;flex:none}
.rd.rd .ni:hover{background:var(--panel);color:var(--fg)}
.rd.rd .ni.on{background:var(--accent-dim);color:var(--accent-lt)}
.rd.rd .ni .nibadge{margin-left:auto;background:var(--bad);color:#fff;font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px));min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.rd.rd .sidefoot{margin-top:auto;padding-top:6px}
.rd.rd .sidefoot .shiftpill{margin-top:16px}
.rd.rd .sidefoot .acctrow{margin-top:8px}
.rd.rd .shiftpill{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);border:1px solid var(--line2);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid);white-space:nowrap}
.rd.rd .shiftpill .d{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.rd.rd .shiftpill .c{margin-left:auto;font-family:"SFMono-Regular",Consolas,monospace;font-weight:calc(700 + var(--Wb, 0));color:var(--fg)}
.rd.rd button.shiftpill{width:100%;cursor:pointer;font-family:inherit;transition:border-color .14s,background .14s,color .14s}
.rd.rd .shiftpill .shifttxt{font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .shiftpill .clockcta{margin-left:auto;font-weight:calc(800 + var(--Wb, 0));color:var(--bad);display:none}
.rd.rd .shiftpill.on:hover{border-color:var(--bad)}
.rd.rd .shiftpill.on:hover .c{display:none}
.rd.rd .shiftpill.on:hover .clockcta{display:inline}
.rd.rd .shiftpill.off{background:var(--accent);border-color:var(--accent);color:#fff;justify-content:center}
.rd.rd .shiftpill.off:hover{background:var(--accent2);border-color:var(--accent2)}
.rd.rd .shiftpill.off .d, .rd.rd .shiftpill.off .c, .rd.rd .shiftpill.off .clockcta{display:none}
.rd.rd .shiftpill.off .shifttxt{color:#fff;font-weight:calc(800 + var(--Wb, 0));margin:0 auto}
.rd.rd .main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.rd.rd .mhead{padding:20px 24px 0;flex:none}
.rd.rd .mtitle{font-size:calc(24px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.4px;margin:0}
.rd.rd .summary{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.rd.rd .sChip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);border:1px solid var(--line);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid)}
.rd.rd .sChip b{color:var(--fg);font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .sChip .d{width:8px;height:8px;border-radius:50%}
.rd.rd .d.ready{background:var(--good)}
.rd.rd .d.prep{background:var(--warn)}
.rd.rd .d.pay{background:var(--accent)}
.rd.rd .d.free{background:var(--line2)}
.rd.rd .toolrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 2px}
.rd.rd .toggle{display:inline-flex;background:var(--panel);border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:3px;gap:3px}
.rd.rd .toggle button{border:none;background:transparent;color:var(--mid);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:7px 15px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .toggle button.on{background:var(--accent);color:#fff}
.rd.rd .btn{border:none;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 15px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--fg)}
.rd.rd .btn.ghost{background:var(--panel2);border:1px solid var(--line2);color:var(--mid)}
.rd.rd .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.rd.rd .btn svg{width:15px;height:15px}
.rd.rd .btn.primary{background:var(--accent);color:#fff;box-shadow:0 3px 15px rgba(59,130,246,.35)}
.rd.rd .btn.primary:hover{background:var(--accent2);box-shadow:0 4px 20px rgba(59,130,246,.5)}
.rd.rd .body{padding:24px 24px 40px;overflow-y:auto;flex:1;min-height:0}
.rd.rd .col[hidden]{display:none}
.rd.rd .grp{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin:16px 0 10px}
.rd.rd .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:13px}
.rd.rd .ttile{position:relative;min-height:120px;background:var(--panel2);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));padding:14px 15px;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column}
.rd.rd .ttile.ready{border-left-color:var(--good)}
.rd.rd .ttile.prep{border-left-color:var(--warn)}
.rd.rd .ttile.pay{border-left-color:var(--accent)}
.rd.rd .ttile:hover{border-top-color:var(--line2);border-right-color:var(--line2);border-bottom-color:var(--line2);transform:translateY(-2px);transition:transform .12s}
.rd.rd .tdot{position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:50%}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 0 rgba(53,201,141,.55)}70%{box-shadow:0 0 0 6px rgba(53,201,141,0)}}
.rd.rd .ttile.ready .tdot{animation:tpulse 2.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rd.rd .ttile.ready .tdot{animation:none}}
.rd.rd .ttname{font-size:calc(16.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .ttsub{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:8px;font-size:calc(12.5px * var(--Tk, 1))}
.rd.rd .st.ready{color:var(--good)}
.rd.rd .st.prep{color:var(--warn)}
.rd.rd .st.pay{color:var(--accent-lt)}
.rd.rd .tot{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim);white-space:nowrap}
.rd.rd .ttmeta{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);display:flex;gap:7px;align-items:center}
.rd.rd .ttile.free{background:rgba(16,22,34,.6);border:1px dashed var(--line2);justify-content:center;box-shadow:none}
.rd.rd[data-mode="light"] .ttile.free{background:rgba(255,255,255,.58)}
.rd.rd .ttile.free:hover{border-color:var(--accent);background:rgba(16,22,34,.74)}
.rd.rd[data-mode="light"] .ttile.free:hover{background:rgba(255,255,255,.74)}
.rd.rd .ttile.free .fsub{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:6px}
.rd.rd .ttile.add{background:transparent;border:1px dashed var(--accent);color:var(--accent-lt);align-items:center;justify-content:center;gap:10px;font-weight:calc(700 + var(--Wb, 0));box-shadow:none;font-size:calc(15px * var(--Tk, 1))}
.rd.rd .ttile.add svg{width:24px;height:24px;flex:none}
.rd.rd .floorbottom{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.rd.rd .obox{flex:1;min-width:180px;display:flex;align-items:center;justify-content:center;gap:10px;padding:15px;border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent-lt);font-size:calc(15px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .obox:hover{background:var(--accent);color:#fff}
.rd.rd .obox svg{width:22px;height:22px}
.rd.rd .dpay.ghostpay{background:transparent;border:1px solid var(--line2);color:var(--fg)}
.rd.rd .dpay.ghostpay:hover{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .movewrap{margin:0 0 15px}
.rd.rd .movebtn{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:8px 12px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid);cursor:pointer;font-family:inherit}
.rd.rd .movebtn:hover{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .movebtn svg{width:15px;height:15px}
.rd.rd .movepick{display:flex;gap:8px;align-items:center}
.rd.rd .movepick[hidden]{display:none}
.rd.rd .movepick .tmrsel{flex:1}
.rd.rd .moveok{display:flex;align-items:center;gap:7px;font-size:calc(13px * var(--Tk, 1));color:var(--good);font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .moveok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.rd.rd .paypanel{margin-top:6px}
.rd.rd .paypanel[hidden]{display:none}
.rd.rd .paysec{margin-bottom:0}
.rd.rd .paysec + .paysec{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.rd.rd .paycoll .pcoll-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:3px 0;cursor:pointer;font-family:inherit;color:inherit;text-align:left}
.rd.rd .paycoll .pcoll-head .paylbl{margin:0}
.rd.rd .pcoll-sum{margin-left:auto;font-size:calc(13px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid)}
.rd.rd .paycoll.open .pcoll-sum{color:var(--accent-lt)}
.rd.rd .pcoll-chev{display:flex;color:var(--dim);transition:transform .2s}
.rd.rd .pcoll-chev svg{width:18px;height:18px}
.rd.rd .paycoll.open .pcoll-chev{transform:rotate(180deg)}
.rd.rd .pcoll-body{display:none;margin-top:13px}
.rd.rd .paycoll.open .pcoll-body{display:block}
.rd.rd .paylbl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:9px}
.rd.rd .dstage{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;
    background:var(--panel2);border:1px solid var(--line2);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));padding:12px 11px 11px;
    transition:border-color .18s}
.rd.rd .dstep{height:38px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);border:1px solid var(--line2);
    color:var(--mid);font-size:calc(19px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));line-height:calc(1 * var(--Lh, 1));cursor:pointer;font-family:inherit}
.rd.rd .dstep:hover:not(:disabled){border-color:var(--accent);color:var(--fg)}
.rd.rd .dstep:disabled{opacity:.32;cursor:default}
.rd.rd .dval{display:flex;align-items:baseline;justify-content:center;gap:2px;line-height:calc(1 * var(--Lh, 1));
    font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tmodal .dval .dvalin{width:72px;background:none;border:0;text-align:center;padding:0;
    font-family:inherit;font-size:calc(31px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);letter-spacing:-1px;line-height:calc(1 * var(--Lh, 1))}
.rd.rd .tmodal .dval .dvalin:focus{outline:none}
.rd.rd .dval i{font-style:normal;font-size:calc(15px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--dim)}
.rd.rd .doff{grid-column:1/-1;text-align:center;font-size:calc(12px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--dim);margin-top:10px}
.rd.rd .dstage[data-lvl="1"] .doff{color:var(--good)}
.rd.rd .dstage[data-lvl="2"] .doff{color:var(--warn)}
.rd.rd .dstage[data-lvl="3"] .doff{color:var(--bad)}
.rd.rd .dstage[data-lvl="3"]{border-color:rgba(255,107,107,.42)}
.rd.rd .dpre{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.rd.rd .dchip{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:7px 0;
    font-size:calc(12px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--mid);cursor:pointer;font-family:inherit;text-align:center;
    transition:border-color .12s,background .12s,color .12s}
.rd.rd .dchip:hover{border-color:var(--accent);color:var(--fg)}
.rd.rd .dchip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .dwhy{margin-top:13px}
.rd.rd .dwhy[hidden]{display:none}
.rd.rd .dwhyrow{display:flex;flex-wrap:wrap;gap:6px}
.rd.rd .wchip{background:none;border:1px solid var(--line2);border-radius:999px;padding:7px 12px;
    font-size:calc(12px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--dim);cursor:pointer;font-family:inherit;
    transition:border-color .12s,color .12s,background .12s}
.rd.rd .wchip:hover{color:var(--fg)}
.rd.rd .wchip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .splittoggle{display:flex;align-items:center;justify-content:space-between}
.rd.rd .splitrow{display:flex;align-items:center;justify-content:space-between;font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd #splitN{min-width:24px;text-align:center;font-weight:calc(700 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .splitper{margin-top:10px;font-size:calc(13.5px * var(--Tk, 1));color:var(--mid);background:var(--panel2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 13px;display:flex;justify-content:space-between;align-items:center}
.rd.rd .splitper b{font-family:"SFMono-Regular",Consolas,monospace;color:var(--fg);font-size:calc(15px * var(--Tk, 1))}
.rd.rd .paysum{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;margin-bottom:15px}
.rd.rd .payrow{display:flex;justify-content:space-between;font-size:calc(14px * var(--Tk, 1));padding:4px 0;color:var(--dim)}
.rd.rd .payrow span[id]{font-family:"SFMono-Regular",Consolas,monospace;color:var(--mid)}
.rd.rd .payrow #payDisc{color:var(--good)}
.rd.rd .payrow.paytot{font-size:calc(15px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);padding-top:14px;margin-top:11px;
    border-top:1px solid var(--line);align-items:baseline}
.rd.rd .payrow.paytot b{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(34px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-1.2px}
.rd.rd .payrow #payTipAmt{color:var(--good)}
.rd.rd .tipchips{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd.rd .tchip{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 0;
    font-size:calc(12px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--mid);cursor:pointer;font-family:inherit;text-align:center;
    transition:border-color .12s,background .12s,color .12s}
.rd.rd .tchip:hover{border-color:var(--good);color:var(--fg)}
.rd.rd .tchip.active{background:var(--good-dim);border-color:var(--good);color:var(--good)}
.rd.rd[data-mode="dark"] .tchip.active{background:rgba(20,154,99,.16);color:#5fd6a0}
.rd.rd .paymethods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rd.rd .paymethods .dpay{height:54px;margin:0;display:flex;align-items:center;justify-content:center;
    gap:9px;font-size:calc(15px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid transparent}
.rd.rd .paymethods .dpay svg{width:19px;height:19px}
.rd.rd .paymethods .paycash{background:var(--good);border-color:var(--good);color:#04121f}
.rd.rd .paymethods .paycash:hover{filter:brightness(1.07)}
.rd.rd .paymethods .paycard{background:var(--accent2);border-color:var(--accent2);color:#fff}
.rd.rd .paymethods .paycard:hover{background:var(--accent);border-color:var(--accent)}
.rd.rd .kgrid{column-width:240px;column-gap:13px}
.rd.rd .kcube{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 13px;width:100%;background:var(--panel);border:1px solid var(--line2);border-left:5px solid var(--good);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:12px 13px;box-shadow:var(--shadow)}
.rd.rd .kcube.warn{border-left-color:var(--warn)}
.rd.rd .kcube.late{border-left-color:var(--bad)}
.rd.rd .khead{display:flex;align-items:center;gap:9px;cursor:pointer}
.rd.rd .khead b{font-size:calc(16px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .kround{font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 7px}
.rd.rd .ktime{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace;margin-left:auto}
.rd.rd .kchev{color:var(--dim);transition:transform .15s}
.rd.rd .kchev svg{width:14px;height:14px}
.rd.rd .kcube.collapsed .kchev{transform:rotate(-90deg)}
.rd.rd .kbody{margin-top:10px}
.rd.rd .kcube.collapsed .kbody{display:none}
.rd.rd .kcat{font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:9px 0 4px}
.rd.rd .kcat:first-child{margin-top:0}
.rd.rd .kline{font-size:calc(14px * var(--Tk, 1));line-height:calc(1.7 * var(--Lh, 1))}
.rd.rd .kline .q{color:var(--accent-lt);font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace;margin-right:4px}
.rd.rd .kactions{display:flex;gap:8px;margin-top:11px}
.rd.rd .kbtn{flex:1;padding:8px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));border:none;background:var(--good);color:#04121f;cursor:pointer;font-family:inherit}
.rd.rd .kbtn.done{background:var(--panel2);color:var(--mid);border:1px solid var(--line2)}
.rd.rd .kping{flex:none;width:38px;padding:0;background:transparent;border:1px solid var(--line2);color:var(--warn);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd.rd .kping:hover{border-color:var(--warn);background:rgba(245,166,35,.1)}
.rd.rd .kping svg{width:16px;height:16px}
.rd.rd .placeholder{color:var(--dim);font-size:calc(14px * var(--Tk, 1));padding:60px 0;text-align:center}
.rd.rd .msgpanel{display:flex;flex-direction:column;height:100%;max-width:820px;width:100%;margin:0 auto}
.rd.rd .msgpanel[hidden]{display:none}
.rd.rd .msghead{flex:none;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.rd.rd .msgtitle{font-size:calc(18px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.2px}
.rd.rd .msgsub{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:2px}
.rd.rd .msglist2{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;padding:10px 10px;border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line);background:rgba(10,15,26,.55);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd[data-mode="light"] .msglist2{background:rgba(255,255,255,.62);border-color:var(--line2)}
.rd.rd .inv-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rd.rd .inv-err{font-size:calc(12px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--bad);margin-top:10px}
.rd.rd .inv-err:empty{display:none}
.rd.rd .msgrow{display:flex;gap:11px;padding:6px 8px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .msgrow:hover{background:var(--panel)}
.rd.rd .msgrow.grouped{padding-top:1px;padding-bottom:1px}
.rd.rd .msgav{width:38px;height:38px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1))}
.rd.rd .msgbody{flex:1;min-width:0}
.rd.rd .msghdr{display:flex;align-items:baseline;gap:8px}
.rd.rd .msgname{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .msgtime{font-size:calc(11px * var(--Tk, 1));color:var(--dim)}
.rd.rd .msgtext{font-size:calc(14.5px * var(--Tk, 1));color:var(--fg);line-height:calc(1.4 * var(--Lh, 1));white-space:pre-wrap;word-break:break-word}
.rd.rd .msgtext .mention{background:var(--accent-dim);color:var(--accent-lt);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:0 5px;font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .msgrow.pingme{background:rgba(245,166,35,.11);box-shadow:inset 3px 0 0 var(--warn)}
.rd.rd .msgrow.pingme:hover{background:rgba(245,166,35,.15)}
.rd.rd .msgcompose2{flex:none;position:relative;display:flex;align-items:center;gap:5px;margin-top:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px));padding:5px 6px}
.rd.rd .msgat{flex:none;width:38px;height:38px;border:none;background:none;color:var(--mid);font-size:calc(19px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));cursor:pointer;border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));font-family:inherit}
.rd.rd .msgat:hover{background:var(--panel);color:var(--accent-lt)}
.rd.rd .msgcompose2 input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--fg);font-size:calc(15px * var(--Tk, 1));padding:9px 6px;font-family:inherit}
.rd.rd .msgcompose2 input::placeholder{color:var(--dim)}
.rd.rd .msgsendbtn{flex:none;background:var(--accent);color:#fff;border:none;border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));width:42px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rd.rd .msgsendbtn:hover{background:var(--accent2)}
.rd.rd .msgsendbtn svg{width:18px;height:18px}
.rd.rd .mentionpick{position:absolute;bottom:calc(100% + 8px);left:0;background:var(--panel);border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));box-shadow:var(--mshadow);padding:6px;min-width:220px;z-index:5}
.rd.rd .mentionpick[hidden]{display:none}
.rd.rd .mentionpick .mgrp{font-size:calc(10.5px * var(--Tk, 1));color:var(--dim);text-transform:uppercase;letter-spacing:.5px;padding:6px 8px 3px;font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .mentionpick .mitem{display:flex;align-items:center;gap:9px;padding:8px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .mentionpick .mitem:hover{background:var(--panel2)}
.rd.rd .mentionpick .mav{width:26px;height:26px;border-radius:50%;flex:none;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(11px * var(--Tk, 1))}
.rd.rd .msghere{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .msghere::before{content:"·";margin-right:6px;color:var(--line2)}
.rd.rd .msgimg{max-width:220px;max-height:180px;border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));margin-top:4px;border:1px solid var(--line2);display:block}
.rd.rd .clickuser{cursor:pointer}
.rd.rd .msgname.clickuser:hover{text-decoration:underline}
.rd.rd .uc-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;padding-right:26px}
.rd.rd .uc-av{width:52px;height:52px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(20px * var(--Tk, 1));flex:none}
.rd.rd .uc-name{font-size:calc(18px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .uc-role{font-size:calc(12px * var(--Tk, 1));color:var(--accent-lt);font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.rd.rd .uc-status{display:flex;align-items:center;gap:8px;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));padding:10px 12px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px solid var(--line2)}
.rd.rd .uc-status::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.rd.rd .uc-status.on{color:var(--good)}
.rd.rd .uc-status.on::before{background:var(--good)}
.rd.rd .uc-status.off{color:var(--dim)}
.rd.rd .uc-status.off::before{background:var(--line2)}
.rd.rd .uc-lbl{display:flex;align-items:center;gap:9px;font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.7px;color:var(--accent-lt);margin:18px 0 9px}
.rd.rd .uc-lbl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent)}
.rd.rd .uc-spaces{display:flex;flex-wrap:wrap;gap:7px}
.rd.rd .ucsp{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:5px 11px}
.rd.rd .actstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:2px 0 16px}
.rd.rd .astat{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:14px 15px;box-shadow:var(--shadow)}
.rd.rd .astatic{width:40px;height:40px;border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none}
.rd.rd .astatic svg{width:20px;height:20px}
.rd.rd .astatnum{font-size:calc(23px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.5px;line-height:calc(1.05 * var(--Lh, 1))}
.rd.rd .astatlbl{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);margin-top:1px;font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .actcard{padding:2px 16px}
.rd.rd .actrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rd.rd .actrow:last-child{border-bottom:0}
.rd.rd .actrow[data-user]{cursor:pointer;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));margin:0 -8px;padding:12px 8px}
.rd.rd .actrow[data-user]:hover{background:var(--panel2)}
.rd.rd .actav{width:38px;height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1));flex:none}
.rd.rd .actav.ring{box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--good)}
.rd.rd .acttxt{flex:1;min-width:0}
.rd.rd .actname{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .actsub{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:1px}
.rd.rd .actrow .lspace{flex:none}
.rd.rd .actdur{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(13px * var(--Tk, 1));color:var(--mid);font-weight:calc(600 + var(--Wb, 0));min-width:40px;text-align:right}
.rd.rd .shiftrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.rd.rd .shiftrow:last-child{border-bottom:0}
.rd.rd .shiftav{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1));flex:none}
.rd.rd .shifttxt{flex:1;min-width:0}
.rd.rd .shiftname2{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .shifttimes{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:2px;font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .shifttimes .on{color:var(--good);font-weight:calc(700 + var(--Wb, 0));font-family:-apple-system,"Segoe UI",Roboto,sans-serif}
.rd.rd .shiftdur{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(16px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--fg);flex:none}
.rd.rd .shiftdur.on{color:var(--good)}
.rd.rd .shiftdur.over{color:var(--warn)}
.rd.rd .shifttag2{font-size:calc(10px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));margin-left:8px;vertical-align:1px}
.rd.rd .shifttag2.late{color:var(--warn);background:rgba(245,166,35,.15)}
.rd.rd .shifttag2.over{color:var(--bad);background:rgba(242,86,75,.14)}
.rd.rd .shifttag2.split{color:var(--accent-lt);background:var(--accent-dim)}
/* early = green: arriving before your shift is a good thing, unlike late (amber) or
   overtime (red). Added with the early check, 2026-07-29. */
.rd.rd .shifttag2.early{color:var(--good);background:rgba(53,201,141,.15)}
.rd.rd .schedrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rd.rd .schedrow:last-child{border-bottom:0}
.rd.rd .schedmeta{min-width:78px}
.rd.rd .schedname{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .schedrole{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);margin-top:1px}
.rd.rd .schedsegs{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.rd.rd .schedseg{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:4px 9px}
.rd.rd .schedseg input[type=time],.rd.rd .schedseg .schedtime{background:none;border:none;color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;padding:2px 0;width:auto;outline:none}
.rd.rd .segto{font-size:calc(12px * var(--Tk, 1));color:var(--dim)}
.rd.rd .segrm{color:var(--dim);cursor:pointer;font-size:calc(12px * var(--Tk, 1));padding:0 1px 0 3px}
.rd.rd .segrm:hover{color:var(--bad)}
.rd.rd .schedadd{font-size:calc(12px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);background:var(--accent-dim);border:1px solid transparent;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:6px 11px;cursor:pointer;font-family:inherit;flex:none;white-space:nowrap}
.rd.rd .schedadd:hover{border-color:var(--accent)}
.rd.rd .shopsupplier{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);margin:14px 0 2px}
.rd.rd .shopsupplier:first-child{margin-top:4px}
.rd.rd .shoprow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .shoprow:last-child{border-bottom:0}
.rd.rd .buypill{font-size:calc(10px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--bad);background:rgba(242,86,75,.14);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));padding:3px 8px;flex:none}
.rd.rd .shopname{flex:1;font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));min-width:0}
.rd.rd .shopqty{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .restockbtn{padding:6px 12px;font-size:calc(12.5px * var(--Tk, 1))}
.rd.rd .cempty{color:var(--dim);font-size:calc(13.5px * var(--Tk, 1));text-align:center}
.rd.rd .stockcard{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.rd.rd .stockcard:last-child{border-bottom:0}
.rd.rd .sc-main{flex:1;min-width:0}
.rd.rd .sc-name{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));display:flex;align-items:center;gap:8px}
.rd.rd .sc-sub{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:3px}
.rd.rd .sc-count{color:var(--fg);cursor:pointer;font-weight:calc(700 + var(--Wb, 0));border-bottom:1px dashed var(--line2)}
.rd.rd .sc-badge{font-size:calc(10px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .sc-badge.low{color:var(--warn);background:rgba(245,166,35,.15)}
.rd.rd .sc-badge.out{color:var(--bad);background:rgba(242,86,75,.14)}
.rd.rd .sc-actions{display:flex;gap:7px;flex:none}
.rd.rd .sc-actions .btn{padding:6px 11px;font-size:calc(12px * var(--Tk, 1))}
.rd.rd .countinput{width:84px;background:var(--panel2);border:1px solid var(--accent);border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));padding:3px 8px;color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;outline:none}
.rd.rd .statshead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;
    background:linear-gradient(135deg,var(--accent-dim),transparent 72%);border:1px solid var(--line2);border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px));padding:19px 22px}
.rd.rd .statsheroLbl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.rd.rd .statshero{font-size:calc(52px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-2px;font-family:"SFMono-Regular",Consolas,monospace;margin-top:4px;line-height:calc(1 * var(--Lh, 1));color:var(--fg)}
.rd.rd .statstrend{font-size:calc(12.5px * var(--Tk, 1));color:var(--good);font-weight:calc(700 + var(--Wb, 0));margin-top:9px}
.rd.rd .chart{display:flex;align-items:flex-end;justify-content:space-evenly;height:150px;padding:10px 0 24px}
/* flex, NOT a fixed 26px: 24 hour bars at 26px plus the 4px gaps need 716px, but the chart box
   is 646px, so the last bars were pushed onto and past the right edge. They share the width now
   and cap at 26px, so a 7-bar week still looks right. (Panos, 2026-07-29) */
.rd.rd .chart .bar{flex:1 1 0;min-width:0;max-width:26px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px)) calc(6px * var(--Rk, 1) + var(--Rf, 0px)) 0 0;min-height:4px;position:relative;opacity:.92}
/* An hour that took nothing must draw nothing. min-height:4px above was giving every empty
   hour a visible stub, so the takings chart showed trade that never happened. The label still
   renders, because it is absolutely positioned against the bar's baseline. (Panos, 2026-07-29) */
.rd.rd .chart .bar.zero{min-height:0;background:none}
.rd.rd .lbrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .lbrow:last-child{border-bottom:0}
.rd.rd .lbrank{width:24px;height:24px;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--dim);flex:none}
.rd.rd .lbrow.top .lbrank{background:linear-gradient(180deg,#f5c451,#e0a020);color:#3a2600;border-color:transparent}
.rd.rd .lbav{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(13px * var(--Tk, 1));flex:none}
.rd.rd .lbname{flex:1;font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));min-width:0}
.rd.rd .lbval{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(15px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--fg)}
.rd.rd .chart .bar:hover{opacity:1}
.rd.rd .chart .bar span{position:absolute;bottom:-19px;left:-3px;right:-3px;text-align:center;font-size:calc(10px * var(--Tk, 1));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace;white-space:nowrap}
.rd.rd .sellrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .sellrow:last-child{border-bottom:0}
.rd.rd .sellrank{width:22px;height:22px;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--dim);flex:none}
.rd.rd .sellrow.top .sellrank{background:linear-gradient(180deg,#f5c451,#e0a020);color:#3a2600;border-color:transparent}
.rd.rd .sellname{flex:1;font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));min-width:0}
.rd.rd .sellqty{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .sellrev{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);min-width:64px;text-align:right}
.rd.rd .statsnote{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin:2px 0 2px;font-weight:calc(600 + var(--Wb, 0))}
.rd.rd #stTurn{padding:14px 6px}
.rd.rd .turnstat{flex:1;text-align:center;padding:4px;border-right:1px solid var(--line)}
.rd.rd .turnstat:last-child{border-right:0}
.rd.rd .turnnum{font-size:calc(20px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .turnlbl{font-size:calc(11px * var(--Tk, 1));color:var(--dim);margin-top:3px;line-height:calc(1.3 * var(--Lh, 1))}
.rd.rd .moneybtn{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 14px;margin:0 0 9px;color:var(--fg);font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));cursor:pointer;text-align:left;font-family:inherit}
.rd.rd .moneybtn:hover{border-color:var(--accent)}
.rd.rd .moneybtn:last-child{border-color:var(--accent);background:var(--accent-dim)}
.rd.rd .tiphero{text-align:center;padding:10px 0 2px}
.rd.rd .tiptop{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.7px;color:var(--dim)}
.rd.rd .tipamtbox{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;margin-top:5px;padding:3px 8px;border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));transition:background .15s}
.rd.rd .tipamtbox:focus-within{background:var(--panel2)}
.rd.rd .tipamtbox .tiphc{font-size:calc(27px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tmodal .tipamtbox input[type=text]{width:110px;border:none;background:none;outline:none;text-align:center;color:var(--fg);font-size:calc(46px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));line-height:calc(1 * var(--Lh, 1));letter-spacing:-2px;font-family:"SFMono-Regular",Consolas,monospace;padding:0;box-shadow:none;caret-color:var(--accent)}
.rd.rd .tmodal .tipamtbox input[type=text]:focus{box-shadow:none}
.rd.rd .tipherosub{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:6px;min-height:16px}
.rd.rd .tipbar{display:flex;gap:3px;height:12px;margin:18px 0 2px}
.rd.rd .tipbar.empty{background:var(--panel2);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .tipbar span{height:100%;border-radius:calc(4px * var(--Rk, 1) + var(--Rf, 0px));min-width:6px;transition:width .28s cubic-bezier(.2,.7,.2,1)}
.rd.rd .tipmethodrow{display:flex;align-items:center;gap:11px;margin:17px 0 2px}
.rd.rd .tiphint{font-size:calc(12px * var(--Tk, 1));color:var(--dim)}
.rd.rd .tiplist{display:flex;flex-direction:column;gap:2px;margin-top:9px}
.rd.rd .tiprow{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;transition:background .12s,opacity .12s}
.rd.rd .tiprow:hover{background:var(--panel2)}
.rd.rd .tiprow.off{opacity:.4}
.rd.rd .tipav{width:37px;height:37px;border-radius:50%;color:#fff;font-weight:calc(700 + var(--Wb, 0));display:flex;align-items:center;justify-content:center;font-size:calc(14px * var(--Tk, 1));flex:none;box-shadow:0 2px 7px rgba(0,0,0,.22)}
.rd.rd .tipmeta{flex:1;min-width:0}
.rd.rd .tipname{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .tipsub{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:1px}
.rd.rd .tipright{text-align:right;flex:none;line-height:calc(1.15 * var(--Lh, 1))}
.rd.rd .tipamt{font-family:"SFMono-Regular",Consolas,monospace;font-weight:calc(800 + var(--Wb, 0));font-size:calc(17px * var(--Tk, 1));color:var(--fg);letter-spacing:-.3px}
.rd.rd .tippct{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tiprow.off .tipright{color:var(--dim);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd #tipConfirm{margin-top:19px}
.rd.rd .tmodal .mrow-in{display:flex;align-items:baseline;gap:5px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:14px 16px;transition:border-color .14s,background .14s}
.rd.rd .tmodal .mrow-in:focus-within{border-color:var(--accent);background:var(--panel)}
.rd.rd .tmodal .mrow-in .cur{color:var(--dim);font-weight:calc(800 + var(--Wb, 0));font-size:calc(21px * var(--Tk, 1));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tmodal .mrow-in input[type=text]{flex:1;width:auto;border:none;background:none;outline:none;color:var(--fg);font-size:calc(27px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace;padding:0;box-shadow:none;letter-spacing:-.5px;line-height:calc(1.15 * var(--Lh, 1))}
.rd.rd .tmodal .mrow-in input[type=text]:focus{box-shadow:none}
.rd.rd .examt.g{color:var(--good)}
.rd.rd #stExpenses{padding:2px 15px}
.rd.rd .exprow{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:calc(13.5px * var(--Tk, 1));border-bottom:1px solid var(--line)}
.rd.rd .exprow:last-child{border-bottom:0}
.rd.rd .excat{font-weight:calc(700 + var(--Wb, 0));color:var(--fg);min-width:80px}
.rd.rd .exnote{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .examt{font-family:"SFMono-Regular",Consolas,monospace;font-weight:calc(700 + var(--Wb, 0));color:var(--warn)}
.rd.rd .exprow.extot{border-top:2px solid var(--line);border-bottom:0;margin-top:2px;padding-top:13px}
.rd.rd .exprow.extot span{color:var(--fg);font-weight:calc(800 + var(--Wb, 0));flex:1}
.rd.rd .exprow.extot b{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(16px * var(--Tk, 1));color:var(--fg)}
.rd.rd .cashcalc{margin:13px 0 2px;border:1px solid var(--line);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 14px}
.rd.rd .ccrow{display:flex;justify-content:space-between;align-items:center;font-size:calc(13px * var(--Tk, 1));color:var(--dim);padding:9px 0;border-bottom:1px solid var(--line)}
.rd.rd .ccrow:last-child{border-bottom:0}
.rd.rd .ccrow b{font-family:"SFMono-Regular",Consolas,monospace;font-weight:calc(700 + var(--Wb, 0));color:var(--mid)}
.rd.rd .expcats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd.rd .experr{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--bad);margin-top:10px}
.rd.rd .experr:empty{display:none}
.rd.rd .explist-lbl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:18px 0 8px}
.rd.rd .explist{display:flex;flex-direction:column;gap:0;max-height:160px;overflow-y:auto}
.rd.rd .explitem{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:calc(13px * var(--Tk, 1));border-bottom:1px solid var(--line)}
.rd.rd .explitem:last-child{border-bottom:0}
.rd.rd .expcat{font-weight:calc(700 + var(--Wb, 0));color:var(--fg)}
.rd.rd .expnote{color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .expamt{font-family:"SFMono-Regular",Consolas,monospace;font-weight:calc(700 + var(--Wb, 0));color:var(--warn)}
.rd.rd .exptot{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:calc(14px * var(--Tk, 1));color:var(--mid)}
.rd.rd .exptot b{font-size:calc(20px * var(--Tk, 1));color:var(--fg);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .cashhero{text-align:center;padding:8px 0 2px}
.rd.rd .cashexp{font-size:calc(40px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-1.5px;font-family:"SFMono-Regular",Consolas,monospace;color:var(--fg);line-height:calc(1 * var(--Lh, 1));margin-top:4px}
.rd.rd .cashdiff{padding:11px 13px;border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));text-align:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(13px * var(--Tk, 1));margin-top:11px}
.rd.rd .cashdiff[hidden]{display:none}
.rd.rd .cashdiff.spot{background:var(--good-dim);color:var(--good)}
.rd.rd .cashdiff.over{background:rgba(245,166,35,.12);color:var(--warn)}
.rd.rd .cashdiff.short{background:rgba(220,58,47,.1);color:var(--bad)}
.rd.rd .cashsum{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.rd.rd .sndgear{width:34px;height:34px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);background:var(--panel2);color:var(--mid);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.rd.rd .sndgear:hover{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .sndgear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd.rd .sndcfg[hidden]{display:none}
.rd.rd #soundVol{accent-color:var(--accent)}
.rd.rd .no-err{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--bad);margin-bottom:9px}
.rd.rd .no-err:empty{display:none}
.rd #loadScreen{position:fixed;inset:0;z-index:9999;background:radial-gradient(1000px 720px at 50% 32%,#101a2e 0%,#0a0e17 68%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .55s ease}
.rd #loadScreen.done{opacity:0;pointer-events:none}
.rd #loadScreen .load-wm{height:56px;width:auto;animation:loadBlink 1.25s ease-in-out infinite}
.rd #loadScreen .load-bar{width:230px;height:4px;border-radius:calc(3px * var(--Rk, 1) + var(--Rf, 0px));background:rgba(255,255,255,.09);overflow:hidden;position:relative}
.rd #loadScreen .load-bar i{position:absolute;top:0;left:-45%;height:100%;width:45%;border-radius:calc(3px * var(--Rk, 1) + var(--Rf, 0px));background:linear-gradient(90deg,transparent,#3b82f6,transparent);animation:loadSlide 1.15s ease-in-out infinite}
@keyframes loadBlink{0%,100%{opacity:.32}50%{opacity:1}}
@keyframes loadSlide{0%{left:-45%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.rd #loadScreen .load-wm, .rd #loadScreen .load-bar i{animation:none}}
.rd.rd .mbic{width:34px;height:34px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex:none}
.rd.rd .mbic svg{width:18px;height:18px}
.rd.rd .tl-axis{flex:1;display:flex;justify-content:space-between;font-size:calc(10.5px * var(--Tk, 1));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .tl-head{padding-top:2px;padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:6px}
.rd.rd .tl-time{flex:none;min-width:88px;text-align:right;font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(11.5px * var(--Tk, 1));color:var(--dim)}
.rd.rd .tl-dur{flex:none;min-width:44px;text-align:right;font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(12.5px * var(--Tk, 1));color:var(--mid);font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .acthdr{display:flex;align-items:center;justify-content:space-between}
.rd.rd .toggle.sm{padding:2px}
.rd.rd .toggle.sm button{padding:5px 11px;font-size:calc(12px * var(--Tk, 1))}
.rd.rd .tl-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.rd.rd .tl-name{width:24px;height:24px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(700 + var(--Wb, 0));font-size:calc(11px * var(--Tk, 1));flex:none}
.rd.rd .tl-track{position:relative;flex:1;height:20px;background:var(--panel2);border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .tl-bar{position:absolute;top:3px;bottom:3px;border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));opacity:.92}
.rd.rd .tl-bar.on::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(53,201,141,.28);animation:tpulse 2.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rd.rd .tl-bar.on::after{animation:none}}
.rd.rd .hoursrow2{display:flex;align-items:center;gap:12px;padding:9px 0}
.rd.rd .hoursname{font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));min-width:64px}
.rd.rd .hoursbar{flex:1;height:8px;background:var(--panel2);border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px));overflow:hidden}
.rd.rd .hoursbar i{display:block;height:100%;background:var(--accent);border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .hoursval{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(13px * var(--Tk, 1));color:var(--mid);font-weight:calc(700 + var(--Wb, 0));min-width:34px;text-align:right}
.rd.rd .msgat svg{width:19px;height:19px}
.rd.rd .btn.danger{background:transparent;border:1px solid var(--bad);color:var(--bad)}
.rd.rd .btn.danger:hover{background:var(--bad);color:#fff}
.rd.rd .bizhead{position:relative;margin-bottom:38px}
.rd.rd .bizbanner{height:108px;border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:calc(12.5px * var(--Tk, 1));cursor:pointer}
.rd.rd .bizlogo{position:absolute;left:16px;bottom:-24px;width:56px;height:56px;border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px));background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(21px * var(--Tk, 1));border:3px solid var(--panel)}
.rd.rd .hours{display:flex;flex-direction:column;gap:8px}
.rd.rd .hoursrow{display:flex;align-items:center;gap:10px}
.rd.rd .hday{flex:1;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .hdash{color:var(--dim);font-size:calc(12px * var(--Tk, 1))}
.rd.rd .hoursrow input{width:82px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:8px 10px;color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;text-align:center}
.rd.rd .hoursrow input:focus{outline:none;border-color:var(--accent)}
.rd.rd .codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 14px}
.rd.rd .codebox span{font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(20px * var(--Tk, 1));letter-spacing:4px;color:var(--fg)}
.rd.rd .ssub2{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:18px 0 9px}
.rd.rd .memrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.rd.rd .memrow:last-child{border-bottom:0}
.rd.rd .memrow:hover{background:var(--panel2)}
.rd.rd .memrow[data-role="Owner"]{cursor:default}
.rd.rd .memrow[data-role="Owner"]:hover{background:transparent}
.rd.rd .memava{width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1));flex:none}
.rd.rd .memtxt{flex:1;min-width:0}
.rd.rd .memnm{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .memrole{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:1px}
/* The account's email, under the name. Several staff are called the same thing ("test
   account"), so the address is the only way to tell which person a row is (2026-07-28).
   Truncates rather than wrapping: a long address must not push the row to two lines. */
.rd.rd .memmail{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);opacity:.75;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Name, email and role were three grey lines that read as one block (Panos, 2026-07-28).
   The role is a CHIP now, so it is obviously a label and not another line of text. */
/* Treat toggle on a cart line: quiet until it is on, then it reads as "this one is on us". */
.rd.rd .ctreatbtn{background:none;border:0;color:var(--dim);cursor:pointer;padding:2px 4px;
  display:inline-flex;align-items:center;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .ctreatbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.rd.rd .ctreatbtn:hover{color:var(--fg)}
/* Comped line: the heart fills RED with a small pop, so it reads as a deliberate act rather
   than a toggle you might have hit by accident (Panos, 2026-07-29). */
.rd.rd .ctreatbtn.on{color:var(--bad)}
.rd.rd .ctreatbtn.on svg{fill:currentColor;animation:treatpop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes treatpop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rd.rd .ctreatbtn.on svg{animation:none}}
.rd.rd .memrole{margin-top:5px}
.rd.rd .memrolechip{display:inline-block;font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));letter-spacing:.3px;
  padding:2px 9px;border-radius:999px;background:var(--accent-dim);color:var(--accent-lt);
  border:1px solid var(--line2)}
.rd.rd .memxfer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rd.rd .memxfer-lbl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:9px}
.rd.rd .memxfer-btn{width:100%;justify-content:center;background:var(--panel2);border:1px solid var(--line2);color:var(--mid)}
.rd.rd .memxfer-btn:hover{border-color:var(--warn);color:var(--warn)}
.rd.rd .memxfer-btn svg{width:15px;height:15px}
.rd.rd .memxfer-confirm{margin-top:10px;background:rgba(245,166,35,.08);border:1px solid var(--warn);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:13px}
.rd.rd .memxfer-confirm[hidden]{display:none}
.rd.rd .memxfer-warn{font-size:calc(13px * var(--Tk, 1));line-height:calc(1.5 * var(--Lh, 1));color:var(--fg);margin:0 0 12px}
.rd.rd .memxfer-warn b{font-weight:calc(800 + var(--Wb, 0))}
.rd.rd .memxfer-actions{display:flex;gap:8px}
.rd.rd .memxfer-actions .btn{flex:1;justify-content:center}
.rd.rd .memxfer-actions .go{background:var(--warn);border-color:var(--warn);color:#04121f}
.rd.rd .memxfer-actions .go:hover{filter:brightness(1.06)}
.rd.rd .memx{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--dim);cursor:pointer}
.rd.rd .memx:hover{color:var(--bad)}
.rd.rd .featrow2{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.rd.rd .featrow2:last-child{border-bottom:0}
.rd.rd .featicon{width:34px;height:34px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--accent-lt);flex:none}
.rd.rd .featicon svg{width:18px;height:18px}
.rd.rd .feattxt{flex:1;min-width:0;display:flex;flex-direction:column}
.rd.rd .featname{font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));display:block}
.rd.rd .featsub{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:1px;display:block}
.rd.rd .dayspills{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.rd.rd .daypill{font-size:calc(12px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));padding:6px 11px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel2)}
.rd.rd .daypill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .logrow{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);font-size:calc(13px * var(--Tk, 1))}
.rd.rd .logrow:last-child{border-bottom:0}
.rd.rd .logdot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.rd.rd .logwho{font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .logtime{font-size:calc(11px * var(--Tk, 1));color:var(--dim);margin-top:2px}
.rd.rd .console{background:var(--page);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 13px;font-family:"SFMono-Regular",Consolas,monospace;font-size:calc(12.5px * var(--Tk, 1));line-height:calc(1.55 * var(--Lh, 1))}
.rd.rd .clog{display:flex;gap:10px;align-items:baseline;padding:3px 0;overflow:hidden}
.rd.rd .clog .ctime{color:var(--dim);flex:none}
.rd.rd .clog .ctime::before{content:"[";color:var(--line2)}
.rd.rd .clog .ctime::after{content:"]";color:var(--line2)}
.rd.rd .clog .cwho{color:var(--accent-lt);font-weight:calc(700 + var(--Wb, 0));flex:none}
.rd.rd .clog .cmsg{color:var(--mid);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .logfilter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.rd.rd .logfilter .chip{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(20px * var(--Rk, 1) + var(--Rf, 0px));padding:6px 13px;font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid);cursor:pointer;font-family:inherit}
.rd.rd .logfilter .chip:hover{border-color:var(--accent)}
.rd.rd .logfilter .chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .clog .lspace{font-size:calc(10px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:1px 7px;flex:none}
.rd.rd .lspace.kitchen{color:var(--warn);background:rgba(245,166,35,.14)}
.rd.rd .lspace.bar{color:var(--accent-lt);background:var(--accent-dim)}
.rd.rd .lspace.service{color:var(--good);background:rgba(53,201,141,.14)}
.rd.rd .lspace.delivery{color:var(--mid);background:var(--panel2);border:1px solid var(--line2)}
.rd.rd #logConsole .clog{align-items:flex-start}
.rd.rd #logConsole .cmsg{white-space:normal}
.rd.rd .clog .lid{color:var(--accent-lt);font-weight:calc(700 + var(--Wb, 0));flex:none}
.rd.rd .togsep{width:1px;align-self:stretch;background:var(--line2);margin:3px 1px;flex:none}
.rd.rd .toggle button.logtab{display:inline-flex;align-items:center;gap:6px;color:var(--accent-lt);padding:7px 14px 7px 10px}
.rd.rd .toggle button.logtab svg{width:14px;height:14px}
.rd.rd .toggle button.logtab.on{color:#fff}
.rd.rd .logsearch{position:relative;margin-bottom:12px}
.rd.rd .logsearch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--dim);pointer-events:none}
.rd.rd .logsearch input{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 12px 9px 35px;color:var(--fg);font-size:calc(13.5px * var(--Tk, 1));font-family:inherit;outline:none}
.rd.rd .logsearch input:focus{border-color:var(--accent)}
.rd.rd .logsearch input::placeholder{color:var(--dim)}
.rd.rd .nomodal, .rd.rd .ttile, .rd.rd #ftoggle, .rd.rd .kcube, .rd.rd #logConsole{-webkit-user-select:none;user-select:none}
.rd.rd .nomodal input, .rd.rd .nomodal .cnote{-webkit-user-select:text;user-select:text}
.rd.rd #menuItemsGrid{padding-top:3px}
.rd.rd .col[data-fc="log"]{max-width:760px;width:100%;margin:0 auto}
.rd.rd .clog .ltable{color:var(--fg);font-weight:calc(700 + var(--Wb, 0));flex:none}
.rd.rd .clog .laction{color:var(--mid);min-width:0}
.rd.rd #logConsole .clog{cursor:pointer;padding:5px 8px;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));margin:0 -8px}
.rd.rd #logConsole .clog:hover{background:var(--panel2)}
.rd.rd .oidbadge{font-size:calc(12px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 9px;font-family:"SFMono-Regular",Consolas,monospace;flex:none}
.rd.rd .kid{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd #logConsole .lid{margin-left:auto}
.rd.rd .odesc{padding:1px 13px 10px;font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);background:var(--panel2);line-height:calc(1.45 * var(--Lh, 1))}
.rd.rd .kmeta{margin-left:auto;display:flex;align-items:center;gap:9px}
.rd.rd .kmeta .ktime{margin-left:0}
.rd.rd .kppl{display:inline-flex;align-items:center;gap:3px;font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .kppl svg{width:13px;height:13px}
.rd.rd .kfoot{display:flex;justify-content:flex-end;margin-top:9px}
.rd.rd #tmOid{margin-left:auto}
.rd.rd #tableChips .chip{cursor:grab}
.rd.rd #tableChips .chip.dragging{opacity:.4}
.rd.rd #logPopSub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:15px}
.rd.rd .logpopstat{margin-top:15px;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .lpitem{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1))}
.rd.rd .lpitem:last-child{border-bottom:0}
.rd.rd .lpitem .q{color:var(--accent-lt);font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace;margin-right:6px}
.rd.rd .setwrap{max-width:680px;margin:0 auto}
.rd.rd .pgcat{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:12px 0 2px}
.rd.rd .pgcat:first-child{margin-top:2px}
.rd.rd .permpanel .pgcat{font-size:calc(12px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--fg);margin:20px 0 8px;padding-top:11px;border-top:1px solid var(--line2);display:flex;align-items:center;gap:8px}
.rd.rd .permpanel .pgcat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.rd.rd .permpanel .pgcat:first-child{margin-top:2px;padding-top:0;border-top:0}
.rd.rd .pgbox{border:1px solid var(--line);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);padding:2px 14px;margin:0 0 11px}
.rd.rd .pgboxhead{font-size:calc(11px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);padding:12px 0 5px}
.rd.rd .permspace{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .permspace:last-child{border-bottom:0}
.rd.rd .permspace .psn{flex:1;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .permspace .pcol{display:flex;align-items:center;gap:7px;font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--dim)}
.rd.rd .scard{background:var(--panel);border:1px solid var(--line);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:16px;box-shadow:var(--shadow)}
.rd.rd .shint{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin:-2px 0 12px;line-height:calc(1.5 * var(--Lh, 1))}
.rd.rd .addrow{display:flex;gap:9px}
.rd.rd .addrow input{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:10px 12px;color:var(--fg);font-size:calc(14px * var(--Tk, 1));font-family:inherit}
.rd.rd .addrow input:focus{outline:none;border-color:var(--accent)}
.rd.rd .addrow input::placeholder{color:var(--dim)}
.rd.rd .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rd.rd .chip{display:inline-flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:7px 10px 7px 12px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .chip i{color:var(--dim);cursor:pointer;font-style:normal;font-size:calc(16px * var(--Tk, 1));line-height:calc(1 * var(--Lh, 1))}
.rd.rd .chip i:hover{color:var(--bad)}
.rd.rd .chip.addchip{border-style:dashed;color:var(--accent-lt);cursor:pointer}
.rd.rd .srow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .srow:last-child{border-bottom:0}
.rd.rd .srow .rn{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .srow .rd{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:1px}
.rd.rd .srow .redit{margin-left:auto;color:var(--dim);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));cursor:pointer}
.rd.rd .srow .redit:hover{color:var(--accent)}
.rd.rd .tmr{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .tmr:last-child{border-bottom:0}
.rd.rd .tmr .tn{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));flex:1}
.rd.rd .tmr .fld{display:flex;align-items:center;gap:6px;font-size:calc(12px * var(--Tk, 1));color:var(--dim)}
.rd.rd .tmr input{width:52px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:6px 8px;color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;text-align:center}
.rd.rd .tmr input:focus{outline:none;border-color:var(--accent)}
.rd.rd select.tmrsel{flex:1;min-width:0;background-color:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:7px 30px 7px 10px;color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868e9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.rd.rd select.tmrsel:focus{outline:none;border-color:var(--accent)}
.rd.rd .menubar{display:flex;gap:8px;margin-bottom:14px}
.rd.rd .menubar .mb{flex:1;padding:9px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));border:1px dashed var(--line2);background:transparent;color:var(--mid);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .menubar .mb:hover{border-color:var(--accent);color:var(--accent)}
.rd.rd .mcat{border:1px solid var(--line);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));margin-bottom:9px;overflow:hidden}
.rd.rd .mcathead{display:flex;align-items:center;gap:9px;padding:11px 13px;cursor:pointer;background:var(--panel2)}
.rd.rd .mcathead b{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .mcount{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);margin-left:2px}
.rd.rd .mcatchev{margin-left:auto;color:var(--dim);transition:transform .15s}
.rd.rd .mcatchev svg{width:14px;height:14px}
.rd.rd .mcat:not(.open) .mcatchev{transform:rotate(-90deg)}
.rd.rd .mcatbody{padding:2px 13px 8px}
.rd.rd .mcat:not(.open) .mcatbody{display:none}
.rd.rd .mitem{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1))}
.rd.rd .mitem:last-child{border-bottom:0}
.rd.rd .mitem .mnm{flex:1}
.rd.rd .mitem .mpr{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim)}
.rd.rd .mitem .medit{color:var(--dim);cursor:pointer;display:flex}
.rd.rd .mitem .medit:hover{color:var(--accent)}
.rd.rd .mitem .medit svg{width:15px;height:15px}
.rd.rd .tdotc{width:8px;height:8px;border-radius:50%;flex:none}
.rd.rd .tdotc.warn{background:var(--warn)}
.rd.rd .tdotc.late{background:var(--bad)}
.rd.rd .ssub{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:16px 0 9px;padding-top:14px;border-top:1px solid var(--line)}
.rd.rd .permbox{background:var(--panel2);border:1px solid var(--line);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 13px;margin:6px 0 4px}
.rd.rd .permrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .permrow:last-child{border-bottom:0}
.rd.rd .permcat{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.rd.rd .permcat:first-of-type{margin-top:2px;padding-top:0;border-top:0}
.rd.rd .prow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer}
.rd.rd .prow:hover, .rd.rd .prow.open{background:var(--panel2)}
.rd.rd .prow > div:first-child{flex:1;min-width:0}
.rd.rd .prn{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .prd{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:1px}
.rd.rd .pchev{color:var(--dim);transition:transform .15s}
.rd.rd .pchev svg{width:15px;height:15px}
.rd.rd .prow.open .pchev{transform:rotate(90deg)}
.rd.rd .permpanel{background:var(--panel2);border:1px solid var(--line);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 13px;margin:2px 4px 8px}
.rd.rd .permpanel[hidden]{display:none}
.rd.rd .permnote{font-size:calc(13px * var(--Tk, 1));color:var(--dim);padding:12px 0}
.rd.rd .permbase{display:flex;align-items:center;gap:9px;font-size:calc(13px * var(--Tk, 1));color:var(--mid);padding:12px 0 2px}
.rd.rd .seetag{font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 8px;flex:none}
.rd.rd .permsub{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:12px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.rd.rd .addspacebtn{width:100%;margin-top:10px;padding:11px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));border:1px dashed var(--line2);background:transparent;color:var(--accent-lt);font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .addspacebtn:hover{border-color:var(--accent)}
.rd.rd .tycards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.rd.rd .tycard{border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:13px;cursor:pointer;background:var(--panel2);transition:border-color .12s,background .12s}
.rd.rd .tycard.on{border-color:var(--accent);background:var(--accent-dim)}
.rd.rd .tyi{width:32px;height:32px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--mid);margin-bottom:10px}
.rd.rd .tycard.on .tyi{border-color:var(--accent);color:var(--accent-lt)}
.rd.rd .tyi svg{width:18px;height:18px}
.rd.rd .tyn{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .tyd{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);margin-top:3px;line-height:calc(1.4 * var(--Lh, 1))}
.rd.rd .tmodal label{display:block;font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--dim);margin:16px 0 7px}
.rd.rd .tmodal label:first-of-type{margin-top:4px}
.rd.rd .tmodal input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:12px 13px;color:var(--fg);font-size:calc(14px * var(--Tk, 1));font-family:inherit;outline:none}
.rd.rd .tmodal input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.22)}
.rd.rd .tmodal input[type=text]::placeholder{color:var(--dim)}
.rd.rd .delbtn{display:block;width:fit-content;margin:18px auto 4px;padding:9px 18px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--bad);background:transparent;color:var(--bad);font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .delbtn:hover{background:var(--bad);color:#fff}
.rd.rd .spctype{margin:0 0 2px}
.rd.rd .msub{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);margin:12px 0 3px;padding-top:9px;border-top:1px solid var(--line)}
.rd.rd .msub:first-child{border-top:0;padding-top:0;margin-top:2px}
.rd.rd .msubcat{border:1px solid var(--line);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));margin:8px 0;overflow:hidden;background:var(--panel)}
.rd.rd .msubhead{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer}
.rd.rd .msubhead b{font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .msubchev{color:var(--dim);display:flex;transition:transform .15s}
.rd.rd .msubchev svg{width:13px;height:13px}
.rd.rd .msubcat:not(.open) .msubchev{transform:rotate(-90deg)}
.rd.rd .msubbody{padding:0 12px 8px}
.rd.rd .msubcat:not(.open) .msubbody{display:none}
.rd.rd select.mspace{-webkit-appearance:none;appearance:none;margin-left:auto;font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);background-color:var(--accent-dim);border:1px solid transparent;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));padding:3px 22px 3px 9px;cursor:pointer;font-family:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238fb8ff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}
.rd.rd .overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:40px 16px;background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:50}
.rd.rd .overlay.open{display:flex;animation:ovIn .18s ease both}
.rd.rd .overlay.open .tmodal{animation:mIn .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rd.rd .overlay.open, .rd.rd .overlay.open .tmodal, .rd.rd .npanel.open{animation:none}}
.rd.rd .tmodal{background:var(--panel);border:1px solid var(--line2);border-radius:calc(18px * var(--Rk, 1) + var(--Rf, 0px));padding:22px;width:100%;max-width:380px;box-shadow:var(--mshadow);position:relative;max-height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .tmx{position:absolute;top:15px;right:16px;color:var(--dim);cursor:pointer;font-size:calc(14px * var(--Tk, 1));width:30px;height:30px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));display:flex;align-items:center;justify-content:center}
.rd.rd .tmx:hover{background:var(--panel2);color:var(--fg)}
.rd.rd .tmx svg{width:15px;height:15px}
.rd.rd .st svg{width:12px;height:12px;vertical-align:-1.5px;margin-right:3px}
.rd.rd .segrm svg{width:12px;height:12px;vertical-align:-1px}
.rd.rd .dpay{display:flex;align-items:center;justify-content:center;gap:8px}
.rd.rd .dpay svg{width:16px;height:16px}
.rd.rd .tmtitle{font-size:calc(20px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.3px;margin:0}
.rd.rd .tmsub{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin:2px 0 14px}
.rd.rd .di{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1))}
.rd.rd .di:last-of-type{border-bottom:0}
.rd.rd .di .idot{width:8px;height:8px;border-radius:50%;flex:none}
.rd.rd .di .idot.ready{background:var(--good)}
.rd.rd .di .idot.prep{background:var(--warn)}
.rd.rd .di .q{color:var(--accent-lt);font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace;margin-right:5px}
.rd.rd .di .nme{flex:1}
.rd.rd .di .price{color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .dtotal{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 0;font-size:calc(15px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .dtotal b{font-size:calc(22px * var(--Tk, 1));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .dpay{width:100%;margin-top:14px;padding:12px;border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));border:none;background:var(--accent);color:#fff;font-size:calc(14px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .dpay:hover{background:var(--accent2)}
.rd.rd .ohint{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin:2px 0 14px;line-height:calc(1.5 * var(--Lh, 1))}
.rd.rd .ospace{border:1px solid var(--line);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));margin-bottom:10px;overflow:hidden}
.rd.rd .ohead{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--panel2)}
.rd.rd .ohead .oname{font-size:calc(15px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .ohead .okind{font-size:calc(10px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--dim);border:1px solid var(--line2);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 7px}
.rd.rd .ohead .okind.print{color:var(--accent-lt);border-color:transparent;background:var(--accent-dim)}
.rd.rd .ohead .ostatus{margin-left:auto;font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;padding:3px 9px;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .ostatus.ready{color:var(--good);background:rgba(53,201,141,.14)}
.rd.rd .ostatus.prep{color:var(--warn);background:rgba(245,166,35,.14)}
.rd.rd .ostatus.print{color:var(--accent-lt);background:var(--accent-dim)}
.rd.rd .ostatus.served{color:var(--dim);background:transparent;border:1px solid var(--line2)}
.rd.rd .obody{padding:3px 13px}
.rd.rd .oi{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1))}
.rd.rd .oi:last-child{border-bottom:0}
.rd.rd .oi .ock{width:17px;height:17px;border-radius:50%;border:2px solid var(--line2);flex:none;position:relative}
.rd.rd .oi.done .ock{border-color:var(--good);background:var(--good)}
.rd.rd .oi.done .ock::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #04121f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.rd.rd .oi .oq{color:var(--accent-lt);font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .oi .onm{flex:1;min-width:0}
.rd.rd .oi.done .onm{color:var(--dim);text-decoration:line-through}
.rd.rd .oi .oprice{color:var(--dim);font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .oconfirm{width:calc(100% - 26px);margin:5px 13px 13px;padding:11px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));border:none;background:var(--accent);color:#fff;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.rd.rd .oconfirm:hover{background:var(--accent2)}
.rd.rd .oconfirm svg{width:16px;height:16px;stroke-width:2.4}
.rd.rd .onote{font-size:calc(12px * var(--Tk, 1));color:var(--dim);padding:4px 13px 12px;display:flex;align-items:center;gap:7px}
.rd.rd .onote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.rd.rd #noOverlay{padding:24px 16px}
.rd.rd .nomodal{padding:20px 22px;width:100%;max-width:860px;height:calc(100vh - 48px);max-height:920px;display:flex;flex-direction:column;overflow:hidden;background-image:radial-gradient(720px 300px at 50% -70px, var(--glow), transparent);background-repeat:no-repeat}
.rd.rd .notitle{font-size:calc(18px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.3px;margin:0 0 13px;flex:none}
.rd.rd .no-bar{display:flex;align-items:center;gap:14px;padding:0 0 16px;margin-bottom:14px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.rd.rd .no-ctl{display:flex;align-items:center;gap:8px}
.rd.rd .no-lbl{font-size:calc(11px * var(--Tk, 1));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .no-bar select{flex:none;width:auto;min-width:124px}
.rd.rd .nogrow{flex:1}
.rd.rd .no-round{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:2px}
.rd.rd .no-round button{width:34px;height:32px;border:none;background:none;color:var(--fg);font-size:calc(20px * var(--Tk, 1));cursor:pointer;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));line-height:calc(1 * var(--Lh, 1));font-family:inherit}
.rd.rd .no-round button:hover{background:var(--line)}
.rd.rd .no-round #roundVal{min-width:26px;text-align:center;font-size:calc(16px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .no-body{display:flex;gap:16px;flex:1;min-height:0}
.rd.rd .no-menu{flex:1.7;min-width:0;display:flex;flex-direction:column;min-height:0}
.rd.rd .chipstrip{display:flex;gap:7px;overflow-x:auto;padding-bottom:9px;flex:none;scrollbar-width:none}
.rd.rd .chipstrip::-webkit-scrollbar{height:0}
.rd.rd .chipstrip .chip{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(20px * var(--Rk, 1) + var(--Rf, 0px));padding:8px 14px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid);cursor:pointer;white-space:nowrap;flex:none;font-family:inherit}
.rd.rd .chipstrip .chip:hover{border-color:var(--accent)}
.rd.rd #noCats .chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd #noSubs .chip{padding:6px 12px;font-size:calc(12.5px * var(--Tk, 1))}
.rd.rd #noSubs .chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.rd.rd #menuItemsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;align-content:start;flex:1;overflow-y:auto;min-height:0;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .menubtn{background:var(--panel);border:1px solid var(--line);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 13px 12px;min-height:84px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:9px;cursor:pointer;text-align:left;position:relative;box-shadow:var(--shadow);font-family:inherit}
.rd.rd .menubtn:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.26)}
.rd.rd .menubtn::after{content:"+";position:absolute;top:6px;right:11px;font-size:calc(17px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);opacity:0;transition:opacity .14s}
.rd.rd .menubtn:hover::after{opacity:1}
.rd.rd .menubtn .mname{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);line-height:calc(1.25 * var(--Lh, 1))}
.rd.rd .menubtn .mfoot{display:flex;align-items:center;gap:8px;width:100%}
.rd.rd .menubtn .mprice{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--accent-lt);font-family:"SFMono-Regular",Consolas,monospace;background:var(--accent-dim);border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 8px}
.rd.rd .menubtn .mtag{font-size:calc(9.5px * var(--Tk, 1));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:calc(700 + var(--Wb, 0));margin-left:auto}
.rd.rd .no-cart{flex:1;min-width:0;max-width:320px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));overflow:hidden;min-height:0}
.rd.rd .no-carthead{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-weight:calc(700 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1))}
.rd.rd .no-cartcount{margin-left:auto;background:var(--accent-dim);color:var(--accent-lt);border-radius:calc(20px * var(--Rk, 1) + var(--Rf, 0px));padding:1px 9px;font-size:calc(12px * var(--Tk, 1));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd #cart{flex:1;overflow-y:auto;padding:4px 14px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd #cart .cempty{padding:26px 10px;font-size:calc(13px * var(--Tk, 1));color:var(--dim);text-align:center;line-height:calc(1.5 * var(--Lh, 1))}
.rd.rd .citem{padding:8px 0;border-bottom:1px solid var(--line)}
.rd.rd .citem:last-child{border-bottom:none}
.rd.rd .crow{display:flex;align-items:center;gap:8px}
.rd.rd .cstep{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));flex:none}
.rd.rd .cstep button{width:26px;height:26px;border:none;background:none;color:var(--fg);font-size:calc(16px * var(--Tk, 1));cursor:pointer;line-height:calc(1 * var(--Lh, 1));font-family:inherit}
.rd.rd .cstep b{min-width:18px;text-align:center;font-size:calc(13px * var(--Tk, 1));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .cname{flex:1;font-size:calc(13.5px * var(--Tk, 1));min-width:0;line-height:calc(1.25 * var(--Lh, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .cnotebtn{flex:none;width:26px;height:26px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.rd.rd .cnotebtn svg{width:14px;height:14px}
.rd.rd .cnotebtn.on{color:var(--accent-lt);border-color:var(--accent)}
.rd.rd .cprice{font-family:"SFMono-Regular",Consolas,monospace;color:var(--mid);font-size:calc(13px * var(--Tk, 1));white-space:nowrap;min-width:46px;text-align:right}
.rd.rd .cnote{width:100%;margin-top:6px;font-size:calc(12.5px * var(--Tk, 1));padding:7px 9px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));color:var(--fg);font-family:inherit;outline:none}
.rd.rd .cnote:focus{border-color:var(--accent)}
.rd.rd .no-cartfoot{border-top:1px solid var(--line);padding:11px 14px;flex:none}
.rd.rd .no-total{display:flex;justify-content:space-between;font-weight:calc(700 + var(--Wb, 0));font-size:calc(16px * var(--Tk, 1));margin-bottom:9px}
.rd.rd .no-total span:last-child{font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .no-cartfoot .dpay{margin:0}
@media (max-width:640px){.rd.rd .nomodal{padding:16px}
.rd.rd .no-body{flex-direction:column}
.rd.rd .no-cart{max-width:none;flex:none;height:42%}
.rd.rd #menuItemsGrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.rd.rd .menubtn{min-height:64px;padding:10px 7px}
.rd.rd .menubtn .mname{font-size:calc(13.5px * var(--Tk, 1))}}
.rd.rd .nohead{padding:19px 20px 4px;flex:none}
.rd.rd .nosub{display:flex;align-items:center;gap:9px;font-size:calc(13px * var(--Tk, 1));color:var(--dim);margin-top:9px}
.rd.rd .nosub select{flex:1}
.rd.rd .nocats{display:flex;gap:7px;overflow-x:auto;padding:12px 20px;flex:none;scrollbar-width:none}
.rd.rd .nocats::-webkit-scrollbar{display:none}
.rd.rd .nocat{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));padding:6px 12px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel2);white-space:nowrap;flex:none}
.rd.rd .nocat.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .noitems{flex:1;min-height:0;overflow-y:auto;padding:0 20px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .nocatlbl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:14px 0 2px}
.rd.rd .noitem{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.rd.rd .noitem:last-child{border-bottom:0}
.rd.rd .noitem .nnm{flex:1;min-width:0;font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .noitem .ntag{font-size:calc(10px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--dim);border:1px solid var(--line2);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 6px;flex:none}
.rd.rd .noitem .npr{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim);font-size:calc(13px * var(--Tk, 1));flex:none;min-width:46px;text-align:right}
.rd.rd .noadd{padding:7px 14px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--accent);background:transparent;color:var(--accent-lt);font-weight:calc(700 + var(--Wb, 0));font-size:calc(13px * var(--Tk, 1));cursor:pointer;font-family:inherit;flex:none}
.rd.rd .noadd:hover{background:var(--accent-dim)}
.rd.rd .nstep{display:flex;align-items:center;gap:9px;flex:none}
.rd.rd .nbtn{width:30px;height:30px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);background:var(--panel2);color:var(--fg);font-size:calc(18px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.rd.rd .nbtn:hover{border-color:var(--accent);color:var(--accent)}
.rd.rd .nqty{min-width:16px;text-align:center;font-weight:calc(800 + var(--Wb, 0));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .nofoot{flex:none;border-top:1px solid var(--line);padding:13px 20px 16px;background:var(--panel)}
.rd.rd .nofsum{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .nofsum b{font-size:calc(20px * var(--Tk, 1));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .dpay:disabled{opacity:.45;cursor:default}
.rd.rd .notabs{display:flex;gap:6px;margin-top:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:3px}
.rd.rd .notab{flex:1;border:none;background:transparent;color:var(--mid);border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));padding:7px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.rd.rd .notab.on{background:var(--accent);color:#fff}
.rd.rd .notabn{font-size:calc(11px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));background:rgba(255,255,255,.25);border-radius:calc(99px * var(--Rk, 1) + var(--Rf, 0px));min-width:16px;padding:0 5px;line-height:calc(16px * var(--Lh, 1))}
.rd.rd .notab:not(.on) .notabn{background:var(--line2);color:var(--fg)}
.rd.rd #noMenu{flex:1;min-height:0;display:flex;flex-direction:column}
.rd.rd #noMenu[hidden], .rd.rd #noOrder[hidden]{display:none}
.rd.rd #noOrder{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.rd.rd .noorderwrap{padding:2px 20px 8px}
.rd.rd .noround{display:flex;align-items:center;gap:9px;font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin:16px 0 4px}
.rd.rd .noround:first-child{margin-top:6px}
.rd.rd .nrnow{color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 7px;letter-spacing:.3px}
.rd.rd .nrempty{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);padding:4px 0 8px}
.rd.rd .olwrap{padding:10px 0;border-bottom:1px solid var(--line)}
.rd.rd .oline{display:flex;align-items:center;gap:11px}
.rd.rd .oline .olnm{flex:1;min-width:0;font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}
.rd.rd .oline .oltag{font-size:calc(10px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;color:var(--dim);border:1px solid var(--line2);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:2px 6px;flex:none}
.rd.rd .oline .olpr{font-family:"SFMono-Regular",Consolas,monospace;color:var(--dim);font-size:calc(13px * var(--Tk, 1));flex:none;min-width:52px;text-align:right}
.rd.rd .olnote{width:100%;margin-top:9px;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:8px 10px;color:var(--fg);font-size:calc(13px * var(--Tk, 1));font-family:inherit;outline:none}
.rd.rd .olnote:focus{border-color:var(--accent)}
.rd.rd .olnote::placeholder{color:var(--dim)}
.rd.rd .nonewround{width:100%;justify-content:center;margin:12px 0 6px}
.rd.rd .themep{position:absolute;bottom:14px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--panel);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--dim);cursor:pointer;z-index:8}
.rd.rd .themep svg{width:17px;height:17px}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes barRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes heroIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes crownShine{0%{transform:translateX(-160%) skewX(-16deg)}22%{transform:translateX(320%) skewX(-16deg)}100%{transform:translateX(320%) skewX(-16deg)}}
.rd.rd .chart .bar{transform-origin:bottom center;animation:barRise 0.22s cubic-bezier(.2,.85,.25,1) both}
.rd.rd .chart .bar:nth-child(2){animation-delay:0s}
.rd.rd .chart .bar:nth-child(3){animation-delay:0s}
.rd.rd .chart .bar:nth-child(4){animation-delay:0s}
.rd.rd .chart .bar:nth-child(5){animation-delay:0s}
.rd.rd .chart .bar:nth-child(6){animation-delay:0s}
.rd.rd .chart .bar:nth-child(7){animation-delay:0s}
.rd.rd .chart .bar{transition:opacity .12s,filter .12s}
.rd.rd .chart .bar:hover{opacity:1;filter:brightness(1.12)}
.rd.rd .sellrow, .rd.rd .lbrow{animation:rowIn 0.22s ease both}
.rd.rd .sellrow:nth-child(2), .rd.rd .lbrow:nth-child(2){animation-delay:0s}
.rd.rd .sellrow:nth-child(3), .rd.rd .lbrow:nth-child(3){animation-delay:0s}
.rd.rd .sellrow:nth-child(4), .rd.rd .lbrow:nth-child(4){animation-delay:0s}
.rd.rd .sellrow:nth-child(5), .rd.rd .lbrow:nth-child(5){animation-delay:0s}
.rd.rd .sellrow:nth-child(6), .rd.rd .lbrow:nth-child(6){animation-delay:0s}
.rd.rd .sellrow:nth-child(n+7), .rd.rd .lbrow:nth-child(n+7){animation-delay:0s}
.rd.rd .sellrow{transition:background .12s}
.rd.rd .sellrow:hover{background:var(--panel2)}
.rd.rd .lbrow{transition:background .12s}
.rd.rd .lbrow:hover{background:var(--panel2)}
.rd.rd .statshero{animation:heroIn 0.22s ease both}
.rd.rd .sellrow.top .sellrank, .rd.rd .lbrow.top .lbrank{position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(224,160,32,.35)}
.rd.rd .sellrow.top .sellrank::after, .rd.rd .lbrow.top .lbrank::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:crownShine 4.2s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rd.rd .chart .bar, .rd.rd .sellrow, .rd.rd .lbrow, .rd.rd .statshero, .rd.rd .sellrow.top .sellrank::after, .rd.rd .lbrow.top .lbrank::after{animation:none}}
.rd.rd .toggle button{transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.rd.rd .toggle button:not(.on):hover{color:var(--fg);background:var(--panel2)}
.rd.rd .toggle button.on{box-shadow:0 2px 8px rgba(59,130,246,.32)}
.rd.rd .statstrend{display:inline-flex;align-items:center;gap:5px;background:var(--good-dim);border-radius:999px;padding:3px 10px;line-height:calc(1 * var(--Lh, 1))}
.rd.rd .statstrend::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:6px solid var(--good)}
.rd.rd .chart .bar::before{content:"";position:absolute;top:0;left:0;right:0;height:38%;background:linear-gradient(180deg,rgba(255,255,255,.24),transparent);border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px)) calc(6px * var(--Rk, 1) + var(--Rf, 0px)) 0 0;pointer-events:none}
.rd.rd .chart .bar:hover{box-shadow:0 6px 16px rgba(59,130,246,.34)}
.rd.rd .lbav{transition:box-shadow .15s}
.rd.rd .lbrow.top .lbav{box-shadow:0 0 0 2px var(--panel),0 0 0 4px #e0a020}
.rd.rd .btn.ghost{transition:border-color .14s,color .14s,transform .12s,box-shadow .14s}
.rd.rd .btn.ghost:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.rd.rd .btn.ghost:active{transform:translateY(0)}
.rd.rd .actcard{transition:transform .14s ease}
@media (prefers-reduced-motion:reduce){.rd.rd .btn.ghost:hover, .rd.rd .actcard{transform:none}}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes colIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.rd.rd .main .body > div{animation:viewIn 0.22s cubic-bezier(.2,.7,.2,1) both}
.rd.rd #floor .col{animation:colIn .2s ease both}
.rd.rd .ni{transition:background .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){.rd.rd .main .body > div, .rd.rd #floor .col{animation:none}}
.rd.rd .setwrap .scard, .rd.rd .msgpanel .msgrow, .rd.rd #floor .ttile{animation:viewIn 0.22s cubic-bezier(.2,.7,.2,1) both}
.rd.rd .setwrap .scard:nth-child(2), .rd.rd .msgpanel .msgrow:nth-child(2), .rd.rd #floor .ttile:nth-child(2){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(3), .rd.rd .msgpanel .msgrow:nth-child(3), .rd.rd #floor .ttile:nth-child(3){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(4), .rd.rd .msgpanel .msgrow:nth-child(4), .rd.rd #floor .ttile:nth-child(4){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(5), .rd.rd .msgpanel .msgrow:nth-child(5), .rd.rd #floor .ttile:nth-child(5){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(6), .rd.rd .msgpanel .msgrow:nth-child(6), .rd.rd #floor .ttile:nth-child(6){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(7), .rd.rd .msgpanel .msgrow:nth-child(7), .rd.rd #floor .ttile:nth-child(7){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(n+8), .rd.rd .msgpanel .msgrow:nth-child(n+8), .rd.rd #floor .ttile:nth-child(n+8){animation-delay:0s}
@media (prefers-reduced-motion:reduce){.rd.rd .setwrap .scard, .rd.rd .msgpanel .msgrow, .rd.rd #floor .ttile{animation:none}}
.rd.rd .overlay.fs .tmodal{background:var(--page);position:relative}
.rd.rd .overlay.fs .tmodal::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size:52px 52px;
    -webkit-mask-image:radial-gradient(1400px 1100px at 50% 0%,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%);
    mask-image:radial-gradient(1400px 1100px at 50% 0%,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.2) 100%)}
.rd.rd .overlay.fs .tmodal::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.18;
    background:
      radial-gradient(820px 700px at 88% 2%,var(--accent),transparent 62%),
      radial-gradient(640px 600px at 6% 92%,var(--accent),transparent 62%),
      radial-gradient(1100px 900px at 50% 50%,var(--accent),transparent 70%)}
.rd.rd .overlay.fs .fsbar, .rd.rd .overlay.fs .fsbody{position:relative;z-index:1}
.rd.rd .overlay.fs.open .tmodal{animation:none}
.rd.rd .overlay.fs .fsbar{animation:none!important}
.rd .ni.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 calc(3px * var(--Rk, 1) + var(--Rf, 0px)) calc(3px * var(--Rk, 1) + var(--Rf, 0px)) 0;background:var(--accent)}
.rd .overlay.fs{padding:0}
/* ★ 2026-09-12 - NO BORDER WHEN THE WINDOW IS THE WHOLE SCREEN. `.rd.rd .tmodal` gives every
   dialog a 1px --line2 edge, which is right for a card floating on a page and wrong for a
   full-screen window: it drew a pale line down both sides of the phone (Panos saw it on the
   privacy page and called it a white highlight on the border), and it stole 1px off each
   side of the iframe, so the site page inside was 358 wide in a 360 screen. */
.rd .overlay.fs .tmodal{max-width:none;width:100%;height:100%;max-height:100%;border-radius:0;padding:0;
    border:0;
    display:flex;flex-direction:column;overflow:hidden;background:var(--page);position:relative}
.rd .overlay.fs .fsart, .rd .overlay.fs .fsart2{position:absolute;pointer-events:none;z-index:0;
    background:url(arthur-a-lg.png) no-repeat center/contain}
.rd .overlay.fs .fsart{right:-120px;bottom:-140px;width:560px;height:560px;opacity:.055}
.rd .overlay.fs .fsart2{left:-90px;top:-60px;width:320px;height:320px;opacity:.035;transform:rotate(-14deg)}
@media (max-width:640px){.rd .overlay.fs .fsart{width:340px;height:340px;right:-90px;bottom:-90px}
.rd .overlay.fs .fsart2{display:none}}
.rd .overlay.fs.open .fsart{animation:fsDriftA 24s ease-in-out infinite;animation-delay:0s}
.rd .overlay.fs.open .fsart2{animation:fsDriftB 33s ease-in-out infinite;animation-delay:0s}
@media (prefers-reduced-motion:reduce){.rd .overlay.fs .fsart, .rd .overlay.fs .fsart2{animation:none!important}}.rd #plansCard .fsbody, .rd #prefsHub .fsbody{display:flex;flex-direction:column;justify-content:center}.rd #plansCard .fsbody > *, .rd #prefsHub .fsbody > *{flex:none}
.rd .overlay.fs .fsbar, .rd .overlay.fs .fsbody{position:relative;z-index:1}
.rd.rd[data-mode="light"] .overlay.fs .tmodal::before{
    background-image:
      linear-gradient(rgba(20,40,80,.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(20,40,80,.05) 1px,transparent 1px)}
.rd .fsbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:0 14px;height:56px;border-bottom:1px solid var(--line);background:var(--bar);flex:none}
.rd .fsbl{justify-self:start;display:flex;align-items:center;gap:5px;min-width:0}
.rd .fsbrand{justify-self:center;display:flex;align-items:center}
.rd .fsbrand img{height:19px;width:auto;display:block}
.rd .fsbr{justify-self:end;display:flex;align-items:center}
.rd .fshome{width:38px;height:38px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer;flex:none}
.rd .fshome:hover{background:var(--panel);color:var(--fg)}
.rd .fshome svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rd .fsdiv{width:1px;height:17px;background:var(--line2);margin:0 8px 0 3px;flex:none}
.rd .fsbar .fst{font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--mid);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd .billhero{background:var(--panel);border:1px solid var(--line2);border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px));padding:22px 24px;margin-top:24px;display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start}
.rd .billamt{flex:1;min-width:170px}
.rd .bl{font-size:calc(11px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin-bottom:8px}
.rd .billamt .bv{font-size:calc(38px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-1.5px;color:var(--fg);line-height:calc(1 * var(--Lh, 1))}
.rd .billamt .bs{font-size:calc(13px * var(--Tk, 1));color:var(--dim);margin-top:8px;line-height:calc(1.5 * var(--Lh, 1))}
.rd .billmeta{display:flex;gap:28px;flex-wrap:wrap}
.rd .billmeta .bv2{font-size:calc(15px * var(--Tk, 1));color:var(--fg);font-weight:calc(600 + var(--Wb, 0))}
.rd .useblk{margin-top:14px}
.rd .usebar{height:8px;border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);overflow:hidden;margin:9px 0 7px}
.rd .usebar i{display:block;height:100%;background:var(--accent);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px))}
.rd .usetxt{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim)}
.rd .invtable{border:1px solid var(--line2);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));overflow:hidden}
.rd .invrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:calc(14px * var(--Tk, 1))}
.rd .invrow:last-child{border-bottom:none}
.rd .invrow.head{background:var(--panel2);font-size:calc(11px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}
.rd .invrow .c1{flex:1;color:var(--fg)}
.rd .invrow .c2{width:110px;color:var(--mid);flex:none}
.rd .invrow .c3{width:96px;flex:none;color:var(--mid)}
.rd .invempty{padding:28px 18px;text-align:center;color:var(--dim);font-size:calc(14px * var(--Tk, 1))}
.rd .annbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 14px}
.rd .annbtn{font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));background:var(--accent2);color:#fff;border:none;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:10px 15px;cursor:pointer;font-family:inherit}
.rd .annbtn:hover{background:var(--accent)}
.rd .annwho{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.rd .annav{width:29px;height:29px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:#fff;flex:none}
.rd .annname{font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);line-height:calc(1.2 * var(--Lh, 1))}
.rd .annrole{font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);display:block;margin-top:2px}
.rd .annpin{font-size:calc(10px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--accent-lt);background:var(--accent-dim);border-radius:calc(5px * var(--Rk, 1) + var(--Rf, 0px));padding:3px 7px}
.rd .fsx{width:36px;height:36px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));display:flex;align-items:center;justify-content:center;color:var(--mid);cursor:pointer;flex:none}
.rd .fsx:hover{background:var(--panel);color:var(--fg)}
.rd .fsx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.rd .fsbody{flex:1;overflow-y:auto;padding:38px 22px 48px}
.rd .fsin{max-width:880px;margin:0 auto}
.rd .fshero{text-align:center;margin-bottom:32px}
.rd .fshero h2{font-size:calc(31px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-1.1px;margin:0;line-height:calc(1.12 * var(--Lh, 1))}
.rd .fshero p{font-size:calc(16px * var(--Tk, 1));color:var(--mid);line-height:calc(1.6 * var(--Lh, 1));margin:15px auto 0;max-width:540px}
.rd .fstiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rd .fstier{background:var(--panel);border:1px solid var(--line2);border-radius:calc(15px * var(--Rk, 1) + var(--Rf, 0px));padding:19px 17px;display:flex;flex-direction:column;position:relative}
/* The marked cards carry a DIM outline in their own colour and one bright arc that travels
   around it. The bright solid border they had before was the whole problem: a moving highlight
   is invisible on an outline that is already lit all the way round. Grey-ish on one side,
   lit on the other, moving - which is what was asked for.
   Colour by state, and two colours when two states land on one card (chosen AND the one most
   businesses pick): a second arc rides opposite the first. */
.rd .fstier.cur,.rd .fstier.rec,.rd .fstier.pend{
  border-color:color-mix(in srgb,var(--ring) 34%, var(--line2));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ring) 18%, transparent)}
.rd .fstier.rec {--ring:var(--accent)}
.rd .fstier.pend{--ring:var(--warn)}
.rd .fstier.cur {--ring:var(--good)}
/* two classes = higher specificity, so these win over the singles above */
.rd .fstier.pend.rec{--ring:var(--warn); --ring2:var(--accent)}
.rd .fstier.cur.rec {--ring:var(--good); --ring2:var(--accent)}
.rd .fstier.cur.pend{--ring:var(--good); --ring2:var(--warn)}

/* A plain custom property cannot be interpolated, so the sweep angle is registered with
   @property. Where that is unsupported the arc simply parks and you get a static outline.
   Rotating the element instead would spin the rounded rectangle, not the light along it. */
@property --ringa{syntax:'<angle>';initial-value:0deg;inherits:false}
.rd .fstier.cur::after,.rd .fstier.rec::after,.rd .fstier.pend::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ringa),
    transparent 0 6%, var(--ring) 20%, transparent 36%,
    transparent 56%, var(--ring2,transparent) 70%, transparent 86%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  filter:drop-shadow(0 0 5px var(--ring));
  animation:ringSweep 4.6s linear infinite}
@keyframes ringSweep{to{--ringa:360deg}}
@media (prefers-reduced-motion:reduce){
  .rd .fstier.cur::after,.rd .fstier.rec::after,.rd .fstier.pend::after{animation:none}
}
/* Two badges can land on one card (you are ON the plan most businesses pick), so they live in
   a flex wrapper instead of each being absolutely positioned on top of the other.
   GREEN = the plan you are on now. BLUE = the one most businesses choose. Different colours
   because they mean different things and can appear together. */
/* z-index 2 so the travelling ring runs BEHIND the badges. Both are positioned inside the
   card, and the ::after ring paints after every child, so without this the bright arc drew
   a line straight across the middle of the badge. */
.rd .fstier .fpills{position:absolute;top:-11px;left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;z-index:2}
/* A little more air inside and between them: two badges touching at 6px read as one long
   crammed strip rather than two separate facts. The ring outside them needs room too. */
.rd .fstier .fpill{font-size:calc(10px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:#fff;
  background:var(--accent2);border-radius:calc(20px * var(--Rk, 1) + var(--Rf, 0px));padding:5px 12px;white-space:nowrap;
  box-shadow:0 0 0 3px var(--panel2)}
/* Two badges at full size ran the whole width of the card and touched both edges. Smaller
   type and tighter padding pulls them back inside, without shrinking a lone badge. */
.rd .fstier .fpills.two{gap:6px}
.rd .fstier .fpills.two .fpill{font-size:calc(9px * var(--Tk, 1));letter-spacing:.35px;padding:4px 9px;box-shadow:0 0 0 2.5px var(--panel2)}
.rd .fstier .fpill.cur{background:var(--good)}
/* Amber = you picked this during setup but nothing has been billed for it yet. Distinct from
   green (what you are actually on) and blue (what most businesses pick). */
.rd .fstier .fpill.pend{background:var(--warn);color:#1a1200}
.rd .fstier h3{font-size:calc(15px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));margin:0 0 3px;color:var(--fg)}
.rd .fstier .fwho{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);line-height:calc(1.5 * var(--Lh, 1));margin:0 0 13px;min-height:32px}
.rd .fstier .fprice{font-size:calc(29px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-1px;color:var(--fg);line-height:calc(1 * var(--Lh, 1))}
.rd .fstier .fper{font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin:4px 0 13px}
.rd .fstier .fseats{font-size:calc(13.5px * var(--Tk, 1));color:var(--fg);font-weight:calc(700 + var(--Wb, 0));padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:13px}
.rd .fstier .fseats span{display:block;font-size:calc(11.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(500 + var(--Wb, 0));margin-top:3px}
.rd .fstier .fbtn{margin-top:auto;text-align:center;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:10px 12px;cursor:pointer;border:none;font-family:inherit;background:var(--accent2);color:#fff;transition:background .14s}
.rd .fstier .fbtn:hover{background:var(--accent)}
.rd .fstier .fbtn.ghost{background:var(--panel2);border:1px solid var(--line2);color:var(--mid);cursor:default}
.rd .fsgroup{margin-top:12px;background:var(--panel);border:1px solid var(--line2);border-radius:calc(15px * var(--Rk, 1) + var(--Rf, 0px));padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.rd .fsgroup .gl{flex:1;min-width:210px}
.rd .fsgroup b{font-size:calc(15px * var(--Tk, 1));color:var(--fg);display:block;margin-bottom:3px}
.rd .fsgroup p{font-size:calc(13px * var(--Tk, 1));color:var(--dim);line-height:calc(1.6 * var(--Lh, 1));margin:0}
.rd .fsnote{margin:34px auto 0;text-align:center;max-width:580px;font-size:calc(15px * var(--Tk, 1));color:var(--mid);line-height:calc(1.75 * var(--Lh, 1))}
.rd .fsnote b{color:var(--fg)}
.rd .fsrow.tap{cursor:pointer}
.rd .fsrow.tap:hover{border-color:var(--accent)}
.rd .setin{max-width:620px;margin:0 auto}
.rd .settitle{font-size:calc(26px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-.8px;margin:0;color:var(--fg)}
.rd .setintro{font-size:calc(14.5px * var(--Tk, 1));color:var(--dim);line-height:calc(1.6 * var(--Lh, 1));margin:9px 0 0}
.rd .setlbl{font-size:calc(11.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin:30px 0 9px;padding-left:2px}
.rd .setgrp{background:var(--panel);border:1px solid var(--line2);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));overflow:hidden}
.rd .setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}
.rd .setrow:last-child{border-bottom:none}
.rd .setrow .sk{font-size:calc(15px * var(--Tk, 1));color:var(--fg);font-weight:calc(600 + var(--Wb, 0));display:block}
.rd .setrow .ss{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:3px;display:block;line-height:calc(1.5 * var(--Lh, 1))}
.rd .setrow .sv{font-size:calc(13.5px * var(--Tk, 1));color:var(--mid);white-space:nowrap;flex:none}
.rd .setrow.tap{cursor:pointer}
.rd .setrow.tap:hover{background:var(--panel2)}
.rd .setfoot{margin:26px 0 0;font-size:calc(13.5px * var(--Tk, 1));color:var(--dim);line-height:calc(1.7 * var(--Lh, 1))}
.rd .setfoot b{color:var(--mid)}
.rd .annlist{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.rd .ann{background:var(--panel);border:1px solid var(--line2);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:17px 19px}
.rd .ann.unread{border-color:var(--accent-dim)}
.rd .ann:not(.unread) .anndot{background:var(--line2)}
.rd .anndate{font-size:calc(12px * var(--Tk, 1));color:var(--dim);white-space:nowrap;flex:none}
.rd .ann p{font-size:calc(14.5px * var(--Tk, 1));color:var(--mid);line-height:calc(1.65 * var(--Lh, 1));margin:0}
@media (max-width:860px){.rd .fstiers{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.rd .fstiers{grid-template-columns:1fr}
.rd .fstier .fwho{min-height:0}
.rd .fsbody{padding:26px 16px 36px}
.rd .fshero h2{font-size:calc(25px * var(--Tk, 1))}}
.rd .barbtn.unread .bardot{display:block}
.rd .overlay{position:fixed;inset:0;background:var(--backdrop);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.rd .tmodal{position:relative;width:100%;max-width:340px;background:var(--panel);border:1px solid var(--line2);border-radius:calc(18px * var(--Rk, 1) + var(--Rf, 0px));box-shadow:var(--mshadow);padding:20px}
.rd .overlay.open .tmodal{animation:mIn .24s cubic-bezier(.2,.7,.2,1) both}
.rd .overlay.fs.open .tmodal{animation:none}
.rd .overlay.fs.open .fsbody{animation:mIn .26s cubic-bezier(.2,.7,.2,1) both}
.rd .toggle{display:inline-flex;background:var(--panel2);border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:3px;gap:3px}
.rd .toggle button{border:none;background:transparent;color:var(--mid);border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:7px 15px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit;transition:background .2s,color .2s,box-shadow .2s}
.rd .toggle button:not(.on):hover{color:var(--fg);background:var(--panel)}
.rd .toggle button.on{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.32)}
.rd .tierbtn.ghost:hover{background:transparent}
@media (prefers-reduced-motion:reduce){.rd.rd .wscard, .rd.rd .greet, .rd .hbar, .rd .overlay.open, .rd .overlay.open .tmodal{animation:none}}
@keyframes fsDriftA{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.05}
    25%{transform:translate3d(-104px,-70px,0) rotate(-9deg);opacity:.11}
    50%{transform:translate3d(-44px,-118px,0) rotate(5deg);opacity:.08}
    75%{transform:translate3d(-112px,-22px,0) rotate(-13deg);opacity:.1}}
@keyframes fsDriftB{
    0%,100%{transform:translate3d(0,0,0) rotate(-14deg);opacity:.032}
    25%{transform:translate3d(92px,64px,0) rotate(-6deg);opacity:.078}
    50%{transform:translate3d(40px,112px,0) rotate(-20deg);opacity:.055}
    75%{transform:translate3d(104px,26px,0) rotate(-9deg);opacity:.072}}
.rd.rd .topbar{position:relative;z-index:2}
.rd.rd .main{position:relative;z-index:1}

/* ---- PATCH: app class collisions + hairline cleanup (applied to the app, kept here so
   the lifted screens stay in one stylesheet). Re-running build_redesign_css.py drops this,
   so re-append it. ---- */
/* The APP owns `.top` (that is its top BAR), so `.sellrow.top` / `.lbrow.top` were being
   painted with the top bar's background. The crown badge is the highlight, not the row. */
/* `.top` in the app is the top BAR (height:56px, display:grid) — it was making the number-one
   row 56px tall and grid-laid-out. The modifier is prefixed instead, per the app's naming rule. */
.rd.rd .sellrow.s-top .sellrank, .rd.rd .lbrow.s-top .lbrank{background:linear-gradient(180deg,#f5c451,#e0a020);color:#3a2600;border-color:transparent;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(224,160,32,.35)}
.rd.rd .sellrow.s-top .sellrank::after, .rd.rd .lbrow.s-top .lbrank::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:crownShine 4.2s ease-in-out infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){.rd.rd .sellrow.s-top .sellrank::after, .rd.rd .lbrow.s-top .lbrank::after{animation:none}}
/* Lifted screens use the redesign's leading, not the app's 1.5, or every row sits taller
   than the mockup (top sellers measured 56px against the mockup's 45px). */
.rd.rd{line-height:normal}
/* One hairline between the last item and the total, not two. */
.rd.rd .exprow.lastitem{border-bottom:0}


/* ---- PATCH round 4 ---- */
/* The hover was a square-cornered band running the full width of a rounded card. Inset it,
   round it, and tint it with the accent instead of a flat panel colour. */
.rd.rd .sellrow, .rd.rd .lbrow{border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
.rd.rd .sellrow:hover, .rd.rd .lbrow:hover{background:rgba(59,130,246,.08)}
/* A total is a summary, not another person: give it its own surface at the foot of the card
   instead of one more hairline. */
.rd.rd .exprow.extot{border-top:0;background:var(--panel2);margin:6px -16px 0;padding:13px 16px;border-radius:0 0 calc(13px * var(--Rk, 1) + var(--Rf, 0px)) calc(13px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .exprow.extot b{font-size:calc(17px * var(--Tk, 1))}
.rd.rd .lbval.g{color:var(--good)}
.rd.rd .lbrow .exnote{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);white-space:nowrap}

/* The APP's own .stockcard is a rounded PANEL (border, radius, margin, background). Inside a
   lifted card that read as panels nested inside panels. Lifted rows are rows. */
.rd.rd .stockcard{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0}
.rd.rd .stockcard:last-child{border-bottom:0}
.rd.rd .stockcard .autotag{font-size:calc(10px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:.4px;padding:2px 7px;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .fcpct{text-align:right;white-space:nowrap;flex:none}
.rd.rd .fcnum{font-weight:calc(800 + var(--Wb, 0));font-size:calc(18px * var(--Tk, 1));font-family:"SFMono-Regular",Consolas,monospace}
.rd.rd .fclbl{font-size:calc(10px * var(--Tk, 1));color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}

/* The panel head, renamed off `.msghead` because the app already uses that class inside
   every message row. Values copied from the redesign's .msghead. */
.rd.rd .msgpanelhead{flex:none;padding:0 2px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.rd.rd #messages, .rd.rd .msgpanel{min-height:0}
.rd.rd .msgcompose2 input[type=text], .rd.rd .msgcompose2 input:not([type=file]){margin:0;box-shadow:none;border:none;background:none}
.rd.rd .msgat svg, .rd.rd .msgsendbtn svg{width:19px;height:19px}
/* ...and the other half of that collision: the app's INNER .msghead (name + role + time)
   was inheriting the panel head's bottom rule and padding. */
.rd.rd .msgrow .msghead{display:flex;align-items:baseline;gap:8px;padding:0;margin:0;border-bottom:0}

/* The total row is flush with the card's bottom edge, so the card has to clip it or its
   square corners poke past the rounded ones. */
.rd.rd .scard.actcard{overflow:hidden}
.rd.rd .expcats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rd.rd .expcats .dchip{padding:9px 4px;font-size:calc(12.5px * var(--Tk, 1));border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));font-family:inherit}
.rd.rd .experr{color:var(--bad);font-size:calc(12.5px * var(--Tk, 1));min-height:16px;margin-top:8px}
.rd.rd .tipamtbox input{background:none;border:0;outline:none;color:var(--fg);font-size:calc(27px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));
  font-family:"SFMono-Regular",Consolas,monospace;padding:0;margin:0;box-shadow:none;text-align:left}
.rd.rd .exdel{background:none;border:0;color:var(--dim);cursor:pointer;font-size:calc(12px * var(--Tk, 1));padding:2px 4px;margin-left:6px;opacity:0;transition:opacity .12s}
.rd.rd .exprow:hover .exdel{opacity:1}
.rd.rd .exdel:hover{color:var(--bad)}

/* Setup: the app's own input/button rules have to be beaten inside these lifted cards. */
.rd.rd .addrow input{flex:1;min-width:0;margin:0;box-shadow:none}
.rd.rd .tmr input{margin:0;box-shadow:none}
.rd.rd #tablesList .chip{cursor:grab}
.rd.rd #tablesList .chip.dragging{opacity:.4}
/* the member popover */
#memberCard.rd{padding:16px}
#memberCard .uc-spaces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#memberCard .uc-space{font-size:calc(12px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);background:var(--accent-dim);
  border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));padding:5px 10px;white-space:nowrap}
#memberCard .uc-lbl{font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-top:14px}
#memberCard .uc-status{margin-top:12px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--dim);background:var(--panel2);
  border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 12px}
#memberCard .uc-status.on{color:var(--good)}
#memberCard .uc-status.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--good);margin-right:8px;vertical-align:1px}
#memberCard .uc-head{display:flex;align-items:center;gap:12px}
#memberCard .uc-av{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:calc(800 + var(--Wb, 0));font-size:calc(20px * var(--Tk, 1));background-size:cover;background-position:center;overflow:hidden}
#memberCard .uc-name{font-size:calc(17px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0))}
#memberCard .uc-role{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);font-weight:calc(700 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.4px;margin-top:2px}

/* the three category buttons share the width, so the row cannot look lopsided */
.rd.rd #sellCats{display:flex}
.rd.rd #sellCats button{flex:1;text-align:center;white-space:nowrap}
/* the old 3-zone preview bar is kept in the DOM (other code writes to it) but the redesign's
   timer row does not show it; [hidden] alone loses to the app's display:flex. */
.rd.rd #timersStations .tmbar{display:none!important}

/* ================= PATCH round 6 ================= */
/* The app's `button.primary{width:100%}` (element+class) leaks into lifted cards and made the
   Tables "Add" and Timers "Save" buttons full-width, covering the input. Lifted buttons are
   inline auto-width. */
.rd.rd .btn{width:auto}
.rd.rd .btn.primary{width:auto;margin:0}
.rd.rd .addrow{display:flex;gap:9px;align-items:stretch}
.rd.rd .addrow .btn{flex:none;white-space:nowrap;padding:10px 20px}
.rd.rd .tmractions{display:flex;gap:9px;margin-top:14px}

/* one arrow only: the JS writes the ▲/▼ direction, so drop the CSS triangle, and make the
   pill red when takings fell */
.rd.rd .statstrend::before{content:none}
.rd.rd .statstrend.down{background:var(--bad-dim,rgba(242,86,75,.14));color:var(--bad)}

/* Expenses/Tips: the amount is a fixed right-hand column so every row lines up, and the total
   sits flush with the card's bottom edge (no stray hairline / gap). */
.rd.rd .examt, .rd.rd .exprow.extot b{min-width:84px;text-align:right;flex:none}
.rd.rd .lbval, .rd.rd .lbrow .exnote{}
.rd.rd .exprow.extot{margin:6px -16px -2px;border-radius:0 0 calc(13px * var(--Rk, 1) + var(--Rf, 0px)) calc(13px * var(--Rk, 1) + var(--Rf, 0px))}

/* the counted / amount field: one clean box, mono digits, sign on the baseline, and NO inner
   box appearing on focus */
.rd.rd .modal .mrow-in{display:flex;align-items:baseline;gap:6px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 15px;margin:6px 0 2px}
.rd.rd .modal .mrow-in:focus-within{border-color:var(--accent);background:var(--panel)}
.rd.rd .modal .mrow-in .cur{color:var(--dim);font-size:calc(21px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:var(--mono);flex:none}
.rd.rd .modal .mrow-in input{flex:1;min-width:0;width:auto;margin:0;padding:0;border:0!important;
  outline:none!important;box-shadow:none!important;background:transparent;color:var(--fg);
  font-size:calc(26px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:var(--mono)}
.rd.rd .modal .mrow-in input:focus{border:0!important;box-shadow:none!important}

/* the mono/tabular figures the mockup uses on numbers, so digits line up and match its look */
.rd.rd .astatnum, .rd.rd .statshero, .rd.rd .cashexp, .rd.rd .turnnum, .rd.rd .lbval,
.rd.rd .sellrev, .rd.rd .tipamt, .rd.rd .hoursval, .rd.rd .actdur, .rd.rd .shiftdur,
.rd.rd .fcnum{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* member card: roomier, less crammed */
#memberCard.rd{padding:18px 18px 16px;min-width:250px;max-width:290px}
#memberCard .uc-head{gap:13px;margin-bottom:2px}
#memberCard .uc-av{width:58px;height:58px;font-size:calc(22px * var(--Tk, 1))}
#memberCard .uc-spaces{gap:7px;margin-top:9px}
#memberCard .uc-space{padding:6px 11px}

/* Messages: the rows pop in one after another when the panel opens, instead of a fade.
   Scoped to .entering (set by showSection) so it plays on open, not on every poll. */


/* timers save feedback */
@keyframes savedPulse{0%{box-shadow:0 0 0 0 rgba(53,201,141,.0)}30%{box-shadow:0 0 0 2px rgba(53,201,141,.45)}100%{box-shadow:0 0 0 0 rgba(53,201,141,0)}}
.rd.rd #timersCard.saved{animation:savedPulse .7s ease}

/* ===== PATCH round 6b: modal money fields ===== */
/* The lifted modals carry class="modal rd", so `.rd.rd .modal ...` (which needs a .rd ANCESTOR)
   never matched them. Target the modal-with-.rd directly and beat the app's input rules. */
.modal.rd .mrow-in{display:flex;align-items:baseline;gap:7px;background:var(--panel2);
  border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:13px 15px;margin:6px 0 2px}
.modal.rd .mrow-in:focus-within{border-color:var(--accent);background:var(--panel)}
.modal.rd .mrow-in > .cur{color:var(--dim);font-size:calc(21px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:var(--mono);flex:none;background:none;border:0;padding:0}
.modal.rd .mrow-in > input{flex:1;min-width:0;width:auto;margin:0;padding:0;
  background:transparent!important;border:0!important;outline:none!important;box-shadow:none!important;
  color:var(--fg);font-size:calc(26px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:var(--mono)!important}
.modal.rd .expcats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:2px 0}
.modal.rd .expcats .dchip{padding:9px 4px;font-size:calc(12.5px * var(--Tk, 1));border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));font-family:inherit}
/* "Paid with" holds TWO buttons, not the five the .expcats grid was built for, so they were
   squeezed into two narrow columns with three empty ones beside them. Half each, and the
   picked one lights the same way a category chip does. */
.modal.rd #expPaidFrom{grid-template-columns:repeat(2,1fr)}
.modal.rd #expPaidFrom .dchip{min-height:44px}
.rd.rd .dchip.on{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-lt)}
.modal.rd .experr{color:var(--bad);font-size:calc(12.5px * var(--Tk, 1));min-height:16px}
/* the expense modal was tall with a gap: tighten its label rhythm */
.modal.rd label{display:block;font-size:calc(11px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.6px;
  color:var(--dim);margin:14px 0 5px}
.modal.rd label:first-of-type{margin-top:4px}
.modal.rd > input, .modal.rd .mrow-in + label{margin-top:12px}
.modal.rd #expNote{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 13px;
  color:var(--fg);font-size:calc(14px * var(--Tk, 1));font-family:inherit;width:100%;margin:0}
.modal.rd #expNote:focus{outline:none;border-color:var(--accent)}

/* Messages pop in staggered when the tab opens (armed by showSection), not on every poll. */
#msgList.msganim .msgrow:nth-child(1){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(2){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(3){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(4){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(5){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(6){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(7){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(n+8){animation-delay:0s}
@media (prefers-reduced-motion:reduce){#msgList.msganim .msgrow{animation:none}}

/* ================= PATCH round 7 ================= */
/* SCHEDULE — copied from the mockup's measured layout: schedsegs flex:1 so + Split / × pin to
   the right edge (aligned column), and a LONE segment stretches to fill so there is no empty
   band. This is the gap he kept flagging. */
#activity .schedrow{flex-wrap:nowrap;gap:12px}
#activity .schedmeta{flex:none;min-width:78px}
#activity .schedsegs{flex:1 1 0%;min-width:0;flex-wrap:nowrap;gap:8px;overflow:visible}
#activity .schedseg{flex:1 1 0%;justify-content:space-between;min-width:0}
#activity .schedseg input[type=time],#activity .schedseg .schedtime{flex:none}
/* typed 24h field replaced the native picker (it followed the browser's language, not ours) */
.rd.rd .schedseg .schedtime{width:5.2em;text-align:center;font-family:var(--mono)}
.rd.rd .schedseg .schedtime:focus{outline:none;color:var(--accent-lt)}
#activity .schedadd{flex:none;margin-left:0}
#activity .schedrow .segrm{flex:none}

/* EXPENSES/TIPS — the delete × is absolutely positioned so it never shifts the amount column;
   item amounts now line up exactly with the total. */
.rd.rd .exprow{position:relative}
.rd.rd .exdel{position:absolute;right:-2px;top:50%;transform:translateY(-50%);margin:0;
  background:none;border:0;color:var(--dim);cursor:pointer;font-size:calc(13px * var(--Tk, 1));padding:4px 6px;
  opacity:0;transition:opacity .12s;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .exprow:hover .exdel{opacity:1}
.rd.rd .exdel:hover{color:var(--bad);background:var(--panel2)}
/* the amount clears the (hover-only) × by reserving nothing — × overlays the card's own padding */
.rd.rd .exprow .examt{margin-right:0}
/* total sits FLUSH at the very bottom (kill the gap in the Tips card too) */
.rd.rd .scard.actcard{padding-bottom:0;overflow:hidden}
.rd.rd .exprow.extot{margin:6px -16px 0;border-radius:0 0 calc(13px * var(--Rk, 1) + var(--Rf, 0px)) calc(13px * var(--Rk, 1) + var(--Rf, 0px))}

/* TIMERS — tighter card, and a remove button on custom-space timers */
.rd.rd #timersCard .collbody{padding-bottom:2px}
.rd.rd #timersOk:empty{display:none}
.rd.rd .tmr{position:relative}
.rd.rd .tmrm{flex:none;margin-left:6px;background:none;border:0;color:var(--dim);cursor:pointer;
  padding:4px 6px;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));display:inline-flex;align-items:center}
.rd.rd .tmrm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rd.rd .tmrm:hover{color:var(--bad);background:var(--panel2)}

/* the save pulse he liked, reusable on any saved modal/card */
.rd .savedpulse, .savedpulse{animation:savedPulse .7s ease}

/* LOG EXPENSE — match the mockup's weight: the amount is the only bold-mono hero; the note is
   a normal-weight field, labels are the small caps the mockup uses. */
.modal.rd #expNote{font-weight:calc(400 + var(--Wb, 0))}
.modal.rd .dpay{font-weight:calc(800 + var(--Wb, 0))}

/* menu: the blue station "redirect" select on each subcategory */
.rd.rd select.mspace{-webkit-appearance:none;appearance:none;margin-left:auto;font-size:calc(11px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));
  color:var(--accent-lt);background-color:var(--accent-dim);border:1px solid transparent;border-radius:calc(7px * var(--Rk, 1) + var(--Rf, 0px));
  padding:3px 22px 3px 9px;cursor:pointer;font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238fb8ff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center}
.rd.rd select.mspace option{background:var(--panel);color:var(--fg)}
.rd.rd .mcathead .medit, .rd.rd .msubhead .medit{margin-left:6px}
.rd.rd .mcathead .mcatchev{margin-left:6px}
.rd.rd .mitem .medit{margin-left:2px}

/* ===== PATCH round 8 ===== */
/* expense delete × on the LEFT (overlays the card's left padding on hover, never touches the amount) */

/* Log an expense: a touch more air between fields, less dead space at the bottom */
.modal.rd label{margin:16px 0 6px}
.modal.rd .dpay{margin-top:18px}
.modal.rd{padding-bottom:20px}

/* Messages: the mockup's swoop (translateY, quick), armed on open only. The always-on rule that
   made every poll re-fade is overridden to none. */
.rd.rd .msgpanel .msgrow{animation:none}
@keyframes msgSwoop{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#msgList.msganim .msgrow{animation:msgSwoop .3s cubic-bezier(.2,.8,.2,1) both}

/* add-timer picker select */
.modal.rd .tmrpick{-webkit-appearance:none;appearance:none;background:var(--panel2);border:1px solid var(--line2);
  border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 34px 11px 13px;color:var(--fg);font-size:calc(14px * var(--Tk, 1));font-family:inherit;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868e9a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.modal.rd .tmrpick:focus{outline:none;border-color:var(--accent)}
.modal.rd .tmrpick:disabled{color:var(--dim);cursor:default}
.modal.rd #tmrWarn, .modal.rd #tmrLate{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));
  padding:11px 13px;color:var(--fg);font-size:calc(15px * var(--Tk, 1));font-family:var(--mono);width:100%;margin:0}
.modal.rd #tmrWarn:focus, .modal.rd #tmrLate:focus{outline:none;border-color:var(--accent)}


/* ===== PATCH round 9 ===== */
/* expense/tips delete × on the RIGHT, revealed on hover; the amount slides left to make room
   so it never overlaps the number or the title. */
.rd.rd .exprow{position:relative}
.rd.rd .exprow .exdel{position:absolute;right:-2px;top:50%;transform:translateY(-50%);margin:0;background:none;
  border:0;color:var(--dim);cursor:pointer;font-size:calc(13px * var(--Tk, 1));padding:4px 6px;opacity:0;transition:opacity .12s;border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px))}
.rd.rd .exprow:hover .exdel{opacity:1}
.rd.rd .exdel:hover{color:var(--bad);background:var(--panel2)}
.rd.rd .exprow .examt{transition:transform .12s}
.rd.rd .exprow:hover .examt{transform:translateX(-22px)}

/* the total row FLUSH at the very bottom — the remaining sliver was the card's own bottom border
   under a rounded extot. Pull it down 1px more and let overflow clip. */
.rd.rd .scard.actcard{padding-bottom:0;overflow:hidden}
.rd.rd .exprow.extot{margin:6px -16px -1px;border-radius:0 0 calc(13px * var(--Rk, 1) + var(--Rf, 0px)) calc(13px * var(--Rk, 1) + var(--Rf, 0px));border-bottom:0}

/* TIMERS: the remove × looked stray — make it a proper round hover button aligned with the fields */
.rd.rd .tmr{position:relative;padding-right:4px}
.rd.rd .tmrm{width:28px;height:28px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));justify-content:center;margin-left:10px;
  background:var(--panel2);border:1px solid var(--line2)}
.rd.rd .tmrm:hover{color:var(--bad);border-color:var(--bad);background:var(--panel)}
.rd.rd .tmrm svg{width:13px;height:13px}

/* MENU nesting: make subcategories read as nested, not all on one level */
.rd.rd .mcatbody{padding:8px 12px 12px;background:rgba(10,15,26,.35)}
.rd.rd[data-mode="light"] .mcatbody{background:rgba(0,0,0,.03)}
.rd.rd .msubcat{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.rd.rd .msubhead{background:var(--panel2)}
.rd.rd .msubbody{padding:2px 12px 8px 16px;border-left:2px solid var(--accent-dim);margin:0 8px 8px}

/* MESSAGES: the exact mockup animation (viewIn, .32s, .045 apart), one-by-one, armed on open */
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rd.rd .msgpanel .msgrow{animation:none}
#msgList.msganim .msgrow{animation:msgIn .32s cubic-bezier(.2,.7,.2,1) both}
#msgList.msganim .msgrow:nth-child(1){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(2){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(3){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(4){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(5){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(6){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(7){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(8){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(9){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(10){animation-delay:0s}
#msgList.msganim .msgrow:nth-child(n+11){animation-delay:0s}
@media (prefers-reduced-motion:reduce){#msgList.msganim .msgrow{animation:none}}

/* chat panel: cap the width like the mockup (it was full-width, too big) */
.rd.rd #messages .msgpanel{max-width:820px;margin:0 auto}

/* avatar chip used in Activity + Stats leaderboards (photo when we have it) */
.rd.rd .actav, .rd.rd .lbav{background-size:cover;background-position:center}

/* Log an expense modal: kill the dead space under the button */
.modal.rd{padding-bottom:18px}
.modal.rd .dpay{margin-top:16px;margin-bottom:0}

/* ===== PATCH round 10 ===== */
/* remove the blue accent line under subcategories (he disliked it) */
.rd.rd .msubbody{border-left:0;padding:2px 12px 8px}
/* busiest note sits on the chart label row, right-aligned, subtle */
.rd.rd .chartgrp{display:flex;align-items:baseline;justify-content:space-between}
.rd.rd .chartgrp .statsnote{margin:0;font-size:calc(12px * var(--Tk, 1));color:var(--dim);font-weight:calc(600 + var(--Wb, 0));text-transform:none;letter-spacing:0}
/* TIMER remove ×: hidden until you hover the row, like the expense × */
.rd.rd .tmrm{opacity:0;transition:opacity .12s}
.rd.rd .tmr:hover .tmrm{opacity:1}
/* MODAL bottom gap: empty ok/error lines reserve nothing; tighten the modal foot */
.modal.rd .ok:empty, .modal.rd .experr:empty, .modal.rd .autherr:empty{display:none}
.modal.rd{padding-bottom:16px}
.modal.rd .dpay:last-child, .modal.rd .primary:last-child{margin-bottom:0}
/* premium touch on the expense/tip rows: a soft lift + accent edge on hover */
.rd.rd .exprow:not(.extot){border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;transition:background .12s}
.rd.rd .exprow:not(.extot):hover{background:rgba(59,130,246,.06)}

/* ===== PATCH round 12: permission panel ===== */
.rd.rd .permdelbtn{display:block;margin:16px auto 4px;padding:9px 22px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));background:transparent;
  border:1px solid var(--bad);color:var(--bad);font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit}
.rd.rd .permdelbtn:hover{background:var(--bad);color:#fff}
.rd.rd .permpanel .permrow{padding:11px 0}
.rd.rd .permpanel .permrow span{font-size:calc(14px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0))}

/* ~ 2026-08-21: THE APP STARFIELD IS GONE. #appsky + .appstar + @keyframes appTwinkle were
   here. His call after the site lost its stars: "it looked fake, it looked bad... remove the
   stars from everywhere on Arthur". The rule below stays: it lifts the app's own screens off
   z-index 0, and it is what keeps them above the grid and the bloom now that the sky is not
   there to need it. Recover the paint with: git show 9974178:_preview/redesign.css */
body.stage.app > #app, body.stage.app > #hub, body.stage.app > #auth, body.stage.app .top{position:relative;z-index:1}

/* ===== PATCH round 13: permission group boxes ===== */
.rd.rd .permgroup{background:var(--panel);border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:4px 14px;margin:12px 0}
.rd.rd .permgroup .pgcat{margin:12px 0 2px;padding-top:0;border-top:0;color:var(--accent-lt);font-size:calc(11px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:.5px}
.rd.rd .permgroup .pgcat::before{display:none}
.rd.rd .permgroup .permrow:last-child{border-bottom:0}
.rd.rd .permdelwrap{display:flex;justify-content:center;padding:14px 0 4px}
.rd.rd .permdelbtn{display:inline-block;margin:0}

/* ===== PATCH round 14 ===== */
/* leaderboard/expense actcards: symmetric padding (the round-7 extot fix zeroed the BOTTOM on
   every actcard, so waiter/sellers/tips sat high with a top gap). Only extot cards go flush. */
.rd.rd .scard.actcard{padding:6px 16px}
.rd.rd .scard.actcard:has(.exprow.extot){padding-bottom:0}
/* smoother message entrance: a gentle rise + fade, ease-out, a touch longer */
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#msgList.msganim .msgrow{animation:msgIn .42s cubic-bezier(.22,.61,.36,1) both}
/* delete role/space button: unmistakably centred with breathing room */
.rd.rd .permdelwrap{display:flex;justify-content:center;padding:18px 0 6px;margin-top:4px}

/* ===== PATCH round 15: workspace settings ===== */
.rd.rd .gcard{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));overflow:hidden}
.rd.rd .memava{width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:calc(800 + var(--Wb, 0));font-size:calc(14px * var(--Tk, 1));flex:none}
.rd.rd .memrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.rd.rd .memrow:last-child{border-bottom:0}
.rd.rd .memrow:hover{background:var(--panel)}
.rd.rd .memrow[data-owner]{cursor:default}.rd.rd .memrow[data-owner]:hover{background:transparent}
.rd.rd .memx{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--dim);cursor:pointer}
.rd.rd .memx:hover{color:var(--bad)}
.rd.rd #set .bizbannerhint{color:var(--dim);font-size:calc(12.5px * var(--Tk, 1))}
.rd.rd #set .imgx{position:absolute}
/* the Delete-role button text was inheriting the accent on part of the word — force one colour */
.rd.rd .permdelbtn, .rd.rd .permdelbtn *{color:inherit}

/* ===== PATCH round 16 ===== */
/* THE BANNER/LOGO TILING BUG: the image was set but never told to cover — so it repeated at
   natural size. */
.rd.rd .bizbanner{background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden}
.rd.rd .bizlogo{background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
/* opening hours: collapsible sub-block, so the profile card isn't a wall */
.rd.rd .hourscoll{border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));margin:14px 0 2px;overflow:hidden}
.rd.rd .hourshead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);background:var(--panel2)}
.rd.rd .hourshead .hourschev{color:var(--dim);transition:transform .15s}.rd.rd .hourshead .hourschev svg{width:15px;height:15px}
.rd.rd .hourscoll.open .hourschev{transform:rotate(180deg)}
.rd.rd .hoursbody{padding:12px 14px}
.rd.rd .hoursbody[hidden]{display:none}
/* member rows shorter (he said too thick) + transfer button aligned */
.rd.rd .memrow{padding:7px 14px}
.rd.rd .memava{width:30px;height:30px;font-size:calc(12px * var(--Tk, 1))}
.rd.rd .memnm{font-size:calc(13.5px * var(--Tk, 1))}
.rd.rd .memrole{font-size:calc(11.5px * var(--Tk, 1));margin-top:0}
.rd.rd .memava{width:32px;height:32px;font-size:calc(13px * var(--Tk, 1))}
.rd.rd .memxfer{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rd.rd .memxfer-btn{width:100%;justify-content:center;gap:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--mid);padding:11px}
.rd.rd .memxfer-btn svg{width:16px;height:16px;flex:none}
.rd.rd .memxfer-btn:hover{border-color:var(--accent);color:var(--fg)}

/* ===== PATCH round 17 ===== */
/* the green save pulse works on ANY card/modal, not only .rd ones */
@keyframes savedPulseAny{0%{box-shadow:0 0 0 0 rgba(53,201,141,0)}30%{box-shadow:0 0 0 2px rgba(53,201,141,.5)}100%{box-shadow:0 0 0 0 rgba(53,201,141,0)}}
.savedpulse{animation:savedPulseAny .75s ease}
/* opening-hours header stands apart from the plain inputs above it */
.rd.rd .hourshead{background:var(--panel);border-bottom:1px solid transparent}
.rd.rd .hourscoll{background:var(--panel2)}
.rd.rd .hourscoll.open .hourshead{border-bottom-color:var(--line2)}

/* ===== PATCH round 18 ===== */
/* Staff members: no bordered box — flush rows with hairlines, like the mockup */
.rd.rd #memberRows.gcard{background:none;border:0;border-radius:0}
.rd.rd #memberRows .memrow{padding-left:2px;padding-right:2px}
.rd.rd #memberRows .memrow:not(:last-child){border-bottom:1px solid var(--line)}

/* ===== PATCH round 19: space panel role pills ===== */
.rd.rd .spaceroles{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.rd.rd .spaceroles .daypill{font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));padding:7px 13px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));border:1px solid var(--line2);color:var(--mid);cursor:pointer;background:var(--panel);user-select:none;transition:all .12s}
.rd.rd .spaceroles .daypill:hover{border-color:var(--accent)}
.rd.rd .spaceroles .daypill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .spctype button:disabled{opacity:.55;cursor:default}
.rd.rd .spctype button.on:disabled{opacity:1}

/* ===== PATCH round 20 ===== */
/* item modal Delete button — proper danger look (this modal isn't .rd) */
#itemModal #itemDelete{background:transparent;border:1px solid var(--bad);color:var(--bad);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));
  padding:12px 18px;font-size:calc(14px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;font-family:inherit;flex:none;margin:0}
#itemModal #itemDelete:hover{background:var(--bad);color:#fff}

/* ===== PATCH round 21 ===== */
/* consistent card bottom gap everywhere (match the timers card he likes) + no empty-confirm space */
.rd.rd .collbody{padding:2px 16px 14px}
.rd.rd #timersCard .collbody{padding-bottom:14px}
.rd.rd .collbody .ok:empty, .rd.rd .collbody .autherr:empty{display:none;margin:0}
.rd.rd .collbody > .btn:last-child, .rd.rd .collbody > .primary:last-child, .rd.rd .collbody #saveProf{margin-bottom:0}

/* space TYPE buttons + role pills: less squeezed, more padding */
.rd.rd .spctype{padding:4px;gap:4px}
.rd.rd .spctype button{padding:11px 12px;font-size:calc(13.5px * var(--Tk, 1))}
.rd.rd .spaceroles{gap:8px;margin-top:6px}
.rd.rd .spaceroles .daypill{padding:9px 15px;font-size:calc(13px * var(--Tk, 1))}

/* item modal Options: cleaner grouped boxes */
#itemModal .optgroup{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));padding:11px 12px;margin-bottom:9px}
#itemModal .optghead{display:flex;gap:9px;align-items:center;margin-bottom:9px}
#itemModal .optgname{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 11px;color:var(--fg);font-size:calc(13.5px * var(--Tk, 1));font-family:inherit;margin:0}
#itemModal .optgname:focus{outline:none;border-color:var(--accent)}
#itemModal .optmulti{display:flex;align-items:center;gap:6px;font-size:calc(12.5px * var(--Tk, 1));color:var(--mid);margin:0;white-space:nowrap;cursor:pointer}
#itemModal .optchoice{display:flex;gap:7px;margin-bottom:6px}
#itemModal .optchoice input{background:var(--panel);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:9px 11px;color:var(--fg);font-size:calc(13.5px * var(--Tk, 1));font-family:inherit;margin:0;flex:1;min-width:0}
#itemModal .optchoice .optprice{flex:none;width:74px}
#itemModal .optchoice input:focus{outline:none;border-color:var(--accent)}
#itemModal .optx{flex:none;width:32px;height:32px;border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel);border:1px solid var(--line2);color:var(--dim);cursor:pointer;font-size:calc(13px * var(--Tk, 1))}
#itemModal .optx:hover{color:var(--bad);border-color:var(--bad)}

/* ===== PATCH round 22: space padding, delete centre, QR, printers ===== */
/* space Type/pills — more breathing room inside the boxes */
.rd.rd #spaceList .permgroup, .rd.rd #roleList .permgroup{padding:12px 15px}
.rd.rd #spaceList .spctype{padding:5px;gap:5px}
.rd.rd #spaceList .spctype button{padding:13px 12px}
.rd.rd #spaceList .spaceroles{gap:9px;margin-top:8px;padding-bottom:2px}
.rd.rd #spaceList .spaceroles .daypill{padding:10px 16px}
/* delete space/role button — unmistakably centred with room */
.rd.rd .permdelwrap{display:flex;justify-content:center;width:100%;padding:20px 0 6px}
.rd.rd .permdelbtn{margin:0 auto;display:inline-block}

/* QR menu — mockup layout */
.rd.rd .qrhint{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin:2px 0 12px;line-height:calc(1.4 * var(--Lh, 1))}
.rd.rd .qrpayrow{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.rd.rd .qrtabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.rd.rd .qrtab{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));padding:8px 14px;font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--mid);cursor:pointer;font-family:inherit}
.rd.rd .qrtab:hover{border-color:var(--accent)}
.rd.rd .qrtab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.rd.rd .qrshow{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:20px;text-align:center}
.rd.rd .qrshow-title{font-size:calc(15px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));margin-bottom:14px}
.rd.rd .qrshow-img{width:190px;height:190px;background:#fff;border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:10px;box-sizing:border-box}
.rd.rd .qrshow-link{font-family:var(--mono);font-size:calc(13px * var(--Tk, 1));color:var(--accent-lt);margin:14px 0}
.rd.rd .qrshow-actions{display:flex;gap:9px;justify-content:center}
.rd.rd .qrshow-actions .btn{gap:7px}

/* printers — mockup rows + pairing console */
.rd.rd .prnlist .prnrow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.rd.rd .prnlist .prnrow:last-child{border-bottom:0}
.rd.rd .prnlist .prnrow:hover{background:var(--panel2)}
.rd.rd .prnlist .prnrow > div:first-child{flex:1;min-width:0}
.rd.rd .prnname{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0))}
.rd.rd .prnstat{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:2px;display:flex;align-items:center;gap:7px}
.rd.rd .condot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none}
.rd.rd .condot.on{background:var(--good);box-shadow:0 0 0 3px rgba(53,201,141,.15)}
.rd.rd .prnlist .pchev{color:var(--dim)}.rd.rd .prnlist .pchev svg{width:15px;height:15px}
.rd.rd .conrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 2px}
.rd.rd .constat{font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(600 + var(--Wb, 0));color:var(--mid);display:flex;align-items:center;gap:8px}
.rd.rd .pairbox{background:var(--panel2);border:1px solid var(--line2);border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));padding:14px;margin-top:12px}
.rd.rd .pairbox .pairlead{font-size:calc(13px * var(--Tk, 1));color:var(--dim);margin-bottom:11px}
.rd.rd .pairfield{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.rd.rd .pairfield .pk{font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));text-transform:uppercase;letter-spacing:.5px;color:var(--dim)}
.rd.rd .pairfield .pv{font-family:var(--mono);font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt)}
.rd.rd .pairwait{display:flex;align-items:center;gap:9px;font-size:calc(12.5px * var(--Tk, 1));color:var(--mid);margin:11px 0}
.rd.rd .pairwait .spin{width:13px;height:13px;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;flex:none}
.rd.rd .pairbox .btn{width:100%;justify-content:center}
@keyframes spin{to{transform:rotate(360deg)}}
/* Takeaway / Delivery now live IN the floor grid as tiles rather than two wide
   buttons underneath it, so they read as two more "tables" (named Takeaway and
   Delivery) instead of a separate control strip. Accent-tinted with a left bar so
   they're still obviously actions, not seated tables. */
.rd.rd #floor .ttile.tqtile{
  border:1px solid var(--accent);
  border-left:4px solid var(--accent);
  background:linear-gradient(155deg,var(--accent-dim) 0%,transparent 82%),var(--panel2);
  cursor:pointer;
}
.rd.rd #floor .ttile.tqtile .ttname{color:var(--accent-lt);display:flex;align-items:center;gap:8px}
/* ★ 2026-09-11 - "the New order at the bottom is very, very low". `.ttile .ttname{flex:1 1 auto}` exists
   so a table's name can take the WIDTH of its top row. On these two tiles the name is not in a row: it is
   a direct child of a COLUMN, so the same rule made it grow DOWN. One line of text measured 62px tall,
   ate the tile, and left "New order" pressed against the bottom edge with 0px under it. Sized to its
   content here, the tile's own justify-content:center finally has something to centre. */
/* ⚠️ `#floorTables`, NOT `.rd.rd #floor`. The first version of this used the same path as the
   tqtile rules around it and matched NOTHING: in the running app it was absent from the list of
   rules hitting the element, and the name stayed 62px. That path does not reach these tiles, which
   is also why the dashed-border rule further down never shows on them either. #floorTables is the
   container they actually live in (1,3,0), and it beats `.ttile .ttname` (0,2,0). */
#floorTables .ttile.tqtile .ttname{flex:none}
.rd.rd #floor .ttile.tqtile .ttname svg{width:18px;height:18px;flex:none}
.rd.rd #floor .ttile.tqtile .tqsub{color:var(--dim)}
.rd.rd #floor .ttile.tqtile:hover{background:linear-gradient(155deg,var(--accent-dim) 0%,transparent 60%),var(--panel)}

/* =====================================================================
   ENTRANCE ANIMATIONS — rebuilt 2026-07-26
   One curve, one timing family, one direction of travel, so a screen arrives
   as a single soft movement instead of several unrelated ones.

   Why this is safe now (it wasn't before):
     - screens paint from cache the instant you click (paintCached + prefetch),
       so nothing animates an empty panel and then re-animates when data lands
     - background polls defer while an entrance is playing (afterEntering)
     - the skip-if-identical guards ignore live minute counters, so a poll no
       longer rebuilds identical tiles mid-animation

   Feel: gentle deceleration (no bounce, no overshoot), a short 10-12px rise,
   generous duration. Floaty rather than snappy.
   Untouched on purpose: crownShine, the ready-dot pulse, loaders, modal opens.
   ===================================================================== */
.rd.rd{--rdE:cubic-bezier(.22,.61,.36,1); --rdT:.22s; --rdTr:.22s; --rdStep:0ms}

@keyframes rdRise{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes rdRiseSm{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
@keyframes rdGrow{from{opacity:.35;transform:scaleY(.6)}to{opacity:1;transform:none}}

/* 1. the screen itself — one soft lift, always plays once (the app adds .active) */
main section.active:not(#newOrder){animation:rdRise var(--rdT,.22s) cubic-bezier(.22,.61,.36,1) both}

/* 2. cards + rows inside a screen, gently staggered behind it */
.rd.rd .setwrap .scard,
.rd.rd .stockcard,
.rd.rd .actrow,
.rd.rd .sellrow,
.rd.rd .lbrow,
.rd.rd .exprow,
.rd.rd .turnstat,
.rd.rd .astat,
.rd.rd .statshero,
.rd.rd #floor .ttile{animation:rdRiseSm var(--rdTr) var(--rdE) both}

.rd.rd .setwrap .scard:nth-child(2),.rd.rd .stockcard:nth-child(2),.rd.rd .actrow:nth-child(2),
.rd.rd .sellrow:nth-child(2),.rd.rd .lbrow:nth-child(2),.rd.rd #floor .ttile:nth-child(2),
.rd.rd .astat:nth-child(2){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(3),.rd.rd .stockcard:nth-child(3),.rd.rd .actrow:nth-child(3),
.rd.rd .sellrow:nth-child(3),.rd.rd .lbrow:nth-child(3),.rd.rd #floor .ttile:nth-child(3),
.rd.rd .astat:nth-child(3){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(4),.rd.rd .stockcard:nth-child(4),.rd.rd .actrow:nth-child(4),
.rd.rd .sellrow:nth-child(4),.rd.rd .lbrow:nth-child(4),.rd.rd #floor .ttile:nth-child(4),
.rd.rd .astat:nth-child(4){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(5),.rd.rd .stockcard:nth-child(5),.rd.rd .actrow:nth-child(5),
.rd.rd .sellrow:nth-child(5),.rd.rd .lbrow:nth-child(5),.rd.rd #floor .ttile:nth-child(5),
.rd.rd .astat:nth-child(5){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(6),.rd.rd .stockcard:nth-child(6),.rd.rd .actrow:nth-child(6),
.rd.rd .sellrow:nth-child(6),.rd.rd .lbrow:nth-child(6),.rd.rd #floor .ttile:nth-child(6){animation-delay:0s}
.rd.rd .setwrap .scard:nth-child(n+7),.rd.rd .stockcard:nth-child(n+7),.rd.rd .actrow:nth-child(n+7),
.rd.rd .sellrow:nth-child(n+7),.rd.rd .lbrow:nth-child(n+7),.rd.rd #floor .ttile:nth-child(n+7){animation-delay:0s}

/* 3. chart bars grow from the baseline (right for a bar chart) on the same clock */
.rd.rd .chart .bar{transform-origin:bottom center;animation:rdGrow var(--rdTr) var(--rdE) both}
.rd.rd .chart .bar:nth-child(2){animation-delay:0s}
.rd.rd .chart .bar:nth-child(3){animation-delay:0s}
.rd.rd .chart .bar:nth-child(4){animation-delay:0s}
.rd.rd .chart .bar:nth-child(5){animation-delay:0s}
.rd.rd .chart .bar:nth-child(6){animation-delay:0s}
.rd.rd .chart .bar:nth-child(n+7){animation-delay:0s}

/* 4. messages keep their own cascade (Panos likes it) — matched to the same curve */
#msgList.msganim .msgrow{animation:rdRiseSm 0.22s cubic-bezier(.22,.61,.36,1) both}

@media (prefers-reduced-motion:reduce){
  main section.active:not(#newOrder),
  .rd.rd .setwrap .scard,.rd.rd .stockcard,.rd.rd .actrow,.rd.rd .sellrow,.rd.rd .lbrow,
  .rd.rd .exprow,.rd.rd .turnstat,.rd.rd .astat,.rd.rd .statshero,
  .rd.rd #floor .ttile,.rd.rd .chart .bar,#msgList.msganim .msgrow{animation:none}
}

/* Inventory row spacing (layout, not animation — kept from the earlier pass).
   Rows were packed at 13px with a 3px gap under each name and read as one block. */
.rd.rd .stockcard{padding:17px 2px}
.rd.rd .stockcard .sc-name{line-height:calc(1.35 * var(--Lh, 1))}
.rd.rd .stockcard .sc-sub{margin-top:6px;line-height:calc(1.45 * var(--Lh, 1))}
.rd.rd .stockcard .sc-actions{gap:7px}/* ---- BILLING screen (ported from the mockup's #billingCard) ---------------- */
#billingCard .billhero, /* ---- BILLING screen (ported from the mockup's #billingCard) ---------------- */
#prefsHub .billhero{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  background:linear-gradient(135deg,var(--accent-dim),transparent 80%);
  border:1px solid var(--line2);border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px));padding:16px 17px;margin:4px 0 6px}#billingCard .billamt .bl, #billingCard .billmeta .bl, #prefsHub .billamt .bl, #prefsHub .billmeta .bl{font-size:calc(10.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));
  text-transform:uppercase;letter-spacing:.6px;color:var(--dim)}#billingCard .billamt .bv, #prefsHub .billamt .bv{font-size:calc(32px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));letter-spacing:-1px;
  font-family:var(--mono);color:var(--fg);margin-top:3px;line-height:calc(1 * var(--Lh, 1))}#billingCard .billamt .bs, #prefsHub .billamt .bs{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);margin-top:6px;max-width:34ch;line-height:calc(1.45 * var(--Lh, 1))}#billingCard .billmeta, #prefsHub .billmeta{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}#billingCard .billmeta .bv2, #prefsHub .billmeta .bv2{font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--fg);margin-top:3px}#billingCard .billgrp, #prefsHub .billgrp{border:1px solid var(--line2);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));overflow:hidden;
  background:var(--panel2);margin-bottom:4px}#billingCard .billrow, #prefsHub .billrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 14px;border-bottom:1px solid var(--line)}#billingCard .billrow:last-child, #prefsHub .billrow:last-child{border-bottom:0}#billingCard .billrow.col, #prefsHub .billrow.col{display:block}#billingCard .billrow-top, #prefsHub .billrow-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}#billingCard .bk, #prefsHub .bk{display:block;font-size:calc(14px * var(--Tk, 1));font-weight:calc(650 + var(--Wb, 0));color:var(--fg)}#billingCard .bsub, #prefsHub .bsub{display:block;font-size:calc(12px * var(--Tk, 1));color:var(--dim);margin-top:3px;line-height:calc(1.45 * var(--Lh, 1))}#billingCard .bvv, #prefsHub .bvv{font-size:calc(13.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--mid);white-space:nowrap;font-family:var(--mono)}#billingCard .bgo, #prefsHub .bgo{font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);white-space:nowrap}#billingCard .billrow.tap, #prefsHub .billrow.tap{cursor:pointer;transition:background .14s}#billingCard .billrow.tap:hover, #prefsHub .billrow.tap:hover{background:var(--panel)}#billingCard .billrow .seatbar, #prefsHub .billrow .seatbar{margin:11px 0 8px}#billingCard .bhint, #prefsHub .bhint{font-size:calc(12px * var(--Tk, 1));color:var(--dim);line-height:calc(1.5 * var(--Lh, 1))}#billingCard .billempty, #prefsHub .billempty{padding:18px 14px;font-size:calc(13px * var(--Tk, 1));color:var(--dim);line-height:calc(1.5 * var(--Lh, 1));text-align:center}#billingCard .billfoot, #prefsHub .billfoot{font-size:calc(12.5px * var(--Tk, 1));color:var(--dim);line-height:calc(1.6 * var(--Lh, 1));margin:14px 2px 0}#billingCard .billfoot b, #prefsHub .billfoot b{color:var(--mid)}

/* The Group row's button sits outside .fstier, and `.rd .fstier .fbtn` only styles
   buttons inside a tier card — so it fell back to the browser default. (The mockup
   carried these as inline styles on that one button.) */
.rd .fsgroup .fbtn{background:var(--panel2);border:1px solid var(--line2);color:var(--mid);
  padding:11px 18px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));font-size:calc(13px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));cursor:pointer;
  font-family:inherit;transition:border-color .14s,color .14s}
.rd .fsgroup .fbtn:hover{border-color:var(--accent);color:var(--accent-lt)}

/* ---- FULLSCREEN WINDOWS: bind to the LIVE app's variables ------------------
   redesign.css was authored against the mockup, where `--page` is the page
   background and `--bar` is the top-bar surface. The live app uses neither with
   those meanings — it defines `--bar:#7ab0ff` (a light blue accent), which is why
   the window's top bar came out bright blue and the window itself transparent.
   These rules restate the surfaces using the variables the live app actually has.
   Scoped to the three fullscreen windows so nothing else is affected. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#settingsCard.overlay.fs, #checkoutCard.overlay.fs{
  position:fixed; inset:0; z-index:120; padding:0;
  background:var(--bg);                       /* opaque: this is a window, not a sheet */
}
#billingCard.overlay.fs .tmodal,
#plansCard.overlay.fs .tmodal,
#annCard.overlay.fs .tmodal{
  background:var(--bg); width:100%; height:100%; max-width:none; max-height:none;
  border-radius:0; padding:0; box-shadow:none; display:flex; flex-direction:column; overflow:hidden;
}#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, #prefsHub .fsbar{
  background:var(--panel);                    /* NOT --bar (that is an accent here) */
  border-bottom:1px solid var(--line2); color:var(--mid);
}#billingCard .fsbody, #plansCard .fsbody, #annCard .fsbody, #prefsHub .fsbody{
  flex:1; min-height:0; overflow-y:auto; padding:26px 22px 40px;
}#billingCard .fsin, #plansCard .fsin, #annCard .fsin, #prefsHub .fsin{ margin:0 auto; width:100%; }/* Match the workspace name in the app bar (.wslabel): 14px / 700 / --mid /
   -0.2px. It was --fg here, which reads as highlighted next to the muted app one. */
#billingCard .fst, #plansCard .fst, #annCard .fst,
#prefsHub .fst, #prefsHub .fst{
  color:var(--mid); font-weight:calc(700 + var(--Wb, 0)); font-size:calc(14px * var(--Tk, 1)); letter-spacing:-.2px;
}#billingCard .fshome, #plansCard .fshome, #annCard .fshome, #billingCard .fsx, #plansCard .fsx, #annCard .fsx, #prefsHub .fshome, #prefsHub .fsx{
  width:34px;height:34px;border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px));display:flex;align-items:center;justify-content:center;
  color:var(--dim);cursor:pointer;transition:background .14s,color .14s;
}#billingCard .fshome:hover, #plansCard .fshome:hover, #annCard .fshome:hover, #billingCard .fsx:hover, #plansCard .fsx:hover, #annCard .fsx:hover, #prefsHub .fshome:hover, #prefsHub .fsx:hover{ background:var(--panel2); color:var(--fg); }#billingCard .fshome svg, #plansCard .fshome svg, #annCard .fshome svg, #billingCard .fsx svg, #plansCard .fsx svg, #annCard .fsx svg, #prefsHub .fshome svg, #prefsHub .fsx svg{ width:17px;height:17px; }#billingCard .fsdiv, #plansCard .fsdiv, #annCard .fsdiv, #prefsHub .fsdiv{ width:1px;height:18px;background:var(--line2); }#billingCard .fsbrand img, #plansCard .fsbrand img, #annCard .fsbrand img, #prefsHub .fsbrand img{ height:17px;width:auto;display:block; }#billingCard .fsbl, #plansCard .fsbl, #annCard .fsbl, #prefsHub .fsbl{ display:flex;align-items:center;gap:10px;justify-self:start; }#billingCard .fsbr, #plansCard .fsbr, #annCard .fsbr, #checkoutCard .fsbr, #prefsHub .fsbr{ justify-self:end; }#billingCard .fsbrand, #plansCard .fsbrand, #annCard .fsbrand, #prefsHub .fsbrand{ justify-self:center; }

/* ---- Fullscreen windows: CONTINUE the app's backdrop -----------------------
   Panos wanted the same background carrying on, not a fresh copy restarting.
   #bgart / #bgart2 / #appsky are body-level and position:fixed, so they keep
   running regardless of what is on top. Rather than drawing a second set inside
   the window, the window is transparent and the APP's content is hidden with
   visibility (which preserves layout and scroll position) — so the marks and
   stars you were already watching stay exactly where they were, mid-drift. */
body.fswin-open #app{visibility:hidden}
/* Settings and Checkout belong here too. They were added to the opaque rule above but not to
   this one, so they alone painted a flat --bg over the drifting marks and stars: the window
   looked like its background had been deleted. Every fullscreen window is transparent and
   lets the app backdrop run behind it. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#settingsCard.overlay.fs, #checkoutCard.overlay.fs,
#billingCard.overlay.fs .tmodal, #plansCard.overlay.fs .tmodal, #annCard.overlay.fs .tmodal,
#settingsCard.overlay.fs .tmodal, #checkoutCard.overlay.fs .tmodal{
  background:transparent;
}/* the window's OWN art copies are redundant now — the real ones show through */
#billingCard .fsart, #billingCard .fsart2, #plansCard .fsart, #plansCard .fsart2, #annCard .fsart, #annCard .fsart2, /* the window's OWN art copies are redundant now — the real ones show through */
#prefsHub .fsart, #prefsHub .fsart2, #prefsHub .fsart{ display:none }/* the bar stays solid so the title never sits on moving artwork */
/* No blur: the frosted bar made the crisp line-art icons look smeared. Solid. */
#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, #checkoutCard .fsbar, /* the bar stays solid so the title never sits on moving artwork */
/* No blur: the frosted bar made the crisp line-art icons look smeared. Solid. */
#prefsHub .fsbar, #prefsHub .fsbar{ background:var(--panel); }/* top-bar icons: match the app's own chrome proportions (34px hit area, 17px glyph
   was too small against the sidebar's icons) */
#billingCard .fshome, #plansCard .fshome, #annCard .fshome, #billingCard .fsx, #plansCard .fsx, #annCard .fsx,
#prefsHub .fshome, #prefsHub .fshome, #prefsHub .fsx{ width:36px;height:36px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px))}#billingCard .fshome svg, #plansCard .fshome svg, #annCard .fshome svg, #billingCard .fsx svg, #plansCard .fsx svg, #annCard .fsx svg, #prefsHub .fshome svg, #prefsHub .fsx svg{
  width:19px;height:19px;stroke-width:2;
}
/* the Billing ⇄ Plans link that replaced the close button */
/* Shaped like the app's own "Free plan · 1/3" chip rather than a bordered button,
   which read as a stray form control up in the chrome. */
.fslink{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;
  padding:6px 14px;font-size:calc(12.5px * var(--Tk, 1));font-weight:calc(700 + var(--Wb, 0));color:var(--accent-lt);cursor:pointer;
  font-family:inherit;transition:border-color .14s,background .14s;white-space:nowrap}
.fslink:hover{border-color:var(--accent);background:var(--panel)}

/* No blur anywhere on the fullscreen windows. `.rd.rd .overlay` carries
   backdrop-filter:blur(6px) for the small modals; on a fullscreen window that
   smeared the whole backdrop, so the drifting marks and stars behind it looked
   muddy and the crisp bar icons looked soft. These windows are opaque-by-content,
   not frosted sheets. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#settingsCard.overlay.fs, #checkoutCard.overlay.fs{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}/* Top bar layout: back arrow alone on the left; plan chip + house on the right. */
#billingCard .fsbr, #plansCard .fsbr, #annCard .fsbr, #checkoutCard .fsbr, /* Top bar layout: back arrow alone on the left; plan chip + house on the right. */
#prefsHub .fsbr, #prefsHub .fsbr{
  display:flex; align-items:center; gap:10px;
}
/* ★ 2026-08-12 (Panos spotted it): this said it "reuses the app's own .planbadge look" and
   then redefined every part of it — a --panel2 fill with a visible --line2 border against
   .planbadge's tinted --accent-dim fill and transparent border, plus 1px less padding and a
   monospace count. The chips carry BOTH classes, and .fsplan loads later, so the SAME control
   changed appearance the moment you clicked it and a fullscreen window opened over the app.
   It now really does reuse the look: the only thing left here is the svg's stroke reset, which
   the app's own bar does not need. Everything else comes from .planbadge.
   (`.fsplan` appears nowhere in _preview/*.html, so this is app-only despite living here.) */
.fsplan svg{stroke:none}/* Match the app's own top bar exactly. Measured from `.top` in the live app:
   background --side (#12161f), a --line bottom border, 56px tall, 19px wordmark.
   Previously this bar used --panel and --line2 with a 17px logo, which read as a
   slightly different, slightly heavier bar every time a window opened. */
#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar,
#prefsHub .fsbar, #prefsHub .fsbar{
  /* --topbar, NOT --side: the live app has no --side (that is a mockup name), so
     var(--side) resolved to nothing and the bar rendered transparent. Third time
     this class of bug has bitten — always check the variable exists here first. */
  background:var(--topbar); border-bottom:1px solid var(--line); height:56px;
}#billingCard .fsbrand img, #plansCard .fsbrand img, #annCard .fsbrand img, #prefsHub .fsbrand img{ height:19px; }

/* NO ANIMATION ON THE WINDOW CHROME. `.rd.rd .overlay.open` runs `ovIn` (a 0.18s
   fade) on the whole overlay, which fades the top bar in with it — that is the
   flash/darkening when opening Billing or switching to Plans. The bar must be
   there instantly and never move; only the content below it changes. */
#billingCard.overlay.fs, #plansCard.overlay.fs, #annCard.overlay.fs,
#billingCard.overlay.fs.open, #plansCard.overlay.fs.open, #annCard.overlay.fs.open{
  animation:none !important;
}#billingCard .fsbar, #plansCard .fsbar, #annCard .fsbar, #billingCard.overlay.fs.open .tmodal, #plansCard.overlay.fs.open .tmodal, #annCard.overlay.fs.open .tmodal, #prefsHub .fsbar{
  animation:none !important; transition:none !important;
}/* Optical alignment of the wordmark. Measured, every item in the bar shares the
   same centre line (28.5px in a 56px bar) — but the Arthur PNG carries a little
   more empty space below the glyph than above, so it reads as sitting low.
   1px of optical correction; nothing else in the bar moves. */
#billingCard .fsbrand img, #plansCard .fsbrand img, #annCard .fsbrand img,
#prefsHub .fsbrand img, #prefsHub .fsbrand img{
  position:relative; top:-1px;
}/* Plans sat 139px down the page with a lot of dead space above the headline.
   Pull the whole thing up so it starts near the top of the window. */
#plansCard .fsbody, /* Plans sat 139px down the page with a lot of dead space above the headline.
   Pull the whole thing up so it starts near the top of the window. */
#prefsHub .fsbody{ padding-top:14px; }#plansCard .fshero, #prefsHub .fshero{ margin-top:0; padding-top:8px; }#plansCard .fshero h2, #prefsHub .fshero h2{ margin-top:0; }

/* Takeaway / Delivery must NOT look like a table that needs paying — both were
   solid accent-blue with a left bar, which is exactly the "needs paying" style.
   These are ACTIONS, not statuses: dashed outline, no status bar, icon-led. */
.rd.rd #floor .ttile.tqtile{
  border:1.5px dashed var(--accent) !important;
  border-left:1.5px dashed var(--accent) !important;
  background:transparent !important;
  box-shadow:none;
}
.rd.rd #floor .ttile.tqtile:hover{
  background:var(--accent-dim) !important;
  border-style:solid !important;
}
.rd.rd #floor .ttile.tqtile .ttname{ color:var(--accent-lt); }
.rd.rd #floor .ttile.tqtile .ttsub{ color:var(--dim); }/* .fsbody is a flex row; .fsin picked up auto margins and was being centred
   VERTICALLY as well as horizontally, which is where the ~130px of dead space
   above the Plans headline came from. Pin it to the top. */
#billingCard .fsin, #plansCard .fsin, #annCard .fsin,
#prefsHub .fsin, #prefsHub .fsin{
  align-self:flex-start; margin-top:0;
}/* .fsbody is a COLUMN flex, so its justify-content:center was centring the content
   VERTICALLY — that was the ~130px of dead space above the Plans headline, not a
   margin. Start the content at the top and let it scroll normally. */
/* Billing/Announcements start at the top (long, scrolling content). Plans is a
   short fixed-height page, so it sits CENTRED — equal gap above and below —
   rather than hugging the top with a big void underneath. */
#billingCard .fsbody, #annCard .fsbody, .rd #billingCard .fsbody, .rd #annCard .fsbody,
#prefsHub .fsbody, .rd #prefsHub .fsbody{
  justify-content:flex-start !important;
}#plansCard .fsbody, .rd #plansCard .fsbody, #prefsHub .fsbody, .rd #prefsHub .fsbody{
  justify-content:center !important;
}

/* ===================================================================
   NEW ORDER screen — clipping fix + a proper visual pass (2026-07-26)
   =================================================================== */

/* THE CLIPPING BUG. #menuItemsGrid is a scroll container (overflow-y:auto) and the
   first row of cards sat flush against its top edge (measured: 0px). A card lifts
   2px on hover and draws an accent border when selected, and all of that was being
   sliced off at the top — the "highlight gets cut" Panos kept reporting. Inset the
   scroll box and pull it back with a negative margin so the layout doesn't shift.
   !important because the app sets grid properties on this id with !important too. */
#menuItemsGrid{
  padding:8px 8px 12px !important;
  margin:-8px -8px 0 !important;
}

/* --- the item cards ------------------------------------------------------- */
#menuItemsGrid .menubtn{
  background:var(--panel) !important;
  border:1px solid var(--line2) !important;
  border-radius:calc(14px * var(--Rk, 1) + var(--Rf, 0px)) !important;
  padding:15px 14px !important;
  gap:8px;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
#menuItemsGrid .menubtn:hover{
  border-color:var(--accent) !important;
  background:var(--panel2) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55);
}
#menuItemsGrid .menubtn:active{ transform:translateY(0); }
/* the name leads, the price is quiet and monospaced so columns line up */
#menuItemsGrid .menubtn .mname{ font-size:calc(14.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); line-height:calc(1.3 * var(--Lh, 1)); letter-spacing:-.1px; }
#menuItemsGrid .menubtn .mprice{
  font-family:var(--mono); font-size:calc(12.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0));
  color:var(--accent-lt); background:transparent; padding:0;
}

/* --- category / subcategory chips ----------------------------------------
   Matched to the control room's space toggle, measured from the live app:
   8px radius, 7px 15px padding, 13px/700, no border; inactive = transparent on
   --mid, active = solid --accent on white. The pill-with-outline version here
   looked like a different, cheaper control. */
.no-menu .chipstrip .chip{
  border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px)) !important; padding:7px 15px !important;
  font-size:calc(13px * var(--Tk, 1)) !important; font-weight:calc(700 + var(--Wb, 0)) !important;
  border:0 !important; background:transparent !important; color:var(--mid) !important;
  transition:background .14s ease, color .14s ease;
}
.no-menu .chipstrip .chip:hover{ background:var(--panel2) !important; color:var(--fg) !important; }
.no-menu .chipstrip .chip.active,
.no-menu .chipstrip .chip.on{
  background:var(--accent) !important; color:#fff !important;
}

/* --- the order/cart panel ------------------------------------------------- */
.no-cart{
  background:var(--panel) !important;
  border:1px solid var(--line2) !important;
  border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px)) !important;
}
.no-carthead{
  font-size:calc(14px * var(--Tk, 1)); font-weight:calc(800 + var(--Wb, 0)); letter-spacing:-.2px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.no-cart .cempty{ color:var(--dim); font-size:calc(13px * var(--Tk, 1)); }
.no-total{
  border-top:1px solid var(--line2); padding-top:14px; margin-top:14px;
  font-size:calc(15px * var(--Tk, 1)); font-weight:calc(800 + var(--Wb, 0));
}
.no-total span:last-child{ font-family:var(--mono); font-size:calc(19px * var(--Tk, 1)); letter-spacing:-.5px; }
.noSend, #sendOrder{
  border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px)) !important; font-weight:calc(800 + var(--Wb, 0)) !important; letter-spacing:-.1px;
}

/* ===== TAKE PAYMENT popup ==================================================
   Discount / Split / Tip as expandable rows with an icon, a one-line hint and
   the current value, then a plain money breakdown and two big pay buttons.
   The row BODIES are the app's existing #tableDiscount / #tableSplit / #tipBox
   nodes, so all the money logic is untouched. */
.payrow2{border:1px solid var(--line2);border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));background:var(--panel2);margin-bottom:10px;overflow:hidden}
.payrow2.open{border-color:var(--accent)}
.payrow2-head{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;color:inherit}
.payrow2 .pr-ic{width:38px;height:38px;border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px));background:var(--accent-dim);color:var(--accent-lt);
  display:flex;align-items:center;justify-content:center;flex:none}
.payrow2 .pr-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.payrow2 .pr-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.payrow2 .pr-lbl{font-size:calc(15.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--fg)}
.payrow2 .pr-sub{font-size:calc(12px * var(--Tk, 1));color:var(--dim)}
.payrow2 .pr-val{font-size:calc(14px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--mid);white-space:nowrap;font-family:var(--mono)}
.payrow2.open .pr-val{color:var(--accent-lt)}
.payrow2 .pr-chev{display:flex;color:var(--dim);transition:transform .2s;flex:none}
.payrow2 .pr-chev svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.payrow2.open .pr-chev{transform:rotate(180deg)}
.payrow2 .tm-panel,.payrow2 #tipBox{padding:0 14px 14px}

.paysum2{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
/* the values sat hard against the right edge of the panel — pulled in 12px, the same right rail
   the bill card on the table uses, so the two readouts line up with each other (Panos, 2026-07-29) */
.paysum2 .ps-row{display:flex;justify-content:space-between;gap:14px;font-size:calc(13.5px * var(--Tk, 1));
  color:var(--dim);padding:5px 12px 5px 0}
/* ★ 2026-08-15 - THE MONO FACE IS FOR FIGURES. Every value took it, so "Not split" and
   "Cash + card" were set in the same wide typewriter face as the money and came out looking
   like the most important thing on the panel. Money keeps the mono - it is what makes a
   column of prices line up - and a value that is WORDS gets the normal face. */
.paysum2 .ps-row span:last-child{font-family:var(--mono);color:var(--mid)}

.paysum2 .ps-row span.g{color:var(--good)}
.paysum2 .ps-tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding:12px 12px 0 0;border-top:1px solid var(--line2);font-size:calc(16px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));color:var(--fg)}
.paysum2 .ps-tot b{font-family:var(--mono);font-size:calc(30px * var(--Tk, 1));letter-spacing:-1.2px}

.paybtns2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
.paybig{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:calc(13px * var(--Rk, 1) + var(--Rf, 0px));
  border:0;font-size:calc(15.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));cursor:pointer;font-family:inherit;transition:filter .14s}
.paybig:hover{filter:brightness(1.07)}
.paybig.cash{background:var(--good);color:#04121f}
.paybig.card{background:var(--accent);color:#fff}

/* Pay buttons: label + icon only, no amount (the Total above is the one source of
   truth for the figure). Slightly calmer than the first pass. */
#payMethods .paybig{ font-size:calc(15px * var(--Tk, 1)); letter-spacing:-.1px; }
#payMethods .paybig svg{ width:17px; height:17px; opacity:.9; }
/* the two secondary actions read as secondary, not as two more pay buttons */
#payMethods #paySplitBtn, #payMethods #payBack{
  width:100%; margin-top:9px; padding:13px; border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));
  background:transparent; border:1px solid var(--line2); color:var(--mid);
  font-size:calc(13.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); font-family:inherit; cursor:pointer;
  transition:border-color .14s, color .14s, background .14s;
}
#payMethods #paySplitBtn:hover{ border-color:var(--accent); color:var(--accent-lt); background:var(--panel2); }
#payMethods #payBack:hover{ border-color:var(--line2); color:var(--fg); background:var(--panel2); }

/* Payment method picker: Cash / Card as toggles (either, or both for a part-cash
   part-card bill), then one Proceed button. Replaces the old "Cash+card" mode. */
.paypick{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 12px}
.paypick-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;
  border-radius:calc(12px * var(--Rk, 1) + var(--Rf, 0px));border:1.5px solid var(--line2);background:var(--panel);
  color:var(--mid);font-size:calc(14.5px * var(--Tk, 1));font-weight:calc(800 + var(--Wb, 0));font-family:inherit;cursor:pointer;
  transition:border-color .14s,background .14s,color .14s}
.paypick-btn:hover{border-color:var(--accent);color:var(--fg)}
.paypick-btn svg{width:17px;height:17px;opacity:.9}
#payCash.on{background:var(--good);border-color:var(--good);color:#04121f}
#payCard.on{background:var(--accent);border-color:var(--accent);color:#fff}
#paySplitBox{padding:0 14px 14px}

.paybig.proceed{width:100%;margin-top:16px;background:var(--accent);color:#fff}
.paybig.proceed.dim{background:var(--panel2);color:var(--dim);cursor:default;filter:none}
.paybig.proceed:disabled{cursor:default}
/* ★ 2026-08-15 - QUIET. These two were deliberately bold and near-white from an earlier
   pass, so "Cash" outweighed the EUR 25.00 sitting under it and the block read upside down:
   the loudest line was the one carrying the least. They now match the money's own weight and
   colour, just in the text face rather than the figures one. */
#payMethods .ps-row#psMethodRow span:last-child,
#payMethods .ps-row#psSplitRow span:last-child{color:var(--mid);font-family:inherit;
  font-weight:calc(400 + var(--Wb, 0));font-size:calc(13px * var(--Tk, 1))}

/* renderSplitPay() still draws its own "Record payment" button, which is now
   redundant — Proceed at the bottom submits, whatever the method. Hidden rather
   than removed from the JS so the split maths and its live "€x left" note (which
   Proceed validates against) stay exactly as they are. */
#paySplitBox #psConfirm{ display:none !important; }

/* 1. Breathing room under the table name in the payment popup — the first row was
      sitting right against "Table 1 #2072e". */
#payMethods .payrow2:first-of-type{ margin-top:16px; }

/* 2. The grey rule under the New Order top bar (Table / Round / People) cut the
      screen in half. Replaced with a soft accent line that reads as part of the
      design rather than a divider dropped on top of it. */
.no-bar, .rd.rd .no-bar{
  border-bottom:1px solid transparent !important;
  border-image:linear-gradient(90deg, var(--accent) 0%, rgba(59,130,246,.25) 45%, transparent 85%) 1 !important;
}

/* 3. Takeaway / Delivery: filled action buttons, no outline at all. Table tiles are
      either dashed (empty) or carry a coloured left status bar, so anything with a
      border still read as "a table". These are solid, borderless and icon-led. */
#floorTables .ttile.tqtile{
  border:0 !important;
  background:var(--accent-dim) !important;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.18) !important;
}
#floorTables .ttile.tqtile:hover{
  background:var(--accent) !important;
  box-shadow:none !important;
}
#floorTables .ttile.tqtile:hover .ttname,
#floorTables .ttile.tqtile:hover .ttsub{ color:#fff !important; }

/* Kitchen ticket header: label, order id, round + elapsed, chevron — all on one
   line. The id is deliberately quiet (it is a reference, not a status) and sits
   BEFORE the timer so the eye still lands on how long the ticket has been waiting. */
.kcube .khead{ display:flex; align-items:center; gap:8px; }
.kcube .khead b{ flex:none; }
.kcube .koid{
  font-family:var(--mono); font-size:calc(10.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); color:var(--dim);
  background:var(--panel2); border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px)); padding:2px 7px; flex:none; letter-spacing:.3px;
}
.kcube .kwait{ margin-left:auto; }

/* ---- Kitchen ticket refinements (2026-07-26) ------------------------------ */

/* Round as a small blue chip, elapsed time as plain muted text — the single green
   "R1 · 9′" pill was one heavy blob. Mockup proportions, current colour language. */
.kcube .kround{
  font-family:var(--mono); font-size:calc(11px * var(--Tk, 1)); font-weight:calc(800 + var(--Wb, 0)); letter-spacing:.3px;
  color:var(--accent-lt); background:var(--accent-dim);
  border-radius:calc(6px * var(--Rk, 1) + var(--Rf, 0px)); padding:2px 7px; flex:none;
}
.kcube .kwait{
  font-family:var(--mono); font-size:calc(12px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); color:var(--dim);
  background:none !important; border-radius:0; padding:0; margin-left:0; flex:none;
}
.kcube .khead{ gap:7px; }
/* Label left, everything else right. It may SHRINK, though: `flex:none` above meant a
   real table name ("Table Μπαλκόνι 2") held its full width and pushed the timer and the
   collapse arrow off the end of the ticket (Panos, 2026-07-27). Now the name is the only
   part that gives way, and it truncates instead of stealing the chips' space. */
.kcube .khead b{ margin-right:auto; flex:0 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Quantities were hard to read against the item name. Give them the accent and a
   little width so the eye picks out "4×" before the word. */
.kcube .kitems > .kgroup > div:not(.klabel){ font-size:calc(13.5px * var(--Tk, 1)); line-height:calc(1.65 * var(--Lh, 1)); }
.kcube .kitems .kqty, .kcube .kitems b{ color:var(--accent-lt); font-family:var(--mono); font-weight:calc(800 + var(--Wb, 0)); }

/* Ready / Mark ready was oversized. Thinner, tighter, still the primary action. */
.kcube .kactions button.primary{
  font-size:calc(13px * var(--Tk, 1)) !important; font-weight:calc(700 + var(--Wb, 0)) !important;
  padding:8px 12px !important; border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px)) !important; min-height:0 !important;
}

/* Collapsed = header only. The action button stayed visible, so a folded ticket was
   still two rows tall; the mockup shows just the table and its details. */
.kcube.collapsed .kactions{ display:none !important; }
.kcube.collapsed{ padding-bottom:12px; }

/* Header order: table name + order id together on the left (they identify the
   ticket), then a spacer, then round + timer on the right (its live status). */
.kcube .khead b{ margin-right:0 !important; }
.kcube .kspacer{ flex:1 1 auto; }
.kcube .koid{ margin-right:2px; }

/* Quantities: bold + accent so "5×" reads before the item name at a glance across
   a busy pass. This is the number a cook acts on. */
.kcube .kitems > .kgroup > div:not(.klabel){
  font-size:calc(13.5px * var(--Tk, 1)); line-height:calc(1.7 * var(--Lh, 1)); color:var(--fg);
}
.kcube .kitems > .kgroup > div:not(.klabel)::first-line{ font-weight:calc(400 + var(--Wb, 0)); }
.kcube .kqty{ color:var(--accent-lt) !important; font-weight:calc(800 + var(--Wb, 0)) !important; font-family:var(--mono) !important; }

/* READY tickets: "Picked up" takes the width, the bell is a small square nudge
   beside it in amber (it is a reminder, not the main action). Mockup proportions. */
.kcube .kactions button.primary{ flex:1 1 auto; }
.kcube .kactions button.ping{
  flex:0 0 auto !important; width:42px; padding:8px 0 !important;
  background:transparent !important; border:1px solid var(--line2) !important;
  color:var(--warn) !important; border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px)) !important;
  display:flex; align-items:center; justify-content:center;
}
.kcube .kactions button.ping:hover{ border-color:var(--warn) !important; background:rgba(245,166,35,.10) !important; }
.kcube .kactions button.ping svg{ width:17px; height:17px; }
.kcube .kactions button.ping.cooling{ opacity:.45; }

/* Covers on a kitchen ticket: person icon + count, quiet, left of the round chip. */
.kcube .kppl{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  font-family:var(--mono); font-size:calc(12px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); color:var(--dim);
}
.kcube .kppl svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* READY tickets: "Picked up" is a QUIET outlined button, not a bright blue primary.
   The work is already done at this point — picking up is an acknowledgement, not
   the urgent action "Mark ready" is. Matching the bell's weight makes the pair read
   as one control group instead of two mismatched buttons. Targeted by data-kdone so
   "Mark ready" (data-kready) keeps its blue. */
.kcube .kactions button[data-kdone]{
  background:transparent !important;
  border:1px solid var(--line2) !important;
  color:var(--fg) !important;
  font-size:calc(13px * var(--Tk, 1)) !important; font-weight:calc(700 + var(--Wb, 0)) !important;
  padding:9px 12px !important; border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px)) !important;
  min-height:38px !important; box-shadow:none !important;
}
.kcube .kactions button[data-kdone]:hover{
  border-color:var(--good) !important; color:var(--good) !important;
  background:rgba(53,201,141,.08) !important;
}
/* bell: same height and radius as the button beside it, so they line up exactly */
.kcube .kactions button.ping{
  width:38px !important; min-height:38px !important; padding:0 !important;
  border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px)) !important; border:1px solid var(--line2) !important;
}
.kcube .kactions{ align-items:stretch; gap:8px; }

/* =====================================================================
   2026-07-29 — these are LAST in the file ON PURPOSE. .memrole, .memnm and
   .memrow are each redefined three or four times higher up, so anything
   placed above would silently lose. Do not move this block.
   ===================================================================== */

/* ---- member row --------------------------------------------------------
   It stacked name, email AND role in one vertical column, which is exactly
   why it read as cramped. Now: name and email stacked on the left, the role
   beside them on the right and vertically centred, Remove at the far edge. */
.rd.rd .memtxt{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nm role" "mail role";align-items:center;column-gap:12px;min-width:0}
.rd.rd .memtxt .memnm{grid-area:nm;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .memtxt .memmail{grid-area:mail;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd.rd .memtxt .memrole{grid-area:role;justify-self:end;margin-top:0;white-space:nowrap}

/* ---- PC: screens and modals that were still phone-width -----------------
   Same complaint as the table popup: a narrow column stranded in the middle
   of a wide screen. Stats was capped at 680px inside a 1099px container. */
@media (min-width:1000px) and (min-height:700px){
  /* Inventory and Activity are LISTS capped at 680px inside a 1099px container, exactly as Stats
     was. Lists gain more from width than forms do — more rows readable without scrolling. */
  .rd.rd #statsPanel.setwrap,
  .rd.rd #inventoryPanel.setwrap,
  .rd.rd #activityPanel.setwrap{max-width:1040px}
  /* Two traps here. First, .rd sits on the modal ITSELF, not on an ancestor, so a
     `.rd.rd #cashupModal` selector never matches. Second, the 430px is an INLINE style attribute
     in the markup, which no selector can outrank — hence !important, which is the correct tool
     for exactly this case and not laziness. */
  #cashupModal .modal.rd{max-width:620px!important}
}

/* The checkout screen reuses the signup wizard's field styling, which is sentence case.
   Without this the app-wide .tmodal label rule SHOUTS every label on that one screen and the
   two checkouts stop looking like the same thing. */
.rd.rd #koBody .nwlbl{text-transform:none;letter-spacing:0}


/* ============================================================================
   GRID OFF — Panos, 2026-08-03. Matches the same change in backdrop.css: the
   fullscreen table modal drew its own copy of the grid, so without this it
   would be the one surface in the app still showing lines.
   ★ TO RESTORE: delete this block.
   ============================================================================ */
.rd.rd .overlay.fs .tmodal::before { background-image: none !important; }


/* ============================================================================
   2026-08-13 - THE ACTION BUTTON IS NOT THE TICKET.
   "Mark ready" ran the FULL WIDTH of the card, so on a board full of food the
   loudest thing on screen was a blue slab repeated down the page (Panos: "it's
   huge, it actually distracts me"). A cook reads the dishes; the button is one
   tap they make once, at the end. So it now sits where a confirm button belongs:
   compact, on the right, under the food rather than shouting over it.
   Still 38px tall, which is the tap-target floor - narrower, never shorter.
   `!important` because `#floor .kcube .kactions button.primary` is ID-scoped
   higher up and would otherwise win on padding.
   ============================================================================ */
.kcube .kactions{ justify-content:flex-end !important; }
.kcube .kactions button.primary{
  /* flex alone was not enough: the base `button.primary` carries width:100%, so the button
     stayed full width with flex:0 0 auto. Width has to be released explicitly. */
  flex:0 0 auto !important;
  width:auto !important;
  padding:8px 18px !important;
  min-height:38px !important;
}
@media(max-width:768px){
  .kcube .kactions button.primary{ padding:8px 16px !important; }
}


/* ============================================================================
   2026-08-13 - NO STANDING GLOW ON A TICKET.
   A permanent coloured wash and halo per state was tried and pulled: with a
   board full of cards it read as decoration, and colour that is always on
   stops meaning anything. The status stripe carries the state; ATTENTION is
   carried by a one-second flash when something actually changes (.knew on a
   kitchen ticket, .tnew on a floor or delivery tile). Motion for events,
   colour for state.
   ============================================================================ */

/* The action button: blue on white text, but lit rather than flat. A top inner
   highlight for the raised edge, a soft accent glow underneath, and a press
   state that actually moves. */
.kcube .kactions button.primary{
  background:linear-gradient(180deg,
      color-mix(in srgb, #fff 14%, var(--accent)) 0%,
      var(--accent2) 100%) !important;
  color:#fff !important;
  border:1px solid color-mix(in srgb, #fff 24%, var(--accent2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 2px 10px -2px color-mix(in srgb, var(--accent) 60%, transparent) !important;
  letter-spacing:.2px !important;
  transition:filter .15s ease, box-shadow .15s ease, transform .06s ease !important;
}
.kcube .kactions button.primary:hover{
  filter:brightness(1.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 3px 14px -2px color-mix(in srgb, var(--accent) 70%, transparent) !important;
}
.kcube .kactions button.primary:active{
  transform:translateY(1px) !important;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.28) !important;
}
@media(prefers-reduced-motion:reduce){
  .kcube .kactions button.primary{ transition:none !important; }
}


/* ============================================================================
   2026-08-13, round 5 - THE STRIPE FOLLOWS THE CARD'S CURVE.
   It was drawn as a pseudo-element CAPSULE (inset 7px top and bottom, square ends). Against a
   card with an 11px corner radius that reads as a straight line stuck on a curved shape - his
   words: "it's a straight line even though it's curving in the actual thingy". A pseudo-element
   cannot be made to follow a rounded corner without either `overflow:hidden` (which clips at the
   PADDING box, so it would eat a stripe drawn over the border) or repainting the corner by hand.
   ★ The card's OWN left border already follows the border-radius perfectly, for free, at every
     width - including the 4px border the phone breakpoint sets. So the stripe is a border again
     and the capsule is gone. The per-state colour is the app's own (arthur-ui-v2.html ~4621).
   The cadence moved to the glow below, which is a far bigger thing to see across a kitchen than
   a 5px edge ever was.
   ============================================================================ */
.kcube{ position:relative; }

/* ✖ THE GLOW IS GONE (2026-08-14). It ran for seven rounds: a left-edge wash, then a linear
   sweep, then a radial off the left, then off the right, then off the top-right corner, dimmed
   45%, then restricted to collapsed tickets only. He killed it: "remove it, it just doesn't look
   good". He is right, and the pattern is worth keeping even though the code is not:
   ★ SEVEN ROUNDS OF TUNING ONE EFFECT MEANS THE EFFECT IS THE PROBLEM, NOT ITS SETTINGS. Every
     round fixed the last complaint and produced a new one, because a coloured wash on a card that
     already carries a coloured edge, a coloured number and coloured labels was never solving
     anything - it was competing. The state is said by the edge and the clock, and that is enough.
   `isolation:isolate` stays on .kcube: it costs nothing and any future ::after would need it. */
/* The fresh ticket's time chip was GREY while amber and red kept their colour, because
   `.kcube .kwait` above sets --dim and the app's own `.kcube.warn .kwait` / `.late .kwait`
   out-specify it - green had no rule of its own to win with, so it fell through to grey
   (Panos: "why is it gray?"). It gets one now. Amber and red are untouched: (0,3,0) beats this. */
.kcube .kwait{ color:var(--good); }

/* ★ 2026-08-13 - THE TICKET IS NOT A BLOCK OF COLOUR. The app mixes the state flat into the
   whole card (`.kcube.warn` = warn 6% into panel, `.late` = bad 7%). That was the right answer
   when the alternative was a TRANSLUCENT card letting the backdrop through - but under the glow
   it reads as one uniform wash, and beside a Service tile, which fades cleanly off its own
   corner, the ticket looked flat and muddy: "the kitchen ones don't have this nice fade".
   The card is a neutral panel again and the glow is the only colour on it, so the fade reads.
   The state is still said three ways: the edge, the glow, and the time chip.
   ⚠ Still OPAQUE - `var(--panel)`, not a translucent tint. That rule stands: a see-through
   ticket let the app's backdrop image through and was unreadable the moment it turned red. */
.kcube.warn, .kcube.late{ background:var(--panel); }
/* 2026-08-13, round 6 - THE EDGE MOVES, THE LIGHT HOLDS STILL.
   Round 4 put the cadence on the glow, which was wrong twice over: the thing he wanted to see
   breathing is the EDGE, and a wash that fades in and out underneath the item list makes the
   list harder to read ("with the fade it's kinda hard to read"). Nothing that sits behind text
   should ever animate.
   The stripe is the card's left BORDER now (round 5, so it follows the corner radius), and a
   border cannot be faded with opacity - opacity would take the whole card with it. So the
   colour itself is animated, mixing back towards the panel and out again. `.ttile` has done
   exactly this since July; same trick, same shape of keyframe.
   A card that is still .knew wins the `animation` property with (0,3,0) for its 1.4s entrance
   and picks the breathing up straight after. That is fine - it is announcing itself louder. */
/* One long hold, one short dip: a heartbeat, not a strobe. */
@keyframes edgeBreathe{ 0%,86%,100%{ border-left-color:var(--warn) }
                        93%{ border-left-color:color-mix(in srgb, var(--warn) 26%, var(--panel)) } }
@keyframes edgePulse{   0%,100%{ border-left-color:var(--bad) }
                        50%{ border-left-color:color-mix(in srgb, var(--bad) 28%, var(--panel)) } }
.kcube.warn{ animation:edgeBreathe 10s ease-in-out infinite; }
.kcube.late{ animation:edgePulse 1.15s ease-in-out infinite; }
/* ★ 2026-08-14 - THE CADENCE OBEYS THE BACKGROUND MOTION SWITCH. It did not, and that was an
   oversight with a real edge to it: Settings > Background motion turned off the drifting marks
   and the stars, and left every late ticket pulsing 52 times a minute anyway. Somebody who
   switches motion off has told us they do not want things moving; a heartbeat in their
   peripheral vision for an eight-hour shift is exactly the thing they were switching off.
   `prefers-reduced-motion` above already covered the OS-level case. This covers ours. */
html[data-motion="off"] .kcube.warn,
html[data-motion="off"] .kcube.late{ animation:none !important; }

/* ★ 2026-08-13 - NOTHING ON THE SERVICE FLOOR BREATHES. The tiles used to carry the same
   cadence as the kitchen tickets, and he was clear about why that is wrong: "these are just
   tables". A table is a place, not a job with a clock on it - the pulse means SOMEONE IS
   WAITING FOR FOOD, and that belongs to the kitchen ticket alone.
   ★ Motion is a claim on attention. Spend it only where somebody has to act.
   (The tile keyframe went with the rule, and the [data-fstat="ready"] opt-out with it - there
   is no longer an animation for it to opt out of.) */

@media (prefers-reduced-motion:reduce){
  .kcube.warn, .kcube.late{ animation:none !important; }
}

/* ★★ 2026-08-14 - ONE ARROW IN THE WHOLE APP. "The arrow is different everywhere." He is right,
   and the SVG was never the problem - there is exactly one chevron path in the file, used 23
   times. The mismatches came from the two places that were not drawing it:
     1. NATIVE <select>s. 28 of them, and only `.modal select` had ever been given the app's
        chevron - every other dropdown was still showing the OPERATING SYSTEM's arrow, which is a
        filled triangle on Windows and Android. Same control, different arrow, screen to screen.
     2. The collapse arrows, which are TEXT (▾ / ▸) written by JS. A glyph can never match a
        stroked SVG: different weight, different corners, different optical size.
   Both wear the same chevron now - the selects as a background image, the glyphs as a MASK over
   the text (font-size:0 hides the character, the mask paints the real shape in currentColor).
   ⚠ Rotation is class-driven and already existed: `.kcube.collapsed .kchev` and
   `.collcard:not(.open) .collchev` above. The mask image is a plain DOWN chevron; nothing here
   rotates it, so those rules keep doing exactly what they did with the glyphs. */
select{ appearance:none !important; -webkit-appearance:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868e9a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 11px center !important;
  background-size:13px !important; padding-right:34px !important; }
/* the picker's own hidden select must stay hidden, and range/date inputs are not selects */
.spacesel{ background-image:none !important; padding-right:0 !important; }

.kchev, .collchev, .featchev{
  font-size:0 !important; line-height:calc(0 * var(--Lh, 1)); width:14px; height:14px; display:inline-block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }

/* ★ THE TIMER. `3803′` was four digits of noise in the loudest colour on the ticket; it reads
   `2d15h` now (see waitLabel() in arthur-ui-v2.html). The figure carries the weight and the unit
   sits back at 70% of its size and 55% opacity, which is what makes a number look like a clock
   rather than a word. Tabular figures so the row cannot jitter as the minutes tick over. */
.kcube .kwait{ display:inline-flex; align-items:baseline; gap:0;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:calc(13.5px * var(--Tk, 1)); font-weight:calc(800 + var(--Wb, 0)); letter-spacing:-.2px; }
.kcube .kwait .kwu{ font-size:calc(10px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); opacity:.5; margin-left:1.5px; }

/* ✖ THE PILL IS GONE (2026-08-14). It existed to lift the number off the card while a coloured
   glow washed across that corner. The glow is gone, the corner is plain panel, and a box drawn
   around a number that nothing is crowding is just a box.
   ★ A CONTAINER EARNS ITS PLACE BY SEPARATING TWO THINGS. Delete what it was separating the
     number from and the container goes with it.
   (The prime came back in the same round, for the mirror-image reason - see waitLabel().) */

/* ============================================================================
   2026-08-14 - THE TICKET, ROUND 7. Four things he called, all on the same card.
   ============================================================================ */

/* 1. THE GLOW BELONGS TO THE CLOSED TICKET ONLY. Open, the card is a LIST - the light was
      landing on food you are trying to read, and it had to fight the timer for the same corner.
      Closed, the card is a STATUS LINE: one row, nothing to read but the table and the clock,
      and there the light is the whole point. So it fades in when the ticket closes and out when
      it opens, on opacity, which costs nothing and never touches layout. */


/* 2. ✖ THE NUMBER NO LONGER FLICKERS (2026-08-14). It breathed with the edge for one round and
      he cut it: two things pulsing on one card is one too many, and the timer is the thing you
      READ - a number that fades while you are reading it is worse than a number that sits still.
      The edge keeps the cadence. It is peripheral, which is exactly what motion is good at. */
/* 3. THE BUTTON STOPS GLOWING, AND IT IS THE SAME BLUE AS EVERYTHING ELSE.
      It was a lit control: a two-tone gradient, a white inner highlight along the top, a border
      one shade lighter again and an accent glow underneath. On a card that has had every other
      depth trick stripped off it, that button was the last plastic object on the screen.
      ★ AND IT WAS A DIFFERENT BLUE. The course labels (ΟΡΕΚΤΙΚΑ ...) are var(--accent); the
      button's gradient ran from accent mixed with 14% WHITE down to var(--accent2), so it read
      brighter and cooler than every other blue on the ticket. He spotted that. One flat
      var(--accent) now - the same hex the labels use - and it darkens to accent2 on press,
      which is the only moment a button should change at all. */
/* ★ 2026-08-14 - AND IT IS NOT A SLAB OF BLUE ANY MORE. Flat accent was honest but far too
   loud: a solid saturated block, the largest single colour on a card whose whole job is to show
   food and a clock. It wore the same weight as the state, so a green ticket and a red ticket both
   shouted the same blue at you.
   It is a TINTED button now - the app's own chip language (the R1 chip, the filter pills): a low
   wash of accent, a hairline of it round the edge, and the label in accent-lt. Still the only
   filled thing in the footer, so it is still obviously THE action, but it sits at the weight of a
   control rather than a billboard. It fills in properly on press, which is where the emphasis
   belongs - the moment you commit, not the eight hours you spend looking at it. */
.kcube .kactions button.primary{
  background:color-mix(in srgb, var(--accent) 15%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent) !important;
  color:var(--accent-lt) !important;
  font-size:calc(13.5px * var(--Tk, 1)) !important; padding:8px 15px !important;
  box-shadow:none !important; filter:none !important; }
.kcube .kactions button.primary:hover{
  background:color-mix(in srgb, var(--accent) 24%, transparent) !important;
  border-color:color-mix(in srgb, var(--accent) 60%, transparent) !important;
  box-shadow:none !important; filter:none !important; }
.kcube .kactions button.primary:active{
  background:var(--accent) !important; color:#fff !important;
  transform:translateY(1px) !important; box-shadow:none !important; }

/* 4. THE CONTENT WAS 3px OFF CENTRE, and he could see it. The stripe is the card's LEFT BORDER,
      so it takes part in layout: 4px of border + 12px of padding puts everything 16px in from
      the left, while the right side is 12px of padding + a 1px border = 13px. Every line on the
      card, including the button, sat three pixels left of where it should.
      ★ A BORDER USED AS DECORATION STILL COSTS LAYOUT. Pay it back on the opposite side.
      Each breakpoint states its own number because each one sets a different border and padding:
      desktop 5+13, phone 4+12, landscape-phone 4+10. */
.kcube{ --kpl:13px; --kpr:17px; padding-right:var(--kpr); }
@media (max-width:600px){ .kcube{ --kpl:12px; --kpr:15px; } }
@media (orientation:landscape) and (max-height:700px){ .kcube{ --kpl:10px; --kpr:13px; } }

/* ============================================================================
   2026-08-14 - THE FOOTER. The band under the dishes held one button and a lot of nothing.
   ============================================================================ */

/* The action gets its own band, fenced off by a hairline. A ticket now reads top to bottom as
   three things: WHO is waiting (header), WHAT they ordered (list), WHAT YOU DO (footer). Before,
   the button floated at the end of the food with nothing separating a thing you READ from a thing
   you PRESS - which is why the corner felt loose no matter where the button sat. */
/* ★ 2026-08-14 - THE DIVIDER GOES EDGE TO EDGE. As a plain `border-top` it stopped where the
   card's padding stopped, so it hung in the middle of the card with a gap at each end - a line
   that starts and ends in mid-air reads as a seam, not a section ("it looks very weird, the thing
   between the mark ready place and the food place"). Pulled out to both edges with negative
   margins and given the padding back on the inside, it becomes what it was meant to be: the
   ticket's bottom BAND. The padding lives in two custom properties because the left and right
   insets are deliberately different - the stripe is a border and eats 4px of the left. */
.kcube .kactions{ align-items:center;
  margin:11px calc(-1 * var(--kpr)) 0 calc(-1 * var(--kpl));
  padding:var(--kpr) var(--kpr) 0 var(--kpl);   /* the 1px border-top completes it: 15+1 = the 16 below */
  border-top:1px solid var(--line); }
.kcube.collapsed .kactions{ display:none !important; }

/* Round, covers and item count, hard left; the button stays hard right. `margin-right:auto` does
   the whole job - no justify-content to fight the existing flex-end. */
.kcube .kmeta{ margin-right:auto; display:inline-flex; align-items:center; gap:9px; min-width:0; }
.kcube .kmeta .kround{ margin:0; }
.kcube .kcount{ display:inline-flex; align-items:center; gap:4px;
  font-family:var(--mono); font-size:calc(11.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); color:var(--dim);
  font-variant-numeric:tabular-nums; }
.kcube .kcount svg{ width:13px; height:13px; flex:none; opacity:.75; }
.kcube .kmeta .kppl{ display:inline-flex; align-items:center; gap:4px;
  font-family:var(--mono); font-size:calc(11.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); color:var(--dim); }
.kcube .kmeta .kppl svg{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }

/* ★ THE BUTTON SITS THE SAME DISTANCE FROM BOTH EDGES IT TOUCHES. The right inset was fixed
   earlier; the BOTTOM was still short, so the button was 16px from the right and 12px from the
   floor of the card and read as sitting low in its corner ("it's unaligned with the corner and
   it's pissing me off"). A corner is two edges - fixing one of them just moves the error. */
.kcube{ padding-bottom:var(--kpr); }

/* ★ 2026-08-14 - OPTICAL ALIGNMENT OF THE CHEVRON. He kept saying the ticket "isn't perfectly
   aligned" in both states and he was right, but nothing was wrong with the BOXES: the table name,
   the item list, the footer meta, the button and the chevron all measure exactly 16px from their
   edges. The chevron is the odd one because most of its box is empty - the arrow path occupies
   the middle half of a 24-unit viewBox, so inside a 13px icon the visible ink stops about 3px
   short of the icon's own right edge. Box-aligned, ink-misaligned, on every single ticket, and
   in the collapsed row it is the ONLY thing on the right, which is why the closed one felt worst.
   ★ ALIGN THE INK, NOT THE BOX. An icon's bounding box is padding you cannot see; if it does not
     touch its own edges you have to pay that difference back yourself.
   (3px, from the geometry: path spans 25-75% of the viewBox, 1.4px of stroke sits outside that.) */
.kcube .kchev{ margin-right:-3px; }

/* ★ 2026-08-14 - THE BUTTON SITS IN THE MIDDLE OF ITS OWN BAND. There was 11px above it and
   16px below ("there's so much more space at the bottom"), because the band's top padding was a
   round number I picked and the space underneath is the CARD's bottom padding plus its border.
   Now the top is stated as that same value, so the button has 16px of air on all three sides it
   touches: right, bottom, and the divider above it.
   ★ WHEN TWO GAPS MEET AT A CORNER THEY HAVE TO BE THE SAME NUMBER, and the only way to keep
     them the same is to DERIVE one from the other rather than typing both. */

/* ★ THE ORDER ID SHARES THE NAME'S BASELINE. The header is centre-aligned, which is right for
   the timer and the chevron - they are objects. But `#0008` is TEXT sitting beside other TEXT,
   and centring two different type sizes leaves their baselines about 2px apart, which reads as
   the small one floating ("the ID is not fully aligned with the name"). Baseline-aligning just
   those two puts them on the same line of writing; everything else in the row stays centred.
   ★ CENTRE OBJECTS, BASELINE TEXT. */
.kcube .khead b, .kcube .khead .koid{ align-self:baseline; }

/* ============================================================================
   2026-08-14 - THE DISH LIST. "This part right here looks terrible."
   ============================================================================ */

/* Three things were wrong with it, and they were all the same thing: COLOUR DOING A JOB THAT
   TYPE SHOULD DO.
     · every course label was a filled blue pill - three of them on one ticket, the loudest
       objects on a card whose actual job is the food, and they looked pressable when they are
       not. On a late ticket they also put blue directly on red, which he flagged rounds ago.
     · every quantity was accent blue too, so the SAME blue meant "course" and "how many".
     · the quantities were inline, so "1×" and "12×" started the names at different places and
       the list had no left edge to read down.
   ★ A LIST IS READ DOWN A COLUMN, NOT ACROSS A LINE. Give the numbers a fixed column and the
     names line up by themselves; then the eye can run down either one alone.
   Now: the course is a quiet uppercase caption with a hairline running out to the right of it
   (the same divider language as the ticket footer and the board header), the quantity is bold
   monospace in plain --fg inside a 30px column, and the name sits in normal weight beside it.
   No blue left in the list at all, which is what finally stops it fighting the state colour. */
.kcube .klabel{
  display:flex !important; align-items:center; gap:9px;
  background:none !important; color:var(--dim) !important;
  font-size:calc(9.5px * var(--Tk, 1)) !important; font-weight:calc(800 + var(--Wb, 0)) !important; letter-spacing:1.3px !important;
  padding:0 !important; border-radius:0 !important; margin:0 0 6px !important; }
/* ✖ The trailing hairline is GONE (2026-08-14). A rule running out of the first course caption
   sat directly under the ticket header and read as a SECOND header rule - two lines stacked six
   pixels apart, which is the bit that was bothering him between the table name and the first
   dish. The caption does not need a rule to be a caption: it is uppercase, dim, letter-spaced
   and 4px smaller than everything around it. That is already four signals.
   ★ IF A THING IS ALREADY DISTINCT IN FOUR WAYS, A FIFTH IS NOISE. */

/* The groups no longer need their own rule on top - the caption carries one now. */
.kcube .kgroup{ border-top:0 !important; padding-top:0 !important; margin-bottom:0 !important; }
.kcube .kgroup + .kgroup{ margin-top:13px !important; }
/* the first course needs the same air under the header that the others get between them */
.kcube .kitems{ padding-top:4px; }   /* the space now does the job the rule was doing */

.kcube .kitems > .kgroup > div:not(.klabel),
.kcube .kitems > div:not(.kgroup){ display:flex; align-items:baseline; gap:0; }   /* ⚠ :not(.kgroup) - a GROUP is also a direct div child, and making it a row put the course label beside the first dish */
.kcube .kqty{ color:var(--fg) !important; font-weight:calc(800 + var(--Wb, 0)) !important;
  font-family:var(--mono) !important; font-variant-numeric:tabular-nums;
  flex:none; min-width:30px; }

/* ★ 2026-08-14 - AN EMPTY COUNT ROW TAKES NO SPACE. Service and Kitchen looked like two
   different designs ("look at the space the service has, and look at the kitchen, way less").
   Nothing differed in the CSS: the counts hide themselves when a bucket is zero, so on a quiet
   kitchen every chip is hidden and the row collapses to zero height - but its 13px and 14px
   MARGINS stayed, leaving a hole above the tickets that was neither a row nor no row. Service,
   with 20 empty tables to report, showed its chips and therefore looked completely different.
   ★ A CONTAINER THAT HIDES ITS CONTENT MUST ALSO DROP ITS MARGINS, or it leaves a ghost of
     itself in the layout. `:has()` asks the real question: is there a chip left to show? */
/* ⚠⚠ 2026-09-10 — THIS RULE WAS RIGHT ON A PHONE AND WRONG ON A PC, and it is what he has
   been pointing at for a week: "when you select kitchen or bar or delivery, the stations and the
   categories up there are stuck together... only for the PC version."
   The premise above, "the counts hide themselves when a bucket is zero", is only true BELOW
   600px. That is where `#floorChips .fchipstat.z{display:none}` lives. On a desktop the zero
   chips are fully visible, so this stripped the 10px margin off a row that was still on screen
   and the tabs underneath came up and touched it.
   Which is also why it never showed on Service and always showed on the stations: Service
   usually has a non-zero bucket (13 empty tables), so `:has()` finds a chip and the margin
   survives. A quiet Kitchen, Bar or Delivery is all zeros, and the margin went.
   Scoped to the width where the chips actually do hide, so the two halves agree. */
@media (max-width:600px){
  #floorChips:not(:has(> .fchipstat:not(.z))){ margin:0 !important; }
}

/* ★ THE BOARD LIST LIGHTS UP FROM THE MIDDLE OUT. Tapping a row used to switch a flat
   background on, which on a phone reads as a flicker rather than a response. The highlight now
   grows from the centre to both edges in 260ms - the same gesture your finger just made,
   played back. transform only, so it is a compositor job and free.
   ★ A CONTROL SHOULD ANSWER IN THE DIRECTION IT WAS TOUCHED. */
.spacepick .bmrow{ position:relative; overflow:hidden; z-index:0; }
.spacepick .bmrow::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  transform:scaleX(0); transform-origin:center; opacity:0; }
.spacepick .bmrow:active::before{ animation:bmFlow .26s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes bmFlow{ 0%{ transform:scaleX(0); opacity:.9 } 100%{ transform:scaleX(1); opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .spacepick .bmrow:active::before{ animation:none; transform:scaleX(1); opacity:1; } }
html[data-motion="off"] .spacepick .bmrow:active::before{ animation:none; transform:scaleX(1); opacity:1; }

/* ============================================================================
   2026-08-14 - THE PHONE GETS THE BOARD ROW BACK. The dropdown is gone.
   ============================================================================ */

/* The phone has picked a board from a dropdown since 2026-07-27, and it never stopped costing
   something: a tap to open, a list over the tables, a chevron, and no way to see which OTHER
   boards exist without opening it. Worse, in the Log view there was nothing on screen that said
   how to leave ("when you go to logs, how do you go out of the logs?") - the answer was a
   dropdown entry you had to know about.
   ★ A ROW OF TABS SHOWS THE CHOICES AND THE CURRENT ONE AT THE SAME TIME. A dropdown shows
     neither until you tap it. The desktop has always had the row; the phone hid it because five
     boards do not fit across 375px - but they do not have to FIT, they have to SCROLL.
   So the phone now runs the same `#floorToggle` the desktop does, as a swipeable strip, styled
   as chips because that is the pattern this app already uses for the log filters. Log rides at
   the end of it like it does on desktop, which is what finally gives the Log view a way out.
   The board title, its chevron and the whole `.spacepick` control go with it - the highlighted
   chip IS the title. That also makes every board's header identical, which was the other thing
   he kept catching: Service and Kitchen no longer start at different heights. */
@media (max-width:600px){
  #floor .spacepick{ display:none !important; }

  /* the desktop's frame, verbatim: one pill holding the lot */
  #floor #floorToggle{
    display:flex !important; align-items:center; gap:3px;
    flex-wrap:nowrap !important;   /* ⚠ an older phone rule sets wrap!important, which put Log on a second line */
    flex:1 1 auto !important; width:auto !important; min-width:0; margin:0 !important;
    /* ★ the frame always spans the row. When the … is hidden the frame simply takes the space
       back - the stations are left-aligned inside it so nothing on the left moves; only the
       right-hand wall (and the Log pinned to it) travels. */
    padding:3px; border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));
    background:var(--panel); border:1px solid var(--line2);
    overflow:hidden;
    -webkit-mask-image:none !important; mask-image:none !important; }

  /* ...and only the stations move inside it */
  #floor #floorToggle .tgscroll{
    display:flex; align-items:center; gap:3px; flex-wrap:nowrap;
    flex:1 1 auto; min-width:0;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* the fade says "there is more" without a scrollbar; it stops just short of the separator
       so Log never sits in the haze */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent 100%); }
  #floor #floorToggle .tgscroll::-webkit-scrollbar{ display:none; }

  #floor #floorToggle button{
    flex:0 0 auto !important; white-space:nowrap;
    background:transparent; border:0; border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px));
    padding:8px 13px !important; min-height:36px; font-size:calc(13px * var(--Tk, 1)) !important; font-weight:calc(700 + var(--Wb, 0));
    color:var(--mid);
    transition:background .14s ease, color .14s ease; }
  #floor #floorToggle button.active,
  #floor #floorToggle button.on{ background:var(--accent) !important; color:#fff !important; }

  /* the separator earns its keep here: it is the wall the Log tab is pinned against */
  #floor #floorToggle .togsep{ display:block !important; flex:none;
    width:1px; align-self:stretch; margin:2px 4px; background:var(--line2); }
  #floor #floorToggle .logtab{ flex:none; color:var(--accent-lt);
    display:inline-flex; align-items:center; gap:6px; padding:8px 12px !important; }
  #floor #floorToggle .logtab svg{ width:15px; height:15px; }
  #floor #floorToggle .logtab.active{ color:#fff !important; }

  #floor .floorrow{ align-items:center; }
}

/* ★ UNDO REPORTS INTO ITSELF. The menu stays open so it can be pressed again, which means the
   result has to appear where the finger already is - a toast at the bottom of the screen is the
   wrong place to look when you are three taps into walking a board back. */
#floorMore #floorUndo{ display:block; line-height:calc(1.25 * var(--Lh, 1)); }
#floorMore #floorUndo[data-note]::after{
  content:attr(data-note); display:block; margin-top:3px;
  font-size:calc(11.5px * var(--Tk, 1)); font-weight:calc(600 + var(--Wb, 0)); color:var(--dim); white-space:normal; }
#floorMore #floorUndo.busy{ opacity:.55; pointer-events:none; }

/* ★ The ticket's own undo: a quiet square beside the action, not a second button competing
   with it. It only exists on a READY ticket, which is the only place a mistake can still be
   taken back in one tap. */
.kcube .kactions button.kundo{ flex:0 0 auto !important; width:38px; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent !important; border:1px solid var(--line2) !important;
  border-radius:calc(9px * var(--Rk, 1) + var(--Rf, 0px)); color:var(--dim) !important; min-height:36px; }
.kcube .kactions button.kundo svg{ width:16px; height:16px; }
.kcube .kactions button.kundo:hover{ border-color:var(--accent) !important; color:var(--accent-lt) !important; }
.kcube .kactions button.kundo:active{ background:var(--panel2) !important; }
.kcube .kactions button.kundo[disabled]{ opacity:.5; }

/* ============================================================================
   2026-08-14 - THE SERVICE TILE, rebuilt in the ticket's language.
   ============================================================================ */

/* The padding moved out of the inline style so the footer band can bleed to the edges the way
   the ticket's does. Same two custom properties, same reason. */
/* ★ THE FOOTER BAND OWNS ITS OWN VERTICAL SPACE. The tile carried the bottom padding, so the
   counts sat 8px under the hairline with 13px of nothing beneath them - low in their own band
   rather than centred in it. The tile's bottom padding is now ZERO and the band pads itself
   equally top and bottom, which is the only way the text lands in the middle of the strip a
   reader actually sees. */
.ttile{ --tpl:13px; --tpr:13px; padding:12px var(--tpr) 0 var(--tpl); }
.ttile[data-fstat="empty"]{ padding-bottom:12px; }   /* no band to pad it, so it pays its own */
.ttile .tttop{ display:flex; align-items:baseline; gap:8px;
  padding-right:14px;   /* the state dot lives in this corner */ }
.ttile .ttname{ font-size:calc(17px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); letter-spacing:-.2px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ttile .ttmoney{ flex:none; margin-left:auto; font-family:var(--mono);
  font-variant-numeric:tabular-nums; font-size:calc(12.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); color:var(--mid); }
/* status on the left, money hard right, sharing ONE baseline */
.ttile .ttsub{ display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  margin-top:5px; font-size:calc(12.5px * var(--Tk, 1)); font-weight:calc(600 + var(--Wb, 0)); }
.ttile .ttstat{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ★ THE COUNTS COME BACK ON THE PHONE. They were hidden to keep tiles compact, which left a
   two-line tile inside a grid row stretched by its tallest neighbour - the hole he pointed at.
   Filling it with the two facts a waiter actually wants (how much food, how long they have been
   sitting) costs one line and makes every tile the same height for the right reason. */
.ttile .ttmeta{ display:flex !important; align-items:center; gap:7px; flex-wrap:wrap;
  margin:10px calc(-1 * var(--tpr)) 0 calc(-1 * var(--tpl));
  padding:6px var(--tpr) 7px var(--tpl);   /* ★ tighter: the rule sits close to the counts, the counts sit close to the floor */
  border-top:1px solid var(--line);
  font-size:calc(11.5px * var(--Tk, 1)); font-weight:calc(600 + var(--Wb, 0)); color:var(--dim); }
.ttile .ttmeta .ttsep{ opacity:.45; }

/* empty tiles keep their dashed, quiet look - they have no state to show */
.ttile[data-fstat="empty"] .ttmeta{ display:none !important; }

/* ★ 2026-08-14 - ONE TYPE SIZE ACROSS THE FOOTER, OR NOTHING IN IT LINES UP. Measured, the row
   was running THREE sizes with three line-heights: the item count at 11.5px, the minutes at 12px
   (an old phone override nobody had revisited) and the PAID chip at 10.5px. Each one sat a pixel
   or two off its neighbours - individually invisible, together exactly the "not perfectly
   aligned" he kept pointing at.
   ★ A ROW OF SMALL TEXT MUST SHARE A SIZE AND A LINE-HEIGHT. Baseline alignment cannot rescue
     three different ones; it just distributes the error differently.
   The chip keeps its own smaller type - it is a badge, not a word in the sentence - so it is
   centred against the line rather than baselined to it. */
.ttile .ttmeta{ align-items:center; line-height:calc(16px * var(--Lh, 1)); }
.ttile .ttmeta > span{ font-size:calc(11.5px * var(--Tk, 1)) !important; line-height:16px !important; }
.ttile .ttmeta .tt-mins{ font-size:calc(11.5px * var(--Tk, 1)) !important; }
.ttile .ttmeta .tpaid{ font-size:calc(10px * var(--Tk, 1)) !important; line-height:14px !important;
  align-self:center; padding:1px 7px; }

/* ★ AND THE NAME CAN NEVER PUSH ANYTHING. It owns its line now, so all it has to do is stop at
   the edge instead of growing past it. `min-width:0` is what actually lets a flex child shrink;
   without it `text-overflow` never fires and a long name simply overflows the tile. */
.ttile .tttop{ min-width:0; }
.ttile .ttname{ flex:1 1 auto; min-width:0; }
.ttile .ttstat{ flex:0 1 auto; }

/* ★★ 2026-08-14 - THE BAND IS PINNED TO THE FLOOR OF THE TILE. Measured across a row, the
   counts started 70px down on some tiles and 68px on others - and the 2px belonged to the price:
   the status row is that much taller when a mono figure sits in it, so hiding the price on paid
   and cooking tables shifted everything underneath them. Neighbouring tiles stopped lining up
   the moment the money became conditional.
   ★ ANYTHING THAT CAN VARY ABOVE A ROW WILL MOVE IT. Do not balance the things above; anchor
     the row itself. The tile is a column and the band takes `margin-top:auto`, so it sits on the
     floor of the tile no matter what happens over it - and the grid already gives every tile in
     a row the same height, so every band in a row is on the same line.
   The status row also gets a fixed line box, so the two states differ in what they SAY and not
   in how tall they are. */
.ttile:not([data-fstat="empty"]){ display:flex; flex-direction:column; }
.ttile .ttsub{ line-height:calc(18px * var(--Lh, 1)); min-height:18px; }
.ttile .ttmoney{ line-height:calc(18px * var(--Lh, 1)); }
.ttile .ttmeta{ margin-top:auto; }

/* ★ 2026-08-14 - THE BOTTOM ROW, FINISHED.
   · The band is tighter and lower: 6px between the hairline and the counts, 7px between the
     counts and the tile's edge. The empty space that is left now sits in the MIDDLE of the tile,
     where empty space belongs, instead of between the rule and the text where it read as a gap
     nobody had measured.
   · PAID moves to the far right. It is a different KIND of fact from "1 item · 185′" - those two
     describe the visit, the chip describes the money - so it gets its own end of the row instead
     of trailing the sentence.
   · The minutes wear the kitchen's colour while the food is still cooking (see the tile builder).
     Amber and red only; anything calmer stays --dim, because a colour that is always on says
     nothing. */
.ttile .ttmeta .tpaid{ margin-left:auto; }
.ttile .ttmeta .tt-mins.ttm-warn{ color:var(--warn) !important; font-weight:calc(700 + var(--Wb, 0)); }
.ttile .ttmeta .tt-mins.ttm-late{ color:var(--bad) !important; font-weight:calc(700 + var(--Wb, 0)); }

/* ★★ 2026-08-14 - WHY THE BAND WAS STILL FLOATING. Two rules were quietly beating the last fix,
   and measuring the element rather than trusting the stylesheet is what found them:
     1. `#floorTables .ttile{padding:10px 11px!important}` (arthur-ui-v2.html ≈ 4825). An id plus
        !important, so the `padding-bottom:0` written for the band never landed - leaving 10px of
        tile under the counts, which is the gap he kept pointing at.
     2. `margin-top:auto` computed to 0. Whatever it was losing to, a rule at (0,2,0) was never
        going to survive in a file where this element is addressed through an id elsewhere.
   Both are stated here at id strength. The band now ends ON the tile's floor: its own 7px of
   padding is the only thing between the counts and the edge, and the hairline sits 6px above
   them, so the leftover space is all in the MIDDLE of the tile where it belongs.
   ★ IF A FIX DOES NOT SHOW UP, MEASURE THE ELEMENT. The cascade will not tell you it lost. */
/* ⚠⚠ NO `!important` ON `display` HERE - IT BROKE THE FLOOR FILTER. The chips filter by putting
   `data-only="empty"` on the grid and hiding every tile that does not match with
   `display:none!important`. That rule and this one have the SAME specificity, so an !important
   display here won the tie by being later in the file and forced every non-empty tile back on
   screen: tapping "empty" showed the whole floor, and every other chip showed all the occupied
   tables instead of just its own (Panos, 2026-08-14).
   ★ NEVER PUT `!important` ON A PROPERTY SOMETHING ELSE USES TO HIDE THINGS. The layout needs
     `display:flex` here; it does not need to win against a filter. `padding-bottom` still does,
     because that is what the id-level phone rule fights over. */
#floorTables .ttile:not([data-fstat="empty"]),
.tilesgrid .ttile:not([data-fstat="empty"]){
  padding-bottom:0 !important; display:flex; flex-direction:column; }
#floorTables .ttile .ttmeta,
.tilesgrid .ttile .ttmeta{ margin-top:auto !important; margin-bottom:0 !important; }

/* ★ 2026-08-14 - the top bar's two hairlines are gone on a phone. They were grouping a single
   icon against nothing on the left, and undo against the bell on the right - at 375px there is
   nothing to group, so they read as stray marks rather than structure. The account button takes
   the far left, the house beside it, and the bar balances by having something to say on both
   sides instead of by drawing lines. */
/* ✖ the dividers stay after all - he liked them, and with four icons on the bar they are doing
   real work again: they separate WHERE YOU ARE (account, house) from WHAT JUST HAPPENED (undo,
   bell). They only looked stray when there was a single icon on the left. */
@media (max-width:600px){
  .top .tbme{ display:inline-flex !important; }
}
/* desktop keeps the account at the foot of the sidebar, where it has always been */
@media (min-width:601px){ .top .tbme{ display:none !important; } }

/* ★ 2026-08-14 - THE CONFIRMATION DIALOG. Centred question, two equal answers under it.
   ★ IN A QUESTION, THE TWO ANSWERS SHOULD LOOK EQUALLY POSSIBLE. Bottom-right buttons with one
     of them a wide red slab answer FOR you - the eye goes to the loud one and the tap follows.
     Same width, same height, side by side, and the destructive colour kept for things that
     actually destroy. */
.dlgask{ text-align:center; }
.dlgask #dlgMsg{ font-size:calc(16px * var(--Tk, 1)); line-height:calc(1.5 * var(--Lh, 1)); margin:2px 0 18px; white-space:pre-line;
  font-weight:calc(600 + var(--Wb, 0)); }
.dlgask .dlgrow{ display:flex; gap:10px; }
.dlgask .dlgrow button{ flex:1 1 0; margin:0 !important; min-height:44px; border-radius:calc(11px * var(--Rk, 1) + var(--Rf, 0px));
  font-size:calc(14.5px * var(--Tk, 1)); font-weight:calc(700 + var(--Wb, 0)); }
.dlgask .dlgrow #dlgCancel{ background:var(--panel2); border:1px solid var(--line2); color:var(--fg); }
.dlgask .dlgrow #dlgOk{ background:var(--accent); border:1px solid var(--accent); color:#fff; }
.dlgask .dlgrow #dlgOk.dangerbtn{ background:var(--bad); border-color:var(--bad); }

/* the account glyph was a hair larger than the same icon on the home page */
.top .tbme svg{ width:19px; height:19px; }

/* ★ A QUESTION BELONGS IN THE MIDDLE OF THE SCREEN. Every overlay in the app slides up from the
   bottom as a sheet, which is right for a PANEL you work in - the pay screen, an order, a set of
   options - because it sits under your thumb and leaves the context visible above it. A yes/no
   question is not a panel: it is a full stop. It should land in the centre, with the app dimmed
   evenly around it, so it reads as "answer this" rather than "here is another drawer".
   ⚠ Only the ASK dialog. The sheets stay sheets. */
#dlgModal{ align-items:center !important; padding:20px !important; }
#dlgModal .modal.dlgask{ border-radius:calc(16px * var(--Rk, 1) + var(--Rf, 0px)) !important; max-width:330px; width:100%;
  padding:22px 20px 20px !important; }

/* ★★ 2026-08-14, ROUND 2 - ASSIGN MODE, REWORKED to his notes.
   · YELLOW, because it is a mode you are temporarily in, not a normal state of the app. His
     reasoning and it is the right one: yellow reads as works-in-progress, and the app has no
     other yellow chrome, so there is no chance of mistaking it for something you can use.
   · IT PUSHES, IT DOES NOT COVER. As a fixed bar it sat on the wordmark, the bell and the undo
     - which also meant the top bar could not be recorded. It is a flex child of #app now.
   · THE BLUE HIGHLIGHT IS GONE. Ringing every candidate in accent blue turned the whole screen
     into a christmas tree. A DASHED hairline instead - the same language the empty table tiles
     already use for "this is a slot, not a thing" - and only while the mode is on.
   ★ A MODE SHOULD BE OBVIOUS AT THE EDGES AND QUIET IN THE MIDDLE. The banner says what is
     happening; the targets whisper. */
/* ★ 2026-08-15 - IT STAYS AT THE TOP. As a plain flex child it scrolled away with the page,
   so on a long screen he could be holding a target with no sign the mode was even on.
   Sticky keeps it against the top edge for as long as the mode lasts, which is what
   "always at the top" means in practice. */
/* ★★ 2026-08-15 - A LONG PRESS MUST CHARGE THE SHORTCUT, NOT SELECT THE TEXT. Installed as
   a PWA, holding a label for three seconds is a plain long-press: the phone puts up its own
   text selection and Copy bubble and the hold never completes. It is worst on small buttons,
   which is where he hit it. Turning selection and the callout off FOR THE DURATION OF THE
   MODE fixes it without touching normal use - this is not the app-only problem it looked
   like. `touch-action:manipulation` also drops the double-tap-zoom delay while assigning. */
body.actassign, body.actassign *{ -webkit-user-select:none !important; user-select:none !important;
  -webkit-touch-callout:none !important; touch-action:manipulation; }
#actBar{ position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:10px; flex:none;
  padding:9px 14px; background:color-mix(in srgb, var(--warn) 16%, var(--panel));
  border-bottom:1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  color:var(--fg); font-size:calc(12px * var(--Tk, 1)); line-height:calc(1.3 * var(--Lh, 1)); }
#actBar b{ flex:none; color:var(--warn); font-weight:calc(800 + var(--Wb, 0)); letter-spacing:.3px;
  text-transform:uppercase; font-size:calc(10.5px * var(--Tk, 1)); }
#actBar span{ flex:1 1 auto; color:var(--mid); font-weight:calc(600 + var(--Wb, 0)); }
#actBar button{ flex:none; margin:0; padding:6px 12px; border-radius:calc(8px * var(--Rk, 1) + var(--Rf, 0px)); font-size:calc(12.5px * var(--Tk, 1));
  font-weight:calc(700 + var(--Wb, 0)); background:color-mix(in srgb, var(--bad) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--bad) 55%, transparent); color:var(--bad); }
#actBar button:active{ background:var(--bad); color:#fff; }
/* ★ 2026-08-14, ROUND 4 - HIGHLIGHT ONLY WHAT IS UNDER THE FINGER. Painting every candidate at
   once turned the screen into a chessboard and told him nothing he could act on; he asked twice
   for it to stop. The mode now announces itself in the banner and stays silent everywhere else,
   lighting exactly one thing: whatever the pointer is on.
   ★ A PICKER SHOULD ANSWER "THIS ONE?", NOT "ANY OF THESE 23?" */
/* ★ 2026-08-15 - IT HAS TO WIN AGAINST A CONTROL THAT IS ALREADY BLUE. "Add row", a
   category, "Add timer", a space, a role: each paints its own accent background, and a
   tinted overlay on top of one is invisible - he could not tell whether those were
   recordable at all. An OUTLINE cannot be beaten by a background: it is drawn outside the
   box and no fill reaches it. So the outline is the mark, and the tint stays as a bonus
   on the plain controls. */
.acthover{ background:color-mix(in srgb, var(--warn) 22%, transparent) !important;
  border-radius:calc(10px * var(--Rk, 1) + var(--Rf, 0px)); outline:2px solid var(--warn); outline-offset:1px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
  transition:background .1s ease; }
.actholding{ background:color-mix(in srgb, var(--warn) 34%, transparent) !important;
  animation:actHold 3s linear forwards; }
/* the hold fills from the bottom up, so you can see the three seconds passing */
@keyframes actHold{ from{ box-shadow:inset 0 0 0 0 var(--warn) }
                    to{   box-shadow:inset 0 -80px 0 0 color-mix(in srgb, var(--warn) 45%, transparent) } }

/* ★ NARROW PHONES: his is smaller than the 375 I had been testing at, and at that width four
   40px buttons plus a 117px wordmark plus two 14px gaps leaves the dividers pressed against the
   logo. The icons and the gaps give way first - the wordmark is the one thing on that bar that
   cannot shrink without looking broken. */
@media (max-width:400px){
  .top{ gap:8px !important; padding-left:10px; padding-right:10px; }
  .top .iconbtn{ width:36px; height:36px; }
  .top .tbleft, .top .tbright{ gap:4px; }
}
/* the undo button when there is nothing to take back: present, but plainly inactive */
#undoBtn.empty{ opacity:.38; }