/* BookHere studio — the artist's app. Phone first: bottom tab bar, grouped settings. */
:root{
  /* 1.9: one neutral set. Surface, border, text and muted are the only greys;
     lime is the primary action and the active nav item; red is a destructive
     confirmation and nothing else. --green is the lime written dark enough to
     be read as text, because #B6FF3B on white cannot be. */
  --bg:#FFFFFF; --card:#FAFAF9; --card2:#F2F2F0; --line:#E8E8E5; --ink:#111111; --sub:#6B6B66;
  --green:#5E9012; --green2:#78B218; --lime:#B6FF3B; --warn:#6B6B66; --bad:#C2384B;
  --shut:#F2F2F0; --shutink:#9A9A94; --dot:#7FB238;
  --glass:rgba(255,255,255,.94); --glass0:rgba(255,255,255,0); --edge:#C9C9C4; --off:#D6D6D2;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
img{max-width:100%;display:block}
button{font-family:inherit}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}
.hidden{display:none!important}

/* app header */
.apphd{position:sticky;top:0;z-index:20;padding:26px 0 14px;
  /* the phone way: what scrolls under is blurred behind, and the blur fades out
     below rather than ending on a line */
  background:linear-gradient(180deg,var(--bg) 72%,var(--glass0));
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%)}
.apphd:after{
  content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
  mask-image:linear-gradient(to bottom,#000,transparent)}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .apphd:after{display:none}
}
.apphd h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-1.2px}
.apphd .sub{margin:5px 0 0;font-size:15px;color:var(--sub)}
.apphd .row{display:flex;align-items:flex-end;gap:14px}
.apphd .row .sp{flex:1}
.apphd .brandmark{height:36px;width:auto;display:block;margin-bottom:-2px}

/* 1.20: the Today header is a length of time. Three plain words, the one being
   looked at in the dark lime that can be read on white. */
.spans{display:inline-flex;align-items:center;gap:2px;padding:4px;
  background:var(--card2);border:1px solid var(--line);border-radius:14px}
/* 38 high reads right and a thumb needs 44, so the press is given a skirt
   rather than the word being made taller. The same trick the switches use. */
.sp1{position:relative;appearance:none;background:none;border:0;cursor:pointer;white-space:nowrap;
  padding:0 14px;height:38px;border-radius:8px;
  font:inherit;font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--sub)}
/* a finger leaves the hover behind on a touch screen, so the word it pressed
   keeps a grey box under it forever */
.sp1:before{content:"";position:absolute;top:-3px;left:0;right:0;bottom:-3px}
@media(hover:hover){ .sp1:hover{color:var(--ink)} }
/* the one being looked at is the raised one, the way a switch reads */
.sp1.on{background:var(--bg);color:var(--green);box-shadow:0 1px 2px rgba(0,0,0,.06)}
@media(hover:hover){ .sp1.on:hover{color:var(--green)} }
@media(max-width:430px){
  .spans{padding:3px;border-radius:14px}
  /* the word stays 36 so the three fit across a phone, and the press is 44:
     the skirt above carries the extra four either side */
  .sp1{font-size:13px;padding:0 6px;height:36px}
  .sp1:before{top:-4px;bottom:-4px}
  /* the box, a face and the refresh all on one line at 390 */
  .apphd .row{gap:6px}
}
.pill{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);color:var(--sub);white-space:nowrap}
.pill.warn{color:var(--warn);border-color:#E6D9A8;background:#FBF6E4}

/* bottom tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:var(--glass);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;background:none;border:0;color:var(--sub);padding:11px 4px 13px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:.2px}
.tabs button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--green2)}

/* cards + rows */
.group{margin:0 0 26px}
.group>.lbl{margin:0 0 9px 4px;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}
.list{background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.row{display:flex;align-items:center;gap:13px;padding:15px 16px;border-bottom:1px solid var(--line);
  background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:inherit;cursor:pointer}
.row:last-child{border-bottom:0}
a.row{text-decoration:none;color:inherit}
a.row .main b{text-decoration:none}
.row:active{background:var(--card2)}
.row .main{flex:1;min-width:0}
/* A NAME IS WHATEVER THEY TYPED, AND SOME OF THEM TYPE A LOT.

   Nothing bounded this, so a sixty six character name with emoji ran out of the
   card, through the divider and into the chevron, and in the booking sheet it
   pushed the panel a thousand pixels sideways. Names wrap now, and the sheet
   cannot be dragged off its own edge. */
.row .main b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px;
  overflow-wrap:anywhere;min-width:0}
.row .main{min-width:0}
.sheet, .sheet .bd{overflow-wrap:anywhere}
.sheet .hd h2{overflow-wrap:anywhere;min-width:0;padding-right:6px}
.row .main span{display:block;margin-top:3px;font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the value takes what is left of the row and ends in an ellipsis, rather than
   being cut to a fixed number of letters that nothing on screen agrees with */
/* AND IT NEVER TAKES MORE THAN ITS HALF.

   The label is allowed to break mid word, because a customer's name has to wrap
   rather than push the chevron off the card, and the same class carries both.
   That left the label with no way to argue: a long value took the whole row and
   "One line about you" came out one letter per line. Capping the value settles
   it, because the label always has the other half to sit in. */
.row .val{font-size:15px;color:var(--sub);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:55%;flex:0 1 auto;text-align:right}
.row .chev{color:var(--sub);font-size:20px;line-height:1}
.row.static{cursor:default}
.row.static:active{background:none}
.when{width:60px;flex:0 0 auto;text-align:center}
.when b{font-size:20px;font-weight:800;display:block;letter-spacing:-.5px}
.when span{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.5px;font-weight:800}

.empty{padding:34px 18px;text-align:center;color:var(--sub);font-size:15px;line-height:1.5}
.day-h{margin:24px 4px 9px;font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}

/* inputs */
label.f{display:block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sub);margin:0 0 7px 2px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{
  width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;color:var(--ink);
  padding:14px 15px;font-size:15px;font-family:inherit}
textarea{min-height:120px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)}
.fld{margin-bottom:17px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--lime);color:#0C1104;
  border:0;border-radius:999px;padding:15px 26px;font-size:15px;font-weight:800;cursor:pointer;width:100%}
.btn:hover{background:#C9FF62}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:var(--card2)}
.btn.bad{background:none;color:var(--bad);border:1.5px solid rgba(194,56,75,.45)}
.btn.sm{width:auto;min-height:44px;padding:11px 18px;font-size:15px}
.err{margin-top:13px;color:var(--ink);font-size:15px;font-weight:800}
.ok{margin-top:13px;color:var(--ink);font-size:15px;font-weight:600}

/* week editor */
.wk{display:flex;flex-direction:column;gap:9px}
.wk .d{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.wk .d .nm{width:46px;font-size:15px;font-weight:800;letter-spacing:.3px}
.wk .d .times{flex:1;display:flex;align-items:center;gap:8px}
.wk .d select{padding:9px 10px;font-size:15px;border-radius:8px}
.wk .d .off{flex:1;font-size:15px;color:var(--sub)}
/* The pill stays 47 by 28, because that is what a switch looks like. What
   answers a thumb is eight pixels bigger all round, laid over the top and
   costing the row nothing, so 28 tall becomes 44 to press. */
/* the day sheet's own header switch, next to the word it changes */
.dayflip{display:flex;align-items:center;gap:10px}
.dayflip b{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}
.sw{position:relative;width:47px;height:28px;flex:0 0 auto;border-radius:999px;background:var(--off);border:0;cursor:pointer;padding:0}
.sw:before{content:"";position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s,background .15s}
.sw.on{background:var(--lime)}
.sw.on:after{left:22px;background:#FFFFFF}

/* month grid */
.calhd{display:flex;align-items:center;gap:11px;margin:0 0 14px}
.calhd .m{flex:1;font-size:20px;font-weight:800;letter-spacing:-.3px}
.calhd button{width:44px;height:44px;border-radius:8px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:800;cursor:pointer}
.mg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mg .dow{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sub);text-align:center;padding:2px 0 6px}
.mg .cell{aspect-ratio:1/1;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:15px;font-weight:800;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}
.mg .cell.pad{border:0;background:none;cursor:default}
.mg .cell.blocked{background:var(--shut);border-color:var(--shut);color:var(--shutink);text-decoration:line-through}
.mg .cell.has{background:var(--bg);border-color:var(--line);font-weight:800}
/* booked is a dot on white, not a fill */
.mg .cell.has:after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--dot)}
.mg .cell.today{box-shadow:inset 0 0 0 1px var(--ink)}
.legend{margin-top:13px;font-size:13px;color:var(--sub);line-height:1.5}
.mg .cell.pad{background:none}

