/* MiSalon app — look and feel. Class names match app/css/app.css so it can be applied screen by screen.
   Phone first (394). The sidebar arrives at 1024. Reads only tokens.css. */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);font-size:var(--fs-15);line-height:var(--lh-body);color:var(--ink);background:var(--paper);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-weight:var(--fw-bold);letter-spacing:-.012em;word-spacing:.06em;line-height:var(--lh-snug)}
b,strong,.btn{word-spacing:.05em}
h2{font-size:var(--fs-18)}
h3{font-size:var(--fs-22)}
.num{font-feature-settings:"tnum" 1}

/* ---------- shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.app>main{flex:1;width:100%;min-width:0}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s-3);height:60px;padding:0 var(--gutter-phone);background:rgba(246,244,239,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .brand img{height:30px;width:auto}
.top .who{margin-left:auto;text-align:right;line-height:1.2}
.top .who b{display:block;font-size:var(--fs-13)}
.top .who span{font-size:var(--fs-11);font-family:var(--font-mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.top .avatar{width:36px;height:36px;border-radius:var(--r-full);background:var(--navy-900);color:#fff;display:grid;place-items:center;font-weight:var(--fw-bold);font-size:var(--fs-13)}
.wrap{padding:var(--s-4) var(--gutter-phone) var(--s-8);max-width:var(--w-content);margin:0 auto}

.tabs{position:sticky;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;font-size:11px;font-weight:var(--fw-medium);color:var(--ink-3);text-decoration:none;position:relative;border-radius:var(--r-sm);min-height:var(--tap)}
.tabs a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on{color:var(--navy-900)}
.tabs a.on::before{content:"";position:absolute;top:-7px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:0 0 3px 3px;background:var(--coral)}
.side{display:none}

@media (min-width:1024px){
  .app{display:grid;grid-template-columns:var(--w-sidebar) minmax(0,1fr);grid-template-rows:auto 1fr;background:linear-gradient(90deg,var(--navy-900) var(--w-sidebar),var(--paper) var(--w-sidebar))}
  .app>.top{grid-column:2}
  .app>main{grid-column:2;width:100%}
  .tabs{display:none}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;grid-row:1 / span 2;grid-column:1;background:var(--navy-900);color:#fff;padding:var(--s-5) var(--s-3)}
  .side .brand{padding:4px 10px 22px}
  .side .brand img{height:34px;width:auto}
  .side a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);color:var(--navy-300);text-decoration:none;font-weight:var(--fw-medium);position:relative}
  .side a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .side a:hover{background:rgba(255,255,255,.05);color:#fff}
  .side a.on{background:rgba(255,255,255,.09);color:#fff}
  .side a.on::after{content:"";position:absolute;right:12px;width:6px;height:6px;border-radius:50%;background:var(--coral)}
  .side .foot{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-12);color:var(--navy-300)}
  .side .foot b{display:block;color:#fff;font-size:var(--fs-13)}
  .top{height:68px;padding:0 var(--gutter-desk);background:var(--paper)}
  .top .brand{display:none}
  .top .crumb{font-family:var(--font-mono);font-size:var(--fs-11);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--ink-3)}
  .wrap{padding:var(--s-6) var(--gutter-desk) var(--s-14)}
}
.top .crumb{display:none}
@media (min-width:1024px){.top .crumb{display:block}}

/* ---------- building blocks ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);margin-bottom:var(--s-3);box-shadow:var(--sh-1)}
@media (min-width:1024px){.card{padding:var(--s-5) var(--s-6);margin-bottom:var(--s-4)}}
.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.hd h2{margin:0}
.lbl{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--fs-11);font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--ink-3)}
.lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral)}
.lbl.plain::before{display:none}
.muted{color:var(--ink-2);font-size:var(--fs-13);line-height:1.5}
.hr{height:1px;background:var(--line);margin:var(--s-4) 0}
.row{display:flex;gap:var(--s-2);align-items:center}
.row>*{flex:1}
.two{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
@media (min-width:600px){.two{grid-template-columns:1fr 1fr}}
.cols2{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:1024px){.cols2{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-4)}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border-radius:var(--r-sm);border:1px solid var(--navy-900);background:var(--navy-900);color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-15);white-space:nowrap;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--navy-800)}
.btn:focus-visible,input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring)}
.btn.gold{background:var(--navy-900);border-color:var(--navy-900);color:#fff}   /* app.css calls the main button "gold": it is navy now */
.btn.alt{background:var(--surface);color:var(--navy-900);border-color:var(--line-2)}
.btn.alt:hover{background:var(--navy-50)}
.btn.sm{min-height:36px;padding:0 12px;font-size:var(--fs-13);border-radius:8px}
.btn.wa{background:var(--surface);color:var(--ok);border-color:#BFDCCB}
.btn.wa svg{width:16px;height:16px}
.btn.block{width:100%}
.btn.step{width:40px;min-height:40px;padding:0;font-size:20px;font-weight:600;border-radius:var(--r-full)}

label{display:block;font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--ink-2);margin:0 0 6px}
input,select,textarea{width:100%;min-height:var(--tap);padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:var(--fs-16);color:var(--ink)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B2A41' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
::placeholder{color:var(--ink-3)}
.qty{width:84px;text-align:center;font-weight:var(--fw-bold)}
.field{margin-bottom:var(--s-3)}

.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-xs);background:var(--navy-100);color:var(--navy-900);font-size:var(--fs-12);font-weight:var(--fw-bold);white-space:nowrap}
.pill.ok{background:var(--ok-100);color:var(--ok)}
.pill.warn{background:var(--warn-100);color:var(--warn)}
.pill.bad{background:var(--bad-100);color:var(--bad)}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--surface);font-size:var(--fs-13);font-weight:var(--fw-medium);color:var(--ink-2);white-space:nowrap}
.chip.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

