/* ================================================================
   Sign in, in the same language as the site: noir ground, cotton
   cards, Fraunces for the headings, cherry kept as the one accent —
   and cherry is a FILL, never a word on the dark. See app.css.
   Shared by login.html, team.html and book.html.

   ⚠️ app.css IS THE SOURCE OF TRUTH for every token below. They are
   repeated here because these three pages do not link app.css (their
   .card and .tabs mean something different from app.css's, so the two
   cannot simply be stacked). If you change a token in app.css, change
   it here too — checked on 2026-09-21, the two were already a hair
   apart on --card-line and --note-c and it showed as two slightly
   different greys either side of the same site.
   ================================================================ */
/* ======================================================================
   THE SALON'S FOUR COLOURS — Kanak's palette.
     COTTON #EDEBDD · CHERRY #810100 · MAROON #630000 · NOIR #1B1717

   🔴 30 SEP, SECOND PASS: THERE IS NO DARK GROUND ANY MORE. He asked for
   none, so all four grounds are tones of COTTON and noir is only ever ink.
   The themes were named paper / slate / graphite / ink when half of them
   were dark; they are named for what they ARE now, because a theme called
   "graphite" that paints cotton is a trap for whoever reads this next.

     chalk  #F4F2E8   the lightest band
     cotton #EDEBDD   the base, and what cards are made of
     linen  #E3E0CE   the shaded band
     sand   #D8D4C0   the deepest light, and the lines

   ⚠️ CHERRY IS STILL A FILL, NOT A WORD ON A DARK GROUND — that rule cost a
   redesign once. On these light grounds cherry ALSO works as text (#810100
   on #EDEBDD is 9.9:1), so it may be a word here. Maroon is the pressed and
   the deep-fill state. Noir is every other word.
   ====================================================================== */
html[data-app="chalk"]{
  --screen:#F4F2E8; --sink:#EDEBDD; --ink:#1B1717;
  --ink-2:rgba(27,23,23,.80); --ink-3:rgba(27,23,23,.64);
  --line:#DFDBC8; --red:#810100; --sage:#8A8271; --photo:1;
  --glass:rgba(244,242,232,.9); --shadow:0 1px 3px rgba(27,23,23,.09); --note:rgba(129,1,0,.08);
  --boot-bg:#F4F2E8;
}
html[data-app="cotton"]{
  --screen:#EDEBDD; --sink:#E3E0CE; --ink:#1B1717;
  --ink-2:rgba(27,23,23,.80); --ink-3:rgba(27,23,23,.64);
  --line:#DCD8C4; --red:#810100; --sage:#8A8271; --photo:1;
  --glass:rgba(237,235,221,.9); --shadow:0 1px 3px rgba(27,23,23,.1); --note:rgba(129,1,0,.08);
  --boot-bg:#EDEBDD;
}
html[data-app="linen"]{
  --screen:#E3E0CE; --sink:#D8D4C0; --ink:#1B1717;
  --ink-2:rgba(27,23,23,.80); --ink-3:rgba(27,23,23,.64);
  --line:#D2CDB7; --red:#810100; --sage:#82796A; --photo:1;
  --glass:rgba(227,224,206,.9); --shadow:0 1px 3px rgba(27,23,23,.1); --note:rgba(129,1,0,.1);
  --boot-bg:#E3E0CE;
}
html[data-app="sand"]{
  --screen:#D8D4C0; --sink:#CDC8B1; --ink:#1B1717;
  --ink-2:rgba(27,23,23,.80); --ink-3:rgba(27,23,23,.64);
  --line:#C6C0A7; --red:#810100; --sage:#7B7263; --photo:1;
  --glass:rgba(216,212,192,.9); --shadow:0 1px 3px rgba(27,23,23,.12); --note:rgba(129,1,0,.1);
  --boot-bg:#D8D4C0;
}
/* A card has to LIFT off a light ground, so it is the lightest tone in the
   family — not pure white, which reads as a different material beside
   cotton and is what made the first pass look like two stacked designs. */