/* sheet */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(12,18,10,.45);display:none;align-items:flex-end;justify-content:center}
.sheet-bg.on{display:flex}
.sheet{background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:14px 20px 0 0;width:100%;max-width:720px;
  max-height:92vh;overflow:auto;padding-bottom:env(safe-area-inset-bottom)}
.sheet .hd{position:sticky;top:0;background:var(--bg);padding:20px 20px 14px;border-bottom:1px solid var(--line);z-index:2}
.sheet .hd h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.6px;padding-right:40px}
.sheet .hd .row{display:flex;align-items:center;gap:14px;padding-right:40px}
.sheet .hd .row h2{padding-right:0;flex:1;min-width:0}

/* the day switch. The word is inside it, so it says what it is, not what it does. */
.dsw{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:34px;padding:0 6px;
  white-space:nowrap;border-radius:999px;border:1px solid rgba(194,56,75,.40);background:#FBEEF0;
  cursor:pointer;font-family:inherit}
.dsw i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#FFFFFF;
  border:1px solid rgba(194,56,75,.40);display:block;order:1}
.dsw b{flex:0 0 auto;font-size:13px;font-weight:800;letter-spacing:.2px;color:var(--bad);
  order:2;padding-right:8px}
.dsw.on{background:var(--lime);border-color:#A9DE55}
.dsw.on i{order:2;border-color:#A9DE55}
.dsw.on b{order:1;color:#0C1104;padding:0 0 0 8px}
/* the sheet's copy is a label, not a control. it must not invite a press. */
.dsw.flat{cursor:default;pointer-events:none}

/* one editable time block, and the plus that adds the next one */
.blkrow{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center;margin-top:8px}
.blkrow select{margin:0}
.addrow{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;
  padding:11px;border:1px dashed var(--line);border-radius:14px;background:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--sub)}
.addrow:hover{border-color:var(--ink);color:var(--ink)}
.addrow span.p{font-size:20px;font-weight:800;line-height:1}
@media(max-width:430px){
  /* on a phone the kind takes the top line with the remove beside it,
     and the two times sit under it, so nothing is squeezed */
  .blkrow{grid-template-columns:1fr 1fr 36px;gap:8px}
  .blkrow select[data-f=kind]{grid-column:1/3;grid-row:1}
  .blkrow .x{grid-column:3;grid-row:1;width:36px}
  .blkrow select[data-f=s]{grid-column:1;grid-row:2}
  .blkrow select[data-f=e]{grid-column:2/4;grid-row:2}
}
.sheet .hd .close{position:absolute;top:8px;right:8px;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center;background:none;border:0;color:var(--sub);
  font-size:28px;cursor:pointer;line-height:1}
.sheet .bd{padding:18px 20px 26px}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px;margin:0 0 18px}
.shots img{aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.kv:last-of-type{border-bottom:0}
.kv span:first-child{color:var(--sub)}
.kv span:last-child{font-weight:800;text-align:right}
/* WHAT THE CUSTOMER WROTE, READABLE.

   This was #D5E0DA on a white card: 1.35 to 1 against the background, where
   four and a half to one is the floor for body text. The one thing a customer
   takes the trouble to type was the one thing on the screen that could not be
   read, and it was styled to look like the grey placeholder inside an empty
   box, so it also read as nothing having been written. */
.note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;margin-top:14px;
  font-size:15px;line-height:1.55;white-space:pre-wrap;color:var(--ink);
  overflow-wrap:anywhere}
.acts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
/* days and times when moving a booking. small, tappable, wraps on a phone. */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chips:empty{margin:0}
.chip{font:800 13px/1 inherit;padding:11px 14px;border-radius:999px;cursor:pointer;
  background:var(--bg);color:var(--ink);border:1.5px solid var(--line)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[disabled]{opacity:.45;cursor:not-allowed}

/* sign in / claim */
.auth{max-width:400px;margin:0 auto;padding:14px 20px 40px}
.authmark{display:block;height:96px;width:auto;margin:44px auto 0}
.auth h1{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-1.6px}
.auth h1 b{color:var(--green)}
.auth p.lead{margin:0 0 28px;font-size:15px;color:var(--sub);line-height:1.5}
.auth .foot{margin-top:22px;font-size:13px;color:var(--sub);text-align:center}
.auth .foot a{color:var(--green2)}

/* ---------------------------------------------------------- added 4 Sep 2026 */

/* Check for new bookings. The installed app had no way to ask, so it sat on an
   old list until it was closed and opened again. */
.apphd .refresh{flex:0 0 auto;width:44px;height:44px;border-radius:8px;cursor:pointer;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;padding:0}
.apphd .refresh:hover{background:var(--card2)}
.apphd .refresh svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.apphd .refresh.spin svg{animation:bhspin .7s linear infinite}
@keyframes bhspin{to{transform:rotate(360deg)}}

/* how many people are coming, on the Today tab */
.tabs button{position:relative}
.tabs button .count{position:absolute;top:2px;left:50%;margin-left:4px;
  min-width:17px;height:17px;padding:0 4px;border-radius:8px;background:var(--ink);color:var(--bg);
  font:800 11px/17px "Schibsted Grotesk",sans-serif;font-style:normal;text-align:center;
  box-shadow:0 0 0 2px var(--bg)}

/* one day, opened on its own */
.dayrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.dayrow:last-of-type{border-bottom:0}
.dayrow .what{flex:1;font-size:15px}
.dayrow .what b{display:block;font-weight:800}
.dayrow .what span{display:block;font-size:13px;color:var(--sub)}
.dayrow .x{flex:0 0 auto;width:34px;height:34px;border-radius:8px;background:none;
  border:1px solid var(--line);color:var(--ink);font-size:15px;cursor:pointer}

/* the weekly pattern, moved to the bottom and given a date range */
.rangebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.rangebar input{margin:0}
.rangeacts{display:flex;gap:10px;margin-top:10px}
.rangeacts .btn{flex:1;width:auto}

/* said and gone */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:60;
  background:var(--ink);color:var(--bg);border-radius:999px;padding:11px 20px;
  font:700 14px "Schibsted Grotesk",sans-serif;box-shadow:0 6px 20px rgba(17,17,17,.08);
  max-width:88vw;text-align:center;transition:opacity .35s,transform .35s}
.toast.go{opacity:0;transform:translateX(-50%) translateY(6px)}


/* Sign in with Google. Google draws the button itself, so all this does is
   centre it and give it the same air as everything around it. */
.gbtn{display:flex;justify-content:center;margin:20px 0 0;min-height:44px}
.orline{position:relative;margin:20px 0;text-align:center}
.orline:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(11,13,12,.14)}
.orline span{position:relative;background:var(--bg);padding:0 12px;
  font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(11,13,12,.42)}

/* THE DAY, BESIDE THE MONTH.
   A phone has no room for this so it is not there. A Mac has room to spare
   next to a month, and the thing an owner actually does to a day is close it,
   so that gets the space instead of sitting under a sheet nobody opens. */
.calwrap{display:block}
.dayoff{display:none}
@media(min-width:1000px){
  .wrap.wide{max-width:1060px}
  .calwrap{display:grid;grid-template-columns:322px minmax(0,1fr);gap:30px;align-items:start}
  .dayoff{display:block;position:sticky;top:104px}
  .calwrap .mg{gap:8px}
}
.dayoff .lbl{margin:0 0 9px 4px;font-size:11px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--sub)}
.doff{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:20px;
  transition:background .38s ease,border-color .38s ease}
.doff.off{background:var(--card);border-color:var(--line)}
.doff .dd{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}
.doff .dn{margin:4px 0 18px;font-size:28px;font-weight:800;letter-spacing:-.9px;line-height:1}
.doff .says{margin:15px 0 18px;font-size:13px;line-height:1.5;color:var(--sub)}
.doff .btn{width:100%}

/* the switch that does it. The knob carries the movement, the track carries
   the colour, and both take the same third of a second so it reads as one
   thing moving rather than two things changing. */