.list .it{display:flex;align-items:center;gap:var(--s-3);padding:12px 0;border-bottom:1px solid var(--line)}
.list .it:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list b{display:block;font-weight:var(--fw-bold);font-size:var(--fs-15);line-height:1.3}
.list .sub{font-size:var(--fs-13);color:var(--ink-2);line-height:1.4;margin-top:2px}
.list .time{font-family:var(--font-mono);font-size:var(--fs-13);font-weight:500;color:var(--navy-900);width:46px;flex:none}
.empty{padding:var(--s-5);text-align:center;color:var(--ink-2);background:var(--fill);border-radius:var(--r-sm)}
.empty b{display:block;color:var(--ink)}

/* KPIs */
.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border-radius:var(--r-md);overflow:hidden}
.k{background:var(--navy-900);padding:14px 16px}
.k .n{font-size:26px;font-weight:var(--fw-heavy);letter-spacing:-.02em;line-height:1.1;color:#fff}
.k .l{font-family:var(--font-mono);font-size:var(--fs-11);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--navy-300);margin-top:4px}
@media (min-width:1024px){.kgrid{grid-template-columns:repeat(4,1fr)}.k{padding:18px 22px}.k .n{font-size:var(--fs-28)}}

/* Navy band heading used on Today and the client card */
.hero{background:var(--navy-900);color:#fff;border-radius:var(--r-lg);padding:var(--s-5) var(--s-4) var(--s-4);margin-bottom:var(--s-3);position:relative;overflow:hidden}
.hero .lbl{color:var(--navy-300)}
.hero h1{font-size:var(--fs-28);font-weight:var(--fw-heavy);letter-spacing:-.025em;line-height:1.1;margin:8px 0 2px}
.hero .hsub{color:var(--navy-300);font-size:var(--fs-15)}
.hero .kgrid{margin-top:var(--s-4)}
.hero .grain{position:absolute;right:-40px;top:-40px;width:220px;height:220px;opacity:.5;pointer-events:none}
@media (min-width:1024px){.hero{padding:var(--s-6) var(--s-8) var(--s-6)}.hero h1{font-size:36px}}

/* Shortcut tiles */
.shorts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3)}
.sh{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.sh .ico{width:34px;height:34px;flex:none;border-radius:9px;background:var(--navy-50);display:grid;place-items:center;color:var(--navy-900)}
.sh .ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sh b{display:block;font-size:var(--fs-13);line-height:1.25}
.sh span{display:block;font-size:12px;color:var(--ink-2);line-height:1.3;margin-top:2px}
.sh.hot{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.sh.hot span{color:var(--navy-300)}
.sh.hot .ico{background:rgba(255,255,255,.1);color:#fff}
@media (min-width:1024px){.shorts{grid-template-columns:repeat(4,1fr)}}

/* Shelf bars */
.bar{margin:9px 0}
.bar .t{display:flex;justify-content:space-between;font-size:var(--fs-13)}
.bar .t b{font-weight:var(--fw-bold)}
.bar .tr{height:6px;background:var(--fill);border-radius:4px;overflow:hidden;margin-top:5px}
.bar .tr i{display:block;height:6px;border-radius:4px}

/* Bottom sheet (miSheet) */
.misheet{background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--sh-3);padding:10px var(--s-4) var(--s-6)}
.misheet .grab{width:40px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 14px}
.misheet h3{margin-bottom:4px}
.misheet .sub{color:var(--ink-2);font-size:var(--fs-13);margin-bottom:var(--s-3)}
.misheet .acts{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-4)}
@media (min-width:1024px){.misheet{border-radius:var(--r-lg);padding:var(--s-6)}.misheet .grab{display:none}.misheet .acts{flex-direction:row}}

/* Allergy strip */
.allergy{display:flex;gap:10px;align-items:center;margin-top:var(--s-3);padding:10px 12px;border-radius:var(--r-sm);background:var(--bad-100);color:var(--bad);font-size:var(--fs-13)}
.allergy svg{width:18px;height:18px;flex:none}

.tot{font-size:var(--fs-28);font-weight:var(--fw-heavy);letter-spacing:-.02em}
.tot small{display:block;font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* annotation for the coding thread (not part of the app) */
.note-dev{font-family:var(--font-mono);font-size:11px;color:var(--navy-700);background:var(--navy-50);border:1px dashed var(--navy-300);border-radius:8px;padding:8px 10px;margin:8px 0}

/* ============================================================
   Bridge to the live app's own markup (23 September 2026).
   The design draws the shell with links; the app builds it with buttons and
   has a few parts the design board never showed (the quick bar, the basket bar,
   the sign-out button). These rules give those the same look.
   ============================================================ */

/* the phone tab bar: the app uses <button> inside .tabs */
.tabs{position:sticky;bottom:0;left:auto;right:auto;display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);border-top:1px solid var(--line);backdrop-filter:none;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30}
.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 0 4px;min-height:var(--tap);border:0;background:none;border-radius:var(--r-sm);
  font-size:11px;font-weight:var(--fw-medium);line-height:1.2;color:var(--ink-3);position:relative}