html[data-cards="white"]{
  --gold:#7A5400;
  --card:#F7F5EB; --card-sub:#EDEAD9; --card-bar:rgba(247,245,235,.92);
  --card-ink:#1B1717; --card-ink-2:rgba(27,23,23,.80); --card-ink-3:rgba(27,23,23,.64);
  --card-line:#E0DCC8; --card-border:transparent; --card-blur:none;
  --onc-bg:#1B1717; --onc-fg:#EDEBDD; --note-c:rgba(129,1,0,.1); --red-c:#810100;
  --boot-bg:#F7F5EB;
}
html[data-cards="glass"]{
  --gold:#7A5400;
  --card:rgba(255,255,255,.55); --card-sub:rgba(27,23,23,.05); --card-bar:rgba(247,245,235,.75);
  --card-ink:var(--ink); --card-ink-2:var(--ink-2); --card-ink-3:var(--ink-3);
  --card-line:rgba(27,23,23,.1); --card-border:rgba(255,255,255,.7);
  --card-blur:blur(20px) saturate(140%);
  --onc-bg:#1B1717; --onc-fg:#EDEBDD; --note-c:rgba(129,1,0,.1); --red-c:#810100;
  --boot-bg:var(--screen);
}
:root{
  /* the salon's four colours — see app.css for the reasoning */
  --cotton:#EDEBDD; --cherry:#810100; --maroon:#630000; --noir:#1B1717;
  --d:"Fraunces",Georgia,serif; --b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --travel:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{background:var(--screen);color:var(--ink);font-family:var(--b);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--red);color:#fff}

.shell{min-height:100svh;display:grid;grid-template-columns:1fr;gap:12px;padding:12px}
@media(min-width:900px){.shell{grid-template-columns:1.02fr .98fr;gap:16px;padding:16px}}

/* the brand half is a photograph, duotoned into the ground like the site */
.brandside{position:relative;border-radius:22px;overflow:hidden;min-height:190px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(18px,2.6vw,40px);color:#fff;background:var(--sink);isolation:isolate}
@media(min-width:900px){.brandside{min-height:0;padding:clamp(28px,3.2vw,48px)}}
.brandside .pic{position:absolute;inset:0;z-index:-2;margin:0;border-radius:0;aspect-ratio:auto}
.brandside .pic img{width:100%;height:100%;object-fit:cover;object-position:60% 34%;
  filter:grayscale(.6) contrast(1.06) brightness(var(--photo,1))}
.brandside::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,16,14,.52) 0%,rgba(14,16,14,.2) 38%,rgba(14,16,14,.88) 100%)}
.brandside img.logo{width:min(190px,52%);height:auto}
@media(min-width:900px){.brandside img.logo{width:min(250px,58%)}}
.brandside h2{font-family:var(--d);font-weight:400;font-size:clamp(24px,3.2vw,46px);
  letter-spacing:-.025em;line-height:1.04;margin-top:26px}
.brandside p{color:rgba(255,255,255,.78);font-size:14px;margin-top:10px;max-width:38ch}
@media(max-width:899px){.brandside h2{font-size:23px;margin-top:18px}.brandside p{font-size:13px}}

/* the form half is a card, the way every card on the site is */
.formside{background:var(--card);color:var(--card-ink);border-radius:22px;
  border:1px solid var(--card-border);backdrop-filter:var(--card-blur);-webkit-backdrop-filter:var(--card-blur);
  display:flex;align-items:center;justify-content:center;padding:clamp(22px,3vw,44px)}
.card{width:100%;max-width:420px}
.kick{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-c);margin-bottom:14px}
.card h1{font-family:var(--d);font-weight:400;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.025em;line-height:1.04}
.card .sub{color:var(--card-ink-2);font-size:14.5px;margin-top:9px;line-height:1.6}

.fld{display:block;margin-top:20px}
.fld span{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--card-ink-3);margin-bottom:8px}
.fld input,.fld select{width:100%;padding:15px 15px;border:1px solid var(--card-line);border-radius:12px;
  background:var(--card-sub);color:var(--card-ink);font-size:16px;font-family:var(--b);
  transition:border-color .2s,box-shadow .2s,background .2s}
.fld input::placeholder{color:var(--card-ink-3)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--red-c);background:var(--card);
  box-shadow:0 0 0 3px var(--note-c)}
.otp{display:flex;gap:8px}
.otp input{text-align:center;font-family:var(--d);font-weight:500;font-size:22px;padding:14px 6px}

.go{width:100%;margin-top:24px;padding:16px;border-radius:12px;background:var(--red-c);color:#fff;
  font-family:var(--b);font-weight:600;font-size:15px;letter-spacing:.01em;
  transition:transform .14s ease-out,box-shadow .24s ease}
.go:hover{box-shadow:0 12px 26px -12px rgba(190,50,39,.6)}
.go:active{transform:scale(.98)}

.err{display:none;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--note-c);
  color:var(--red-c);font-size:13.5px;font-weight:500}
.err.on{display:block}
.hint{margin-top:22px;padding:15px;border:1px dashed var(--card-line);border-radius:14px;
  background:var(--card-sub);font-size:13px;color:var(--card-ink-2);line-height:1.6}
.hint b{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--card-ink-3);margin-bottom:8px}
.hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--card);
  border:1px solid var(--card-line);border-radius:6px;padding:2px 7px;font-size:12.5px;color:var(--card-ink)}
.alt{margin-top:20px;font-size:13px;display:flex;gap:16px;flex-wrap:wrap}
.alt a{color:var(--card-ink-2);border-bottom:1px solid var(--card-line);padding-bottom:2px;transition:.2s}
.alt a:hover{color:var(--red-c);border-bottom-color:var(--red-c)}

/* the sign in / create account switch */
.tabs{display:flex;gap:5px;padding:4px;background:var(--card-sub);border-radius:12px;margin-bottom:20px}
.tb{flex:1;padding:11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--card-ink-3);
  transition:background .2s,color .2s}
.tb.on{background:var(--card);color:var(--card-ink);box-shadow:0 1px 3px rgba(20,22,20,.1)}
html[data-cards="glass"] .tb.on{background:rgba(255,255,255,.18)}

@media(prefers-reduced-motion:reduce){.go,.tb,.fld input{transition:none}}