.bigsw{position:relative;display:block;width:100%;height:64px;padding:0;overflow:hidden;
  border-radius:999px;border:1px solid #A9DE55;background:var(--lime);cursor:pointer;
  transition:background .38s ease,border-color .38s ease}
.bigsw i{position:absolute;top:6px;left:calc(100% - 58px);width:52px;height:52px;border-radius:50%;
  background:#FFFFFF;box-shadow:0 2px 7px rgba(11,13,12,.20);
  transition:left .36s cubic-bezier(.34,1.42,.5,1)}
.bigsw b{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;
  padding:0 0 0 26px;font-size:15px;font-weight:800;letter-spacing:-.3px;color:#0C1104}
/* Off has to carry the same weight as the lime, or a closed day reads as a
   soft suggestion. It is a solid red track with a white word, not a tint. */
/* 1.9: off is grey. Red is for deleting, not for a shop shut on a weekend. */
.bigsw.off{background:var(--off);border-color:var(--edge)}
.bigsw.off i{left:6px}
.bigsw.off b{justify-content:flex-end;padding:0 26px 0 0;color:var(--ink)}
/* the word only moves when a finger made it move, never on the way in */
.bigsw.moved b{animation:wordin .34s ease}
@keyframes wordin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.bigsw.off.moved b{animation:wordinr .34s ease}
@keyframes wordinr{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* the day in the month answers back, so the press lands in two places at once */
.mg .cell.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.mg .cell.just{animation:cellpop .38s cubic-bezier(.34,1.5,.5,1)}
@keyframes cellpop{0%{transform:scale(1)}42%{transform:scale(.88)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .bigsw i,.doff,.bigsw{transition:none}
  .bigsw.moved b,.mg .cell.just{animation:none}
}

/* 4a. What the colours in the month mean, said with the colours themselves
   instead of a sentence nobody reads. */
.keys{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.keys .key{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--sub)}
.keys .key i{width:16px;height:16px;border-radius:8px;flex:0 0 16px}
/* THREE STATES, THREE KEYS.

   The month draws closed in red, a day with bookings in green, and an open
   empty day in white. The legend named two of them and painted "Open" green,
   which is the colour of a day that is BOOKED. So a shop read a green square as
   free, and it is the opposite. */
.keys .shut i{background:var(--shut)}
.keys .book i{background:var(--bg)}
.keys .open i{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line)}

/* A CLOSED DAY THAT HAS A BOOKING IN IT IS STILL CLOSED.

   Both classes land on the same square and green was written after red, so it
   won: the twelfth was shut, said Off in the panel beside it, and was drawn the
   same green as a day taking work. Red wins now, and the booking still shows as
   a dot so nothing is hidden. */
.mg .cell.blocked.has{background:var(--shut);border-color:var(--shut);
  color:var(--shutink);text-decoration:line-through}
.mg .cell.blocked.has:after{content:"";position:absolute;bottom:5px;left:50%;
  transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--dot)}

/* 1a. The Guide. It sits over everything, and the ring is a hole punched in the
   dim by one enormous shadow, so the part being talked about is the only part
   of the app that is lit. */
.guide{position:fixed;inset:0;z-index:90}
.guide.dim{background:rgba(10,14,10,.62)}
body.guiding{overflow:hidden}
.gspot{position:absolute;border-radius:14px;pointer-events:none;
  box-shadow:0 6px 20px rgba(17,17,17,.08)}
.gcard{position:absolute;width:min(400px,calc(100vw - 32px));background:var(--bg);
  border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;
  box-shadow:0 6px 20px rgba(17,17,17,.08)}
.gcard .gstep{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}
.gcard h3{margin:6px 0 6px;font-size:20px;font-weight:800;letter-spacing:-.5px}
.gcard p{margin:0 0 15px;font-size:15px;line-height:1.5;color:var(--sub)}
.gcard .gacts{display:flex;align-items:center;gap:12px}
.gcard .gskip{flex:0 0 auto;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  border-radius:999px;min-height:44px;padding:11px 22px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:800}
.gcard .gnext{margin-left:auto;border:1px solid #A9DE55;background:var(--lime);color:#0C1104;
  border-radius:999px;min-height:44px;padding:11px 22px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:800}

/* THE CODE THEY PUT ON THE COUNTER.
   Big enough on the screen to be scanned straight off it, because the first
   thing anybody does is point their own phone at it to see whether it works. */
.qrwrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:4px 0 0}
.qrpaper{width:min(280px,72vw);padding:14px;border-radius:14px;background:#FFFFFF;
  border:1px solid var(--line);box-shadow:0 6px 20px rgba(17,17,17,.08)}
.qrpaper svg{display:block;width:100%;height:auto}
.qraddr{margin:0;font-size:15px;font-weight:800;letter-spacing:-.2px;color:var(--ink);
  text-align:center;word-break:break-all}
.qrsub{margin:0;font-size:13px;line-height:1.5;color:var(--sub);text-align:center;max-width:34ch}
.qracts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.qracts .btn{width:100%}
.qracts .wide{grid-column:1/-1}
@media(max-width:430px){ .qracts{grid-template-columns:1fr} }

/* the four reminder switches, two theirs and two their customer's */
.rlist{background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rrow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}
.rrow:last-child{border-bottom:0}
.rmain{flex:1;min-width:0}
.rmain b{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px}
.rmain span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--sub)}

/* PUBLIC OR PRIVATE, AND THE DAY THEY ARE BACK.

   The two ends of one switch are drawn as two rows with a tick, not as a
   toggle, because a toggle labelled "private" has to be read twice before
   anybody is sure which way round it is. Two rows and one tick can only be
   read one way. */
.pickset .pickrow{display:flex;width:100%;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--line);cursor:pointer;font:inherit;color:inherit;
  padding:14px 16px;align-items:center;gap:14px}
