/* CutBook — design tokens and components. Light mode. Grid unit: 22px per 15 minutes, so a 30-minute cut is one 44px touch target. */ :root{ --canvas:#F6F7F9; --surface:#FFFFFF; --sunken:#EDF0F3; --line:#DDE2E8; --ink:#101418; --ink2:#4A5461; --ink3:#5A6573; --blue:#2A5CBE; --blue-ink:#2352AD; --blue-tint:#E9EFFB; --ok:#0E7C55; --ok-tint:#E6F2ED; --warn:#B26A00; --warn-tint:#F7EFE0; --red:#D32F45; --red-tint:#FBE9EC; /* Button sizes: the only three the app uses (see docs/DESIGN.md). */ --btn-h-s:36px; --btn-fs-s:14px; --btn-pad-s:0 12px; --btn-h-m:44px; --btn-fs-m:15px; --btn-pad-m:0 16px; --btn-h-l:52px; --btn-fs-l:16px; --btn-pad-l:0 20px; --btn-r:10px; --tap:44px; --row:24px; /* one 15-minute slot: a 30-min cut is a 46px target */ --r-blk:4px; --r-chip:6px; --r-btn:10px; --r-sheet:16px; --sheet-shadow:0 -8px 32px rgba(16,20,24,.16); --toast-shadow:0 4px 16px rgba(16,20,24,.20); --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ background:var(--canvas); color:var(--ink); font-family:var(--f); font-size:16px; line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } button,input,select{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} :focus-visible{outline:3px solid var(--blue);outline-offset:2px} [hidden]{display:none!important} .mono{font-variant-numeric:tabular-nums} /* ---------------------------------------------------------- brand */ .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px;letter-spacing:-.03em} .brand svg{width:22px;height:22px;color:var(--blue);flex:none} .brand b{color:var(--blue);font-weight:700} /* the drawn logo: sized by the brand's font-size, one colour throughout */ .brand svg.lockup,.auth .brand svg.lockup{width:auto;height:1.35em;display:block;flex:none;color:#2A5CBE} .wordmark svg.lockup{height:22px;width:auto;display:block;color:#2A5CBE} .wordmark svg.mark-only{display:none;width:20px;height:20px;color:#2A5CBE} /* ---------------------------------------------------------- buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:0 18px;border-radius:var(--r-btn); background:var(--ink);color:var(--surface);font-weight:600;font-size:15px; } .btn--ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)} .btn--blue{background:var(--blue-ink);color:#fff} .btn--ok{background:var(--ok);color:#fff} .btn--danger{background:var(--surface);color:var(--red);border:1px solid var(--line)} .btn--cta{width:100%;min-height:52px;font-size:16px;border-radius:12px} .btn:disabled{opacity:.45;cursor:default} /* ---------------------------------------------------------- forms */ .field{display:block;margin-bottom:12px} .field span{ display:block;font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--ink3);margin-bottom:4px; } .field input,.field select{ width:100%;min-height:48px;padding:0 13px; border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface); } .field input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none} /* a password field with a Show / Hide button sitting inside it */ .pwrap{position:relative;display:flex;align-items:center} .pwrap input{padding-right:64px} .pwtoggle{ position:absolute;right:6px;top:50%;transform:translateY(-50%); min-height:34px;padding:0 10px;border-radius:7px; font-size:13px;font-weight:600;color:var(--blue-ink);background:none; } .pwtoggle:hover{background:var(--blue-tint)} /* the request-access form is longer than a sign-in card */ .auth textarea{ width:100%;min-height:76px;padding:11px 13px; border:1px solid var(--line);border-radius:var(--r-chip); background:var(--surface);font:inherit;color:inherit;resize:vertical; } .auth textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ min-height:44px;padding:0 13px;border-radius:var(--r-chip); border:1px solid var(--line);background:var(--sunken);color:var(--ink2); font-size:14px;font-weight:500;display:inline-flex;align-items:center; } .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600} /* ---------------------------------------------------------- app chrome */ .appbar{ position:sticky;top:0;z-index:10;background:var(--surface); border-bottom:1px solid var(--line);padding:0 16px; } .appbar__row{ display:flex;align-items:stretch;gap:22px; border-bottom:1px solid var(--line); } /* the tabs stretch to fill the row so their underline sits on it; the button must not, or it grows to the full height of the bar */ .appbar__row #signout{align-self:center;flex:none} .wordmark{ display:flex;align-items:center;flex:none; font-size:19px;font-weight:700;letter-spacing:.04em; color:var(--blue); } /* the day, and one step either side */ /* The date is the only thing here that changes width — "Wednesday, Sep 23" against "Fri, Sep 4" — and everything after it used to slide as the day changed. It gets a fixed slot instead, so the arrows, Today and Add appointment are in the same place every day. */ .daybar{display:flex;align-items:center;gap:12px;padding:14px 0} .appbar h1{ font-size:26px;font-weight:600;letter-spacing:-.02em; flex:none;width:15.5ch; } .daynav{display:flex;gap:8px;flex:none} /* Today keeps its place whether or not it does anything, so nothing shifts when you step off today and back again. */ #jumptoday[hidden]{display:block!important;visibility:hidden;pointer-events:none} /* …but on the other tabs there is no day to go back to, so it goes away */ .daybar--plain #jumptoday[hidden]{display:none!important} .daynav__btn{ width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:var(--surface); color:var(--ink2);font-size:17px;line-height:1; display:flex;align-items:center;justify-content:center; } .daynav__btn:hover{background:var(--sunken);color:var(--ink)} #jumptoday{min-height:34px} .daybar #addappt{min-height:38px;padding:0 14px;font-size:13.5px;flex:none;margin-left:auto} @media (max-width:600px){ /* On a phone the date takes its own line and the controls sit in a steady row beneath it, so nothing reflows as the date grows or shrinks. */ .daybar{flex-wrap:wrap;gap:8px 10px;padding:10px 0 12px} .appbar h1{flex:1 0 100%;width:auto;font-size:21px} .daybar #addappt{margin-left:auto} } /* Sections sit on the same row as the wordmark, above the day. */ .tabbar{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .tabbar::-webkit-scrollbar{display:none} .tabbar a{ display:flex;align-items:center;min-height:52px;padding:0 14px; font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none; white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px; } .tabbar a:hover{color:var(--ink)} .tabbar a[aria-current="page"]{ color:var(--blue);font-weight:600;border-bottom-color:var(--blue); } .view{padding-bottom:24px} /* ---------------------------------------------------------- today grid */ .grid-scroll{overflow-x:auto;background:var(--surface);-webkit-overflow-scrolling:touch} .grid-head,.grid-body{display:grid;grid-template-columns:var(--gutter,46px) repeat(var(--cols,3),minmax(108px,1fr))} .grid-head{ position:sticky;top:0;z-index:3;background:var(--surface); border-bottom:1px solid var(--line); } .grid-head > div{padding:8px 10px;border-left:1px solid var(--line)} .grid-head > div:first-child{border-left:0} .bname{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600} .bdot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none} .bmeta{font-size:10.5px;color:var(--ink3);margin-top:1px} .addcol{ border:1.5px dashed #C3CBD4;border-radius:8px;min-height:44px;width:100%; font-size:12.5px;font-weight:600;color:var(--ink2); } .grid-body{ position:relative;grid-auto-rows:var(--row); background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px calc(var(--row)*2)); } .gutter{ grid-column:1;font-size:10px;color:var(--ink3);font-weight:500; text-align:right;padding:2px 7px 0 0; } .colrule{border-left:1px solid var(--line)} .slot{background:none;border:0;width:100%;height:100%} /* tappable empty space */ .blk{ position:relative;z-index:1;display:block;width:calc(100% - 6px); margin:1px 4px 1px 2px;padding:2px 7px;overflow:hidden;text-align:left; border-radius:var(--r-blk);border-left:3px solid var(--c);background:var(--t); line-height:1.22; } .blk b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .blk i{display:block;font-style:normal;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Two bookings at the same time share the column between them rather than covering each other up. translateX is a percentage of the block's own width, which is already 1/n of the column, so lane n lands exactly n widths across. */ .blk--shared{ width:calc((100% - 6px) / var(--lanes)); transform:translateX(calc(var(--lane) * 100%)); box-shadow:-1px 0 0 var(--surface); } .blk--shared b{font-size:12px} .blk--shared i{font-size:11px} .blk:active{transform:scale(.98)} .blk--shared:active{transform:translateX(calc(var(--lane) * 100%)) scale(.98)} .blk[data-status="completed"]{opacity:.62} .blk[data-status="completed"] b::after{content:" ✓";color:var(--ok)} .blk[data-status="no_show"]{ background:var(--warn-tint);border-left-color:var(--warn); background-image:repeating-linear-gradient(45deg,rgba(178,106,0,.10) 0 3px,transparent 3px 7px); } .blk[data-status="no_show"] b{text-decoration:line-through;color:var(--warn)} .blk .flag{position:absolute;top:3px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--warn)} .blk--off{background:var(--sunken);border-left-color:#C3CBD4; background-image:repeating-linear-gradient(45deg,rgba(16,20,24,.05) 0 4px,transparent 4px 9px)} .blk--off b{color:var(--ink3);font-weight:500} /* a whole day off shades the column, behind whatever is still booked in it */ .blk--offday{z-index:0;margin:0;border-radius:0;border-left-width:0;opacity:.85} .blk--offday b{position:sticky;top:80px;padding:6px 8px;font-size:12px} .nowline{position:absolute;left:var(--gutter,46px);right:0;height:2px;background:var(--red);z-index:4;pointer-events:none} .nowline::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--red)} /* ---------------------------------------------------------- sheet */ .scrim{position:fixed;inset:0;background:rgba(16,20,24,.32);z-index:20} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:21;max-height:78vh;overflow-y:auto; background:var(--surface);border-radius:var(--r-sheet) var(--r-sheet) 0 0; padding:10px 16px calc(20px + env(safe-area-inset-bottom)); box-shadow:var(--sheet-shadow); animation:rise .24s cubic-bezier(.2,.8,.2,1); } @keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}} .sheet__grab{width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px} .sheet__label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)} .sheet__title{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:3px 0 0} .sheet h3{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:18px 0 8px} /* the primary action needs air under whatever it follows — a results list and a no-show badge both ended up flush against it */ .sheet .btn--cta{margin-top:16px} .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)} .row:last-child{border-bottom:0} .row b{font-weight:600} .sub{font-size:12px;color:var(--ink3)} /* no-show badge — shows the ratio, never a verdict */ .noshow{ display:flex;align-items:center;gap:7px;margin-top:8px; background:var(--warn-tint);border-left:3px solid var(--warn); border-radius:0 8px 8px 0;padding:9px 11px;font-size:13.5px;color:var(--ink); } .noshow strong{font-weight:600;color:var(--warn)} /* ---------------------------------------------------------- toast */ .toast{ position:fixed;left:16px;right:16px;bottom:80px;z-index:30; display:flex;align-items:center;justify-content:space-between;gap:12px; background:var(--ink);color:var(--surface);border-radius:12px; padding:14px 16px;font-size:15px;box-shadow:var(--toast-shadow); } .toast button{color:var(--blue);font-weight:700;font-size:15px;min-height:auto} /* ---------------------------------------------------------- misc */ .pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600} .pill--ok{background:var(--ok-tint);color:var(--ok)} .pill--warn{background:var(--warn-tint);color:var(--warn)} .pill--off{background:var(--sunken);color:var(--ink3)} .empty{padding:48px 24px;text-align:center;color:var(--ink3)} .empty b{display:block;color:var(--ink);font-size:17px;font-weight:600;margin-bottom:6px} .err{background:var(--red-tint);border-left:3px solid var(--red);border-radius:0 8px 8px 0;padding:12px 14px;font-size:14px;margin-bottom:12px} /* ---------------------------------------------------------- login */ .auth{ min-height:100dvh;display:flex;align-items:center;justify-content:center; padding:24px;background:var(--surface); } .auth__card{width:100%;max-width:340px} .auth .brand{font-size:30px;margin-bottom:6px} .auth .brand svg{width:30px;height:30px} .auth p.shop{color:var(--ink3);font-size:14px;margin-bottom:28px} /* ---------------------------------------------------------- laptop Everything above this line is written phone-first, where full-width is the right answer. On a laptop the same rules let every element grow with the window — which is why the sign-in form ran the whole width of the screen. The fix is the same in each case: give the thing a sane maximum and centre it. */ @media (min-width:760px){ /* sign-in becomes a card on the canvas instead of a full-bleed page */ .auth{background:var(--canvas)} .auth__card{ max-width:380px;background:var(--surface); border:1px solid var(--line);border-radius:16px;padding:34px 32px 30px; box-shadow:0 1px 2px rgba(16,20,24,.04),0 10px 30px rgba(16,20,24,.06); } .app{max-width:1180px;margin:0 auto} .view{padding-bottom:32px} /* five date pills stretched across 1180px read as buttons, not dates */ /* a reading column — an earnings table 1180px wide is unreadable */ #view-settings,#view-clients{max-width:720px} #view-earnings{max-width:1180px} /* bottom sheets become centred dialogs */ .sheet{ left:50%;right:auto;bottom:32px;width:min(460px,calc(100vw - 48px)); border-radius:var(--r-sheet);max-height:calc(100dvh - 64px); padding:22px 22px 24px;transform:translateX(-50%); animation:rise-d .2s cubic-bezier(.2,.8,.2,1); } .sheet__grab{display:none} @keyframes rise-d{ from{transform:translate(-50%,18px);opacity:0} to{transform:translate(-50%,0);opacity:1} } .toast{left:50%;right:auto;bottom:32px;transform:translateX(-50%); width:min(460px,calc(100vw - 48px))} } /* On a phone the wordmark and the sign-out button between them leave the tabs too little room and "Customers" truncates. Inside the app you already know which app you are in, so the wordmark is the thing that gives way. This has to sit after the base .wordmark rule, not before it — same specificity, so whichever comes last wins. */ @media (max-width:600px){ /* The full logo gives way to the scissors alone: enough to say whose app this is, narrow enough that four tabs and Sign out still fit at 390px. */ .wordmark svg.lockup{display:none} .wordmark svg.mark-only{display:block} /* gap:0 left the last tab flush against Sign out, so "Settings" read as "Setting" with the button sitting on its last letter. The tabs also need to be a shade tighter to fit four of them beside the button on a 375px phone; below that the row scrolls rather than collides. */ .appbar__row{gap:8px} .tabbar a{padding:0 6px;font-size:13px;min-height:48px} .appbar__row #signout{padding:0 9px;font-size:12px} .appbar h1{font-size:22px} } @media (max-width:360px){ .tabbar a{padding:0 4px;font-size:12.5px} } /* Under 390px (an iPhone SE or mini) even the scissors push the tabs into scrolling, so the bar goes back to exactly what it was before the logo. */ @media (max-width:389px){ .wordmark{display:none} .appbar__row{gap:10px} } /* The date heading opens a picker on the Today tab; on the others it is just the section title. */ @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---------------------------------------------------------- sheet extras */ .sheet input[type="tel"], .sheet input[type="email"], .sheet input[type="text"]{ width:100%;min-height:48px;padding:0 13px;margin-top:8px; border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface); } .sheet input[type="text"]:focus{ border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none; } .chips--row{flex-wrap:nowrap;gap:6px} /* a typed-in discount or tip: the unit picker, then the number */ .customrow{display:flex;align-items:center;gap:8px;margin-top:8px} .customrow input{ flex:1;min-width:0;min-height:48px;padding:0 13px; border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface); } .customrow input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none} .customrow .chip{min-width:48px;justify-content:center} /* the slot list — a taken time is visible but cannot be chosen */ .field select{ width:100%;min-height:48px;padding:0 13px; border:1px solid var(--line);border-radius:var(--r-chip); background:var(--surface);font:inherit;color:inherit; } .field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none} .field select option:disabled{color:var(--ink3)} /* something the sheet needs to tell you before you can carry on */ .sheetmsg{ display:flex;align-items:center;flex-wrap:wrap; background:var(--warn-tint);border-left:3px solid var(--warn); border-radius:0 8px 8px 0;padding:10px 12px;margin-top:10px; font-size:13.5px;color:var(--ink); } /* the barber chips carry their colour dot */ .chips .bdot{width:9px;height:9px} /* ---------------------------------------------------------- clients */ #view-clients input[type="search"]{ width:100%;min-height:48px;padding:0 13px; border:1px solid var(--line);border-radius:var(--r-chip);background:var(--surface); } #view-clients input[type="search"]:focus{ border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none; } #view-clients .listrow{align-items:center} #view-clients .tiles{grid-template-columns:1fr 1fr} /* the visit row stacks what they had done over when and with whom */ #view-clients .barrow__who > div{display:grid;gap:1px} #view-clients .barrow__who b{font-weight:600} #view-clients .barrow__n{display:grid;gap:4px;justify-items:end} .sheet textarea{ width:100%;min-height:84px;padding:11px 13px;margin-top:8px; border:1px solid var(--line);border-radius:var(--r-chip); background:var(--surface);font:inherit;color:inherit;resize:vertical; } .sheet textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none} .chips--row .chip{flex:1;justify-content:center;padding:0 6px} /* client search results */ .result{ display:grid;gap:1px;width:100%;text-align:left;padding:11px 2px; border-bottom:1px solid var(--line);background:none; } .result b{font-size:15px;font-weight:600} .result span{font-size:12.5px;color:var(--ink3)} .result em{ font-style:normal;font-size:12.5px;font-weight:600;color:var(--warn); justify-self:start;background:var(--warn-tint);border-radius:5px;padding:2px 7px;margin-top:3px; } /* cash / card */ .pay2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .paybtn{ border:2px solid var(--line);border-radius:14px;padding:18px 10px; text-align:center;background:var(--surface); } .paybtn b{display:block;font-size:17px;font-weight:600} .paybtn span{font-size:11.5px;color:var(--ink3)} .paybtn.is-on{border-color:var(--ink);background:var(--sunken)} .row.is-minus b{color:var(--red)} .row.is-minus span{color:var(--red)} .row.is-total b{color:var(--ok);font-size:16px} .row.is-total span{font-weight:600;color:var(--ink)} /* a 15-minute block only has room for one line */ .blk--tight{padding-top:1px} .blk--tight b{font-size:12px} /* ---------------------------------------------------------- earnings */ .view > section{padding:16px} .seg{display:flex;gap:6px;margin-bottom:12px} .seg__btn{ flex:1;min-height:44px;border:1px solid var(--line);border-radius:var(--r-chip); background:var(--surface);font-size:14px;font-weight:600;color:var(--ink2); } .seg__btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)} .taxtoggle{display:flex;gap:6px;margin-bottom:14px} .taxtoggle .chip{flex:1;justify-content:center} .daterow{display:flex;gap:8px;align-items:center;margin-bottom:12px;font-size:13px;color:var(--ink3)} .daterow input{ flex:1;min-height:44px;padding:0 10px;border:1px solid var(--line); border-radius:var(--r-chip);background:var(--surface); } .hero-tile{background:var(--ink);color:var(--surface);border-radius:16px;padding:20px;margin-bottom:12px} .hero-tile .k{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.6} .hero-tile .v{font-size:40px;font-weight:700;letter-spacing:-.03em;margin-top:4px} .hero-tile .s{font-size:13px;opacity:.7;margin-top:2px} .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px} .tile .k{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)} .tile .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:4px} .tile .s{font-size:11.5px;color:var(--ink3);margin-top:2px} .panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden} .ph{padding:12px 16px;border-bottom:1px solid var(--line)} .ph h3{font-size:14px;font-weight:600;margin:0;letter-spacing:0;text-transform:none;color:var(--ink)} .barrow{display:flex;justify-content:space-between;align-items:center;gap:12px; padding:13px 16px;border-bottom:1px solid var(--line)} .barrow:last-child{border-bottom:0} .barrow__who{display:flex;align-items:center;gap:9px} .barrow__who b{font-weight:600} .barrow__n{text-align:right} .barrow__n b{display:block;font-weight:600} /* ---------------------------------------------------------- settings */ .setgroup{margin-bottom:26px} .setgroup__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px} .setgroup__head h2{font-size:20px;font-weight:700;letter-spacing:-.02em} .setgroup__head p{font-size:13px;color:var(--ink3);margin-top:2px;max-width:42ch} .listrow{ display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center; width:100%;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);background:none; } .listrow:last-child{border-bottom:0} .listrow b{display:block;font-weight:600;font-size:15px} .two{display:grid;grid-template-columns:1fr 1fr;gap:10px} .swatch{width:44px;height:44px;border-radius:10px;background:var(--c);border:2px solid transparent} .swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset} .switch{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px} .switch input{width:20px;height:20px;accent-color:var(--blue-ink)} .svcrow{ display:grid;grid-template-columns:1fr 72px 84px;gap:8px;align-items:center; padding:10px 14px;border-bottom:1px solid var(--line); } .svcrow:last-child{border-bottom:0} .svcrow input[type="number"]{ min-height:44px;padding:0 8px;border:1px solid var(--line); border-radius:var(--r-chip);background:var(--surface);width:100%; } .linkbtn{color:var(--blue-ink);font-weight:600;font-size:13.5px;min-height:40px} /* Money: on a laptop the totals sit left and the barbers get the space that used to be empty on the right. One column on anything narrower. */ .money{display:grid;grid-template-columns:1fr;gap:18px;align-items:start} @media (min-width:900px){ .money{grid-template-columns:minmax(420px,1fr) minmax(360px,1fr);gap:26px} .money__side{position:sticky;top:120px} } /* three words on one chip, always */ .taxtoggle .chip{white-space:nowrap} /* one row per weekday in Settings: the switch, then its hours */ .dayrow{ display:flex;align-items:center;gap:12px; padding:8px 16px;border-bottom:1px solid var(--line); } .dayrow:last-of-type{border-bottom:0} .dayrow .field{margin:0} .dayrow .field input{min-height:40px} .dayrow .switch{min-height:40px} @media (max-width:480px){ .dayrow{flex-wrap:wrap;gap:6px} .dayrow .two{flex:1 0 100%} } /* ---------------------------------------------------------- first run */ .setup{padding:8px 0 24px} .setup h2{font-size:26px;font-weight:700;letter-spacing:-.025em;margin-bottom:6px} .setup p{font-size:15px;color:var(--ink2);margin-bottom:18px;max-width:48ch} .setup__dots{display:flex;gap:6px;margin-bottom:22px} .setup__dots span{height:4px;flex:1;border-radius:2px;background:var(--line)} .setup__dots span.on{background:var(--ink)} .setup__dots span.done{background:var(--blue)} .setup__card{ background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:14px;margin-bottom:10px; } /* ------------------------------------------------------------ the PIN pad Thumb-sized keys in a column narrow enough to reach across one-handed. The pad is the whole screen while it is up: there is nothing else to do. */ .pinpad { max-width: 320px; margin: 48px auto; text-align: center; } .pinpad h2 { margin: 0 0 6px; font-size: 20px; } .pinpad__note { margin: 0 0 20px; color: var(--muted, #667); font-size: 14px; } .pinpad__note--bad { color: #b3261e; } .pinpad__dots { display: flex; gap: 12px; justify-content: center; min-height: 14px; margin-bottom: 24px; } .pindot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line, #ccd); background: transparent; } .pindot--on { background: var(--ink, #111); border-color: var(--ink, #111); } .pinpad__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pinkey { height: 64px; font-size: 24px; font-variant-numeric: tabular-nums; border: 1px solid var(--line, #ccd); border-radius: 12px; background: var(--card, #fff); color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pinkey:active { background: var(--wash, #eef1f6); } .pinkey--soft { font-size: 20px; } .pinkey--blank { border: 0; background: none; cursor: default; } .pinpad__row { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; } .pinpad__row .btn { width: 100%; } /* one change to a paid booking, as a line in the appointment sheet */ .editlog { margin-top: 18px; border-top: 1px solid var(--line, #ccd); padding-top: 12px; } .editlog h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted, #667); font-weight: 600; } .editlog__row { font-size: 13px; line-height: 1.5; padding: 3px 0; } .editlog__who { color: var(--muted, #667); } /* ================================================= accessibility pass (Sep 2026) Touch targets: Apple asks for 44px. Where a control should *look* smaller than that (the round day arrows, text links in the header), its hit area is grown with an invisible ::after instead, so the header keeps its shape. */ .hit{position:relative} .hit::after{content:"";position:absolute;left:50%;top:50%; width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)} .daynav__btn,#jumptoday,.appbar__row #signout,.bname,.linkbtn,.toast button,.link-strong{position:relative} .link-strong{display:inline-block} .daynav__btn::after,#jumptoday::after,.appbar__row #signout::after, .bname::after,.linkbtn::after,.toast button::after,.link-strong::after,.pwtoggle::after{ content:"";position:absolute;left:50%;top:50%; width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)} .daybar #addappt{min-height:44px} .toast button{padding:0 6px} /* A 15-minute booking is one row tall. Its tap area reaches into the empty half-rows around it without covering its neighbours' text. */ .blk--tight::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px} .blk:focus-visible{outline:3px solid var(--blue-ink);outline-offset:1px;z-index:3} /* Text floor: nothing a barber has to read is under 12px. */ .gutter{font-size:12px} .bmeta{font-size:12px} .blk--shared i{font-size:12px} .field span,.sheet__label,.sheet h3{font-size:12px} .pill{font-size:12px} .sub{font-size:13px} /* The date heading holds a real button, so the page keeps its h1. */ .daybtn{font:inherit;letter-spacing:inherit;color:inherit;text-align:left; padding:0;min-height:44px;border-radius:8px} .daybtn:hover{color:var(--blue-ink)} /* Sheets: the "discard what you typed?" bar, and the payment prompt. */ .sheetconfirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px; margin:0 0 12px;padding:12px 14px;border-radius:10px; background:var(--warn-tint);color:var(--ink);font-size:14px} .sheetconfirm span{flex:1 1 180px} .paynote{font-size:13px;color:var(--ink2);margin-top:8px} /* Small shared layout helpers, so screens stop carrying inline styles. */ .mt8{margin-top:8px} .mt12{margin-top:12px} .mt14{margin-top:14px} .mt16{margin-top:16px} .nopad-bg{background:none;padding:0} .btn--compact{min-height:44px;margin-left:8px} .noshow--ok{border-left-color:var(--ok);background:var(--ok-tint)} .link-strong{color:var(--blue-ink);font-weight:600} .center{text-align:center} .panelpad{padding:16px} .err--bar{margin:0;border-radius:0} .btn--signout{min-height:34px;padding:0 12px;font-size:13px} /* helpers used by the screens (were inline styles) */ .m0{margin:0}.mt6{margin-top:6px}.mt10{margin-top:10px}.mt18{margin-top:18px}.mt26{margin-top:26px} .mb10{margin-bottom:10px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px} .pad26{padding:26px}.wfull{width:100%}.left{text-align:left}.right{text-align:right} .flex1{flex:1}.flexnone{flex:0 0 auto} .mt12{margin-top:12px}.mt20{margin-top:20px}.mt22{margin-top:22px}.inline-flex{display:inline-flex} .meter{margin:-4px 0 12px} .visually-hidden{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .visually-hidden-picker{position:absolute;left:12px;bottom:14px;width:1px;height:1px;opacity:0;border:0;padding:0} /* the request form's bot trap: off-screen and out of reach, but still in the form for a bot that fills in everything */ .hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .till{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink2);flex:none} .till select{min-height:44px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;max-width:9.5rem} .daybar--plain .till{display:none} /* ================================================= phone pass (Sep 2026) Found on a real iPhone: time boxes running off the screen, the header wrapping into ragged rows, the "+" column cut in half, and Safari zooming in whenever a small text box was tapped. */ /* iOS zooms the whole page when a text box under 16px gets focus. Every box a barber types or picks in is 16px, so the page stays put. */ input, select, textarea{font-size:16px} .till select{font-size:16px} /* Time and date boxes: iOS gives them a wide size of their own, which pushed the closing time off the edge. They now fill their column like any box. */ input[type="time"], input[type="date"]:not(#jumpdate){ -webkit-appearance:none; appearance:none; display:block; width:100%; min-width:0; max-width:100%; min-height:48px; padding:0 12px; margin:0; text-align:left; border:1px solid var(--line); border-radius:var(--r-chip); background:var(--surface); color:var(--ink); line-height:48px; } input[type="time"]::-webkit-date-and-time-value, input[type="date"]::-webkit-date-and-time-value{text-align:left; margin:0} input[type="time"]:focus, input[type="date"]:not(#jumpdate):focus{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); outline:none; } /* two boxes side by side always split the row evenly and never overflow */ .two{grid-template-columns:repeat(2, minmax(0, 1fr))} .two > *, .field, .dayrow .field{min-width:0} .dayrow .field input{min-height:48px} /* Keep the last button on a page clear of Safari's floating address bar. */ .view{padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px))} .sheet{padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))} @media (max-width:600px){ /* The day header on a phone, in three tidy rows: Saturday, Sep 26 ‹ › Today Till [Pick your name] [ + Add appointment ] */ .daybar{ display:grid; grid-template-columns:auto auto minmax(0, 1fr); grid-template-areas:"h h h" "nav today till" "add add add"; align-items:center; gap:10px 10px; padding:10px 0 12px; } .daybar h1{grid-area:h; width:auto} .daybar .daynav{grid-area:nav} .daybar #jumptoday{grid-area:today} .daybar .till{grid-area:till; justify-self:stretch; min-width:0} .daybar .till select{flex:1; min-width:0; max-width:none; width:100%} .daybar #addappt{grid-area:add; width:100%; min-height:48px; font-size:16px; margin:0} .daybar--plain{display:flex} /* the "+" column: just the plus, sized to fit */ .addcol{font-size:22px; font-weight:500; min-height:44px; padding:0} .addcol__label{display:none} .daynav__btn{width:40px; height:40px} } /* A button's label never breaks onto two lines ("+ Add client" was splitting on a phone); the heading beside it gives up the room instead. */ .btn{white-space:nowrap} .setgroup__head{gap:12px} .setgroup__head > div{min-width:0} .setgroup__head > .btn, .setgroup__head > button{flex:none} /* ============================================= one size for every box (Safari) Safari draws