/* Layout: a shop counter. Job tickets are the only physical objects (lifted paper with a tear-off stub);
   everything else is flat grouped lists on the counter. Phone: glass top bar + floating glass tab bar.
   Desktop: sidebar + two columns. Body text uses the system face; Archivo carries titles, money and ticket stamps. */
:root{
  --ground:#E6E9E6;--paper:#FFFFFF;--paper-2:#F2F4F1;--ink:#121615;--muted:#57615D;--rule:#CBD2CE;--rule-2:#E0E5E2;
  --accent:#B0365A;--on-accent:#FFFFFF;
  --accent-text:color-mix(in oklab,var(--accent) 90%,#000);
  --accent-soft:color-mix(in oklab,var(--accent) 11%,var(--paper));
  --accent-line:color-mix(in oklab,var(--accent) 36%,var(--paper));
  --ok:#17784A;--warn:#8C5D00;--bad:#B2332A;
  --glass:color-mix(in oklab,var(--paper) 72%,transparent);
  --glass-solid:var(--paper);
  --glass-edge:rgb(255 255 255 / .55);
  --scrim:rgb(10 14 12 / .40);
  --lift:0 1px 1px rgb(18 22 21 / .06),0 8px 24px rgb(18 22 21 / .10);
  --tk-shadow:drop-shadow(0 1px 1px rgb(18 22 21 / .08)) drop-shadow(0 5px 12px rgb(18 22 21 / .08));
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-disp:"Archivo","Arial Narrow",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --r:14px;--r-sm:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0E1110;--paper:#191E1C;--paper-2:#212725;--ink:#E7ECE9;--muted:#96A29D;--rule:#333C38;--rule-2:#262D2A;
  --accent-text:color-mix(in oklab,var(--accent) 55%,#fff);
  --accent-soft:color-mix(in oklab,var(--accent) 24%,var(--paper));
  --accent-line:color-mix(in oklab,var(--accent) 55%,var(--paper));
  --ok:#4EC07F;--warn:#E3A63D;--bad:#EF7266;
  --glass:color-mix(in oklab,var(--paper) 70%,transparent);--glass-edge:rgb(255 255 255 / .08);
  --scrim:rgb(0 0 0 / .58);
  --lift:0 1px 1px rgb(0 0 0 / .5),0 10px 28px rgb(0 0 0 / .5);
  --tk-shadow:drop-shadow(0 1px 1px rgb(0 0 0 / .5)) drop-shadow(0 6px 14px rgb(0 0 0 / .35));
  color-scheme:dark}}
:root[data-theme="dark"]{
  --ground:#0E1110;--paper:#191E1C;--paper-2:#212725;--ink:#E7ECE9;--muted:#96A29D;--rule:#333C38;--rule-2:#262D2A;
  --accent-text:color-mix(in oklab,var(--accent) 55%,#fff);
  --accent-soft:color-mix(in oklab,var(--accent) 24%,var(--paper));
  --accent-line:color-mix(in oklab,var(--accent) 55%,var(--paper));
  --ok:#4EC07F;--warn:#E3A63D;--bad:#EF7266;
  --glass:color-mix(in oklab,var(--paper) 70%,transparent);--glass-edge:rgb(255 255 255 / .08);
  --scrim:rgb(0 0 0 / .58);
  --lift:0 1px 1px rgb(0 0 0 / .5),0 10px 28px rgb(0 0 0 / .5);
  --tk-shadow:drop-shadow(0 1px 1px rgb(0 0 0 / .5)) drop-shadow(0 6px 14px rgb(0 0 0 / .35));
  color-scheme:dark}

/* platform baseline */
*{box-sizing:border-box}
html{height:100%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{margin:0;min-height:100%;background:var(--ground);color:var(--ink);font:16px/1.45 var(--f-ui);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:45;background:var(--ground)}
body.lock{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
button:disabled{cursor:default}
button,a,[role="button"]{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
a{color:var(--accent-text);text-decoration:none}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:8px}
h1,h2,h3{margin:0;font-family:var(--f-disp);text-wrap:balance}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.ico{display:block;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* shell */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100dvh}
.col{min-width:0;display:flex;flex-direction:column}
.side{display:none}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:0 .5px 0 var(--rule-2);padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.top-in{display:flex;align-items:center;gap:4px;max-width:1100px;margin:0 auto}
.biz{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px 6px 4px 0;border-radius:12px;transition:transform 120ms var(--ease-out)}
.biz:active{transform:scale(.98)}
.biz-t{min-width:0;display:grid}
.biz-t strong{font-family:var(--f-disp);font-stretch:88%;font-size:18px;font-weight:720;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-t small{display:flex;align-items:center;gap:2px;color:var(--muted);font-size:13px}
.mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.mark svg{width:20px;height:20px}
.mark.lg{width:56px;height:56px;border-radius:16px}
.mark.lg svg{width:32px;height:32px}
.ib{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--ink);flex:none;transition:transform 120ms var(--ease-out),background-color 150ms}
.ib:active{transform:scale(.92);background:color-mix(in oklab,var(--ink) 8%,transparent)}
.ib.add{background:var(--accent);color:var(--on-accent);width:38px;height:38px;margin-left:4px}
.badge{min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--bad);color:#fff;font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;line-height:1}
.ib .badge{position:absolute;top:3px;right:1px;box-shadow:0 0 0 2px var(--ground)}
.main{flex:1;padding-top:14px;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1100px;margin:0 auto;display:grid;gap:30px;min-width:0}
.tabbar{position:fixed;z-index:30;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:2px;padding:5px;border-radius:24px;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--lift),inset 0 0 0 .5px var(--glass-edge),inset 0 .5px 0 var(--glass-edge)}
.tab{flex:1;min-width:0;display:grid;justify-items:center;gap:2px;padding:7px 2px 6px;border-radius:19px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.005em;transition:background-color 180ms var(--ease-out),color 180ms,transform 120ms var(--ease-out)}
.tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab:active{transform:scale(.94)}
.tab[aria-current="page"]{color:var(--accent-text);background:var(--accent-soft)}
@media (prefers-reduced-transparency:reduce){.top,.tabbar{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (min-width:900px){
  .app{grid-template-columns:252px minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;padding-block:16px;padding-right:12px;padding-left:max(12px,env(safe-area-inset-left,0px));background:color-mix(in oklab,var(--ground) 55%,var(--paper));box-shadow:inset -1px 0 0 var(--rule-2)}
  .top,.tabbar{display:none}
  .main{padding-top:34px;padding-bottom:64px}
  .wrap{padding-inline:clamp(0px,2vw,24px)}
}
.side .biz{flex:none}
.nav{display:grid;gap:2px}
.nav-i{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--ink);font-size:15px;font-weight:500;width:100%;text-align:left;transition:background-color 120ms}
.nav-i .ico{color:var(--muted)}
.nav-i span:not(.badge):not(.n){flex:1}
.nav-i .n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.nav-i[aria-current="page"]{background:var(--paper);font-weight:650;box-shadow:0 1px 2px rgb(0 0 0 / .06)}
.nav-i[aria-current="page"] .ico{color:var(--accent-text)}
.nav-i:active{background:var(--paper-2)}
.nav-i.foot{margin-top:auto}

/* type */
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px}
.ph h1{font-stretch:84%;font-size:34px;line-height:1.02;font-weight:760;letter-spacing:-.025em}
.ph p{color:var(--muted);margin-top:6px;font-size:15px}
.ph-act{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:899px){.ph-act.desk{display:none}}
@media (min-width:900px){.ph h1{font-size:40px}}
.sec{display:grid;gap:10px;min-width:0;align-content:start}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-inline:2px}
.sec-h h2{font-stretch:90%;font-size:20px;font-weight:700;letter-spacing:-.012em;line-height:1.2}
.count{font-stretch:100%;font-weight:600;color:var(--muted);margin-left:8px;font-variant-numeric:tabular-nums}
.link{font-size:15px;font-weight:600;color:var(--accent-text);padding:4px 0}
.link:active{opacity:.6}
.hint{font-size:14px;color:var(--muted);line-height:1.4}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border-radius:12px;font-weight:600;font-size:15px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule);white-space:nowrap;transition:transform 120ms var(--ease-out),background-color 150ms,box-shadow 150ms}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--accent);color:var(--on-accent);box-shadow:none}
.btn.tint{background:var(--accent-soft);color:var(--accent-text);box-shadow:none}
.btn.plain{box-shadow:none;background:color-mix(in oklab,var(--ink) 6%,transparent)}
.btn.danger{color:var(--bad)}
.btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:10px;gap:5px}
.btn.lg{height:54px;font-size:17px;border-radius:15px}
.btn.block{width:100%}
.btn.grow{flex:1}
.btn:disabled{opacity:.4;transform:none}
.seg{display:flex;padding:3px;border-radius:12px;background:color-mix(in oklab,var(--ink) 7%,transparent);gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto;height:32px;padding:0 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background-color 180ms var(--ease-out),color 180ms}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.seg button .c{font-weight:500;color:var(--muted);margin-left:5px;font-variant-numeric:tabular-nums}
.search{position:relative;display:block;min-width:0}
.search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search .in{padding-left:38px;background:color-mix(in oklab,var(--ink) 7%,transparent);box-shadow:none}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:14px;background:var(--accent-soft);color:var(--accent-text);flex:none;font-family:var(--f-disp);font-stretch:105%}
.av.xs{width:22px;height:22px;font-size:10px}
.av.lg{width:64px;height:64px;font-size:22px}
.st{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st.ok{color:var(--ok)}.st.warn{color:var(--warn)}.st.bad{color:var(--bad)}.st.acc{color:var(--accent-text)}
.st.idle::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* grouped lists */
.group{background:var(--paper);border-radius:var(--r);overflow:hidden;min-width:0}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 16px;text-align:left;position:relative;color:inherit;transition:background-color 120ms}
.group>.row+.row::before,.group>.now-row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--rule)}
.group>.row.ind+.row.ind::before{left:66px}
button.row:active,.row.tap:active{background:var(--paper-2)}
.row.tap{cursor:pointer}
.rm{flex:1;min-width:0;display:grid;gap:1px}
.rm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm span{font-size:14px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr{display:grid;justify-items:end;gap:3px;flex:none}
.rr .num{font-weight:600}
.time{font-family:var(--f-disp);font-stretch:96%;font-weight:650;font-size:17px;width:50px;flex:none;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.chev{color:var(--rule);flex:none}
.now-row{display:flex;align-items:center;gap:10px;padding:2px 16px;font-size:13px;font-weight:700;color:var(--bad);font-variant-numeric:tabular-nums}
.now-row::after{content:"";flex:1;height:1.5px;background:var(--bad);border-radius:2px}
.empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:15px;display:grid;gap:12px;justify-items:center}
.lead{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--accent-text)}
.lead.warn{background:color-mix(in oklab,var(--warn) 14%,var(--paper));color:var(--warn)}
.lead.bad{background:color-mix(in oklab,var(--bad) 12%,var(--paper));color:var(--bad)}
@media (hover:hover) and (pointer:fine){
  button.row:hover,.row.tap:hover{background:var(--paper-2)}
  .btn:hover{background:var(--paper-2)}
  .btn.pri:hover{background:color-mix(in oklab,var(--accent) 88%,#000)}
  .btn.tint:hover{background:color-mix(in oklab,var(--accent) 17%,var(--paper))}
  .nav-i:hover{background:color-mix(in oklab,var(--paper) 60%,transparent)}
  .nav-i[aria-current="page"]:hover{background:var(--paper)}
  .ib:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
  .ib.add:hover{background:color-mix(in oklab,var(--accent) 88%,#000)}
  .seg button:hover{color:var(--ink)}
}