.pickset .pickrow:last-child{border-bottom:0}
.pickset .pickrow.on{background:var(--card)}
.pickset .tick{width:24px;flex:none;text-align:center;font-size:15px;font-weight:800;color:var(--ink)}
.whenbox{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
/* the day they come back is picked on our own month, the same one they use on
   the Calendar screen, not on the browser's little grey box */
.whenbox #wgrid{margin:12px 0 4px}
.whenbox .calhd{margin:0 0 10px}
.whenbox .calhd .m{font-size:15px}
.whenbox .calhd button{width:44px;height:44px;font-size:15px}
.whenbox .mg{gap:5px}
.whenbox .mg .cell{font-size:13px;border-radius:8px}
.whenbox .mg .cell.gone{color:var(--shutink);background:var(--card);cursor:default}
.whenbox .mg .cell.sel{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.whenbox .btn[disabled]{opacity:.45;cursor:default}
.whenbox .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.whenbox .acts .btn{width:100%}
@media(max-width:430px){ .whenbox .acts{grid-template-columns:1fr} }

/* THE FOUR STATES A DAY CAN BE IN, AND A WARNING THAT LOOKS LIKE ONE */
/* the class names the calendar actually uses are open, book, shut and both */
.keys .key.open i{background:var(--bg);border:1px solid var(--line)}
/* 1.9: the key is drawn the way the square is. A dot means somebody is booked,
   grey means shut, and a grey square with a dot is both. */
.keys .key i{position:relative}
.keys .key.open i{background:var(--bg);border:1px solid var(--edge)}
.keys .key.book i{background:var(--bg);border:1px solid var(--edge)}
.keys .key.shut i{background:var(--shut);border:1px solid #D6D6D2}
.keys .key.both i{background:var(--shut);border:1px solid #D6D6D2}
.keys .key.book i:after,.keys .key.both i:after{content:"";position:absolute;left:50%;top:50%;
  width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--dot)}
/* THE WORD AT THE TOP OF A DAY SHEET.

   It used to be written with the classes of a switch that lives on the home
   page and was never in this stylesheet, so it painted as two bare words with
   an empty circle beside them: a dead control, which reads worse than no
   control at all. It is a label, because opening and closing a day is the big
   switch on the calendar behind the sheet, and two switches for one thing is
   how an owner stops trusting either of them. */
.daytag{flex:none;display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.4px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.daytag.shut{background:var(--shut);color:var(--sub);border-color:var(--shut)}

.warn{margin:10px 0 0;padding:11px 13px;border-radius:14px;
  background:var(--card);border:1px solid var(--line);
  font-size:13px;line-height:1.5;font-weight:800;color:var(--ink)}

/* A DAY THAT HAS BEEN IS NOT PRESSABLE, AND SHOULD NOT LOOK IT */
.mg .cell.gone{opacity:.32;cursor:default}

/* THE STRETCH OF DAYS HAD TWO RAW OS DATE BOXES, 21 PIXELS TALL, IN AN APP
   THAT IS STYLED EVERYWHERE ELSE. */
.rangebar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rangebar input[type=date]{width:100%;padding:13px 14px;font:700 15px "Schibsted Grotesk";
  border:1.5px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);
  min-height:46px;-webkit-appearance:none;appearance:none}
.rangebar input[type=date]:focus{outline:0;border-color:var(--ink)}
.rangeacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.rangeacts .btn{width:100%}
@media(max-width:430px){ .rangebar,.rangeacts{grid-template-columns:1fr} }

/* A SHEET IS OPEN. THE PAGE BEHIND IT DOES NOT GO ANYWHERE. */
body.sheeton{overflow:hidden}

/* ======================================================= 1.9, 12 Sep 2026

   The studio on a desktop, and Settings on a phone.

   Up to 1023 pixels nothing about the shell moves: the tab bar is still the tab
   bar. From 1024 the same #tabs nav stands in a 240 pixel rail down the left,
   with who they are above it and their account below it, and every screen is
   drawn left aligned beside it instead of floating in the middle of the glass.

   Four sizes only where this section reaches: 28 a page title, 20 a heading,
   15 a row, 13 anything secondary. Spacing in eights. */

/* the rail is invisible on a phone: only the tab bar inside it takes part */
.rail{display:contents}
.rid,.racct{display:none}

/* ---------- Settings, both widths ---------- */
.sh{margin:40px 0 8px;font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.2}

/* 1.20: Settings and Your page, two headings side by side on a desk.
   On a phone it is one column and nothing about it moves. */
.setcols{display:block}
.setcol > .sh:first-child{margin-top:0}
/* a screen with a Back on it had a Back, a face and a refresh all crowding the
   title at 390, and Your page broke onto two lines. Nothing on those screens
   needs refreshing, so the refresh goes. */
@media(max-width:1023px){
  .apphd:has(.back) .refresh{display:none}
}
@media(min-width:1024px){
  .setcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 32px;align-items:start}
  /* ONE CARD, NOT TWO KINDS. A grey block beside a white row read as two
     different products on one screen. On a desk they are the same card. */
  .setcols .feat{background:var(--bg)}
  .setcols button.feat:hover{background:var(--card)}
  .setcols .sh{margin-top:34px}
}
.apphd + .sh{margin-top:8px}
.sh.sh3{margin-top:56px}
.stack{display:flex;flex-direction:column;gap:8px}
.stack > .list{border-radius:14px}
.srow{padding:16px}
.srow .main b{font-size:15px}
/* no ellipsis: the owner reads what their own page says, all of it */
.srow .main .sval{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--sub);
  white-space:pre-line;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.srow .chev{align-self:center}

.feat{display:block;width:100%;margin:0;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px;color:inherit;font:inherit}
button.feat{cursor:pointer}
button.feat:active{background:var(--card2)}
.flbl{display:block;font-size:15px;font-weight:800;letter-spacing:-.2px}
.fsay{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--sub)}
.faddr{display:flex;align-items:center;min-height:44px;margin-top:0;font-size:15px;font-weight:600;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  overflow-wrap:anywhere;word-break:break-all}

.fqr{display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:16px;row-gap:8px;align-items:start}
.fqr .flbl{grid-column:1;grid-row:1}
.fqr .fbtns{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:8px}
.fqr .fbtns .btn{width:auto;min-height:44px;padding:0 16px;font-size:15px}
.fqr .fsq{grid-column:2;grid-row:1 / span 2;width:72px;height:72px;padding:0;margin:0;border:0;
  background:var(--bg);border-radius:8px;cursor:pointer}
.fqr .fsq svg{display:block;width:72px;height:72px}
.fqr .fmsg{grid-column:1 / -1}
.fqr .fmsg:empty{display:none}
.fqr .fmsg .legend{margin:0}

.fdoor{display:flex;align-items:center;gap:16px}
.fdoor .fmain,.fphotos .fmain{flex:1;min-width:0}
.dpill{display:inline-flex;align-items:center;gap:8px;height:32px;margin-top:8px;padding:0 12px;
  border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font-size:13px;font-weight:800}
.dpill svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.dpill.priv{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.ffull{display:flex;align-items:center;gap:16px}
.ffull .fmain{flex:1;min-width:0}

/* the quiet ones: facts and a way out, nothing to catch the eye */
.quiet{display:flex;flex-direction:column}
.qrow{display:flex;align-items:center;gap:16px;min-height:44px;width:100%;margin:0;padding:0 16px;
  background:none;border:0;text-align:left;font-family:inherit;font-size:13px;line-height:1.4;color:var(--sub)}
.qrow .qk{flex:0 0 auto;min-width:72px;font-weight:600}
.qrow .qv{flex:1;min-width:0;overflow-wrap:anywhere}
button.qrow{cursor:pointer}
button.qrow:hover{color:var(--ink)}

/* Settings on a phone keeps its column on the eight point grid */
@media(max-width:1023px){
  #view[data-scr="settings"]{padding-left:16px;padding-right:16px}
}

/* ---------- the desktop shell ---------- */
@media(min-width:1024px){
  body{padding:0 0 0 240px}

  .rail{display:flex;flex-direction:column;position:fixed;z-index:40;top:0;left:0;bottom:0;width:240px;
    background:var(--bg);border-right:1px solid var(--line);overflow-y:auto}
  .rid{display:block;padding:20px 24px 10px}
  .rid .rlogo{display:block;width:auto;height:52px;margin:0}
  .rid .rname{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px;line-height:1.2;overflow-wrap:anywhere}
  .rid .raddr{display:flex;align-items:center;min-height:44px;margin-top:8px;font-size:13px;font-weight:600;
    color:var(--ink);text-decoration:underline;text-underline-offset:3px;word-break:break-all;line-height:1.4}
  .rid .rqr{display:block;width:64px;height:64px;margin-top:8px;padding:0;border:0;background:#FFFFFF;cursor:zoom-in}
  .rid .rqr svg{display:block;width:64px;height:64px}

  .tabs{position:static;flex:1 0 auto;display:flex;flex-direction:column;padding:8px 0;
    background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .tabs button{flex:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;
    height:44px;padding:0 24px 0 22px;border-left:2px solid transparent;
    font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink)}
  .tabs button svg{width:20px;height:20px}
  .tabs button:hover{background:var(--card)}
  .tabs button.on{color:var(--green);border-left-color:var(--lime);font-weight:800}
  .tabs button .count,.tabs button .bh-badge{position:static;order:3;margin:0 0 0 auto;
    min-width:24px;height:24px;padding:0 8px;border-radius:14px;box-shadow:none;
    font-size:13px;line-height:24px;background:var(--card2);color:var(--ink)}
  .tabs button span{order:2}

  .racct{display:block;padding:16px 24px 24px;border-top:1px solid var(--line)}
  .racct .rmail{margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--sub);overflow-wrap:anywhere}
  .racct button{display:flex;align-items:center;gap:16px;width:calc(100% + 16px);min-height:44px;margin:0 -8px;text-align:left;
    padding:0 8px;background:none;border:0;border-radius:8px;cursor:pointer;
    font-family:inherit;font-size:15px;font-weight:600;color:var(--ink)}
  .racct button:hover{background:var(--card)}
  .racct button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .racct button.spin svg{animation:bhspin .7s linear infinite}

  /* 1.20: CENTRED IN THE SPACE BESIDE THE RAIL, NOT PINNED TO IT.
     1.9 pinned the column to the left edge with margin:0. On a 1440 window
     that left an 816 column against the rail and about 380 of empty glass on
     the right, which reads as a page that fell over. It is centred now, and
     the screens that have something to put beside themselves grow with the
     window instead of stopping dead at 1196. */
  .wrap{max-width:816px;margin:0 auto;padding:0 48px}
  .wrap.wide{max-width:1480px}
  #view[data-scr="settings"]{padding:0 48px}

  .apphd{position:sticky;top:0;z-index:20;margin:0 0 24px;padding:24px 0;background:var(--bg);
    border-bottom:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
  .apphd:after{display:none}
  .apphd .row{align-items:center;gap:16px;padding:0;border:0;cursor:default}
  .apphd h1{font-size:28px;letter-spacing:-.8px;line-height:1.15}
  .apphd .sub{margin:8px 0 0;font-size:13px;line-height:1.4}
  .apphd .refresh{display:none}
  .apphd .hacts{display:flex;align-items:center;gap:8px}
  .apphd .hq{width:280px;min-height:44px;padding:0 16px;font-size:15px;border-radius:14px}
  .apphd .hacts .btn{width:auto;min-height:44px;padding:0 16px;font-size:15px}
  .apphd + .sh{margin-top:16px}

  /* rows and lists, on the same four sizes */
  .list{border-radius:14px}
  .row{padding:16px;gap:16px}
  .row .main b{font-size:15px}
  .row .main span{margin-top:4px;font-size:13px}
  .row .val{font-size:15px}
  .when{width:64px}
  .when b{font-size:15px}
  .when span{font-size:13px}
  .empty{font-size:15px;padding:32px 16px}
  .day-h{margin:24px 0 8px;font-size:13px;letter-spacing:.4px}
  .group>.lbl{font-size:13px;margin:0 0 8px}
  .legend{font-size:13px}
  .btn{font-size:15px;padding:16px 24px}
  .btn.sm{font-size:15px;padding:8px 16px}
  label.f{font-size:13px}
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea{font-size:15px}
  .err,.ok{font-size:13px}
  .toast{bottom:24px;margin-left:120px;font-size:15px}
  body .bh-bar{left:264px;right:24px;bottom:24px}

  /* Today: the next one, big */
  .hero{display:flex;align-items:center;gap:24px;width:100%;margin:0 0 8px;padding:24px;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:14px;cursor:pointer;color:inherit;font:inherit}
  .hero:hover{background:var(--card2)}
  .hero .hwhen{flex:0 0 auto;min-width:136px}
  .hero .hwhen b{display:block;font-size:28px;font-weight:800;letter-spacing:-.8px;line-height:1.15}
  .hero .hwhen span,.hero .hk{display:block;margin-top:4px;font-size:13px;color:var(--sub)}
  .hero .hk{margin:0 0 4px}
  .hero .hmain{flex:1;min-width:0}
  .hero .hmain b{display:block;font-size:20px;font-weight:800;letter-spacing:-.4px;overflow-wrap:anywhere}
  .hero .hmain .hsvc{display:block;margin-top:4px;font-size:15px;color:var(--sub)}
  .hero .chev{font-size:28px;color:var(--sub)}

  .deskempty{padding:40px 0;max-width:720px}
  .deskempty .de1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px}

  /* Clients: a table */
  .ctab{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg)}
  .ctab .ch,.ctab .cr{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,2fr);
    gap:16px;align-items:center;padding:0 16px}
  .ctab .ch{min-height:44px;background:var(--card);border-bottom:1px solid var(--line);
    font-size:13px;font-weight:800;color:var(--sub)}
  .ctab .cr{width:100%;min-height:64px;margin:0;border:0;border-bottom:1px solid var(--line);background:none;
    text-align:left;font-family:inherit;font-size:15px;color:var(--ink);cursor:pointer}
  .ctab .cr:last-child{border-bottom:0}
  .ctab .cr:hover{background:var(--card)}
  .ctab .cr b{display:block;font-weight:800;overflow-wrap:anywhere}
  .ctab .cr .cm{display:block;margin-top:4px;font-size:13px;color:var(--sub);overflow-wrap:anywhere}
  .ctab .cr .cn{font-variant-numeric:tabular-nums}
  .ctab .cr .cc{font-size:13px;color:var(--sub);overflow-wrap:anywhere}
  .ctab .none{padding:32px 16px;font-size:15px;color:var(--sub)}

  /* Calendar keeps its split; only the words come onto the four sizes */
  .calhd .m{font-size:20px}
  .calhd button{font-size:20px}
  .mg .dow{font-size:13px}
  .mg .cell{font-size:15px}
  .keys .key{font-size:13px}
  .dayoff{top:129px}
  .dayoff .lbl,.doff .dd{font-size:13px}
  .doff{padding:24px}
  .doff .dn{margin:8px 0 16px;font-size:28px}
  .doff .says{margin:16px 0;font-size:13px}
  .bigsw b{font-size:15px}
  .wk{gap:8px}
  .wk .d{padding:8px 16px;gap:16px;min-height:60px}
  .wk .d .nm,.wk .d .off,.wk .d select{font-size:15px}

  /* 1.20: ON A DESK A SHEET IS A PANEL, NOT A DRAWER.
     It was pinned to the bottom edge with its two top corners rounded, which
     is a phone gesture on a screen that has no gesture. It sits in the middle
     of the window beside the rail now, rounded all round, with room above and
     below it. The canvas sheets set their own size and are left alone. */
  .sheet-bg{padding-left:240px;align-items:center;padding-top:24px;padding-bottom:24px}
  .sheet:not(.canvas){border-radius:14px;border-bottom:1px solid var(--line);max-height:88vh}
  .sheet.types .bd{padding:20px 24px 0}
  .sheet .foot{margin:18px -24px 0;border-radius:0 0 20px 20px}
  .sheet.types .foot .btn{width:auto;min-width:200px;float:right}
  .sheet.types .foot:after{content:"";display:block;clear:both}
  .sheet .hd h2{font-size:20px}
  .kv{font-size:15px}
  .note{font-size:15px}
  .chip{font-size:13px}
  .rmain b{font-size:15px}
  .rmain span{font-size:13px}
  .qraddr{font-size:15px}
  .qrsub{font-size:13px}
  .daytag{font-size:13px}
  .warn{font-size:13px}
  .addrow{font-size:13px}
  .gcard h3{font-size:20px}
  .gcard p{font-size:15px}
  .gcard .gstep{font-size:13px}
  .gcard .gskip,.gcard .gnext{font-size:15px}
}

