/* 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:32px;font-weight:900;letter-spacing:-1.2px}
.apphd .sub{margin:5px 0 0;font-size:14.5px;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}
.pill{font-size:12px;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:11.5px;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:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}
.list{background:var(--bg);border:1px solid var(--line);border-radius:15px;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:16.5px;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:14px;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:700;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:19px;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:18px;font-weight:900;display:block;letter-spacing:-.5px}
.when span{font-size:11.5px;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:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}

/* inputs */
label.f{display:block;font-size:12px;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:12px;color:var(--ink);
  padding:14px 15px;font-size:16px;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:16px;font-weight:900;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:14.5px}
.err{margin-top:13px;color:var(--ink);font-size:14.5px;font-weight:800}
.ok{margin-top:13px;color:var(--ink);font-size:14.5px;font-weight:700}

/* 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:13px;padding:13px 15px}
.wk .d .nm{width:46px;font-size:14.5px;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:14.5px;border-radius:9px}
.wk .d .off{flex:1;font-size:14.5px;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:12px;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:19px;font-weight:800;letter-spacing:-.3px}
.calhd button{width:44px;height:44px;border-radius:11px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-size:17px;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:11px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-size:14.5px;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:900}
/* 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:13.5px;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:20px 20px 0 0;width:100%;max-width:720px;
  max-height:92vh;overflow:auto;padding-bottom:calc(24px + 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:23px;font-weight:900;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:12.5px;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:12px;background:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--sub)}
.addrow:hover{border-color:var(--ink);color:var(--ink)}
.addrow span.p{font-size:18px;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:11px;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:15.5px}
.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:12px;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:38px;font-weight:900;letter-spacing:-1.6px}
.auth h1 b{color:var(--green)}
.auth p.lead{margin:0 0 28px;font-size:16px;color:var(--sub);line-height:1.5}
.auth .foot{margin-top:22px;font-size:14px;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:11px;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:9px;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:14.5px}
.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:9px;background:none;
  border:1px solid var(--line);color:var(--ink);font-size:16px;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 12px 30px rgba(11,13,12,.28);
  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:12.5px;font-weight:700;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:12px;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--sub)}
.doff{border:1px solid var(--line);border-radius:18px;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:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--sub)}
.doff .dn{margin:4px 0 18px;font-size:27px;font-weight:900;letter-spacing:-.9px;line-height:1}
.doff .says{margin:15px 0 18px;font-size:14px;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:17px;font-weight:900;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:4px;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 0 0 9999px rgba(10,14,10,.62),inset 0 0 0 2px #FFFFFF}
.gcard{position:absolute;width:min(400px,calc(100vw - 32px));background:var(--bg);
  border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;
  box-shadow:0 18px 44px rgba(11,13,12,.28)}
.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:900;letter-spacing:-.5px}
.gcard p{margin:0 0 15px;font-size:14.5px;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:14.5px;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:14.5px;font-weight:900}

/* 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:18px;background:#FFFFFF;
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(11,13,12,.10)}
.qrpaper svg{display:block;width:100%;height:auto}
.qraddr{margin:0;font-size:14.5px;font-weight:800;letter-spacing:-.2px;color:var(--ink);
  text-align:center;word-break:break-all}
.qrsub{margin:0;font-size:13.5px;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:15px;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:16px;font-weight:800;letter-spacing:-.2px}
.rmain span{display:block;margin-top:3px;font-size:13.5px;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:17px;font-weight:800;color:var(--ink)}
.whenbox{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:15px;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:16.5px}
.whenbox .calhd button{width:44px;height:44px;font-size:15px}
.whenbox .mg{gap:5px}
.whenbox .mg .cell{font-size:13.5px;border-radius:10px}
.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:12px;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:12px;
  background:var(--card);border:1px solid var(--line);
  font-size:14px;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:13px;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:900;letter-spacing:-.4px;line-height:1.2}
.apphd + .sh{margin-top:8px}
.sh.sh3{margin-top:56px}
.stack{display:flex;flex-direction:column;gap:8px}
.stack > .list{border-radius:16px}
.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:16px;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:700;
  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:700}
.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:24px 24px 16px}
  .rid .rname{margin:0;font-size:20px;font-weight:900;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:700;
    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:700;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:12px;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:700;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}

  /* the content, left aligned beside the rail, not centred in the glass */
  .wrap{max-width:816px;margin:0;padding:0 48px}
  .wrap.wide{max-width:1196px}
  #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:12px}
  .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:16px}
  .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:16px;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:900;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:900;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:900;letter-spacing:-.4px}

  /* Clients: a table */
  .ctab{border:1px solid var(--line);border-radius:16px;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}

  /* sheets sit over the content, beside the rail */
  .sheet-bg{padding-left:240px}
  .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:12px;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:12px;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:18px;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 */
.tfrom{position:relative;padding-left:32px}
.tfrom input.tpf{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tfrom .tbox{position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;border:1.5px solid var(--edge);border-radius:6px;background:var(--bg)}
.tfrom input.tpf:checked + .tbox{background:var(--ink);border-color:var(--ink)}
.tfrom input.tpf:checked + .tbox:after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tfrom input.tpf:focus-visible + .tbox{outline:2px solid var(--ink);outline-offset:2px}

/* 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:40px}

/* 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 18px 44px rgba(17,17,17,.16);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:700}
.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:12px;font-size:14px;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 18px 44px rgba(0,0,0,.6)}