.tabs button .ic svg,.tabs button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--navy-900);background:none}
.tabs button.on::before{content:"";position:absolute;top:-7px;left:50%;width:18px;height:3px;margin-left:-9px;border-radius:0 0 3px 3px;background:var(--coral)}

/* the top bar as the app builds it */
.top{background:rgba(246,244,239,.92);border-bottom:1px solid var(--line);color:var(--ink)}
.top .who{margin-left:auto;text-align:right;line-height:1.25;color:var(--ink)}
.top .who .wlbl{display:block;font-family:var(--font-mono);font-size:var(--fs-11);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--ink-3)}
.top .who #whoSalon{display:block;font-weight:var(--fw-bold);font-size:var(--fs-13)}
.top .who #whoName{display:block;font-size:var(--fs-12);color:var(--ink-2)}
.top .avatar{background:var(--navy-900);color:#fff}
.top .quickbar{display:flex;gap:8px;align-items:center;margin-left:auto}
.top .quickbar .qb{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--navy-900);font-size:var(--fs-13);font-weight:var(--fw-medium)}
.top .quickbar .qb.hot{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.top .quickbar .qb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.top .actwrap{display:flex;gap:10px;align-items:center;flex:none}
.top .actwrap button{height:38px;padding:0 13px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--navy-900);font-size:var(--fs-13);font-weight:var(--fw-medium)}