/* 1.9: the last few things a thumb could miss on a 390 screen. Where the thing
   has to stay small to look right, the press is made bigger than the paint. */
.wk .d select{min-height:44px}
.addrow{min-height:44px}
.blkrow .x{min-width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:var(--bg);
  color:var(--ink);font-size:20px;cursor:pointer}
@media(max-width:430px){
  .blkrow{grid-template-columns:1fr 1fr 44px}
  .blkrow .x{width:44px}
}
.whenbox .mg .cell:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px}
/* before anybody is signed in (no signal, the shell out of the cache) the rail
   is a plain white column, not an empty box with a line through it */
@media(min-width:1024px){ .rid:empty,.racct:empty{display:none} }
/* between 1024 and 1279 the rail has taken 240 pixels from beside the month,
   so the day panel gives some back and each day's two times take their own line
   instead of being cut to "10:0" */
@media(min-width:1024px) and (max-width:1279px){
  .calwrap{grid-template-columns:272px minmax(0,1fr);gap:24px}
  .wk .d{flex-wrap:wrap}
  .wk .d .nm{flex:1}
  .wk .d .times{order:3;flex:1 0 100%}
  .wk .d .times select{flex:1}
  .wk .d .off{order:3;flex:1 0 100%}
}

/* the previous work block shows what is on the page */
.fwork,.frev{display:flex;align-items:center;gap:16px}
.fwork .fmain,.frev .fmain{flex:1;min-width:0}
.fwork .fthumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fwork .fthumbs img{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--line);flex:none}
/* and the sheet that fills it: the photo, the line under it, move up, take out */
.wklist{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.wkrow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px;align-items:start;padding:8px;
  border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.wkrow img{width:72px;height:72px;border-radius:8px;object-fit:cover}
.wkrow textarea{min-height:72px;padding:8px 12px;font-size:15px;border-radius:8px;resize:vertical}
.wkbtns{display:flex;flex-direction:column;gap:4px}
.wkbtns button{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);
  font-size:20px;cursor:pointer;font-family:inherit}
.wkbtns button[disabled]{opacity:.35;cursor:default}

/* the starting price tick: the whole label is the press, the box is only the paint */
/* ---------- Session types, 1.20. One type is one card.
   It used to be a name, a stepper, the word min, a currency sign, a price, a
   bare tick box and a Remove all on one line, with the description under it. */
.tcard{border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 10px;background:var(--bg)}
.tcard .thd{display:flex;align-items:center;gap:10px}
.tcard .tn{flex:1;min-width:0;margin:0;font-size:15px;font-weight:800;letter-spacing:-.3px;
  padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  font-family:inherit;color:var(--ink)}
.tcard .tx{flex:0 0 auto;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;
  background:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--sub)}
.tcard .tx:hover{color:var(--bad);border-color:var(--bad)}
/* the boxes are as wide as what goes in them. A price field 470 wide in a
   1040 panel is not a form, it is a runway. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,200px));gap:10px 14px;
  justify-content:start;margin-top:12px}
.tf{display:flex;flex-direction:column;gap:6px;min-width:0}
.tf > span:first-child{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--sub)}
.tin{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);overflow:hidden}
.tin input{flex:1;min-width:0;margin:0;border:0;background:none;padding:11px 12px;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--ink)}
.tin input:focus{outline:none}
.tin:focus-within{border-color:var(--ink)}
.tin i{flex:0 0 auto;padding:0 12px;font-style:normal;font-size:13px;font-weight:600;color:var(--sub)}
.tin i.pre{padding-right:0;padding-left:12px}
/* the starting price: a switch with the sentence beside it, not a loose tick */
.tfrom{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--line)}
.tfrom > span{flex:1;min-width:0}
.tfrom b{display:block;font-size:13px;font-weight:800}
.tcard .tno{width:100%;margin:12px 0 0;padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--bg);font-family:inherit;font-size:13px;color:var(--ink)}
.tcard .tno:focus,.tcard .tn:focus{outline:none;border-color:var(--ink)}
/* Save sits at the bottom of the sheet and stays there. The bar carries the
   bottom padding itself, so nothing shows underneath it. */
.sheet .foot{position:sticky;bottom:0;z-index:2;margin:18px -20px 0;padding:14px 20px 16px;
  background:var(--bg);border-top:1px solid var(--line)}
.sheet .foot .btn{width:100%}

/* their own photo, beside what it is for. Project 1.11 */
.feat.fface{display:flex;align-items:center;gap:14px}
.feat.fface .fmain{flex:1;min-width:0}
.feat.fface .fbtns{display:flex;gap:8px;flex-wrap:wrap}
.feat.fface .btn{width:auto;padding:0 14px;min-height:44px}

/* YOUR ACCOUNT, IN ONE PLACE: their face opens a menu with the email, the plan
   and billing, the time zone and signing out */
.pface{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;
  background:var(--ink);color:var(--bg);font-size:13px;font-weight:800;line-height:1}
.pface img{width:100%;height:100%;object-fit:cover;display:block}
.apphd .pfbtn{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:none;cursor:pointer}
.apphd .pfbtn .pface{width:36px;height:36px;font-size:15px}
.apphd .pfbtn[aria-expanded="true"] .pface{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}