/* the basket bar the Order tab shows above the tabs */
.cartbar{position:sticky;bottom:64px;z-index:29;margin:0 var(--gutter-phone);border-radius:var(--r-md);background:var(--navy-900);color:#fff;box-shadow:var(--sh-2)}
.cartbar:empty{display:none}

/* the sidebar from 1024: the app's version uses buttons */
.side{display:none}
@media (min-width:1024px){
  .side{display:flex}
  .side button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:var(--r-sm);background:none;color:var(--navy-300);font-weight:var(--fw-medium);font-size:var(--fs-15);text-align:left;position:relative}
  .side button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .side button:hover{background:rgba(255,255,255,.05);color:#fff}
  .side button.on{background:rgba(255,255,255,.09);color:#fff}
  .side button.on::after{content:"";position:absolute;right:12px;width:6px;height:6px;border-radius:50%;background:var(--coral)}
  .cartbar{position:fixed;right:var(--gutter-desk);bottom:var(--s-6);left:auto;margin:0;max-width:360px}
  /* the top bar keeps the quick bar on a wide screen, so the logo may stay hidden */
  .top .brand{display:none}
}

/* the app's own wrapper is .wrap, not <main>, and the login screen must stay hidden */
.hide{display:none !important}
@media (min-width:1024px){
  .app>.wrap{grid-column:2;width:100%;min-width:0}
  .app>.cartbar{grid-column:2}
  .app>.tabs{display:none}
}

/* the Today band: the app's own tiles were pale, the design's sit inside the navy band */
.hero h1{color:#fff}
.hero .k{background:rgba(255,255,255,.06);border:0;border-radius:0;padding:14px 16px}
.hero .k .n{color:#fff}
.hero .k .l{color:var(--navy-300)}
.hero .kgrid{grid-template-columns:1fr 1fr}
@media (min-width:1024px){.hero .kgrid{grid-template-columns:repeat(4,1fr)}}

/* on a phone the top bar keeps the logo and the actions only: the name is in More */
@media (max-width:1023px){ .top .who{display:none} }

/* the four Today figures were tinted per tile; inside the navy band they share one quiet fill */
#tdK .k:nth-child(4n+1),#tdK .k:nth-child(4n+2),#tdK .k:nth-child(4n+3),#tdK .k:nth-child(4n+4){background:rgba(255,255,255,.06);border:0}
#tdK .k .n{color:#fff}
#tdK .k .l{color:var(--navy-300)}

/* ---------- the till: products used in the service (from the design's till.html) ---------- */
/* The used-in-service lines. They arrive by themselves from Products per treatment. */
.used{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.used .it{padding:12px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.used .it:last-child{border-bottom:0}
.used .grow{flex:1;min-width:0}
.used b{display:block;font-size:var(--fs-15);line-height:1.35}
.used .sub{font-size:var(--fs-13);color:var(--ink-2);margin-top:3px;line-height:1.35}
.used .it b .amt{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--navy-900);background:var(--navy-50);border-radius:6px;padding:1px 6px;margin-left:2px}
.used .sub{display:flex;align-items:center;gap:6px}
.used .sub i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.used .it.more .sub i{background:var(--coral)}
.used .it.more .amt{background:var(--coral-100);color:var(--coral)}
.used .it.less .sub i{background:var(--navy-700)}
.used .it.none{background:var(--paper)}
.used .it.none b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.used .it.none .sub i{background:var(--line-2)}
.used .it.retail{background:var(--navy-50)}
.step2{display:flex;gap:6px;flex:none}
.step2 .btn.step{background:var(--surface);color:var(--navy-900);border-color:var(--line-2)}
.step2 .btn.step.plus{background:var(--navy-900);color:#fff;border-color:var(--navy-900)}

/* The six tabs must shrink to the screen. Without this the bar is as wide as its longest
   labels (about 638px) and every screen inherits that width on a phone. */
.tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
.tabs button{min-width:0;padding-left:2px;padding-right:2px}
.tabs button span.ic{display:block}

/* The content column is a flex child, so by default it may grow wider than the phone when one
   row inside it is wide (the shop's chips). Holding it to the screen fixes every screen at once. */
.app>.wrap{min-width:0;max-width:100%}

/* headings inside the navy cards were inheriting the dark body colour */
.hero h1,.hero h2,.lowcard h2,.signcard h2,.side .foot b{color:#fff}
.lowcard .muted,.signcard .muted{color:var(--navy-300)}

/* app.css marks some colours and the shop grid as !important, so the new look has to say it too */
.hero h1,.hero h2,.lowcard h2,.signcard h2,.card.lowcard > h2,.card.signcard > h2{color:#fff !important}
#ordResults{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
@media (min-width:1024px){#ordResults{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px}}