.pmenu{position:fixed;z-index:70;background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 6px 20px rgba(17,17,17,.08);padding:8px 0}
.pmenu .pmhead{display:flex;align-items:center;gap:12px;padding:8px 16px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.pfwho{display:flex;flex-direction:column;min-width:0}
.pfwho b{font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfwho span{font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pmenu [role=menuitem]{display:flex;align-items:center;width:100%;min-height:44px;padding:8px 16px;border:0;background:none;
  text-align:left;cursor:pointer;font-family:inherit;color:var(--ink)}
.pmenu [role=menuitem]:hover,.pmenu [role=menuitem]:focus-visible{background:var(--card);outline:0}
.pmenu [role=menuitem] > span{display:flex;flex-direction:column;min-width:0}
.pmenu [role=menuitem] b{font-size:15px;font-weight:600}
.pmenu [role=menuitem] b + span{margin-top:2px;font-size:13px;line-height:1.4;color:var(--sub)}
.pmenu .pmline{height:1px;margin:6px 0;background:var(--line)}

@media(min-width:1024px){
  .apphd .pfbtn{display:none}
  .racct .pfrow{gap:12px;padding:8px}
  .racct .pfrow .pfwho{flex:1}
  .racct .pfrow .pfwho b{font-size:15px}
  .racct .pfrow .pfchev{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;color:var(--sub)}
  .racct .pfrow[aria-expanded="true"]{background:var(--card)}
}

/* Staff (i) buttons: 44px to press, a small ring to look at */
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px -10px -12px 0;
  padding:0;border:0;background:none;color:var(--sub);cursor:pointer;vertical-align:middle;border-radius:50%}
.ibtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ibtn[aria-expanded="true"],.ibtn:hover{color:var(--ink,#111)}
.ibtn:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
.itip{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--line,#e5e5e5);border-radius:14px;font-size:13px;line-height:1.5;color:var(--sub)}
.stadd{display:flex;align-items:center;gap:6px;margin-top:18px}
.stadd .ibtn{margin:0;flex:none}

/* The studio in black. Their own choice, from the menu under their face; white
   stays the default. Only the studio: their public page never changes. */
html[data-bg="black"]{
  color-scheme:dark;
  --bg:#000000; --card:#111111; --card2:#1A1A1A; --line:#2A2A2A; --ink:#F5F5F3; --sub:#9A9A94;
  --green:#B6FF3B; --warn:#9A9A94; --shut:#1A1A1A; --shutink:#6B6B66;
  --glass:rgba(0,0,0,.92); --glass0:rgba(0,0,0,0); --edge:#3A3A3A; --off:#3A3A3A;
}
html[data-bg="black"] .pill.warn{border-color:#5A4E22;background:#1F1A08}
html[data-bg="black"] .dsw{background:#2A0F14}
html[data-bg="black"] .dsw:not(.on) i{background:#000000}
html[data-bg="black"] .pmenu{box-shadow:0 6px 20px rgba(17,17,17,.08)}

/* THE CARD STUDIO. Project 1.19.
   The wall, and the card on it. Every tile is the shop's real card: their
   colour, their mark, their name, their title, their address, and the band
   drawn by the same code that draws the real one. Nobody picks a drawing of a
   card here, they pick the card. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-top:14px}
.wall.off .tile{filter:grayscale(1);opacity:.45}
/* a template is the design on its own, project 1.20 */
.tband{display:block;width:100%;aspect-ratio:375/144;background-size:cover;
  background-position:center;background-color:var(--line)}
.tile{padding:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);
  cursor:pointer;display:block;text-align:left;font:inherit;color:inherit}
.tile b{display:block;padding:8px 10px;font-size:13px;font-weight:800}
.tile.on{border-color:var(--ink)}
.tile.on b{color:var(--ink)}
.tile:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* the card itself. The order down it is the order down a Wallet card and the
   sizes are its proportions, so what is cramped here is cramped there. */
.wcard{display:block;padding:10px 11px 12px;line-height:1.1;
  /* a white card on a white screen has no edge. In a pocket it sits on
     Wallet's dark, so this hairline belongs to the studio, not the card. */
  box-shadow:inset 0 0 0 1px rgba(127,127,127,.22)}
.wtop{display:flex;align-items:center;gap:7px;min-width:0}
.wmark{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;display:block}
.wmark.none{display:grid;place-items:center;background:rgba(127,127,127,.28);font-size:11px;font-weight:800}
.wlogo{font-size:11.5px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whdr{flex:none;text-align:right}
.whval{display:block;font-size:11px;font-weight:800;margin-top:2px;line-height:1}
.wcard.big .whval{font-size:16px;margin-top:3px}
/* the band is 375 x 144 on the real card, so it is 38.4% of the card's width
   tall here too, and the name sits near its TOP because the title is painted
   into the picture underneath it */
.wband{margin:8px -11px 0;padding:6px 11px 0;aspect-ratio:375/144;background-position:center;
  background-size:cover;background-repeat:no-repeat;display:block;overflow:hidden}
.wlbl{display:block;font-size:8px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wname{display:block;font-size:17px;font-weight:400;letter-spacing:-.4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* PHONE on the left and ADDRESS on the right, one row, the way an auxiliary
   field sits beside a secondary rather than starting a row of its own */
.wrow{margin-top:10px;display:flex;justify-content:space-between;gap:10px;min-width:0}
.wcol{min-width:0;display:block}
.wcol.end{text-align:right}
.wrow .wval{display:block;font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the bar, never a square: it stands for the PDF417 the real card carries */
.wbar{margin-top:11px;height:26px;border-radius:3px;background:#fff;position:relative;overflow:hidden}
.wbar::after{content:"";position:absolute;inset:3px 6px;background:repeating-linear-gradient(90deg,
  #111 0 1px,#fff 1px 3px,#111 3px 4px,#fff 4px 6px,#111 6px 8px,#fff 8px 9px,#111 9px 11px,#fff 11px 14px)}

/* ---------- THE CARD, AT THE MEASURED SIZE. Project 1.20.

   Opened, this is not a drawing that looks like a Wallet card, it is the
   measured one. Every number below is POINTS on the real 362 x 491 card, taken
   off a render on an iPhone 17, and --pt is one of those points in pixels,
   set by the page from the card's own width. So the preview is the card at
   whatever size the window gives it, and what is cramped here is cramped in a
   pocket.

     round mark        top 10    left 12     50 x 50
     company name      top 16.3  left 72.7   ink 16.7
     the band          top 59    full width  139 tall (a 375 x 144 strip)
     their name        top 83    left 19.3   ink 47.3
     job title         top 146.3             painted into the band by us
     by bookhere.site  top 171.7             painted into the band by us
     labels            top 208.7 left 16     ink 7.7
     values            top 226.3 left 16.7   ink 14.3
     dead space        240.6 to 380.3        nothing, flat colour
     the bar           top 380.3 left 48     84.7 tall

   The title and the mark are not drawn here on purpose: they arrive inside
   the band picture, exactly as they do on the card. */
.wbig{margin-bottom:4px}
/* THE CARD IS NOT IN OUR TYPEFACE. Project 1.20.
   Wallet prints a pass in the phone's own face, so a preview set in the
   studio's face is a different card: the same name at the same height runs a
   different width and breaks in a different place. The system face here is
   the card's face on the machine it will be carried on. */
.wcard.big{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pt:1px;position:relative;display:block;padding:0;aspect-ratio:362/491;
  border-radius:calc(var(--pt)*14);overflow:hidden;line-height:1}
.wcard.big .wtop{display:block}
.wcard.big .wmark{position:absolute;top:calc(var(--pt)*10);left:calc(var(--pt)*12);
  width:calc(var(--pt)*50);height:calc(var(--pt)*50)}
.wcard.big .wmark.none{font-size:calc(var(--pt)*22)}
.wcard.big .wlogo{position:absolute;left:calc(var(--pt)*72.7);top:calc(var(--pt)*15.2);
  max-width:calc(var(--pt)*180);font-size:calc(var(--pt)*17.4);line-height:1;font-weight:800}
/* the header field, the only line that shows when the card is buried under
   fifteen others. It is not on the 2026-09-23 render because it was added
   after it, so it is placed on the company's own row, hard right. */
.wcard.big .whdr{position:absolute;right:calc(var(--pt)*16);top:calc(var(--pt)*8);text-align:right}
.wcard.big .whdr .wlbl{font-size:calc(var(--pt)*11);letter-spacing:calc(var(--pt)*.5)}
.wcard.big .whval{font-size:calc(var(--pt)*17);line-height:1.15;margin:0;font-weight:800}
.wcard.big .wband{position:absolute;left:0;right:0;top:calc(var(--pt)*59);height:calc(var(--pt)*139);
  margin:0;padding:0;aspect-ratio:auto;background-size:cover;background-position:center}
.wcard.big .wname{position:absolute;left:calc(var(--pt)*14.75);top:calc(var(--pt)*13.7);
  max-width:calc(var(--pt)*345);font-size:calc(var(--pt)*65.2);line-height:1;font-weight:400;
  letter-spacing:calc(var(--pt)*-.6)}
.wcard.big .wrow{position:absolute;left:calc(var(--pt)*16);right:calc(var(--pt)*16);
  top:calc(var(--pt)*206.7);margin:0;display:flex;justify-content:space-between;gap:calc(var(--pt)*12)}
.wcard.big .wlbl{font-size:calc(var(--pt)*10.2);letter-spacing:calc(var(--pt)*.6);line-height:1}
.wcard.big .wrow .wval{font-size:calc(var(--pt)*19);line-height:1;margin-top:calc(var(--pt)*6.7)}
.wcard.big .wbar{position:absolute;left:calc(var(--pt)*48);right:calc(var(--pt)*48);
  top:calc(var(--pt)*380.3);height:calc(var(--pt)*84.7);margin:0;
  border-radius:calc(var(--pt)*6)}
/* the drawn stripes only stand in when the real one cannot be made */
.wbar:not(:empty)::after{display:none}
.wpdf{display:block;width:100%;height:100%;padding:calc(var(--pt)*6) calc(var(--pt)*10);box-sizing:border-box}

/* the gate, and the two things they can change */
.gfld{margin-top:18px}
.gfld>b{display:block;font-size:15px;font-weight:800}
.gfld>.legend{margin:4px 0 9px}
.crow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crow input[type=color]{width:54px;height:38px;padding:0;border:1px solid var(--line);
  border-radius:8px;background:none;cursor:pointer}
.gname{font-size:13px;color:var(--sub)}
.wsay{margin-top:16px}
.linky{background:none;border:0;padding:0;font:inherit;color:var(--ink);
  text-decoration:underline;cursor:pointer}
button.feat.fgate{width:100%;text-align:left;cursor:pointer}
/* the way in, from Settings. The same row as the door beside it */
.btn.ghost.back{width:auto;min-height:44px;padding:0 14px;font-size:13px}
.fcard{display:flex;align-items:center;gap:16px}
.fcard .fmain{flex:1;min-width:0}
/* the link and the QR that used to sit at the top of the rail, moved here,
   the real place they belong: on the card page itself, beside the buttons
   that already point at the same link */
.cqrpaper{width:min(160px,60vw);margin:0 0 16px;padding:10px}

/* ---------- the card editor, laid out like a canvas and not like a form
   One sheet in the studio is wider than the rest, because it is the only one
   where you are looking at the thing you are changing while you change it.
   Card on the left at a size worth judging, every control in a rail beside it.
   Under 860px there is no room for two columns, so it stacks and the card
   stays on top. */
.sheet.wide{max-width:1040px}
.cardedit{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:28px;align-items:start}
.cardedit .wbig{margin:0;position:sticky;top:0}
.cardedit .cardrail{min-width:0}
.cardedit .cardrail .gfld{margin-top:0;margin-bottom:22px}
.cardedit .cardrail .acts{margin-top:4px}
@media(max-width:860px){
  .sheet.wide{max-width:720px}
  .cardedit{grid-template-columns:1fr;gap:18px}
  .cardedit .wbig{position:static}
}


/* ---------- their own card, and the Edit in its corner. Project 1.20.
   The card they have is the first thing on this screen and it is the size of
   a card, not a thumbnail. The wall of templates lives behind the Edit, the
   way a design tool keeps its templates behind a press rather than in front
   of the thing you already made. */
.mycard{position:relative;width:min(100%,430px);margin:18px 0 6px}
.mycard .wcard.big{margin:0}
.cardhold{display:block}
/* the card's own space, held while its colour is being read, so the screen
   does not jump when the card lands in it */
.mycard.hold{aspect-ratio:362/491;border-radius:16px;background:var(--card2)}
/* it sits low on the card, over the flat space above the bar. Up in the
   corner it was covering TAP TO BOOK, which is the one line that shows when
   the card is buried in a wallet. */
.cedit{position:absolute;bottom:74px;right:14px;display:inline-flex;align-items:center;gap:6px;
  height:36px;padding:0 13px;border:0;border-radius:999px;cursor:pointer;font-family:inherit;
  background:rgba(255,255,255,.94);color:#101010;box-shadow:0 6px 20px rgba(17,17,17,.08);
  opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s}
.cedit b{font-size:13px;font-weight:800}
.cedit svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mycard:hover .cedit,.mycard:focus-within .cedit{opacity:1;transform:none}
.cedit:focus-visible{opacity:1;transform:none;outline:2px solid var(--green);outline-offset:2px}
/* nothing hovers on a phone, so there it is simply on the card */
@media(hover:none){ .cedit{opacity:1;transform:none} }
.wallhd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.wallhd .sh{margin:0}
.wallhd .btn.ghost{width:auto;min-height:44px;padding:0 14px;font-size:13px}

/* ---------- placing the picture on the band. Project 1.20.
   The frame is the band's own shape and it crops by percentage, which is
   exactly what the card does with the number this saves, so what is in here
   is what lands in a pocket. */
.place{margin-top:6px}
.pframe{width:100%;aspect-ratio:375/144;border-radius:14px;border:1px solid var(--line);
  background:var(--line) center/cover no-repeat;cursor:grab;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.pframe:active{cursor:grabbing}
.pframe:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.place .legend{margin:8px 0 10px}

/* THE CARD FITS THE WINDOW IT IS OPENED IN. Project 1.20.
   A real card is taller than it is wide, so in a wide sheet it grew past the
   bottom of the screen and the editor read as stuck. The card is sized off the
   window's own height instead, keeping its proportions, and the rail beside it
   scrolls the way everything else in a sheet does. */
.cardedit .wbig{width:min(100%,calc(66vh * 362 / 491))}
@media(max-width:860px){ .cardedit .wbig{width:min(100%,calc(70vh * 362 / 491))} }


/* ---------- THE EDITOR, THE WAY A POSTER IS EDITED. Project 1.20.
   Templates down the left, the card on a stage in the middle, and the panel
   for whatever is selected down the right. The sheet itself gives up being a
   sheet here: it is the whole window, because an editor that is a drawer is
   an editor you cannot see the work in. */
.sheet.canvas{max-width:none;width:100%;height:100vh;max-height:100vh;border-radius:0;
  display:flex;flex-direction:column;padding-bottom:0;overflow:hidden}
.sheet.canvas .bd{flex:1;min-height:0;padding:0;overflow:hidden}
.cv{display:grid;grid-template-columns:232px minmax(0,1fr) 288px;height:100%}
.cvleft,.cvright{padding:18px;overflow:auto;background:var(--card2)}
.cvleft{border-right:1px solid var(--line)}
.cvright{border-left:1px solid var(--line);background:var(--bg)}
.cvttl{display:block;font-size:15px;font-weight:800;margin-bottom:10px}
.cvsay{margin:-4px 0 12px}
.cvtemps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cvt{padding:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);
  cursor:pointer;font-family:inherit;text-align:left}
.cvt b{display:block;padding:6px 8px;font-size:11px;font-weight:800}
.cvt.on{border-color:var(--ink)}
.cvt:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cvstage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:22px;background:var(--card2);min-height:0}
/* the card is as big as the stage will let it be, and never loses its shape */
.cvcard{width:min(100%,calc((100vh - 190px) * 362 / 491))}
.cvcard .wcard.big{margin:0;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.cvhint{margin:0;font-size:13px;color:var(--sub)}
/* what is selected, and what can be pressed */
/* the highlight follows each part's own shape, it does not give it one: the
   round mark was being squared off into a 6px box by this rule */
.cvcard [data-part]{cursor:pointer;
  box-shadow:0 0 0 0 rgba(255,255,255,0);transition:box-shadow .12s}
.cvcard [data-part]:hover{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.cvcard [data-part].sel{box-shadow:0 0 0 2px var(--green)}
.cvcard .wcard.big[data-part].sel{box-shadow:0 0 0 3px var(--green),0 8px 30px rgba(0,0,0,.18)}
.cvcard .wband.grabby{cursor:grab;touch-action:none;background-size:cover;background-repeat:no-repeat}
.cvcard .wband.grabby:active{cursor:grabbing}
/* Save, and whether there is anything to save. It sits at the top of the
   panel and is on screen the whole time: nothing in this editor is real until
   it is pressed. */
.cvsave{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.cvsave .btn{width:auto;min-height:40px;padding:0 20px;flex:0 0 auto}
.cvsave .btn[disabled]{opacity:.45;cursor:default}
.cvstate{font-size:13px;font-weight:800;color:var(--sub)}
.cvstate.un{color:var(--bad)}
.cvbtns{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cvright .fld{margin-top:4px}

/* a phone has one column, so the three become one: card first, the panel for
   what is selected under it, the templates last. */
@media(max-width:860px){
  .cv{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto;overflow:auto}
  .sheet.canvas .bd{overflow:auto}
  .cvstage{order:1;padding:14px}
  .cvcard{width:min(100%,300px)}
  .cvright{order:2;border-left:0;border-top:1px solid var(--line)}
  .cvleft{order:3;border-right:0;border-top:1px solid var(--line)}
  .cvtemps{grid-template-columns:1fr 1fr 1fr}
}


/* ---------- the Reviews row answers where it is asked. Project 1.20.
   One yes or no does not need a sheet in front of it, so the switch is in the
   row. The row itself only opens when there are reviews to read, and then it
   carries a chevron to say so. */
.feat.frev{position:relative;display:flex;align-items:center;gap:14px}
.feat.frev .fmain{flex:1;min-width:0}
.feat.frev .sw{position:relative;z-index:2}
.feat.frev .chev{position:relative;z-index:2;color:var(--sub)}
.feat.frev .fhit{position:absolute;inset:0;z-index:1;border:0;padding:0;background:none;
  border-radius:14px;cursor:pointer}
.feat.frev.more .fhit:hover{background:rgba(127,127,127,.06)}
.feat.frev .fhit:focus-visible{outline:2px solid var(--green);outline-offset:-2px}


/* ---------- My work, the sheet. Project 1.20.
   The photos ARE the page, so this is a canvas, not a form: the widest sheet
   in the studio, one photograph to a row, each shown whole. Nothing is cropped
   here, because a crop in the studio is a promise about a picture that the
   page does not keep. The line about each one sits under it and the two
   controls sit on the picture rather than taking a column beside it. */
.sheet.work{max-width:1180px}
.wkgrid{display:flex;flex-direction:column;gap:26px;margin-top:18px}
.wkcard{min-width:0}
/* a picture that has not arrived yet still holds its place, or the list
   jumps about while they are being fetched */
.wkpic{position:relative;display:flex;justify-content:center;align-items:center;min-height:180px;
  background:var(--card2);border-radius:14px;overflow:hidden}
/* whole, never cut: the picture keeps its own shape and the box takes it */
.wkcard img{display:block;width:auto;max-width:100%;height:auto;max-height:70vh;border-radius:14px}
.wkcard textarea{width:100%;margin-top:10px;min-height:66px;padding:10px 12px;font-size:15px;
  border-radius:8px;resize:vertical}
.wkcard .wkbtns{position:absolute;top:10px;right:10px;flex-direction:row;gap:6px}
.wkcard .wkbtns button{position:relative;width:36px;height:36px;border-radius:999px;border:0;
  background:rgba(255,255,255,.94);color:#101010;box-shadow:0 6px 20px rgba(17,17,17,.08);font-size:15px}
/* the press is 44 even though the circle is 36 */
.wkcard .wkbtns button:before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px}
.wkacts{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn.sm{width:auto;min-height:42px;padding:0 20px;font-size:15px}
@media(max-width:430px){
  .wkacts .btn.sm{flex:1}
}


/* ---------- the colour picker we drew ourselves. Project 1.20.
   Two bars and an eyedropper instead of the operating system's crayon box.
   The top bar is the colour, the bottom is how deep it goes, and the bottom
   one is painted in the colour it is choosing so the choice is the card
   rather than a number. */
.pick{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.pkbar{position:relative;height:28px;border-radius:999px;cursor:pointer;touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pkbar:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* 1.20: the wall of colours, and the one bar under it that takes the colour
   they picked towards white. Nothing goes towards black. */
.swg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px}
.sw1{aspect-ratio:1;width:100%;padding:0;border:0;border-radius:50%;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.sw1:hover{transform:scale(1.06)}
.sw1.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.sw1:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.pkbar.tint{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}

.pkbar i{position:absolute;top:-4px;left:0;width:20px;height:36px;margin-left:-10px;border-radius:10px;
  border:2.5px solid #FFFFFF;box-shadow:0 1px 5px rgba(0,0,0,.35);pointer-events:none}
.pkrow{display:flex;align-items:center;gap:10px}
.pknow{flex:0 0 auto;width:44px;height:44px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pkhex{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);font:inherit;font-weight:700;letter-spacing:.4px;text-transform:lowercase}
.pkhex:focus{outline:2px solid var(--green);outline-offset:1px}